読者です 読者をやめる 読者になる 読者になる

もっとおしゃれなギャラリーサイトをつくる

概要

HTML, CSSを用いておしゃれなギャラリーサイトをつくります。 HTMLデバッグの方法も学びます。

要件

  • 世界観が伝わりやすいように、イラストで画面が埋まるように
  • キャッチコピーをつける
  • イラストを数点タイルさせる

完成図イメージ

f:id:dorak:20160518152540p:plain

ステップ

  1. プロジェクトフォルダ「profile2」を作成する
  2. profile2内にindex.htmlを作成する ここまでは前回とほぼ一緒、前回のテキスト参照
  3. index.htmlを編集
  4. app.cssを編集
  5. ブラウザで確認
  6. 完成!

使用画像準備

背景で使うキービジュアルイラスト1点、その他最低4点のイラストを用意。 注意!4点イラストはすべて正方形にリサイズもしくはトリミングしてください。正方形になっていないと綺麗に並びません。

参考画像を見て、どのようなHTMLにしたらいいかを考える

  • 必要な要素は、キービジュアルギャラリークレジット(フッター)
  • 従って、それ分のdivを用意する。

まずはこんな感じのHTMLを用意して、

<!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>
</body>
</html>

次に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="gallery">

</div>

<div class="credit">

</div>

</body>
</html>

こんな感じで、キービジュアル、ギャラリー、クレジットに分けたdivをつくりましょう。 それぞれに必要なHTMLを当てていきます。 まずはそれぞれに必要な表示を考えましょう。

キービジュアル

  • 背景画像
  • キャッチコピー
  • サブキャッチ

これを実現するには、

<div class="keyvisual">
  <p class="catchcopy">キャッチコピー入れる</p>
  <p class="subtext">サブキャッチ入れる</p>
</div>

でok。

ギャラリー部分

次にギャラリー部分。

<div class="gallery">

  <img class="gallery-image" src="画像までのパス">

</div>

これで.gallery-imageを表示したい回数分コピペすればok。

credit部分

<div class="credit">
  <p class="credit-text">© 自分の名前 CONTACT: 自分のメールアドレス</p>
</div>

これでOK。 ここまでで表示をチェックしましょう。 下記のようになっていればOK。 CSSが当たっていない=装飾がされていない状態です。

f:id:dorak:20160518170116p:plain

CSSで装飾する

まずはどうしたらサンプル画像のようなデザインになるかを考える

  1. 背景に画像を表示したい
  2. その背景画像の上の文字サイズを大きく変更したい
  3. その文字の色は白にしたい
  4. メインキャッチとその下のサブテキストの文字サイズは別々にしたい
  5. 画像を等間隔に、画面いっぱいにタイルさせたい
  6. フッターの著作者表記部分は背景黒っぽく、文字は白で

ざっとこんな感じだと思います。 それぞれ、どのようなCSSにすれば目的のデザインを実現できるかを考えます。

1. 背景に画像を表示したい
表示させたい場所のクラス {
  background-image: url(画像までのリンク);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 420px;

}
2. その背景画像の上の文字サイズを変更したい
文字サイズを変えたい場所のクラス {
  font-size: 変更したい文字サイズをピクセルで;
}
3. 文字色は白にしたい
クラス {
  color: #fff;
}
4. メインキャッチとその下のサブテキストの文字サイズは別々にしたい

それぞれに別のクラスが付いているのであれば問題ありません。クラス毎にfont-sizeを指定しましょう。

5. 画像を等間隔に、画面いっぱいにタイルさせたい

画像のサイズが一緒であれば、等間隔に並びます。それでは、画面いっぱいに並ぶには・・・ 横幅をピクセルで指定したのでは画面いっぱいになりません。それではどうすればいいのかというと、%で表します。 横に4つ画像を並べたいのであれば、100/4の数字を%で指定してみてください。 また、一つ一つ画像に幅を設定していくのは手間です。 同じクラスを適用したい場合は、同じクラス名を付けましょう。画像であれば、上のHTMLでつくったように、.gallery-imageというクラスをすべての画像つけるといいのではないかと思います。

