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

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

Webページを作るワークフロー

プロジェクトを作成

  1. 管理するフォルダーを作成(名前は適宜)
  2. 新規HTMLドキュメントを作成(index.html)
  3. 新規CSSファイルを作成(style.css
文書構造を記述
  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>
コンテンツを記述
  • body内はコンテンツによってマークアップの内容が変化します
  • 基本的には、「見出し」「本文」「箇条書き」の組み合わせ

例:シンプル

  • 箱(レイアウトボックス)を4つ記述します
  • クラス名「box」は、幅・高さ・背景色・枠線などをすべて同じ属性とします
<body>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</body>
ブラウザ表示の中央に配置
  • marginの左右を「auto」を記述します
  • 外に親要素を指定して、レイアウトをしやすくします
<body>
<div id="container">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
</div><!-- /#container -->
</body>
#container {
  width: 400px;
  margin: 50px auto;
}
.box {
  height: 100px;
  background: #F2F6E0;
  border: 4px solid #B1CD30;
  text-align: center;
  line-height: 100px;
}

f:id:web-design-lesson:20160527101334j:plain

横に並べたいボックスをグループにする
<div id="container">
<div class="box">BOX1</div>
<div id="wrapA">
<div class="box">BOX2</div>
<div class="box">BOX3</div>
</div><!-- /#wrapA -->
<div class="box">BOX4</div>
</div><!-- /#container -->
  • #wrapAの子要素のみを指定
#wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
}

f:id:web-design-lesson:20160527102039j:plain

グループ化したボックスを横に並べる
  • 横幅を20%にしてfloat(浮き上がる)する
#wrapA>.box{
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 20%;
  float:left;
}

f:id:web-design-lesson:20160527102831j:plain

  • box4が、潜り込んでいる状態になります
  • グループ化したボックスに、overflow:hidden を設定します
#wrapA {
  overflow: hidden;
}

f:id:web-design-lesson:20160527103203j:plain

  • 幅を、50%に設定します
#wrapA>.box {
  background: #ECF7FD;
  border: 4px solid #689DD1;
  width: 50%;
  float:left;
  box-sizing: border-box;  /*パディングとボーダーを幅と高さに含める*/
}

f:id:web-design-lesson:20160527105155j:plain

リキッドレイアウト

  • %で可変指定をします
  • 全体を囲むボックスの幅の単位を「%」にします
#container {
  width: 50%;
}

これで、可変の設定は完了です。

ワークフローのポイント

  • HTML文法チェック
  • The W3C Markup Validation Service

validator.w3.org

  • エラーがある場合は、そこをエラーが無くなるまで修正する
CSSを記述
  • style.css
    1. リセットCSS
    2. body全体の指定
    3. レイアウト指定
    4. パーツ指定
CSSの外部リンク(読み込み)
<link rel="stylesheet" href="style.css">
リセットは、ブラウザの持つ空間の値をなしにするため
html,body,h1,h2,h3,h4,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
文字をきれいに表示させる
  • font-family
  • 使用頻度の少ないOSから記述する(Mac → Win → その他汎用)
html,body,h1,h2,h3,h4,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
bodyは特別扱い
  • ページ全体の印象を設定するときにbody指定をおこないます
body { background: url(img/背景画像のファイル名) repeat-x; }
CSSの記述にはボックスモデル理解が必須
  • 特に、文字と枠線、文字とボックスの端は空きが必須(つまりpaddingの記述が必須)
文字の揃え
  • ボックスモデルの幅の中で、揃えの指定が可能(左揃え、中央揃え、右揃え)
p { text-align: center; }
HTML内の画像挿入は、src属性で
<img src="img/画像のファイル名" alt="代替文字(空も可)">
Webはリンクが命
<p><a href="index.html">トップへ戻る</a></p>
リンクの領域を拡張する
  • 例えばリストの場合(上下左右に10px拡張する)
li a { display: block; padding: 10px; }
特殊な挙動
  • テキストの上にマウスが乗ったとき(擬似クラス)
a:hover { color: #F00; }
特殊な指定
  • ページの中で最後に表示されるp要素を指定する場合
p:last-of-type { background-color: #FF0; }