0からウェブサイトを作るための勘所

ワイヤーフレームを作成する

まず初めに、ウェブサイトの構成を決める。どのようなコンテンツが必要か、コンテンツをどのように配置するか、ウェブサイトのページ数、バックエンド(サーバー、プログラム、データベース)はどんなものが必要か、などを洗い出す。
実際に図に起こしておくと分かり易いが、大まかな構成さえ把握できるなら簡単なメモでも問題ない。
 

デザインデータを作成する

ワイヤーフレームをもとに、Adobe Illustratorを使用してウェブサイトの設計図を作成する。
設計図を作る段階で気を付けることは、「コンテンツの幅の設計」と「キリの良い数値でオブジェクトを作成すること」と「ブラウザサイズを100%としたときのコンテンツの比率計算」である。
 

コンテンツの幅の設計

コンテンツを表示する幅をまずは決める。この幅は、ブラウザの幅を縮めていったときに、それ以上縮小せず、コンテンツが崩れて表示されないようにするためのものである。この幅は全ページ共通になることが多いので、設計を始める段階で決めておくことが望ましい。
2017年時点では、PC版が横幅1000px(前後)、スマートフォン版が横幅750pxが推奨されている。つまり、PC版のコンテンツ幅を1000px、レスポンシブのブレイクポイント(PC版とスマホのCSSを切り替えるブラウザの横幅)を750pxに設定することが基本となる。
 

キリの良い数値でオブジェクトを作成する

デザインをコードに落とし込む段階で計算が面倒にならないように、オブジェクト(配置するボックスや画像の幅と高さ)はキリの良い数値にすることが望ましい。キリの良い数値とは、「248.6px」のようなものを「250px」にすることである。
 

ブラウザサイズを100%としたときのコンテンツの比率計算

横幅いっぱいにコンテンツが広がったり、縦幅いっぱいにコンテンツが広がるデザインの場合、コンテンツの幅や高さをパーセント(%)で記述しなければならないことがある。
そういった場合に、行・列のいずれかの方向に2つ以上のオブジェクトが続く場合、オブジェクトのサイズを「50%:50%」や「30%:70%」のように比率で計算しておく必要がある。
 

コーディングを始める前にリセットCSSを用意する

ユーザーがChrome・FireFox・IEといったブラウザのどれを使ってもこちらが意図した表示を提供するためには、リセットCSSが必要になる。
以下のリセットcssはEric Meyer氏により考案されたもので、現在も広く使用されている。

====================
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
====================

 

デザインデータをコードに落とし込む

リセットCSSの準備が終わったら、いよいよコーディングに入る。
デザインデータ(Adobe Illustratorのファイル)から、横幅・縦幅を抽出し、htmlとcssに落とし込んでいく。
デザインをコードに落とし込むためのコツは、以下の3点である。
 

  1. 必要な要素を考える
    • ブロックレベル要素とインライン要素の違いを意識する
  2. オブジェクトの配置方法を考える
    • margin:0 autoによる中央寄せを覚える
    • ボックスモデルとマージンの相殺を意識する
    • floatプロパティによる左右寄せを覚える
    • clear fixによるfloatの解除方法を覚える
    • ネガティブマージンによる配置方法を覚える
    • positionプロパティによる配置方法を覚える
    • z-indexプロパティによる要素の重なり順の変更方法を覚える
  3. ブラウザと対話しながら進める

必要な要素を考える

どのような要素があれば目的のデザインが実現できるかを考える。
例えば、以下のように「画面中央に背景が黒のブロックを配置し、中央に赤いラインが入っていて、その中央に文字が入っている。」というデザインをコードに落とし込む場合を考えてみる。
 

ここが中央

 
このデザインを実現するためには3つのブロックレベル要素が必要である。
黒いブロックを作るのに1個、赤いブロックを作るのに1個、文字を入れるブロックを作るのに1個使用する。

<div class="a">
  <div class="b">
    <p class="c">ここが中央</p>
  </div>
</div>

説明を複雑にしたくないので、cssの説明は省くが、ここで重要なのはデザインを実現するために何個の要素が必要かを意識することである。
ちなみに上記のデザイン通りにコーディングするには、ボックスモデルとmarginが相殺される仕様を理解しなければならない。
 

ブロックレベル要素とインライン要素の違いを意識する

要素は大きく分けると、2種類に分類することができる。それが「ブロックレベル要素」と「インライン要素」である。
 
ブロックレベル要素は、「かたまりの要素」である。見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識される。ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入る。ブロックレベル要素の中には、ブロックレベル要素とインライン要素の両方を入れることが出来る。ほとんどのブロックレベル要素は、width、height、margin、padding、borderなどのプロパティを持つことが出来る。
代表的なブロックレベル要素には、div、p、h1~h6、ul、ol、tableなどがある。
 
