読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

初心者のワークフロー

1ページを完成させる

  1. マークアップ(文書構造を記述する)
  2. 先割(レイアウトブロックの面積を設定する)
マークアップ
  • 文章に対して、「見出し」「本文」「箇条書き」などを適切に設定してく
  • 初心者にとっては、どのテキストを利用すればよいかの判断が難しいので、テキストやインターネット上にある練習サイトなどのテキストを利用させてもらう
先割
  • レイアウトブロックのいろいろなパターンを記述してみる
  • 実践に入る段階で、class名で名前をつける方法に切り換えますが、id名がどういうものかをclass名と区別できるように、この段階ではすべてid名で練習します

ワークフロー実践

  • いずれアセット化しますが、この段階では毎回入力して準備しておきます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
</body>
</html>

div要素を使ったレイアウトグループ化

  • div要素は、文書構造には関係なく意味づけもありません
  • ただまとめるために使われます
  • div要素は、何層にも深く階層構造を作ることには向いていません
div要素を利用する場合
  1. 見出しと関連するコンテンツをまとめる
  2. ブロックの境界を作る
  3. HTMLの階層を平易に揃える
  4. ボックスどおしのラッパー構造を作る
#container
  • body直下にあるレイアウトブロック
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<div id="container">

</div><!-- /#container -->
</body>
</html>


#containerのCSS

  • #containerのheightは、内包されている子要素の高さを取得して表示される
html, body {
  margin: 0;
  padding: 0;
}
body {
  background-color: #DCDCDC;
}
#container {
  width: 960px;
  height: auto;
  margin: 0 auto;
  background-color: #FFF;
}
#header
  • #containerの中に#headerを作成
<body>
<div id="container">
<div id="header"></div>
</div><!-- /#container -->
</body>


#headerのCSS

  • #containerにpadding: 20px
  • #headerにheight: 100px;(widthは、#containerの幅いっぱいに広がるので設定は不要)
#container {
  width: 960px;
  height: auto;
  margin: 0 auto;
  padding: 20px;
  background-color: #FFF;
  box-sizing: border-box;  /* paddingの数値を、width内に収める */
}
#header {
  height: 100px;
  background-color: #CFF4FD;
}
#footer
  • HTMLドキュメントは、「header領域」「footer領域」が必須
<body>
<div id="container">
<div id="header"></div>
<div id="footer"></div>
</div><!-- /#container -->
</body>


#footerのCSS

  • #footerにheight: 50px;
#header {
  height: 100px;
  margin-bottom: 20px;
  background-color: #CFF4FD;
}
#footer {
  height: 50px;
  background-color: #FFE3FE;
}


f:id:web-0818:20170505223900p:plain

#nav
  • #navには、ulでナビゲーションボタンを作成する予定
  • #navは、#header内になる場合もあります
<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="footer"></div>
</div><!-- /#container -->
</body>


#navのCSS

  • #navにheight: 50px;
#nav {
  height: 50px;
  margin-bottom: 20px;
  background-color: #FAF1C8;
}


f:id:web-0818:20170505224532p:plain


#mainと#sidebar
  • 2つのレイアウトブロックを横に並べる
  • 2つのレイアウトブロックの順序は、コンテンツ内容の優先順位に準じます
<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div><!-- /#container -->
</body>


#mainのCSS

  • #mainにwidth: 600px; height: 300px;
  • float: left;を設定
#main {
  float: left;
  width: 600px;
  height: 300px;
  background-color: #EEFCDA;
}


f:id:web-0818:20170505225817p:plain

floatを使って、「浮き上がる」設定をしたため、#footer が#main の下に潜り込んでしまっています。


#footerの潜り込みを回避するCSS

  • #footerにclear: both;
  • floatしている子要素を包む親要素「#wrapper」を設定する
<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="wrapper">
  <div id="main"></div>
  <div id="sidebar"></div>
</div><!-- /#wrapper -->
<div id="footer"></div>
</div><!-- /#container -->
</body>
#wrapper {
  overflow: hidden;
  margin-bottom: 20px;
}


f:id:web-0818:20170505230646p:plain


#sidebarCSS

  • #sidebarにwidth: 300px; height: 300px;
  • float: right;を設定
#sidebar {
  float: right;
  width: 300px;  /* 960px - 600px - 20px*3 = 300px */
  height: 300px;
  background-color: #F9E2DE;
}


f:id:web-0818:20170505232102p:plain