もっとデザインの優れたプロフィールサイトをつくる

ゴール

f:id:dorak:20160525172526p:plain

ステップ

  • プロジェクトフォルダprofile3を作成する
  • profile3内にindex.html、assetsフォルダを作成する
  • assetsフォルダをつくる
  • assetsフォルダの中にcssフォルダとimagesフォルダをつくる
  • 必要な画像をimagesフォルダに入れる
  • index.htmlを編集
  • app.cssを編集
  • ブラウザで確認
  • 完成!

復習

まず、復習として前回の記事

おしゃれなギャラリーサイトをつくってみる - HTMLとCSSの勉強

この記事の下の方にあるどうやって3列のレイアウトをつくるかをやりましょう。

大前提としては、

画像は<img>タグをつかって表示すれば勝手に横並びになっていたけど、<div>タグとか<p>タグは勝手に横並びにならない

というところです。

これを踏まえて今回は、もうちょっとおしゃれなプロフィールページを作成していきます。

あと、cssの一番冒頭に下記コードは絶対追加しといてくださいね。

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

今までとは違う今回やりたいこと

  • 画像にタイトル日付を付けたリストにしたい

要はこんな感じです。 f:id:dorak:20160525174155p:plain

これ、HTMLを書いてみるとわかるんですが、複数並べようと思っても自動で横並びにならないんです。 検証していくために、まずはHTMLを書きましょう。

HTMLを書く

まずはいつもと同じようにHTMLを書いていきます。

つくりたいサイトのデザインをグループ分け

今回は次の3点に分けます。なお、分け方は自由なので、もっと細かく分けるもよし、もっとおおまかに分けるもよしなので、色々試してみても大丈夫です。僕は以下の分け方が把握しやすくて好きです。

  • キービジュアル
  • 作品リスト
  • クレジット表記

今回つくるサイトはこの3つに分解します。前回の記事でもこんな分け方でしたが。

HTMLを書くときは、サイトをどんな単位でグループ分けしようかな、と考えることが大切です!グループ分けしたら、グループ分けの<div>タグにはクラスを付けてください!(<div class="keyvisual">みたいな) そうすれば、どんなに複雑なサイトになっても迷うことがありません。逆に言うと、グループ分けしなくてもサイトはつくれます。グループ分けした方が圧倒的に作りやすいというだけです。

さて、グループ分けしたものをHTMLにしてみましょう。 今回は、自分で考えて書いてみてください。下に回答は用意してます。





























書けたでしょうか。 こんなHTLMになるといいです。 まず、絶対に書かなければいけないものとして、<!doctype html>があって、<html>タグがあって、<head>タグがあって、<body>タグがある。ここまでは、毎回変わらないです。

【絶対必要なこと】

  • 最初に書くのは<!doctype html>
  • 全体を<html>タグで囲う
  • <head>タグと<body>タグを用意。
  • <head>タグは、サイトの設定を書くところ。cssを読みこんだり、言語設定を書いたり。
  • <body>タグはサイトの見た目を書くところ。
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>プロフィールページ</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>

  <div class="keyvisual">

  </div>

  <div class="works cf">
    
  </div>

  <div class="credit">
    © みなさんの名前
  </div>

</body>
</html>

はい、ここまでかけたら、あとはグループの中身を書いていきます。

keyvisual

こんかいのkeyvisualはこんな感じ。

f:id:dorak:20160526103427p:plain

まずはhtmlから。

  <div class="keyvisual">
    <p class="title">
      <span class="main_text">キャッチコピー</span>
      <span class="sub_text">みなさんの屋号</span>
    </p>
  </div>

ポイントは、keyvisualの中でもtitleというグループをつくっているところです。 これがないと、白枠が敷けません。 Photoshopなどでこのデザインをつくろうとしたと考えるとわかりやすいはずです。 まず背景画像をつくって、テキストを乗っけたら、テキストの下に白を敷く、という手順でつくるはずです。

従って、.titleに対して白を敷く、という発想になります。.main_textに敷いたとして、.sub_textには白があたらないですよね。

さて、次はデザイン。 背景画像があるのは前回と同じですが、キャッチコピーの裏にちょっと透明の白が敷かれてます。 これの実現方法は下記。

.title {
  display: inline-block;
  background: rgba(255,255,255,.8);
  margin-top: 90px;
  padding: 64px;
  color: #757575;
}

前回の記事の3列レイアウトの箇所で、HTMLにはブロック要素とインライン要素がある、と説明しました。 HTMLが作られた目的は、そもそも研究者がデザインされていない文章(科学論文とか)を共有するためです。なので、ワードみたいに文章が作れれば十分でした。 そういったことから、HTMLをつくったエンジニアは、タグをブロック要素インライン要素で分けました。 ブロック要素は、いわゆる文章の段落です。文書のかたまりです。 インライン要素は、文章の中の単語や文章を装飾するためのもの(赤字にしたり、太字にしたり、斜体にしたり)です。

ワードとかで文章を作った人はよく思い出してみてください。 段落同士が並ぶことはあまりなかったと思います。

