この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスのためのHTML5+CSS3によるレスポンシブ×フラットデザイン 第ニ回目 ワイヤーフレームを作る

今回はワイヤーフレームを作ります。ワイヤーフレームというのは直訳すると骨組みです。
まずはデザインの基本となる骨組みを作ろうというわけです。
このワイヤーフレームについてはフラットデザインだと複雑な段組みはないので、決まりきったものになりつつあります。楽なのはいいことですね!?

今回はワードプレスのテンプレートを意識して、ウィジェットを配置できる逆L字型のデザインを採用します。

逆L字型
逆L字型

モバイルユーザーが増えていくと最終的には1カラムの横に列がないフラットなデザインが主流になるかもしれません。実際、横にメニューがない1カラムの横いっぱいのデザインは、スクロールをしながら見るのには適しています。
スマホで横にメニューが出ていると本文が小さくなって読み辛くなりますよね。時代は変わります!
講座では1カラムにも対応します。

ではまずはワイヤーフレームを作ります。作るといっても、とりあえずは紙にペンでラフを描きます。
ラフはスマホ、タブレット、デスクトップの3種類を用意します。といってもサンプルが用意してあるので見るだけですが。

まずは、モバイルファースト(一番画面サイズの小さいスマホでちゃんと表示されること)なので、スマホで見た時のレイアウトを考えます。これは簡単ですよね。スマホは画面が小さいので1カラムのレイアウトになります。

要素としては、ヘッダー、、サイドバー、フッターの4つだけです。そのうち固定なのはヘッダーとフッターで、サイドバーとコンテンツが記事数やウィジェット数によって縦並び増えていきます。
最低限の要素は4つだけなので簡単ですね。

タブレット・デスクトップレイアウト
タブレット・デスクトップレイアウト

次にタブレット(タブレット、ブック型、ノート型)なのですが、これはデスクトップと兼用です。
つまりユーザーの画面サイズによってレイアウトを自動的に可変させます。

モバイルレイアウト
モバイルレイアウト

モバイルとデスクトップを両方使ったことがない人のために説明すると、テクニックとしては「カラム落ち」というものを使います。
例えば、仮に画面サイズが1000ピクセルあったとして、そこに700ピクセル300ピクセルの2つの段組を設定したとします。700+3001000なのでディスプレイが1000ピクセル以上であればそのまま表示されます。

最近のディスプレイは高画質で大型化してきているので1680x1050ピクセル(WSXGA+)で見てる人もザラにいます。
このデザインをまだまだユーザーが多いiPhone4S640×960で見ると横幅が360ピクセル足りません。
足りない部分は横にスクロールが発生するのですが、カラムレイアウトをしておくと足りない場合はスクロールではなくカラム落ちが発生します。

つまり、横一列に並んでいた段組が縦一列に並ぶことになります。
横に幅がなくなったら縦に伸びるというわけです。
基本的にこの考え方で、1つのデザインをスマホからデスクトップまで対応させます。
なのでスマホ版のレイアウトは縦一列しかないのです。
なんとなく分かったでしょうか?

では、次に少しCSSのお勉強です。CSSというのはカスケーディング・スタイル・シートの略で、見た目を変えたい場合に記述する記法を意味します。HTMLが登場したばかりの頃は一つのHTMLにコンテンツとデザインが混在していました。
例えば文字サイズを大きくする時にはこのようにしていました。

<font size=”7″>テキスト</font>

上記は文字のサイズを最大の7に指定します。しかし、これだと問題があります。
ファイルが増えてきて、「<font size=”7″>テキスト</font>」といった記述が数百、数千あった場合、文字サイズを変えるには全てのファイルの該当箇所を書き換えなければなりません。
企業サイトでは製品ページが数千あるところもあるので、これを全て漏れ無く変更しようとすると一苦労だったというわけです。

そこで、コンテンツとデザインを切り分けたらどうだろう? という考えが生まれました。
例えば先ほどの文字サイズの変更は、だけ付けておいて、その印が意味することは別のファイルに書いておきます。
こうすれば変更はそのファイルを変更だけすればよく、全ての該当箇所が一瞬にして変わる(カスケーディング)ので便利じゃないかと考えたわけです。

HTMLには以下のように書いておいて、

<div>テキスト</div>

CSSのファイルには以下のように書きます。

.titleFontSize
{
    font-size: 20px;
}

HTML内では「class=”titleFontSize”」がフォントをどのように装飾するかについては明記されていません。
つまり、決まっていなくて単なる印が付いているだけです。では、その「印」があるとどのように変化するかについてはCSSファイルに書いておきます。
印さえ付けておけば、その印がどのような意味に変わるのかはHTMLではなくCSSの仕事です。後出しじゃんけんができるわけです。
「1つのCSS 対 数千あるHTML」というように一対多の関係を作ることができ、デザインの一元管理もできるというわけですね。

CSSについて説明し始めるとキリがないのでこの辺にしておきます。HTMLとCSSの関係だけ憶えておいて下さい。
では次に、ラフに戻ってレイアウト要素に「印」を付けます。
「印」というのもなんなので「ID」と呼ぶことにします。
特に理由がなければ以下のようにIDを決めて下さい。

ID割り当て
ID割り当て

各要素の中にはさらに細かい要素があります。例えばヘッダーの中にナビゲーションバーがあったりします。
これもHTML内で唯一なのでIDを割り当てます。要素の細部については次回触れていきます。

IDについてなのですが、必ずHTML内に1つしかつけることが出来ません。ダブってはダメです。
またそれがなんなのか分かりやすくするため、関連した名前にすることも重要です。
文字の長さはなんでもいいのですが、使えるのは半角英数字記号「-」「_」だけです。
半角スペースや全角の日本語は使えません。また最初の1文字目に数字は使えず、必ず大文字または小文字のアルファベットからはじめなければなりません。これが基本命名規則です。

話は戻ります。HTML内にヘッダー(看板)は普通1つしかないのでヘッダーにはIDを振ります。
しかし、コンテンツはワードプレスだと記事が縦に並びますよね。
IDは複数の要素には振れないのでどうすればいいかというと、コンテンツという箱だけ作って、その中に記事を流し込みます。箱にIDを振り、複数存在する記事の指定にはIDではなくクラスというものを割り当てます。

CSSにはIDとクラスというものが出てきますが、IDは唯一の要素に付けて、クラスはなんにでも付けられると憶えておいて下さい。家族における苗字と名前の関係に似ています。

HTML内に唯一の要素にはID。HTML内に複数出てくる要素にはクラスを使う。

IDを使わずクラスだけにすることも可能ですが、後々出てくるJavaScriptでプログラムを組む時に使い分けておかないと苦労します。

関連記事