インライン要素とは、「文章の中に埋め込む要素」である。主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。 例えば、p要素の中のstrong要素のように、段落のなかの一部を強調するような使われ方をする要素である。一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。インライン要素の中にはブロック要素は入れることが出来ず、インライン要素のみを入れることが出来る。ほとんどのインライン要素は、width、height、margin、padding、borderなどのプロパティを持つことが出来ない。
代表的なインライン要素には、a、em、span、strongなどがある。
 
また、displayプロパティを使用することで、ブロックレベル要素とインライン要素を切り替えることが出来る。
例えば、インライン要素であるspanに対して、display:blockを指定するとspanはブロックレベル要素になるので、width、height、margin、padding、borderなどのプロパティを持つことが出来るようになる。
 

<p>2020年東京オリンピックまで、<span style="display:block; height:50px; width:200px; font-size:38px; text-align:center; border:solid 1px #000000; padding-top:20px">1000日</span></p>

 

2020年東京オリンピックまで、1000日

 

オブジェクトの配置方法を考える

どのような配置方法を使えば目的のデザインが実現できるかを考える。
以下より紹介するいくつかのテクニックを押さえておくことで、自由自在な配置をすることが出来るようになる。
 

margin:0 autoによる中央寄せを覚える

ブロックレベル要素に対して、以下のようにmargin:0 autoを指定することで中央寄せにすることが出来る。
この方法で中央寄せを行う場合、中央寄せにしたい要素が幅と高さを持っている必要がある。
ほとんどのインライン要素は幅と高さを持たないので中央寄せにすることが出来ない。
 

<div style="margin: 0 auto; width:200px; height:200px; background-color:#000000;"></div>

 

 

ボックスモデルとマージンの相殺を意識する

ボックスモデルとは、主にブロックレベル要素で使用する、width、height、margin、padding、borderなどの構造である。
 
box_model
※非常に分かりやすかったので画像をこちらからお借りした。
 
要素と要素の間に空白を取りたい場合、基本的にはmarginを使用することになるが、marginの仕様にはちょっとした落とし穴がある。
親子関係(入れ子)や連続している2つの要素に上下のマージン(margin-topやmargin-bottom)を指定した場合、マージンの相殺が起こってしまう。
これは上下のマージンが隣り合っている場合に先に宣言されている要素に、あとから宣言した要素のマージンが吸収されてしまうという仕様である。
 
例えば、先の例でも示したが「画面中央に背景が黒のブロックを配置し、中央に赤いラインが入っていて、その中央に文字が入っている。」というデザインを実現したい場合、普通の感覚なら以下のようなコードで実現出来ると思うだろう。

<div style="background-color:#000000; width:300px; height:200px; margin:0 auto;">
  <div style="background-color:#ff0000; width:100%; height:50px; margin-top:0px; margin-top:70px;">
    <p style="color:#ffffff; text-align:center; margin-top:15px;">ここが中央</p>
  </div>
</div>

 
しかし、結果は以下のように、最上位の親のdivに2つの子要素のdivのmargin-topが吸収されてしまう。
※少し分かりづらいが、赤いボックスのすぐ上に70px分のマージンがある。
 

ここが中央

 
このマージンの相殺を避けるためには、マージンとマージンを隣合わせにしない必要がある。
つまり、パディング(padding)を間に挟むことで上下のマージンが相殺されなくなる。

<div style="background-color:#000000; width:300px; height:200px; margin:0 auto; padding:1px;">
  <div style="background-color:#ff0000; width:100%; height:50px; margin-top:0px; margin-top:70px;">
    <p style="color:#ffffff; text-align:center; margin-top:15px;">ここが中央</p>
  </div>
</div>

 
しかし、これだと余分な1px分のpaddingが入ってしまう。
これを解決するためには、paddingとline-heightを上手く使うことでマージンを取っているように見せる必要がある。
最上位の親のdivにpadding-top:55pxを持たせることで、子要素のdivがmargin-top:55pxを持っているように見える。
更に「ここが中央」という文字列に対してline-heightで上手く上下の間隔を調整することで、上下中央寄せになっているように見える。

<div style="background-color:#000000; width:300px; height:145px; margin:0 auto; padding-top:55px;">
  <div style="background-color:#ff0000; width:100%; height:50px;">
    <p style="color:#ffffff; text-align:center; line-height:3.2;">ここが中央</p>
  </div>
</div>

 

ここが中央

 

floatプロパティによる左右寄せを覚える

floatプロパティを使用することで、要素を左右に寄せることが出来る。
 
使用方法は以下のようになっている。

