サンプル１は今回の講義で作成・解説するサンプルです。
● 完成サンプル(150x300)
今回は上記のサンプルを作っていきます。
このサンプルはメニューなどで使用可能です。
全てのメニューを統一したテーブル形式に納めています。
そしてラベルのように左に太い枠をとっているのが目を引かせる味噌です
全体を統一することにより１つのまとまりを演出しています。
人は同じ系統の物をひとまとまりにする性質を持っているので、
これは「メニューなんだな」と即座に感じることができるというわけです。
但し、他の箇所を同じような形式にすると紛らわしくなります。
また、左右両方の枠を太くしても同様の効果が期待できます。
次に「文字」です。日本語と英語を使用してどちらにも対応できるようななっています。
２行分とっているのは１行分よりも目を引く効果を持たす為でもあります。
そのあたりは作りながら見比べて下さい。
次に「ラベル間の空間」です。中央に「-」を配置していますが何もなくても支障はありません。
ただ、空白改行のみはあまり進められていないので、デザインの面も含め「-」を使っているだけです。
小さい文字で「◆◇◆◇◆◇◆◇」何かにしても見栄えの良い物になるでしょう。
その辺りは各自工夫して下さいね。
次に「Menu」の周りです。
単に言葉だけ書くのも良かったのですが、見栄えがヨロシクありませんでした。
なので、「-」を使って飾ってみました。
なんで此処だけ英語やねん☆というツッコミが入ると思いますが、気分です！
これで、一通りの説明は終わりました。
では皆さん、自力で頑張って作ってみて下さい。
今までの知識を持ってすればきっと作れますよ！
ヒントを出しながら説明もするので分からなければ読み進めていって下さいね。
● 作り方のヒント１
スタイルシートを外し、テーブル枠を付けてみました。
１２個（１ｘ１２）のセルからできているようですね。
完成サンプルを見る限り５個のセルしか見受けられないので、
「テーブルをいっぱい使っているんだな！」と思った方は間違いです。
テーブル枠はセル単位で表示非表示にできると言うことを覚えておいて下さいね。
次は「-」に注目してみましょう。
サンプルは中央に表示されていますよね。
でもヒントは左寄せになってます。
スタイルシートを使って中央寄せにしましょう♪
「text-align:center;」ですね。
「- Menu -」も中央寄せされてるようですのでこちらにも適応しましょう♪
次はリンクの色と下線です。色はもう良いとして。
下線を取るスタイルシートがありましたね。それを使って下さい。
使い方によっては上下に線を引っ張ることもできますね。
何れ使ってみたいと思います。
これは結構重要なスタイルシートになってくるので覚えるためにも過去の講座3.5を調べてみて下さい。
前回同様「横幅」です。
やはりテーブルのデザインテクニックとして必須です。
今後毎回のように出てくるので覚えておくことをオススメします。
今回はwidth属性値を「120px」にしています。
最後に文字です。
今回も「12px」の大きさを使用しています。
それプラス、視認性を高めるために太字にしています。
メニューだから特別扱いですね。
● 作り方のヒント２
上記の内容を適応しましたが、まだ全然印象が違いますね♪
次は枠でも作ってみましょう。
文字の入っている部分のみに枠を付けるので、
その部分に「border:1px solid #0066cc;」を付けるんですね。
全てに付けるのは非効率的なのでヘッダに定義してしまいましょう。
すると枠ができましたが、左側が太くありません。
これではダメですね。
一度作った枠を「上書き(OverWrite：オーバーライト)」してしまいましょう。
左側のみ太くするので「border-left:10px solid #0066cc;」を使います。
「border-left-width:10px」でも構いません。寧ろこちらの方が経済的ですね。
その辺りは好みにお任せ致します。
左枠のみ色を変える時は前者を使うと良いでしょう。
次に前回スタイルシートで行った「枠の破壊」をhtmlでやってみましょう。
スタイルシートでは「border-collapse:collapse;」でしたが「table」要素に「cellspacing='0'」を使います。
「<table cellspacing='0'>」
の様に使います。そうすれば下位互換に優れ旧ブラウザでも思い通りのデザインになります。
覚えておいて損はないですね。
● 作り方のヒント３
残りは空間の微調整です。表示位置の周辺余白の微調整は「padding」で文字間隔の微調整は「letter-spacing」で行います。
これを怠ると見難くなるので必ずやるようにして下さいね。
今回はメニューと言うこともあり文字間隔を多めの「3px」とり余白は表示状況を見ながら「3px 1px 2px 15px」にしました。
● 完成サンプル(150x300)
これで作れたことだと思います。
完成品のソースをご覧下さい。
比較してみてどうですか？class属性を有効に使ってますか？
td {設定１}
td.item1 {設定２}
td.item0 {設定３}
今回はこの辺りを解説しましょう。
「td」タグには設定１が適応されます。
そして、class属性が付いた場所には設定１、設定２も適応されます。
「td」」には設定１が、
「td class='item0'」には設定１、設定３が
「td class='item1'」には設定１、設定２が適応されます。
このようにclass属性を使う時に重複する設定はタグそのものに付けておくことで無駄を省けます。
★これにて当講座を終わらせて頂きます。長々とありがとうございました♪
分からない箇所などがありましたら遠慮無くご質問下さいね。