.gallery-image {
  width: 25%;
}
5. フッターの著作者表記部分は背景黒っぽく、文字は白で
  • 背景の色を変更するには?

background-color: #ddd;の用に指定。

  • 文字色は上と同じ。

これで完成です!!!!!!!!!!!!

最終的なCSSはこんな感じ

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

body {
  color: #ebe6e7;
  text-align: center;
  font-family: "HelveticaNeue-Thin", yugothic;
}

.keyvisual {
  background: url(../images/6.jpg) center center no-repeat;
  background-size: cover;
  height: 420px;
  font-weight: bold;
}

.catchcopy {
  font-size: 72px;
  padding-top: 120px;
}

.subtext {
  font-size: 20px;
  font-weight: normal;
}

.gallery {
  text-align: left;
  margin: 0 auto;
}

.gallery-image {
  width: 25%;
  height: auto;
  float: left;
}

.gallery-image img {
  width: 100%;
}

.credit-text {
  background: #252422;
  font-size: 12px;
  padding: 8px 0;
}

その2 ちょっとジャンルで分けたページをつくってみる

完成図

f:id:dorak:20160519114545p:plain

どうやって3列のレイアウトをつくるか?

大前提

2列や3列など複数列のレイアウトをつくるとき(マルチカラムレイアウトという)は、必ずcssに下記の表記を入れましょう。理論的に詳しく学びたい人は、float clearfixなどで出てきます。

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

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

こんなbodyの中身はこんなHTMLにしてみましょう

  <div class="headline">
    <p>My Works</p>
  </div>

  <div class="works cf">

    <div class="illust illust_1">
      <p>もふもふ系イラスト</p>
      <img src="assets/images/7.jpg">
      <img src="assets/images/8.jpg">
      <img src="assets/images/9.jpg">
    </div>

    <div class="illust illust_2">
      <p>こわい系イラスト</p>
      <img src="assets/images/4.jpg">
      <img src="assets/images/5.jpg">
      <img src="assets/images/6_2.jpg">

    </div>

    <div class="illust illust_3">
      <p>かわいい系イラスト</p>
      <img src="assets/images/1.jpg">
      <img src="assets/images/2.jpg">
      <img src="assets/images/3.jpg">

    </div>

  </div>

画像は何もしなくても横並びになってたけど・・・

HTMLは、インライン要素とブロック要素と言われるもので構成されています。 HTMLは、すべての要素が要素がインライン要素かブロック要素です。 ここではサッと読んでくれれば大丈夫ですが、 ブロック要素は画面いっぱいの幅を持ちます(コンテンツ量に関わらず), インライン要素はコンテンツ分の幅しか持ちません(「works」というテキストがあればworksという幅だけしか持たない)

ブロック要素かインライン要素かは、タグで決まります。

ブロック要素のタグ

div, p, section, articleなど

インライン要素のタグ

span, img, aなど

今回は.illustを横並びにします

横並びにするためのCSS

float: left; (超重要かつ頻出)

.illust { float: left; width: 33.33333%;(3列にしたいので、100/3の%を設定) }

超重要!floatをかけたとき、親要素にはcfというクラスを付けてください!!!!!

画像のリストが真ん中にいかない

さて、ここまでやって真ん中にいかないことに?マークが出た人もいるかと思います。 これは、ブロック要素の特性です。 .illustを囲うworksはdivなのでブロック要素です。つまり、画面の幅いっぱいの幅を持ちます。 Photoshopillustratorを思い浮かべてもらえればわかりやすいはずです。 キャンバスいっぱいの四角形をつくったとして、中央には寄せられないですよね?キャンバスいっぱいにつくったということは、すべに真ん中に配置されているということでもあります。

ではどうすればいいかと言うと、幅を指定しちゃいます。

.works {
  width: 80%;
}

幅を画面より小さいサイズに指定すれば、画面いっぱいではなくなるのでその要素を真ん中に寄せることが可能になります。 では、真ん中寄せはどうすればいいのか。

.works {
  width: 80%;
  margin: 0 auto;
}

これは、左右の余白を均等に取りましょう(=auto)という指定です。これでバッチリです。