<div style="float:left;">左寄せ</div>
<div style="float:right;">右寄せ</div>

 
また、floatの最大の特徴は、floatで右寄せや左寄せになっている連続した2つ以上の要素がある場合、2つ以上の要素の合計の幅が親の要素の幅に収まりきらない場合は、次の行に流れ込むという仕様である。
例えば、8つのブロック(要素)を4列2行にして並べたい場合、子要素の幅を20%、左右のmarginを2.5%にすれば、要素を4つ並べると100%になり、5つ目の要素が幅に収まりきらず自動的に2行目に流れ込むので、4列2行を実現することが出来る。
 

<ul style="width:500px; height:220px; list-style-type:none;">
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
  <li style="float:left; width:20%; height:100px; margin:5px 2.5%; background-color:#000000;"></li>
</ul>

 



 

clear fixによるfloatの解除方法を覚える

floatの解除で、最も一般的なのがこの方法である。これはclear fixと呼ばれる方法で、広く利用されている。
コーディング中は頻繁に使用するため、common.cssという汎用cssファイルを用意して、その中に記述しておくと良いだろう。
 
使用方法は以下のようになっている。
 
html側で回り込みを行うタグを囲む。

<div class="cf">
    <div style="float:left;">左寄せ</div>
    <div style="float:right">右寄せ</div>
</div>

 
css側には以下のように記載する。

.cf:after {
    content:"";
    display:block;
    clear:both;
}

 

ネガティブマージンによる配置方法を覚える

marginプロパティにマイナス値を指定することで、要素の位置を調整することが出来る。
例えば、画像の上に文字を乗せたい場合は、以下のような方法で行う。

<img src="http://promamo.com/wp-content/uploads/2014/03/74211c5c3346a734f2a4759a41eaa6b1-300x300.jpeg" />
<p style="margin-top:-50px; color:#ff0000;">犬っぽいですね!!</p>

 

犬っぽいですね!!

 

positionプロパティによる配置方法を覚える

positionプロパティを使用することで、要素を相対位置、絶対位置、固定位置に配置することが出来る。

position:absoluteを使用することで要素を絶対位置に配置することが出来る。
絶対位置をよく使う箇所としては、他の要素との位置的な繋がりが無く独立していたり、ブラウザの幅や高さの変更の影響を受けない要素である。
position:absoluteによって絶対位置を指定するときは、その親要素にposition:relativeを指定することで、その親要素を基準にして位置の調整を行うことが出来る。

<div style="position:relative; width:300px; height:300px; margin:200px; background-color:#000000;">
  <div style="position:absolute; top:10px; left:10px; color:#ffffff;">絶対位置です。</div>
</div>

 
position:fixedを使用することで要素の位置を固定することが出来る。ブラウザの幅や高さを変えたり、スクロールしたりしても位置が変わらない。

<div style="position:fixed; top:10px; left: 10px;">固定します。</div>
<!-- スクロール出来るように縦長のdiv -->
<div style="height:3000px;"></div>

 
※position:relativeを使用することで要素を相対位置に配置することが出来るが、position:relativeの使いどころとしては、上記で説明したposition:absoluteとの組み合わせや、下記で説明するz-indexとの組み合わせに限られる。
 

z-indexプロパティによる要素の重なり順の変更方法を覚える

通常は後から記述された要素ほど上に重なって表示されるが、z-indexプロパティを使用することで要素の重なり順を変更することが出来る。
また、z-indexプロパティを使用するには、positionプロパティの値がrelative、absolute、fixedのいずれかである必要がある。
ほとんどの場合は、位置を固定したくはないのでposition: relativeを指定する。

<p style="color:#ff0000; margin-top:100px; position: relative; z-index: 100;">上に重なったかな?</p>
<img style="margin-top:-100px; margin-left:-20px;" src="http://promamo.com/wp-content/uploads/2014/03/74211c5c3346a734f2a4759a41eaa6b1-300x300.jpeg" />

 

上に重なったかな?


 

ブラウザと対話しながらコーディングを進める

ブラウザに備え付けられているデベロッパーツールを使用することで効率的にコーディングを進めることが出来る。
WindowsならCtrl + Shift + i、MacならCmd + Opt + iで開く。
CSSでハマったときは要素の検証を駆使してブラウザ上でCSSを書いたほうが解決が早い場合が多い。
端末ごとに処理を切り分ける場合は、ユーザーエージェントを変更することで各端末での動きを確認することが出来る。
Javascriptのデバッグに便利なBreakpointの設定なども出来るので開発に役立つ機能はどんどん使っていきたい。
 
 
以上
 
 
参考
Webサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版
ブロックレベル要素とインライン要素
ボックスモデル
position:relativeの使いドコロ

Article written by

Comments are closed, but trackbacks and pingbacks are open.