18/27

レビュー欄っぽい物をこれまでの応用で作ってみる。

今回は既存のレイアウトを参考にして作る場合の考え方を説明してみます。

色々な方法があるのであくまでも参考程度です。

基礎力があると結構有効ですね。

Webサイトをめぐっていると、このレイアウトいいなぁということがよくあります。

それを真似したかったらどうすればよいでしょうか。

まずは観察ですね。

どのようなブロックで構成されているか想像します。

これで大枠ができます。

そのあと、文字を埋めていって、margin, paddingを設定して、基本のレイアウトを確認。

そのあとborderを設定、色、フォントサイズを調整。

最後にリンクなどを付けて完成です。

概ねこんな流れで、作業します。

要素の観察には開発者ツールを使うと便利です。

Windowsの場合ブラウザを開いて、F12キーを押すことで開発者ツールが立ち上がります。

そうすると、それぞれの要素に適用されているスタイルが見れたり、どんなHTMLの構造で実現しているかが分かります。

それを参考にして構造を決めたり、適用させるCSSを決めたりします。

Webデザイナーの人の勉強法として、いくつものサイトのコピーを作るというものがあります。

これに近い感じかな。

小説で言えば、写経になるのかな？　

人が書いたHTML/CSSを眺めながら移すととても勉強になります。

- - - ✂切り取り✂ - - -

それでは後は、なろうのレイアウトを参考にして作ってみましょう。

レビュー欄を作りましょう。

まずは、レビュー欄を観察します。

レビュー欄にはいくつか種類があります。

・PC版レビュー欄（作品ページ）

・PC版レビュー欄（新着レビュー欄）

・スマホ版レビュー欄（作品ページ）

・スマホ版レビュー欄（新着レビュー欄）

それらを見ながら、どのようなレイアウトにするか考えます。

今回は、レビュータイトル+投稿者/作者、本文、作品タイトルで区切ったレイアウトにしましょう。

イメージとしてはこんな感じ。これは一例なので、自分の好きなようにしましょう。

もちろんどこかのレビュー欄を完全に模倣するのでもOKです。

今回は、二つのレビュー欄を程よく混ぜ合わせて実現しています。

レイアウトが決まったら、次にブロックを置いていきましょう。

　<div>レビュータイトル</div>

　<div>レビュー者</div>

　<div>ここに本文を入力</div>

</div>

今回はこんな感じの構造になります。外枠用のブロック、中には4つそれぞれの項目ごとにブロックを置きます。

次に、borderを置いていきます。

今回、必要なのは外枠と、本文の上下につけるborderです。

なのでこうなります。

　<div>レビュータイトル</div>

　<div>レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;">ここに本文を入力</div>

</div>

これで枠線ができました。

ここまででは、こんな感じです。（※例題ではスペース入れてますが、活動報告に入れるときはなくしています）

最初は要素を並べるだけ、次に枠線ができましたね。では、次は余白を作っていきましょう。

余白がないと詰まった印象を受けるので、余白を作ります。

　<div>レビュータイトル</div>

　<div>レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div>

</div>

今回、余白を入れるのは、外枠と本文の区切り線の間です。

そして、ブロックの位置ぞろえも指定します。

　<div style="text-align:center;">レビュータイトル</div>

　<div style="text-align:right;">レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div>

</div>

大分レビュー欄っぽくなりましたね。

そしたら次は、文字について指定していきましょう。

　<div style="text-align:center;">レビュータイトル</div>

　<div style="text-align:right;">レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div>

</div>

全体の文字サイズと行間を指定し、レビュータイトルを若干大きめにしておきましょう。レビュー者は一回り小さくしてもいいですけど、同じにしておきます。

文字のサイズは3段階くらいにしておくと見た目的にいいかなと思います。重要な情報を大きくして、優先度の低い情報は小さめにするといいでしょう。

今回はレビュータイトルを目立たせたいので、そこだけ大きくします。それ以外の情報は同じくらいの重みにしておきます。

　<div style="text-align:center;font-size:18px;font-weight:bold;">レビュータイトル</div>

　<div style="text-align:right;">レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div>

</div>

ここまで来たらあとは色ですね。これは、レビュー欄を参考にして付けます。

開発者ツールで、要素を選択すると使われているカラーコードが分かります。

　<div style="text-align:center;font-size:18px;font-weight:bold;color:#663300;">レビュータイトル</div>

　<div style="text-align:right;color:#0033cc;">レビュー者</div>

　<div style="border-bottom:solid 0.1px;border-top:solid 0.1px;padding:.5em 0;margin:.5em 0;color:#6b6b6b;">ここに本文を入力</div>

</div>

まぁこんな感じですね。

基本的に色を変えることで雰囲気も変わります。

同じレイアウトなのですけど、配色パターンを変えると別物に見えますよね。

こんな風にしてアレンジしていくわけです。

一番大事なのは、どのように要素を配置して、線を引いて、余白を付けるか。

そこまで来たら、文字を調整して、配色を変える。

これができれば色々なテンプレートが作れますよ。是非お試しくださいね。

つぎからランキングタグ攻略が開始されます。