ということで、ブロック要素は段落なので、ブラウザの横幅いっぱいに広がります。 HTML的には、幅いっぱいに広がるので、前後の要素がそのブロック要素と並ぶことはありません。 Photoshopで言うなら、キャンバス幅いっぱい四角をつくってるようなものです。

インライン要素は、コンテンツ分の幅しかありません。 <span>はろー</span>というタグがあった時、はろー分しか幅が与えられないです。何故かと言うと、段落の中の文章や単語を装飾するための要素だからです。 繰り返しになりますが、ブロック要素は、たとえ<div>はろー</div>という文章が極端に短いものでも、div自体が段落なのでブラウザの幅とイコールの幅を持ちます。

本題に戻ると、 display: inline-block;を指定すると、幅がコンテンツ分しかない要素をつくれます。これがないと、.titleに白をあてても幅いっぱいに広がってしまいます。気になる人はinline-blockのところを削除して確認してみてください。

あとは、適切に余白を設定したり、色を指定したりして完成です。 余談ですが、HTMLは色に不透明度を設定することが出来ます。

rgba(255,255,255,0.5)のように書きましょう。このとき0.5は.5のように書くことが出来ます。

そして、キャッチコピーの下にある線はどうやって実現しているのでしょうか。 こんな感じです。

.main_text {
  display: block;
  font-size: 32px;
  border-bottom: 3px solid #757575;
  margin-bottom: 48px;
}

border-bottomという命令を使っています。要素の下部に線を引きます。 ここでdisplay:blockとしているのは、display:blockを設定しないと、次の要素が並んでしまうからです。 ここまでできれば、他のデザインは前回の復習でいけます。 重要な点として、.keyvisualにtext-align: center;を設定しないとキャッチ部分が真ん中寄りになりません。

作品リスト

今回のメインはここです。

まずは、

f:id:dorak:20160525174155p:plain

これをつくるためにどういうHTMLにしたらいいか考えましょう。 作品をこれもグループ化してるだけです。















こんな感じのHTMLになりましたか?しつこいようですが、クラスは絶対につけてください!

<div class="work">
      <img src="assets/images/1.jpg">
      <div class="work_info cf">
        <p class="work_title">猫の写真</p>
        <p class="work_date">13 MAR.</p>
      </div>
</div>

さて、これを複数ならべたとき、以下のように勝手に並ばないのはなんでかもうわかりましたかね。

f:id:dorak:20160525175552p:plain

これは、divがブロック要素だからです。imgタグはインライン要素ですが、imgを囲っているdivがブロック要素だから、幅いっぱいに.workが広がっています。結果、こんな感じで並ばないわけです。 では、並ばせるにはどうしたら良いか。

こうしましょう。

  1. 並ばせたい要素を親要素に.cfを設定。(クラスを複数設定するときは、スペース区切りで設定できます。)
<div class="works cf">
  <div class="work"></div>
  <div class="work"></div>
  ...
</div>
  1. .workに、float: left;という並ばせるcssを設定する。
.work {
  float: left;
  width: 25%;
  padding: 0 8px 16px;
  cursor: pointer;
}

float: left;で並ばせ、width: 25%;で4列にし、paddingで他の.workとの余白を設定する。なお、cursor: pointerを設定することでリストにマウスが乗ったときにマウスの形状が例の人差し指マークになります。

並びましたか?並ばなかったら言ってください。

次。並びはしましたが、リストがびよーんってなってると思います。適切な幅にしてあげるために、.workの親要素である.worksに幅と中央寄せの設定をしてあげましょう。

.works {
  width: 960px;
  margin: 32px auto;
}

たったこれだけです。width:960px;は自由に設定してください。 margin: 32px auto;は、左右の余白をauto(自動)で設定し、上下の余白は32pxで設定します、という命令です。さきに書いたほうが上下の余白、あとに書いたほうが左右の余白です。

さて、ここまで来たらほとんど完成です。 あとはクレジットに色をつけたりして完成です。 cssの完成形を貼っておきますね!

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

.keyvisual {
  background-image: url(../images/covere.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  height: 420px;
}

.title {
  display: inline-block;
  background: rgba(255,255,255,.8);
  margin-top: 90px;
  padding: 64px;
  color: #757575;
}

.main_text {
  display: block;
  font-size: 32px;
  border-bottom: 3px solid #757575;
  margin-bottom: 48px;
}

.sub_text {
  font-weight: bold;
  font-size: 12px;
}

.works {
  width: 960px;
  margin: 32px auto;
}

.work {
  float: left;
  width: 25%;
  padding: 0 8px 16px;
  cursor: pointer;
}

.work:hover {
  opacity: .8;
}

.work img {
  width: 100%;
}


.work_title {
  color: #757575;
  float: left;
  font-size: 12px;
  padding-top: 2px;
}

.work_date {
  color: #757575;
  float: right;
  font-size: 10px;
  border: 1px solid #757575;
  padding: 2px 4px;
  border-radius: 2px;
}

.credit {
  background: #ddd;
  color: #757575;
  padding: 16px 0;
  text-align: center;
}