求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

HTML+CSS基礎

**2カラムレイアウト-実践(文書構造)

文書構造を設定 マークアップ header部とfooter部が、幅100%の場合 main部は、幅980px <html lang="ja"> <head> <meta charset="UTF-8"> <title>企業系サンプルサイト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> </header> <main class="main"> </main> </body></html>

ナビゲーション(縦・横)

ナビゲーション(縦・横)作成 リストを使ったナビゲーション設定 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦ナビゲーション・横ナビゲーション</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <nav class="nav"> <ul class="sideNav"> <li><a href="#">HOME</a></li> <li></li></ul></nav></div></body></html>

HTML & CSS 初級編 - Progate

HTML & CSS 初級編 Ptogate prog-8.com HTML , CSSを学ぼう HTMLの仕組み 開始タグと終了タグ 見出しをつける 段落を作成する 見出しと段落 コメント リンクを作成する(1) リンクを作成する(2) 属性の書き方 画像を表示する リストを作成する <ul>要素 イン</ul>…

floatを使ったレイアウト基礎 - まとめ

floatを使ったレイアウト 以下のレイアウトを作成しなさい(サイズ・色は、適宜) 960px内にレイアウトすること 2カラム <body> <div class="container"> <main class="box main"></main> <div class="box sidebar"></div> </div> </body> html,body { margin: 0; padding: 0; } .container { overflow: hidden; width: 960px; margin: 50px auto; border: 1px dotted…