Academia 4

アジェンダ

  • スクロールでいろいろやってみたい!
  • スクロールしたら文字がふわっと現れる
  • 読み込みしたら文字が1文字ずつ連続で現れる

スクロールしたら文字がふわっと現れる

準備

  • 前回使用したHTML素材を使用(URLよりDL可能)
  • imagesフォルダの中身を、バラバラのサイズの画像に差し替える(以前までは正方形にトリミングした画像を使っていたが、今回からはトリミングしていない画像を使う。)
  • headタグのapp.jsの上に下記コードを追加
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

スクロールしたら何かをする、というのはどうやるか

addEventListenerを使う Eventとは、例えばスクロールやクリックなど、ブラウザ上で発生するなんらかの「動き」のことを指す。 addEventListenerとは、その名の通り「何らかの動き(event)」がないかどうか「待っている(listen)」という状態。具体的にはこのように書く。

window.addEventListener("scroll", function () {
  console.log("スクロールしている");
});
target.addEventListener("event_name", function);

という構文。 すなわち、イベントが発生したときに〇〇する!というもの。 要素を検証より、consoleを立ち上げてチェックしてみよう。

f:id:dorak:20200508134114p:plain

スクロールのたびに「スクロールしている」というワードが表示されているはず。

console.log();とは

consoleになにかを表示するための命令。 consoleはシステムに直接命令を下したりエラーの確認をする場所。ここにエラーなどが表示される。

function?

functionとは、「関数」のこと。難しく考えがちだが、直訳すると「機能、作用、働き」。例えば文字の色を変えるなど、なんらかの機能を書いておくことができる。 書き方は次の通り。

function (引数) {はたらきの内容}

//具体例
function () {
  document.getElementById('target').classList.add('functionTest');
  console.log('クラスを変えたよ');
}

// ↑targetというidを持つHTMLに対して、functionTestというクラスを追加する関数

ふわっと出す、を考える

「Works」が視界に入ってきたらふわっと出したい アニメーションはJavascriptだけで完結するものではない。CSSと組み合わせて行う。 結論的には以下の手順。 1. ふわっと出したいものをCSSで透明にしておく。加えて、下から上にテキストが出てくるように、position: relativeとbottomプロパティを使って下に置いておく 2. 上記を打ち消すCSSクラスを用意しておく。つまり、透明状態を解除、位置をもとに戻す、というイメージ 3. 特定の箇所にスクロールしたら2のクラスがつくように

対象となるHTLMは<h2 class="headline"><span>Works</span></h2>

  1. 透明かつ下に隠しておくコード 透明にするのはopacity、位置を移動させるにはposition: relative;bottomプロパティ、そしてボックスモデルからはみ出た要素を隠すのがoverflow:hidden;。なので下記のようなHTMLとcss
<h2 id="section-title" class="headline">
  <span id="section-title-text">Works</span>
</h2>
.headline {
  font-size: 40px;
  margin: 24px 0;
  padding-left: 24px;
  overflow: hidden;
}

.headline span {
  opacity: 0;
  bottom: -100px;
  transition: all ease-in-out 0.5s;
  position: relative;
}
  1. 打ち消しクラスの用意
span.popup {
  bottom: 0;
  opacity: 1;
}
  1. 打ち消しクラスを、特定の位置まで来たときに付与するjs
window.addEventListener("scroll", function () {
  const target = document.getElementById("section-title");
  const stPosition = target.getBoundingClientRect().bottom - window.innerHeight;
  console.log(stPosition);
  if (stPosition < 0) {
    document.getElementById("section-title-text").classList.add("popup");
  }
});

特定の位置、をどうやって判定するか?

今回は、「Works」が視界に入ってきたらふわっと出したい。 「視界」とは?ブラウザが表示できている領域、すなわちビューポートと言い換える

やり方は以下 1. ターゲット要素の相対的な座標を取得する 2. 1から現在の画面の高さを引く(ビューポートの高さ)ことで、視界に入ったときに〇〇する、を実現する 3. クラスを追加するコードを書く

  1. ターゲット要素の相対的な座標を取得する target.getBoundingClientRect().bottomで、ビューポートの左上からターゲットのボックスモデルの下部までの距離を取得できる。 スクロールのたびに上記の値を取得するようにすれば、いずれはゼロになるはず。ゼロになったときに〇〇する、といったコードを書くことを目的とする

f:id:dorak:20200508145804p:plain (引用:https://qiita.com/makoto1219/items/9d5b71a792025703cdea)

  1. 1から現在の画面の高さを引く(ビューポートの高さ)ことで、視界に入ったときに〇〇する、を実現する 1で取得した距離は、あくまでビューポートの左上から計算する、となっている。ということは、値がゼロになるのはあくまで視界に入ってきたときではなく視界から出ていくときとなる。どうすればいいか?

  2. ビューポートの高さを足してあげる。そうすることで、視界に入ってきたときにちょうど1の値が0になる

  3. クラスを追加するコードを書く

読み込みしたら文字が1文字ずつ現れる

ここまでやった知識で実現可能。 要素一つずつに対して、透明度とpositionを設定していくやり方。

  1. TweenMaxを読み込む
  2. 1文字ずつ扱えるように、1文字単位でHTMLタグを分割する
  3. コードを書く

今日使うライブラリ「TweenMax」

Javascriptを用いたアニメーションと言えば「TweenMax - Products - GreenSock」。

TweenMaxの「Tween」とは、「Between(〜と〜の間、という意味の英単語)」からきていることが示すように、ある地点からある地点への変化をJavascriptで指定できる機能を持ったライブラリ。

AfterEffectsやPremiere, Flashでアニメーションを作ったことがある人なら、だいたい考え方は一緒なのでとっつきやすい。

1はいいとして2から 2. 1文字ずつ扱えるように、1文字単位でHTMLタグを分割する

<div class="cover">
  <div id="main-title" class="clearfix">
    <p class="showText">P</p>
    <p class="showText">O</p>
    <p class="showText">R</p>
    <p class="showText">T</p>
    <p class="showText">F</p>
    <p class="showText">O</p>
    <p class="showText">L</p>
    <p class="showText">I</p>
    <p class="showText">O</p>
  </div>
</div>
  1. コードを書く 注意!アニメーション系のコードはHTMLが読み込まれる前に実行されるとエラーになる。なので、下記の書き方を徹底する。
$(document).ready(function() {
  //ここにコードを入れる
});

$(document).readyは、HTMLが読み込まれたあとに、という意味。

$(document).ready(function () {
  gsap.from(".showText", 2, {
    duration: 1,
    opacity: 0,
    yPercent: 100,
    stagger: 0.5,
  });
});

Academia 3

アジェンダ

  • Pinterestみたいなレイアウトをつくる
  • 「ライブラリ」
  • 画像を大きくするライブラリ「Lightbox
  • Pinterestではなく、あくまで正方形など固定サイズでいきたいあなたへ
  • スマホ対応

Pinterestみたいなレイアウトをつくる

javascriptとは

れっきとしたプログラミング言語。 HTMLやCSSは、厳密に言うと「マークアップ言語」と言われ、演算はできない。しかし、javascriptは演算もできれば関数もつくれる。つまり、「●●のとき▲▲したい」といった条件分岐が可能になる。今回はjavascriptの書き方について厳密に見ていくことはせず、javascriptを用いてつくられた便利なはたらきをする「ライブラリ」を使用してデザインを仕上げていく。

準備

  • imagesフォルダの中身を、バラバラのサイズの画像に差し替える(以前までは正方形にトリミングした画像を使っていたが、今回からはトリミングしていない画像を使う。)
  • cssフォルダやimagesフォルダと同じ階層に、jsフォルダをつくる
  • jsフォルダの中にapp.jsファイルをつくる
  • javascriptを使用する準備。headタグに以下のコードを加えて、HTMLからjavascriptを読み込む
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="js/app.js"></script>

javascriptの読み込みは、CSSと違って<link>タグは使わない。<script></script>タグを使う。 そして、上記はなにやら複雑に見えるが、3つのjavascriptを読み込んでいるだけ。 1つめは「jQuery」。2つめは「masonry」。3つめは「imagesLoaded」。4つめは「app.js」。 それぞれどういう役割のjavascriptなのかをのちほど解説する。

HTMLを強力に指定する「id」

HTLMを指定するものは以前は「class」を使用していた。もちろんclassが今後もメインの指定方法となるが、class以外のメジャーな指定方法に「id」がある。idは同様のidを1ページに1つしか設定してはいけないというルールがあり、プログラム的にはclassの3倍早くHTMLを検索できる。

idの付け方

<div id="sample"></div>

javascriptからHTMLを指定するときは、idを使うのが基本

Pinterestみたいにする準備

worksクラスが付いているdivの下に「masonry」idがついたdivをつくる

<div class="works clearfix">
...
</div>

これを

<div class="works clearfix">
  <div id="masonry">
    ...
  </div>
</div>

のちほど説明するが、「masonry」はpinterestみたいにしてくれるjavascriptコードの名前。

app.jsにpinterestみたいにするコードを記述

$('#masonry').imagesLoaded(function(){
  $('#masonry').masonry({
    itemSelector: '.work',
    isFitWidth: true,
    isResizable: true
  });
});

ライブラリってなんだ

たとえば「クリックしたら画像を大きくしたい」とか、「pinterestみたいな複雑なレイアウトを簡単に実現したい」とかを読み込むだけで実現できる便利なファイルのこと。Photoshopなどでも、グリッドを決めたりするプラグインがあるかと思いますが、あれと同じようなもの。

もっと「っぽく」言うと、決まった動きをするコードのこと。自分でイチから書かなくても、大抵は誰かが書いたコードが使える。これはjavascriptに限った話ではなく、例えばすでにheadでしようしているreset.cssもライブラリ。

実際の開発ではこのライブラリをググり、適宜使用していく。ライブラリを使わない開発は効率の観点からありえない。

jQuery

javascriptだと、HTMLを指定するのに結構ながいコードを書かなければいけない。 例えば以下。

document.getElementById('masonry');

これが、jQueryだと

$('#id')

で済む。jQueryjavascriptをもっと書きやすくしたjavascriptライブラリ。

masonry

画像をpinterestっぽく並べてくれるライブラリ。この挙動をイチから書こうと思うとめちゃくちゃ大変。

imagesLoaded

画像の読み込み完了を検知するライブラリ。 masonryは画像が完全に読み込まれてから実行しないとバグる。

ライブラリは、「実行するためのコード」を書かないと実行されない(読み込んだだけでは実行されない)

ライブラリはあくまで「挙動」を記述しただけのファイルなので、実際に動かすにはapp.jsに「動かす」ためのコードを書く必要がある。 もっと砕けて言うと、「これらのライブラリを有効にします!」という命令を入れる必要がある。

クリックして画像を大きくする

lightboxというライブラリを使用。

lightboxの使用準備

lightboxのダウンロード

lightboxは画像拡大表示用のライブラリ。 バツマークなどの画像も用意してくれているのでこちらはコードのURLをscriptタグに記述するのではなく直接ダウンロードすることにする。

http://lokeshdhakar.com/projects/lightbox2/

  1. 上記にアクセスし、「Download」ボタンからダウンロードしたら、zipファイルを解凍し、「dist」フォルダを開く。
  2. distフォルダの下のimagesの中に入り、画像をすべてmypf_2のimagesフォルダにコピーする
  3. distフォルダのcssフォルダに入り、lightbox.min.cssmypf_2cssフォルダにコピーする
  4. distフォルダのjsフォルダに入り、lightbox.min.jsmypf_2のjsフォルダにコピーする

読み込む

  1. bodyのとじタグあたりにあるscriptタグのうち、app.jsのひとつ手前<script src="js/lightbox.min.js"></script>を足す
  2. headタグ、app.cssのひとつ手前に<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">を足す

※.minは圧縮されたファイルのこと

ここまでだと、単に「大きく出来るファイル」を読み込んだだけ。 最後、必要なのは「大きく出来るファイルを実行する」という命令を出す必要がある。

命令

lightboxを使って、クリックして画像を大きくするには、画像の周りをaタグで囲んで、リンクに画像を指定し、さらにrel要素にlightboxをしていしてあげる必要がある。 意味不明だとは思いますが、実際には以下のようにHTMLを足す。

<div class="work">
  <a href="images/1.jpg" rel="lightbox">
    <img src="images/1.jpg">
  </a>
  <div class="caption">
     <p>Sanrio New Grad Poster</p>
     <p class="credit">Illustration</p>
  </div>
</div>

imgタグはこれまで通りサムネイルの役割を果たしていて、 追加でaタグにて囲ってあげることでクリックできる状態にしています。

これで、サムネイルをクリックしたときに画像が大きく。

すべてのwork以下の画像に、aタグを付けてみよう。

スマホ対応

  • index.htmlに「ビューポート」を追加
  • cssに「メディアクエリ」を追加
  • デベロッパーツールを使用し、モバイルでの見た目を確認する
  • 一つ一つデザインしていく
  • 完成

htmlファイルに「ビューポート」を追加

ビューポートは、ディスプレイの幅に合わせてサイトの横幅を変えるための仕組み。 これと次の「メディアクエリ」はセットで扱う。

ということで

以下のコードをタグの中に書く。場所はどこでもいい。

<meta name="viewport" content="width=device-width, initial-scale=1">

これで完了。次はcss

cssファイルに「メディアクエリ」を追加

メディアクエリは、要は「幅に合わせたCSSをつくろう!」という仕組み。 これは、CSSをサイズなどの条件によって適用制御するための仕組み。 どういうことかというと...

たとえば、以下の図を見てほしい。

f:id:dorak:20170123185111j:plain

図の繰り返しになるが、要は 「横幅が480px以下のときはこのCSS!」

「それ以外のときはこのCSS!」ということがしたいのです。

では、それをどう書くか。 以下のように書いてみる。CSSファイルを開く。

@media (max-width: 480px) {

/*
この中のCSSは、ディスプレイの幅が480px超えたら無視されます!
*/

}

確認してみる。 元の状態はこちら。

f:id:dorak:20170117092508p:plain

さて、手元のCSSファイルを開いて、

@media (min-width: 480px) {
.informations {
  position: fixed;
  width: 100%;
  color: white;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
}

.title {
  float: left;
  font-weight: bold;
}

.navigation {
  float: right;
}

.navigation p {
  float: left;
  margin-left: 12px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

.keyvisual {
  background: url(../images/cover.png) center center no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
}

.subhead {
  display: block;
  font-size: 20px;
  text-align: right;
}

.works {
  max-width: 960px;
  margin: 80px auto 0 auto;
  margin-top: 80px;
}

.footer {
  background: white;
  text-align: center;
  font-size: 12px;
}

.copyright {
  padding: 40px 0 35px 0;
}

.work {
  float: left;
  width: 33.3333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px 40px 15px;
}

.work:hover img {
  transform: scale(1.05);
}

.work img {
  transition: transform ease-in-out 0.2s;
}

img {
    width: 100%;
    border-radius: 8px;
}

.credit {
  font-weight: normal;
}

.caption {
  margin-top: 12px;
}

.contact {
  text-align: center;
  margin: 40px 0 80px 0;
}

.button {
  font-weight: bold;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #0099e5;
  transition: color,border-color,background ease-in-out 0.2s;
  color: #0099e5;
  text-decoration: none;
}

.button:hover {
  color: white;
  background: #0099e5;
  border: 2px solid #f4f4f4;
}
}

}

記入終わったらブラウザの幅を広くしたり縮めたりする。めっちゃ縮めるとCSSが外れるのがわかると思う。記述をここで再確認。

まずはこれ。

@media (min-width: 480px) {
...
}

これは、このカッコ{}の中にかいたCSSが当たるのは480pxが最小サイズという意味になる。480pxよりも幅が狭くなるとCSSが外れる。 反対に、

@media (max-width: 480px) {
...
}

としたときは、CSSが当たる最大サイズが480pxとなる。480pxをブラウザの幅が超えたときはCSSが外れる。

ちなみに、480pxというのはモバイルのサイズ。

ということは、

480px以下のときのデザインと480px以上のデザインをつくってあげれば「モバイルとそれ以外(PC)のデザイン」となる。

つまり、以下のようにメディアクエリを2つ用意して上げれば良いとなる。PC用と、モバイル用。

@media (max-width: 480px) {
.informations {
  position: fixed;
  width: 100%;
  color: white;
  z-index: 2;
  font-size: 12px;
  font-weight: bold;
  padding: 12px;
}

.title {
  float: left;
  font-weight: bold;
}

.navigation {
  float: right;
}

.navigation p {
  float: left;
  margin-left: 12px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

.keyvisual {
  background: url(../images/cover.png) center center no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
  top: 50%; left: 50%;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
}

.subhead {
  display: block;
  font-size: 20px;
  text-align: right;
}

.works {
  max-width: 960px;
  margin: 80px auto 0 auto;
  margin-top: 80px;
}

.footer {
  background: white;
  text-align: center;
  font-size: 12px;
}

.copyright {
  padding: 40px 0 35px 0;
}

.work {
  float: left;
  width: 33.3333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px 40px 15px;
}

.work:hover img {
  transform: scale(1.05);
}

.work img {
  transition: transform ease-in-out 0.2s;
}

img {
    width: 100%;
    border-radius: 8px;
}

.credit {
  font-weight: normal;
}

.caption {
  margin-top: 12px;
}

.contact {
  text-align: center;
  margin: 40px 0 80px 0;
}

.button {
  font-weight: bold;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #0099e5;
  transition: color,border-color,background ease-in-out 0.2s;
  color: #0099e5;
  text-decoration: none;
}

.button:hover {
  color: white;
  background: #0099e5;
  border: 2px solid #f4f4f4;
}
}

@media (min-width: 481px) {
  .informations {
    position: fixed;
    top: 16px;
    left: 16px;
    width: 100%;
    font-size: 12px;
    z-index: 1;
    color: white;
  }

  .navigation a {
    color: white;
    font-size: 10px;
  }

  .keyvisual {
    background: url(../images/cover.png) center center no-repeat;
    height: 40vh;
    width: 100%;
    position: relative;
    background-size: cover;
  }

  .tagline {
    color: white;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    bottom: 20px; right: 20px;
  }

  .subhead {
    font-size: 12px;
    display: block;
  }

  #masonry {
    margin: 40px auto 0 auto;
    width: 80%!important;
  }

  .work {
    margin-bottom: 30px;
    width: 100%;
  }

  .work img {
    width: 100%;
    border-radius: 12px;
  }

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

  .credit {
    font-weight: normal;
  }

  .contact {
    text-align: center;
    margin: 40px 0 80px 0;
  }

  .button {
    font-weight: bold;
    padding: 16px;
    border-radius: 8px;
    border: 2px solid #0099e5;
    transition: color,border-color,background ease-in-out 0.2s;
    color: #0099e5;
    text-decoration: none;
  }

  .footer {
    background: white;
    text-align: center;
    font-size: 12px;
    padding: 16px 0;
  }
}

モバイルのデザインをすすめる

例示したものはあくまで例であり、実際はもっと素敵なデザインを考えることができる

Academia 2

アカデミア2回目

アジェンダ

  • モジュールのつくり方を覚える
  • クオリティを上げたPFサイトをつくってみる
  • サイトを分析し、参考にできるようにする

前回のハイライト

前回はWebへの入門編だった。今回からはより実践的な技術とデザインを見ていく。みなさんが使えるようになった技術は以下の通りだ。

  • 画像を表示させ、並べる
  • 画像への角丸など、多少の工夫を入れることができる
  • 色の変え方
  • 文字の揃え方
  • 余白のつけ方

今日つくりたいもの

f:id:dorak:20170610111759p:plain

どんな技術で作られているか

前回よりちょっとだけパワーアップしているだけ、と感じる人もいればなんのことかわからん、という人もいるだろう。正しいのは前者で、これは「前回よりちょっとパワーアップしているだけ」。つまり、もうちょっとテクニックを覚えるだけでつくれる。

全体感が掴めたところで、個別のテクニックを見ていく。

モジュールのつくり方

まずは今日の用意

作業を始める前に、まずは基本となるコードを入れておこう。 workspaceフォルダの中に、mypf_2という名前のフォルダをつくろう。これがプロジェクトフォルダになる。

プロジェクトフォルダがつくれたら、次はファイルとファイルをまとめるフォルダ。こちらは、前回と同じく、以下をつくる。

  • index.html
  • css (フォルダ)
  • images (フォルダ) 持ってきた画像を入れる

f:id:dorak:20170610111902p:plain

次。HTMLを整える。前回も書いたが、HTMLには最初に書くお決まりの構成がある、ということ。まずはAtomを立ち上げ、index.htmlを開き、以下をサクッとコピペ。

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  </head>
  <body>
  </body>
</html>

ここで復習。app.cssを読み込むタグを上記に書いてみましょう。

答えは以下。

<!doctype html>
<html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
   <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
  </body>
</html>

Reset CSSを読みこむ

ブラウザでは、タグに対応するデフォルトのデザインが用意されている。たとえば、h1タグを打ってみると勝手に太字かつ大きな文字になって表示されるはずだ。これらをブラウザのデフォルトスタイルという。

デフォルトスタイルはあたらしくデザインをつくっていくときに邪魔なので、「Reset CSS」というスタイルを打ち消すCSSを読み込むことで無効にしていく。今回は上記に入れたが、次回以降自分で何かを作る際には必ず入れよう。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

これを一応解説しておくと、CSSを読み込むhrefの部分にリンクが書かれている。このリンクにアクセスすると実際のCSSが見れる。

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

CSSはこんな読み込み方も出来るということ。

モジュールとは

部品のこと。前回はボタンをつくった。Webサイトはすべての要素を「部品」として捉える。何故かと言うと、使いまわせるから。一度ボタンを作れば、コピペするだけで使いまわせる。もう一度作る必要はない。

画像 + キャプションという構成でギャラリーをつくる

f:id:dorak:20170610112031p:plain ← これのこと

さて、前回までの理解ですすめるならば以下のタグでいけると思うかもしれない。

<img src="images/1.png">
<p>Sanrio New Grad Poster</p>

ぱっと見うまくいった。 じゃあこれを並べていこう。となったときにうまくいかない。

これをどうやって並べるか

これ、前回と同様<img>タグをおけば作れるようにみえるかもしれない。 けれども、それだけだとこのようには並ばない。なぜか。 ためにしやってみよう。

<img src="images/1.png">
<p>Sanrio New Grad Poster</p>
<img src="images/2.png">
<p>How to make portfolio</p>

f:id:dorak:20170610112228p:plain

なんか思うとおりに並ばないはず。前回は、画像はとりあえず書くだけで並んだ。なぜでしょうか。答えは、「ブロックレベル要素」「インラインレベル要素」の性質にある。

前回の復習として、以下を引用

ブロックレベル要素は、内部のテキストや画像といったデータの長さ(幅)に関わらず常にブラウザの幅いっぱいに広がるという特性を持っている

インラインレベル要素は、ブロックレベル要素の逆で、中に書いたテキストやデータの幅までしか広がらない。

imgタグはインラインレベル要素、pタグはブロックレベル要素。 だから上記のようになる。それぞれ、こんなタグがありましたね、というものも載せておく。

ブロックレベル要素

  • div
  • p

インラインレベル要素

  • a
  • span
  • img

ブロック要素が幅いっぱいまで広がる、から並ばないのなら、pタグをインラインレベル要素のタグで置き換えたら?

<img src="images/1.png">
<span>Sanrio New Grad Poster</span>
<img src="images/2.png">
<span>How to make portfolio</span>

どうでしょうか。今度は、ならんだけれども意図した感じになっていない。 これはインラインレベル要素の特性を考えたら当然の結果です。HTMLはこれを「段落の中の要素」としてしかみてないからこうなってしまう。

では、どうしたらいいか。答えは、CSSで横並びにする命令があるのそれで並べる となる。

このことはいくつかのことがらを理解する必要があるので、順を追ってみていく。

ブロック要素(divタグとか)でグループをつくる

さきほどみたコードは以下。 これだと、何個imgタグつけても思い通りにならばないので、divタグで囲う

before

<img src="images/1.png">
<p>Sanrio New Grad Poster</p>

after

<div>
    <img src="images/1.png">
    <span>Sanrio New Grad Poster</span>
</div>

こんな感じとなる。見た目は変わらない。でも、これがCSSで並べる際には重要なのだ。理由は後述する。

もうひと工夫、このままだとやや扱いづらいので、divタグにクラスをつけておこう。

<div class="work">
    <img src="images/1.png">
    <p>Sanrio New Grad Poster</p>
</div>
<div class="work">
    <img src="images/2.png">
    <p>How to make portfolio</p>
</div>

並べるためのCSSの命令

さて、これで並べる準備は整った。 あとはCSSの命令を入れるだけだ。さきほどdivタグにつけたクラスworkに対して、並べるための命令を書いていく。app.cssを開こう。

.work {
    float: left;
    width: 300px;
}

img {
    width: 100%;
}

どうだろうか。この命令は、ブロックレベル要素やインラインレベル要素を本来の役割である幅の概念から解放し、コンテンツの幅に合わせてボックスの幅を規定 し, 浮かせ てから 左右どちらかに寄せる のだ。左右どちらか、はfloatのあとの値として設定する。float: left;のleftの部分。

f:id:dorak:20170610112332p:plain

うまくならんでるのがわかるはずだ。 余談だが、imgタグに対して幅100%を指定しているのは、親要素となるdivで幅を指定したから。でも、画像にはもともとのサイズがあって、大きい場合は親要素の幅を無視して広がるのだ。だから、width: 100%;としてあげることで、親要素いっぱいまで広がるように(=親要素と同じ幅に)してあげることにした。

なぜdivで囲うのか

floatという命令をあてたいとき、divでimgとpタグをまとめなければどうなるか。おそらくimgタグとpタグそれぞれにつけるといいのでは?と思うのではないだろうか。これだと、全部横並びになる。うまくいかない。そうではなくて、画像とテキストをグループみたいにして、そのグループに対して「並べる命令」をあてる...としたい。であれば、画像とテキストをdivで囲ってあげればどうだろうか。意図した挙動になるはずだ。

これがHTMLのグループ化。難しく言うとネスト化とも言う。 <div>タグの中にimgpが入っていて、divはそれをまとめている。このように、複数のタグをグルーピングすることはHTMLでは日常茶飯事なので、ぜひ使ってみて欲しい。

そして、重要な呼び名についての解説をしておく。

親要素、子要素

グループ化したHTMLのタグは、それぞれ親子と呼ばれるようになる。 さきほどの例だと、imgとpを囲うdivが、imgとpがである。これは相対的な呼び方で、もとを正せば全部htmlタグの子要素である。何が親で何が子かは、そのとき基準にするタグで変わってくる。例えば、

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="work">
      <img src="images/1.png">
      <p>Sanrio New Grad Poster</p>
    </div>
    <div class="work">
      <img src="images/2.png">
      <p>How to make portfolio</p>
    </div>
  </body>
</html>

こんなコードがあって、<link>タグの親要素は?聞かれたらどうだろうか。ぜひ考えてみて欲しい。

     

floatに話を戻す。なぜdivで囲うか、は「親要素」だけにfloatをあてたいから、ということだった。imgとかpにあてると全部横並びになってしまうから、それらをまとめた親要素にだけfloatをあてるためのグループ化。

floatという命令

floatという命令はややこしい。なぜなら、floatの指定がされているタグは、「本来のブロック要素やインライン要素が持っていた幅の概念」を無視するから。

もともと、ブロック要素はブラウザの幅100%で広がるものだった。そのブロック要素に幅を300pxとかしていしても、次に続く要素は並ばない。なぜかというと、ブロック要素の幅は常にブラウザの幅100%だからだ。幅を300pxと指定した場合、300pxになるのは「ブロック要素のコンテンツ」なのだ。コンテンツとは、テキストなどのデータである。そして、300pxと指定した場合、コンテンツは300pxになるが残りは余白が挿入される。これがHTML・ブロック要素の仕様である。

f:id:dorak:20170610112813p:plain

floatを指定すると、300pxと指定したらほんとに300pxになるのである。 で、要素が300pxになって余白も消えればどうなるか。次に続く要素が並べるスペースができるのだ。 だから続く要素も並ぶようになる。ここが非常に重要。

floatの問題

ここまでの説明で、floatはなんでも並べられる万能プロパティだと思うかもしれない。まあ万能だ。しかし、floatはHTMLのルールを強制的に捻じ曲げるプロパティなので、いくつかの問題が起きる。それは後述。

本題にもどして

f:id:dorak:20170610111759p:plain

再確認すると、つくりたいのはこんな感じ。 HTMLにクレジットも入れておこう。

    <div class="work">
      <img src="images/1.png">
      <p>Sanrio New Grad Poster</p>
      <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
    </div>
    <div class="work">
      <img src="images/2.png">
      <p>How to make portfolio</p>
      <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
    </div>

さて、次はCSS

.work {
  float: left;
  width: 300px;
  font-size: 12px;
  font-weight: bold;
}

.work img {
  width: 100%;
}

.credit {
  font-weight: normal;
}

.workにfont-size: 12px;とすることで、work内のすべてのテキストのサイズを12pxで設定できるようにした。そしてfont-weight: bold;で太字にしてある。

もともとつくりたいものでは、クレジット部分がレギュラーウェイトなので、.creditに対してはfont-weight: normal;をかけた。もっというと画像とキャプションの距離が気になる。

なので、キャプション全体を<div class="caption">でくくってあげて、上部に余白を足すことにした。

また、画像に対して角丸が付いているので、角丸も付けてみる。

今のCSS全体はこれ。

.work {
  float: left;
  width: 300px;
  font-size: 12px;
  font-weight: bold;
}

.work img {
  width: 100%;
  border-radius: 8px;
}

.caption {
  margin-top: 12px;
}

.credit {
  font-weight: normal;
}

これで一段落。

3列にする

これは先日やったこと。

.workwidth: 33.333333%;と書けばOK。もともとwidth: 300px;と書いてたところは消す。

    <div class="work">
      <img src="images/1.png">
      <div class="caption">
        <p>Sanrio New Grad Poster</p>
        <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
      </div>
    </div>
    <div class="work">
      <img src="images/2.png">
      <div class="caption">
        <p>How to make portfolio</p>
        <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
      </div>
    </div>
    <div class="work">
      <img src="images/3.png">
      <div class="caption">
        <p>Creative way for job hunting</p>
        <p class="credit">AD + D: shusay</p>
      </div>
    </div>
.work {
  float: left;
  width: 33.333333%;
  font-size: 12px;
  font-weight: bold;
}

.work img {
  border-radius: 8px;
  width: 100%;
}

.caption {
  margin-top: 12px;
}

.credit {
  font-weight: normal;
}

これでちゃんと3列になった、が画像間の余白がないのでめちゃめちゃ変。余白を入れる。

余白には、外部余白(margin)と内部余白(padding)があった。今回はmarginを入れてみる。とりあえず左右に入っていればいいので、以下のようにする。

margin: 0 15px;

これは、上下のmarginは0で、左右に15pxずつ入れる、ということ。ショートハンドという書き方で、展開してちゃんと書くとこうなる。

margin: 0 15px 0 15px;

さて、見てみよう。

f:id:dorak:20170610112544p:plain

3列が崩れた。2列になった。これはどういうことか。

widthの仕組み

上のfloatの解説で、widthはコンテンツの幅を決めるプロパティと話した。つまり、33.3333333%になっているのはコンテンツ部分だけで、余白は含まれない。 だから、余白を足すと3つのモジュールでブラウザ幅を超える幅となり、入り切らなくなって下にいってしまうのである。じゃあどうすればいいのか。

CSSには、余白までをコンテンツとして計算してくれるプロパティがある

box-sizing: border-box; がそれ。これはなぜCSSのデフォルトになっていないのか理解に苦しむ。さっそく指定してみよう。ちなみに、このbox-sizingプロパティは便利なので全体に指定したほうがいい。

app.cssの一番上に、次のように足そう。

* {
    box-sizing: border-box;
}

この*は、すべてのタグにこのスタイルをあてるという意味。

さて、ブラウザを再読込してみよう。

f:id:dorak:20170610112544p:plain

 

...まだ変わらない。どういうことか。 答えは、余白の捉え方にある。

ボックスモデルと余白

タグにはボックスモデルというものがある。 具体的には次のような図だ。

f:id:dorak:20170610112635p:plain

box-sizing: border-box;とは、その名の通りborder、つまり境界線までをコンテンツとして大きさの計算をするプロパティと値である。

marginはborderの外なのである。

ここ超重要なのでもう一度。

marginはborderの外

だから、3列に揃えようと思った時、余白はpaddingで指定する必要がある。paddingなら、borderの内側の余白だからだ。もう一度、ここまで書いたCSSを見てみる。

* {
  box-sizing: border-box;
}

.work {
  float: left;
  width: 33.333333%;
  font-size: 12px;
  font-weight: bold;
  margin: 0 15px;
}

.work img {
  border-radius: 8px;
  width: 100%;
}

.caption {
  margin-top: 12px;
}

.credit {
  font-weight: normal;
}

margin: 0 15px;

これだと3列になるはずがない。だってコンテンツには33.33333%を指定していて、合計の幅はギリギリ100%のところまできてるのに、さらにmarginが指定されているからだ。marginを指定することで完全にはみでた。

ということで、marginをpaddingに変えればうまくいくのだ。

* {
  box-sizing: border-box;
}

.work {
  float: left;
  width: 33.333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px;
}

.work img {
  border-radius: 8px;
  width: 100%;
}

.caption {
  margin-top: 12px;
}

.credit {
  font-weight: normal;
}

f:id:dorak:20170610112722p:plain

今回はうまくいった。

floatの問題

footerをつける

次は、簡単にできそうだからfooterをつけよう。footerを付けるには、そういうHTMLを書いてあげればいい。その前に、作品リストは作品リストでグループ化してあげよう。よく見ると作品リストとfooterでは背景色が違うからだ。

    <div class="works">
      <div class="work">
        <img src="images/1.png">
        <div class="caption">
          <p>Sanrio New Grad Poster</p>
          <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/2.png">
        <div class="caption">
          <p>How to make portfolio</p>
          <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/3.png">
        <div class="caption">
          <p>Creative way for job hunting</p>
          <p class="credit">AD + D: shusay</p>
        </div>
      </div>

      <div class="footer">
        <p class="copyright">©Shusay</p>
      </div>
    </div>

こうなった。 つまり、.workをまるっとまとめるdivをつけて、クラスは.worksとした。そして、その.worksと同じ階層にクラスを.footerとしたdivを置いた。

さて、さっそくCSS.worksの背景にグレーを、.footerの背景に白をつけよう。

.works {
    background: #f4f4f4;
}

.footer {
    background: white;
}

背景に色がつかない...真っ白...

これには、floatとボックスの特性がある。

floatの特性、ボックスの特性

上述したとおり、floatはコンテンツを浮かせる。比喩でも何でもなく、浮かせるのだ。で、ボックスの高さは中身のコンテンツによって決まる。ということは、ボックスの中のコンテンツが浮いていたら?

答えは、高さがなくなる、となる。さてどうするのか。.worksに対してbackground: #f4f4f4;を指定したが、そもそも.worksに高さがないのだ。これだとどうなるか。当然色がつかない。だって高さ0(なにもない)だから。]

f:id:dorak:20170610112923p:plain

「clearfix」floatで浮かせたコンテンツの高さを、親要素に認識させる

ちゃんと解決策はある。floatしたコンテンツの高さを計算して、親要素に高さとして与えるという方法があるのだ。 それがclearfixという方法である。

どうやってやるか、だが、現段階で細かい説明をしてもかえって混乱するだけなので、ここではやり方だけを示す。

clearfixのやり方

cssの一番上に次のコードを貼る

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

② floatした要素の親要素に、クラス「clearfix」をつける

<div class="works clearfix">

※ クラスは、↑のように「半角スペース区切り」で複数つけられる

基本、floatしたら親要素にはclearfixをつける

見出しがすべてだが、必ずそうしよう。そうしない理由がないし、不具合の原因になる。さて、これで再読込するとどうなるだろうか。

ちゃんと背景色が分かれた。.worksにも高さが生まれた。

デベロッパーコンソール

要素の高さやどんなCSSがついているかはブラウザに標準で付いている「デベロッパーコンソール」というものを使うことで確認できる。

f:id:dorak:20160602102457p:plain

立ち上げ方

サイトを副クリック(winは右クリック)して「検証(もしくは要素を検証)」を選択する

ブラウザ

ほとんどのブラウザについている機能だが、使い勝手には差がある。ここではGoogle Chromeデベロッパーコンソールを例としているので、そちらを使うようにして欲しい。

見方

どんなHTMLなのかを確認する

f:id:dorak:20160602102902p:plain

ある要素にどんなスタイルがついているかを確認する

f:id:dorak:20160602102801p:plain

本題に戻して、どんどんつくっていく。

floatの問題がなくなったので、画像をどんどんいれよう(9枚くらいになるといい)

<div class="works clearfix">
      <div class="work">
        <img src="images/1.png">
        <div class="caption">
          <p>Sanrio New Grad Poster</p>
          <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/2.png">
        <div class="caption">
          <p>How to make portfolio</p>
          <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/3.png">
        <div class="caption">
          <p>Creative way for job hunting</p>
          <p class="credit">AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/4.png">
        <div class="caption">
          <p>Sanrio New Grad Poster</p>
          <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/5.png">
        <div class="caption">
          <p>How to make portfolio</p>
          <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/6.png">
        <div class="caption">
          <p>Creative way for job hunting</p>
          <p class="credit">AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/7.png">
        <div class="caption">
          <p>Sanrio New Grad Poster</p>
          <p class="credit">Cl: Sanrio, LTD. / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/8.png">
        <div class="caption">
          <p>How to make portfolio</p>
          <p class="credit">Cl: Kuwasawa Design School / AD + D: shusay</p>
        </div>
      </div>
      <div class="work">
        <img src="images/9.png">
        <div class="caption">
          <p>Creative way for job hunting</p>
          <p class="credit">AD + D: shusay</p>
        </div>
      </div>
</div>

わざわざ貼るまでもないかもしれないが、こんな感じだ。

画像が広がってみっともないから、幅を決めて中央寄せ

ダイナミックかも知れないが、ダイナミックすぎてサムネイルとしての役割を超えているので、全体的に幅を設定する。もとのイメージをみてもらうと分かるかもしれないが、ギャラリーのところだけすこし狭めにしてある。

ということで、次のようにCSSを書いてみよう。

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

margin: 0 auto;は、960pxにしたコンテンツを中央寄せする仕組みだ。

※TIPS: 960pxとか書いたがこれは適当、というわけではない。もともとデジタルはほとんどが4もしくは8の倍数でできている。1920x1080(fullHD), 1バイト, マテリアルデザインガイドラインなど...4か8で割り切れるのだ。まあ8の倍数は4で割り切れるのだが...大本は1バイトが8ビットからなるという、コンピュータの仕組みが関係しているが、ともかくデジタルのディスプレイはそのほとんどが4もしくは8の倍数で定義されており、その倍数に則り各種サイズを決めていくとベターだ。960pxは、その中でもPCサイズの「最小幅」と言えるだろう。最小幅でつくっておけば、見切れてしまうことはない。

背景のグレーをページ全体にかける

さきほどは.worksにかけたが、今回の中央寄せで.worksは960pxになってしまった。つまり、こんな感じになるのだ。

f:id:dorak:20170610113225p:plain

なので、.worksに背景色をつけるのはやめ、ページ全体、すなわちbodyタグにつけよう。そうすると、.footerの色もグレーになってしまうので、.footerには白の背景色を足す。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

body {
  background: #f4f4f4;
}

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

.work {
  float: left;
  width: 33.333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px;
}

.work img {
  border-radius: 8px;
  width: 100%;
}

.caption {
  margin-top: 12px;
}

.credit {
  font-weight: normal;
}

.footer {
  background: white;
}

となる。いい感じになってきた。

ボックスの行間隔をもうすこしあける

今は行間隔がほとんどない。ので、ボックスの下部に余白が生まれるようにしよう。paddingの値をいじれば大丈夫だ。paddingの記法を再確認。

padding: ↑px →px ↓px ←px;

となるので、

.work {
  float: left;
  width: 33.333333%;
  font-size: 12px;
  font-weight: bold;
  padding: 0 15px 40px 15px;
}

とする。さて、ここはこの辺にして次に進む。

全画面に広がる写真

を、実現するにはどうするかを見ていく。 これもすでに使ったテクニックで、background-image: url();というもので実現可能。ここからさきはそう難しいことはないので、ガンガン進む。もし全画面写真で適当なものがなければ、以下の画像を使ってください。

f:id:dorak:20170610113304p:plain

作例の構成要件

作例では、まずブラウザの見えてる部分全体に写真が広がっている。

幅いっぱいに画像を表示

これは、HTMLの画像表示ではできない部分だ。なので、CSSの「背景画像プロパティ」を使う。

まずはHTMLの用意から。bodyの開始タグのすぐ下に入れよう。位置関係でいうと.worksの上。

<div class="keyvisual"></div>

次、画像を表示するためのcss

.keyvisual {
    background: url(../images/cover.png);
}

CSSから画像を読み込み

ここ注意!画像を表示する時にまた画像までのパスを書いてるが、あたまに..ってついてる。これは、「一つ上のフォルダに戻る」という意味。今回画像を読み込むのはapp.cssからなので、当然パスを書く基準もcssからになる。で、app.csscssフォルダの中に入っていて、imagesフォルダに向かうには一度cssフォルダを出てからimagesフォルダに入らないといけないということだ。その「一つ上に戻る」を表現するのが..なのである。パスを指定するのは..(一つ上)と/(ひとつ下)で完全に表現できるのだ。もちろん、同じcssフォルダ内に画像があればこんなことは考えずに画像名だけを書けばいいのだが、cssフォルダ内に画像って意味不明なのでひとまずやめておく。

本題にもどって、これで再読込してみよう。           なにも表示されません。 なんでか。それは、.keyvisualになにも入ってなくて、高さがないから

ということは、.keyvisualに高さを設定すればうまくいきそう。 けど、「ブラウザの見えてる部分いっぱいに高さを設定する」ってどうやるんだろうか。ただheight:100%ってやると見えてない部分(=スクロール刷る部分)も高さとして計算されるので、縦に長いサイトだととんでもないことになる。

ブラウザの見えてる部分の高さいっぱいにサイズを指定する

この実現方法は意外と簡単で、csswidth: 100%;height: 100vh;とする。vhとは、viewport heightの略で、要は見えてる部分の高さということ。数字は割合だ。1vhだったら、見えてる部分の高さの1%、100ならとうぜん100%。という風に決まっていく。

さて、cssはこんな感じになっているはずだ。

.keyvisual {
  background: url(../images/cover.png) no-repeat center center;
  height: 100vh;
}

これで表示されたはずだ。

文字入れ

keyvisualにキャッチコピーを入れよう。 これは単純で、.keyvisualのdivの中にpタグで入れてあげればいいだけだ。

<div class="keyvisual">
    <p class="tagline">Fuzzy Graphics<sapn class="subhead">JUST A LITTLE STRANGE THING</span></p>
</div>

で、中の文字は白くする。

.tagline {
  color: white;
}

f:id:dorak:20170610113428p:plain

上の方に白い文字が現れた。 さてこいつをいい感じに配置していきたい。どうしたらいいか。

インライン要素は、強制的にブロック要素に変換できる

displayというプロパティがある。cssdisplay: block;という風に記述してあげれば、インライン要素だろうがなんだろうがブロック要素になる。で、ブロック要素はかならず改行される。この特性を活かして、.taglineの中にある.subhead(span要素でインライン要素)を改行したい。

.subhead {
    display: block;
}

f:id:dorak:20170610113455p:plain

これで改行された。

表示位置を自在に操る

positionというプロパティがある。このプロパティを極めれば、Webでのレイアウトは思うがままだ。グラフィックデザインソフトと遜色ないデザインだって作れる。ということで、早速見ていこう。

positionとは

その名の通り、HTMLの各要素における「位置」の決め方を指定するものだ。値は、代表的なものとして以下がある。

  • static ... 初期値。HTMLのルール則ったもので、レイアウトに自由度はない
  • relative ... position: relative; を指定すると、top, left, bottom, rightというプロパティが指定できるようになる。それぞれ、親要素の左上からみてどれだけ動かすかを値としてとる。注意点は、相対的に動かすので、動かす前のところに幅や高さが残る、ということ。なので、relative単体ではあまり使わない。
  • absolute ... 絶対位置指定。これを指定すれば、top, left, bottom, right が使えるようになる。位置は絶対指定となるので、指定した位置に移動する。移動前の場所には当然何も残らないので、直感的といえる。レイヤーをイメージしてもらえればわかりやすいかもしれない。position: absolute;を指定すれば、親要素よりも1つ上のレイヤーとなる。したがって、他の要素に重ねることもできる。注意点は、親要素にrelativeを指定しないといけない点。
  • fix ... スクロールしても位置を固定する。ヘッダーを固定したい場合に便利。

position: absolute;とtop, rightで動かす

親要素にrelativeを、実際に動かす子要素にabosluteを指定すると、top, rightと言った移動プロパティで位置を動かせる。 cssはこうだ。

.keyvisual {
  background: url(../images/cover.png) no-repeat center center;
  height: 100vh;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
}

さて、これだけだとまだ動かない。 動かすには、次のcssを追加する必要がある。

.keyvisual {
  background: url(../images/cover.png) no-repeat center center;
  height: 100vh;
  position: relative;
}

.tagline {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
}

位置が移動した。

位置を移動させる手順まとめ

  1. 動かしたい要素にposition: absolute;を指定
  2. 動かす要素の親要素にposition: relative;を指定
  3. 動かす要素にtop, left, right, bottomのうち使いたいものを使う。指定方法はtop: 14px;top: 30%;のように指定できる。

ここが上手なレイアウトをWebで出来るかどうかの分かれ目!

文字の大きさ調整

ダイナミックなデザインにしたいので、文字の大きさを調整する。CSSは以下。

.tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 64px;
  font-weight: bold;
  font-style: italic;
}

.subhead {
  display: block;
  font-size: 20px;
  text-align: right;
}

font-sizeを64pxにしたり、斜体を使ったりしている。

もう少し。ヘッダーをつくる

ずっとついてくるヘッダーをつくった。そしてページに重なっている。一つ一つみていけば作り方は難しくないので、つくってみよう。

まずはHTMLの用意から。今回は左右に文字が表示されており、右がページタイトル、左がメニューとなっている。したがって、今回もグルーピングしてfloatをしてあげる必要がある。以下のようなhtmlをまずはつくろう。

<div class="informations clearfix">
    <h1 class="title">A Graphic Designer / Shusay Tanaka</h1>
    <div class="navigation clearfix">
        <p><a href="index.html">Home</a></p>
        <p><a href="about.html">About</a></p>
    </div>
</div>

floatをかけるのは、もちろん.title.navigationに対してだ。1点注意したいのが、.navigationは右に寄っているのでfloat: left;ではなくfloat: right;となる。

加えて、メニューの「home」「about」も並んでいるので、そっちにもfloatをかける必要がある。

取り急ぎ、HTMLの現時点での反映はこんな感じ。

f:id:dorak:20170610113552p:plain

これをCSSでスタイリングしていく。 まずは左右にサクッとレイアウトしてしまおう。

.title {
  float: left;
}

.navigation {
  float: right;
}

はい。こんな感じ。

f:id:dorak:20170610113619p:plain

次に、メニューの中もさくっと横並びにしてしまおう。

.navigation p {
  float: left;
}

f:id:dorak:20170610113637p:plain

こんな感じ。ここで新記述。CSSでhtmlのタグを指定することを「セレクタを指定する」というが、ある要素の子要素を指定したいというタイミングがけっこうある。今回のメニューの中身もそうだ。.navigationの子要素のpタグにfloat: left;を指定したかった。そんなときは、セレクタ セレクタ { プロパティ: 値; }で指定できる。親要素 + 半角スペース + 子要素で指定できる。これは超便利なので確実に覚えよう。

ちなみに、この書き方だと「子孫要素すべて」となる。子も孫も全部指定できる。そうではなくて、直下の子要素のみ、としたい場合は 親要素 > 子要素 とすればOKだ。

ページ全体に重ねる

これはもう簡単で、position: fixed;で指定できる。position: fixed;を指定するのは、ヘッダー全体だ。このために.informationsという、ヘッダーをグルーピングするdivを用意した。

.informations {
    position: fixed;
}

再読込するとなんも表示されないはず。 これは、.keyvisualの後ろにかくれてしまったのだ。さきほどposition:absoluteのところで、「レイヤー化」の話をしたが、.keyvisualはすでに.position: relative;でレイヤーとなっている。そして、記述順的には.informationsの後にくる。そのため、.informations.keyvisualの下のレイヤーとなっているわけである。

z-index

というプロパティがあり、これはレイヤーの順番を変えられるものだ。z-index: 2と書くようにして指定できる。

.informations {
    position: fixed;
    z-index: 2;
}

f:id:dorak:20170610113717p:plain

これで.informationsが上に表示されるようになった。あとは文字色を白にして、.informationsの幅を100%にしたあと、paddingで余白を設定すれば「いい感じ」になる。

.informations {
  position: fixed;
  z-index: 2;
  width: 100%;
  color: white;
  padding: 12px;
}

リンクの文字色変わらない問題

リンクはちょっと特殊である。 明示的に色を指定してあげなければ変わらないのだ。親要素に色を指定すれば変わってほしいけど。

ということで、さきほど覚えたCSSでHTMLの子要素を指定する方法を基に、リンクに色を付けよう。また、リンクのアンダーラインがいらないのでそれも消そう。

.navigation p {
  float: left;
  font-size: 12px;
  font-weight: bold;
  margin-left: 16px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

ヘッダー全体のCSSを見るとこんな感じ。

.informations {
  position: fixed;
  z-index: 2;
  width: 100%;
  color: white;
  padding: 12px;
}

.title {
  float: left;
  font-size:  15px;
  font-weight: bold;
}

.navigation {
  float: right;
}

.navigation p {
  float: left;
  font-size: 12px;
  font-weight: bold;
  margin-left: 16px;
}

.navigation p a {
  color: white;
  text-decoration: none;
}

これでいい感じだ。

クオリティを上げる

.worksの上部に余白

  • margin-top: 80px;を足そう

footerをゆったりさせる

  • .footerに対してtext-align: center;
  • .copyrightに対してpadding: 40px 0 35px 0;

マウスをのせたときの動き

CSSには疑似要素という概念がある。要はブラウザで起きるアクションに対して、そのアクションに紐づくスタイルをつけようということだ。マウスがのったとき、などはそのいい例である。

書き方

セレクタ:hover {
    color: red;
}

これは、マウスがのったときに、指定した要素の文字色を赤にする、というもの。今回はマウスをのっけたら画像を大きくしたい。

.work:hover img {
    transform: scale(1.05);
}

.workに:マウスがのったら 画像を { 1.05倍に大きく }

という命令。ちなみにこのtransformというプロパティ、値にはたくさん種類がある。scaleはそのひとつで、他にもrotateやscrewなど、変形に関する指定がたくさんある。transformを極めたらもはやIllustratorばりにグラフィックがつくれるようになるかもしれない。

滑らかに拡大させる

CSSでは、アニメーションを設定できる。先程の拡大はいきなりドン!って感じだったのでもっと滑らかにやってみたい。そんなときはtransition: プロパティ アニメーションの種類 アニメーションの時間;だ。

.work img {
  border-radius: 8px;
  width: 100%;
  transition: transform ease-in-out 0.2s;
}

こうすることで、transformしたときに0.2秒の時間をかけてゆっくり変化する。tranformと書かれたプロパティの項目を他のプロパティに変えれば色々なアニメーションがつくれる。例えばborderに指定すれば、線を引くようなアニメーションができるし、徐々に色が変わる、なんてことも可能。

最後に

PFなのだから問い合わせもつくって次の仕事につなげたい。

.works.footerの間に、問い合わせボタンを作ろう。クリックすればメールが起動するあれだ。

<div class="contact">
      <a class="button" href="mailto:sy_tanaka@vivivit.co.jp">仕事のご依頼はこちらから</a>
    </div>
.contact {
  text-align: center;
  margin: 40px 0 80px 0;
}

.button {
  font-weight: bold;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #0099e5;
  transition: color,border-color,background ease-in-out 0.2s;
}

.button:hover {
  color: white;
  border-color: #f4f4f4;
  background: #0099e5;
}

ということで完成。

宿題

Academia 1

アカデミア1回目

アジェンダ

HTMLとCSSに触れて、簡易的なポートフォリオサイトを作ってみる f:id:dorak:20170521110116p:plain

なんのためのスキルか

  • Webはデザイナーの可能性を拡げるスキル
    • まだまだ競争相手が少ないので、もっとも状況を好転させやすいスキル
  • 希少価値の高いデザイナーになることが大切
    • 希少価値が高くなれば、自分の希望通りのキャリアパスを取ることもできる
  • スキルの組み合わせで戦う
    • そのためのWebというスキル

そもそもHTML、そしてCSSとは

かつて、インターネットが今ほど普及していなかったころのCERN(欧州原子核研究機構)でHTMLは産声を上げた。

CERNは年間何千人という各国の研究者が、入れ替わり立ち替わり訪れる研究所。そんなところだから、「あいつの研究はどこで見れる?」「今、例の研究はどのくらい進んでいるんだっけ」ということが頻発。そして、なかなか見つからない。

そんな状況を解決するために「サーバー」と「ブラウザ」が誕生。サーバーは、今みなさんが手に持っているコンピューターのようなもの。ここに研究データを集約し、いつでも見れるようにする。これがHTMLの始まりです。

研究文書向けのHTML

そんな成り立ちなので、最初からデザインができるようになっていたわけではなく、みなさんがwordでつくる時のファイルのような見た目で文書が作れればいいとされていた。 もちろん、読み手も論文が読めればいいと思っていたので、特にデザインを気にかけることもなかった。

ところが、あるときMosaicというブラウザが登場する。 これは、「画像が表示できるブラウザ」。Mosaicの登場を契機に、広く世間に普及する兆しが生まれる。

HTMLとCSSの決定的な違い

HTMLは文書構造を記述するもの、CSSはその文書をデザインするもの。つまり、HTMLは「表示するものを記述」し、CSSはその「表示したものに色を付けたりしてデザインする」もの。

事前準備

  • Webの構築を始める前のフォルダ準備
    • Webはフォルダを適切に整理することが大切なので、まずはデスクトップに「workspace」というフォルダを用意する。この講座では、基本的にworkspaceフォルダの中ですべてが完結する。ちなみに、慣れてきたらホームディレクトリ、と呼ばれる場所にworkspaceフォルダを移動すると良い。

フォルダのつくり方(Mac編)

Finderを開き、デスクトップをクリックしたら、右側の領域で副クリックで作成可能。名前は「workspace」とする。 f:id:dorak:20170521090145p:plain

フォルダのつくり方(windows編)

エクスプローラーを開き、デスクトップをクリックしたら、右側の領域で右クリックで作成可能。名前は同様に「workspace」。

Webをつくるのに必要な技術

  • PCで文字が書けるソフトがあればつくれる
    • wordとかテキストエディットとかメモパッドでもいい

テキストエディタvscode」を使う

  • 今回使うのはvscode(英語だけど我慢しよう)
    • Downloadしてない人はココから

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

  • vscodeを立ち上げてみよう
    • 難しく見えるけどできることはテキストエディットとかのソフトと基本的に変わらない
      • ではなぜvscodeのようなエディタを使うのか?それはHTMLなどのプログラムを書く際に便利な機能がたくさん入っているから。例えばシンタックスハイライトと呼ばれる、タグに色を付けてくれる機能など。

一般的なテキストエディタで編集するHTML f:id:dorak:20170521090531p:plain

vscodeで編集するHTML f:id:dorak:20170521090550p:plain

HTMLってどんなところで使われているのか

さっそくHTMLを体験。文字を表示してみる

以下をvscodeに入力。

<p>こんにちは</p>
<p>ここは新宿です</p>

注意:<p></p>はすべて半角で書きましょう。半角で書かないとうまいこと動作しないと思います。

入力したものを保存

  • ⌘ + S(winはCtrl + S)で保存
  • 保存先を聞かれるので、workspaceの中に設定。ファイル名は「index.html」。

.htmlみたいなものは拡張子と呼ばれ、コンピューターがそのファイルは何なのかを識別するためのもの。たとえば.jpgは画像だし、.movは動画だし、.psdphotoshopのファイル。同じように.htmlはHTMLファイル、ということ。 f:id:dorak:20170521090941p:plain

workspaceフォルダを開く

workspaceフォルダには「index.html」というファイルがあるはず。workspaceフォルダってなんだ?って人はこのページの上の方にある「事前準備」を参照。

index.htmlファイルをダブルクリック

ブラウザが立ち上がる。立ち上がるブラウザは人によってまちまち。Google Chromeを使っている人であればChromeが立ち上がるし、Safariの人はSafariが立ち上がる。おすすめはGoogle Chrome。何故かはもう少し学習が進んだら分かるようになる。 f:id:dorak:20170521091042p:plain

ちょっと色も付けてみる

vscodeで開いているindex.htmlファイルを編集する

<p>こんにちは</p>となっている部分を以下のように変更

<p style="color: blue;">こんにちは</p>
<p>ここは新宿です</p>

ブラウザで開いてあるindex.htmlページを再読込する

再読込はMacなら⌘ + R、WinならF5。文字が青くなっていることが確認できるはず。 f:id:dorak:20170521091847p:plain

ここまでのまとめ

Webサイトは、このような簡単な技術の積み重ねでできている。文字を表示して、画像を表示して、色を付けたり大きさを変えたりしながらデザインを作っていく。そして、「サーバー」というコンピューターにhtmlファイルなどを置くことによって、たくさんの人がそのサイトを見れるようになる。

HTMLの文法紹介

  • HTMLでは記述にルールが存在する。Wordとかで普通に文章を書くようにはいかない。何かを表維持したければ、<>で囲う必要がある。これをHTMLタグという。
  • タグは、<>で始まり、</>で終わる必要がある。
  • 超重要なんでもう一回。
  • タグは、<>で始まり、</>で終わる必要がある。
  • これがきちんとなっていないとうまく表示されないみたいなことが起こる。
  • タグには、タグごとの役割がある

タグは、<>で始まり、</>で終わる必要がある。

だめな例

  • <p>こんにちは ※閉じタグがない
  • <p>こんにちは</p> ※アングルブラケット(やまかっこ)が全角

主要なタグの紹介

  • div -> <div></div>
  • p -> <p></p>
  • span -> <span></span>
  • a -> <a></a> リンクをつくるためのタグ
  • script -> <script></script> Javascriptを使うためのタグ

</>で終わらない例外タグ

  • img -> <img> 画像を表示するためのタグ
  • link -> <link> CSSなどの外部ファイルを取り込む際のタグ

特殊タグ

  • html -> <html></html> HTMLファイルの最初に必ず書くタグ
  • head -> <head></head> CSSやタイトルなどの設定を書き込む場所。
  • body -> <body></body> 本文を書く場所。基本的にはこのbodyタグの中を充実させていく

上2つの大雑把な違い

中にテキストを書くか否か

画像を読み込む

画像を表示するための準備

「workspace」フォルダに、用意した画像を入れる f:id:dorak:20170521100217p:plain

HTMLを編集する

画像は<img>タグを使って表示する。以下のようにindex.htmlを編集してみよう。

<p>こんにちは</p>
<img src="プロフィール用のアイコン">

※「プロフィール用のアイコン」と書いてある箇所には、自分のプロフィールアイコンファイルの名前を入れてください。

複数の画像を表示する

<img>タグを足すだけです。

<p>こんにちは</p>
<p>ここは新宿です</p>
<img src="プロフィール用のアイコン">
<img src="用意した画像">

f:id:dorak:20170521100545p:plain

「読み込み」について

  • PCは万能じゃない
    • 場所を教えてあげないと取ってきてくれない
      • 例えばみなさんが僕に「りんご取ってきてください!」って言われても、「えっりんごないよ??」となる。でも、「向かいのビルのスーパーでりんご買ってきてください!」ならすべきことが分かる。
  • それと同じで、画像ファイルひとつ表示するにしても、場所を教えてあげないといけない。
    • 人間がしっかりと世話を焼いてあげなければいけない
  • その「場所の書き方」をパスといいます。以降頻繁に使うので覚えよう。

パスの書き方

パスは、基準となるファイルから見てどの位置に保存されているかによって決まる。

今回の基準となるファイルはindex.html。このindex.htmlからみて、読み込みたいファイルはどこにあるか。 f:id:dorak:20170521100748p:plain

index.htmlと画像は同じ階層にあるといえる。つまり、なにも考えることなくファイル名を書いてあげればいい。 しかし、画像がフォルダに入っている場合はどうだろうか。

f:id:dorak:20170521100918p:plain

まずは表示したい画像がどの位置にあるかを確認する。 index.htmlと同じフォルダ内に、「images」というファイルがあって、その中に目的の画像が入っている。

フォルダの書き方

フォルダを意識した書き方をしてあげれば良い、となる。フォルダの表し方は/。 この場合だと、images/と書いてあげることでフォルダとなるわけだ。 したがって、images/画像ファイル名がパスとなる。

つまり、<img src="images/画像ファイル名">と書けば画像が表示される。パソコンに、表示させたい画像がどこにあるかを教えてあげたかたちとなる。

フォルダとファイルのかき分け

フォルダは必ずその中身が存在している。 以下のイラストのように、コンピューターシステムは必ず「フォルダ(正確に言うとディレクトリ)とファイル」で構成されていて、フォルダはファイルを格納するもの、そしてファイルはプログラムを実行するものという役割の違いがある。 f:id:dorak:20170521101824j:plain

ファイルには必ず拡張子がつく。icon.jpg/という記述はありえない。

余談

パスの指定方法には「相対パス」と「絶対パス」という2通りの考え方がある。今回は「相対パス」を勉強したが、「絶対パス」もそのうち使うことになる。今は「そうなんだ〜」と思ってもらえればOK。

思い通りに画像を表示してみる

まずは「images」フォルダをつくり、その中に今日持ってきた画像を入れよう

HTMLですべての画像を表示してみよう

考えてみよう

Webページの「デザイン」について

ここまで一段落。だいぶPFサイトの骨組みができてきた。 だけど、もっと「デザインっぽく」するにはどうしたらいいのだろう? - そこで、HTMLで表示したデータに対して、色を付けたり位置を動かしたりする「スタイリング」という考え方が出て来る。これがデザインにあたる考え方。

CSSを使う

上で、<p style="color:red;">こんにちは</p>というHTMLを出したが、このstyle="color:red;"CSSといって、HTMLにデザインを設定するための記述となる。

このCSSを使えば、どんなデザインでもできる!

CSSの一般的な事例

  • ボタン f:id:dorak:20170521102120p:plain

CSSの凄い事例

CSSの文法紹介

color: red;

つまり

何を: どのように変えるか;

と書く。上記は

color(文字色を): red(赤く変える); という意味

CSSは、上記の例でいう「何を」の部分を覚えることによって色々な表現が可能になる。

細かい箇所

何をのあとに:(コロン)、どのようにのあとに;(セミコロン)を置く。どっちを忘れてもうまくいかないので注意

主要なCSSの命令

ちょっと多いですが...

  • color 文字色を変える color: red;
  • background-color 背景色を変える background-color: #ddd;
  • background-image 背景画像を設定する background-image: url(../images/画像名);
  • border 線を設定する border: 1px(線の太さ) solid(線の形状、他には破線とか指定できる) black(線の色);
  • border-radius 角を丸くする border-radius: 3px;
  • font-weight 書体のウェイトを指定する font-weight: bold;
  • font-size 書体の大きさを決定する font-size: 16px;
  • font-family 書体を設定する font-family: Helvetica;
  • text-align 文字の揃えを設定する text-align: center; (中央揃えの場合)
  • width 対象の横幅を指定する width: 100px;
  • height 対象の高さを指定する height: 100px;
  • margin 対象の外側に余白を設定する。時計回りにピクセルを指定できる。 margin: 4px 4px 4px 4px;
  • padding 対象の内側に余白を設定する padding: 4px 4px 4px 4px;
  • position 対象の位置を決定する方法を指定する position: relative;
  • z-index 対象の重なり順を指定する z-index: 3;

ちょっと高度なことをやってみる「ボタン」編

こんなボタンをつくろう

f:id:dorak:20160920185250p:plain

まずはボタンの構成要素を考える

  • 文字色、角の形状、背景色など...

実演

<p style="background: orange; color: white; padding: 8px 12px; border-radius: 8px; width: 100px; text-align: center; cursor: pointer;">ボタン</p>

ちょっと複雑になってきた....HTMLの本来の役割(歴史)

このボタンがたくさんあったらどうなるか。 f:id:dorak:20170521102628p:plainf:id:dorak:20170521102628p:plain

こんなことになる。 こんなHTMLの書き方してたら、あとで見てものすごい嫌な気分になるはず。もう触りたくない!と。それは昔のHTMLを書く人も思っていた。一緒にしたらなんのこっちゃとなるので、なるべく分けたいと。

そこで、昔の人は別のファイルで管理することにした。 CSSをHTMLから切り離して、それぞれ別のファイルとして使う、と。

どうやってCSSを切り離す?「読み込み方」について

HTMLは、CSSファイルを読み込むことができる。 画像を読み込むときは、<img>タグを使って、「パス」を指定してあげれば表示できた。CSSも根っこの考え方は同じ。

HTMLには、「本文」を書く場所と「設定」を書く場所が決まっている

「本文」は<body>タグ、「設定」は<head>タグ。 CSS<head>タグの中に読み込み用のリンクを書く。

ということでまずはCSSファイルを作成

「images」フォルダと同じ位置に、「css」フォルダを作成。そして、「app.css」という名前でcssフォルダの中にファイルをつくります。ファイル名は、.cssの前はどんな名前でもいいがとりあえずappとしておく

CSSファイルのつくり方

f:id:dorak:20170521103313p:plain f:id:dorak:20170521103317p:plain

headの書き方

<head>
   <link rel="stylesheet" href="css/app.css">
</head>

これで完了。もちろんapp.cssには何も書いていないのでHTMLには変化がありません。

HTMLのお決まりの構造

これまでは簡易的に文字を表示するだけだったが、ちゃんとしたHTMLを書くには、以下の構造を覚えなければいけない。以降、すべてのHTMLを書く際には以下の構造を先にHTMLに作ってから、bodyを充実させるなりしたほうがいいだろう。

<html>
    <head>
   </head>
    <body>
    </body>
</html>

↓ 当てはめる

<html>
    <head>
       <link rel="stylesheet" href="css/app.css">
   </head>
    <body>
        <p>こんにちは</p>
        <img src="images/画像名">
    </body>
</html>

CSSの書き方(ここからちょっと躓く人がいるかも!)

CSSファイルをvscodeで開く

以前はhtmlの中に「何を、どのように」と記述していたが、加えて「どこの」の記述が必要となる。以下が記述例。

p {
  color: red;
  font-size: 12px;
}

これは

どこの {
  なにを: どのように;
  なにを: どのように;
}

と表せる。

必ずかっこは{}、もちろん半角

クラスについて

「どこの」ってどうやって指定するのだろうか。 それはHTMLタグを指す。 一番簡単な例はこれ。 p { color: red; }

でも、それだけだと、複数pがあった場合どうなるか。 答えは、「全部のpが影響を受ける」。

それを回避するために「クラス」という考え方がある。

クラスの設定方法

再びindex.htmlを開く。そして、クラスを設定したいタグを決めたら、以下のように書く。

<p class="hello">こんにちは</p>

これだけ。クラス名はhelloとなる。もちろん、hello以外の文字でもいい。 では、このクラスをどう使うか。app.cssを開こう。

.hello {
  color: red;
}

となる。注意してほしいのは、クラスを指定する際は必ずクラス名の前に「.(ドット)」をつけること。そして、タグ名を指定するときは「.(ドット)」はいらない、ということ。

.hello {
  color: red;
}

p {
  color: blue;
}

helloというクラスがついているテキストと、クラスを付けていないpタグでそれぞれ違う色が出たはず。

さっそく、CSSを分けたボタンを表示してみる

実習

リンクをつける

といってもすごく簡単。 <a href="https://www.yahoo.co.jp">ヤフートップへ</a> これだけ。href="ここ"のリンクを変えることで、例えばSNSに飛ばすことも出来るし、index.html以外にprofile.htmlを作った場合は<a href="profile.html">プロフィールページへ</a>とすることでプロフィールページに飛ぶことも可能。ボタンっぽくすることでよりそれっぽい感じに見せることができる。

なんかサイトをつくるときは必ずフォルダを作ろう

ここまでは、練習のためあえて個別のフォルダはつくらずにindeix.htmlとかを作ったが、これ以降すべてのプロジェクトで必ずフォルダをつくろう。たとえは、次の項でギャラリーサイトをつくるが、まずは「ギャラリーサイト」というフォルダをつくると便利だ。この際に、フォルダ名に日本語は使わないようにしよう。なぜなら、日本語は思わぬ不具合の原因になるからだ。

一般的によく利用されるフォルダ構成

大体は以下のスクショのように、imagesフォルダ、cssフォルダが配置されるイメージ。現実の開発ではこの30倍は複雑なフォルダ構成になる。(扱うファイルが段違いに多いから、整理しないと開発ができないため。) f:id:dorak:20170521103400p:plain

さて!基本はこれにて終了!さっそく用意した作品を使ってPFを作ってみましょう

  • つくりたいものの確認(画像) f:id:dorak:20170521110116p:plain

  • フォルダの用意

  • ファイルを作成
  • それぞれのフォルダにファイルをぶち込む
  • HTMLを書く
  • リンクを設定
  • CSSを書く
  • サイトのサイズを設定する
  • 中央寄せをする
  • 完成

つくっている際に出てきたスキル

中央よせを実現するmargin: 0 auto;

上記では、まずサイトの横幅を設定し、そのあとにmargin: 0 auto;という命令を出したことで中央寄せを実現した。 これはどういうことなのか?そのことを考える前に、HTMLタグについてもっと深い理解を得ていこう。

HTMLタグは、ブロック要素インライン要素という2種類で分類することができる

そう、divやpやimgなどこれまで紹介したタグには、ブロック要素もしくはインライン要素という分類がされていたのだ! ここでげんなりせずに、原理原則の部分を見ていこう。

なぜブロック要素とインライン要素という分類がされるのか

冒頭で述べた通り、HTMLは当初論文を書くためのツールだった。 論文とは以下のようなもの。

f:id:dorak:20170520211234g:plain

ここからは理解のためおおざっぱに行きます。 HTMLの開発者は、このような文章を作るために、「論文とはなんなのか」を考えた。 結果、段落と、段落内テキストの部分的装飾という要素で論文は構成されると考えた。 「段落」がつまりブロックレベル要素。 「段落内(インライン)テキスト」がインラインレベル要素。 ということである。

それぞれには、見た目上重要な役割がある。 それは、の概念。

ブロックレベル要素、インラインレベル要素それぞれの特性

ブロックレベル要素はブラウザの横幅いっぱいに広がり、 インラインレベル要素はそのタグで表すテキストやデータの幅までしか広がらない。 といってもなんのこっちゃだと思うので、もっと原理原則で考えてみる。

繰り返しになるが、論文はレイアウトの概念があまりなかった。 上の画像を見てもらいたいが、論文とはあのようなものだ。それ以上の見た目である必要はなかった(当時は)。 そのため、段落は常に論文を表示する領域の幅いっぱいに広がる、でよい。 ウェブサイトに置き換えてみる。ブロックレベル要素は、要するに段落の機能を持つ。 つまり、「ブラウザの幅いっぱいに広がる」ものなのだ。 ブロックレベル要素を考えるときにこの点は非常に重要。 なぜなら、ブロックレベル要素は、内部のテキストの長さに関わらず常にブラウザの幅いっぱいに広がるという特性を持っているから。

イメージで見ていこう。

f:id:dorak:20170521105124p:plain f:id:dorak:20170521105227p:plain

したがって、中にどんなに短いテキストを書こうとも、必ず幅いっぱいまで広がる。

ではインラインレベル要素は? f:id:dorak:20170521105236p:plain

ブロックレベル要素の逆で、中に書いたテキストやデータの幅までしか広がらない。 特性といえばこれくらいなのだが、なかなか直感的に理解できない部分なので、原理原則を見てみた。

そして開発者は、ブロックレベル要素とインラインレベル要素、それぞれにいくつかのタグをつくった。

ブロックレベル要素

  • div
  • p

※他にもあるけど、現時点では必要ないので省きます。

インラインレベル要素

  • a
  • span
  • img

ちなみに、どのタグがブロックレベルでどのタグがインラインレベルかは、覚えるしかありません。 Fight.

話を戻して、真ん中寄せ

真ん中寄せを実現したのは、「width」と「margin」。 勘の良い人ならもう気づき始めているかもしれないが、解説を続ける。

真ん中寄せとは何か、を考えてみる。 例えばIllustratorPhotoshopで真ん中寄せをする際にどうするだろうか? 基準を決めて「整列」を使うはずだ。

具体例。 1000pxのカンバスに500pxの正方形オブジェクトを配置した時に真ん中寄せを行うには? 答えは、1000pxのカンバスと500px正方形オブジェクト選択し、基準を1000pxのカンバスに置いた状態で、「整列」ボタンを押す。

しかし、Webでは「整列」に当たる命令はない。 ではどのように行うのかというと、余白を使うのだ。

Webでの余白の考え方

さきほどブロックレベル要素はブラウザの横幅いっぱいに広がると話した。 ということは、すでに中央寄せされている状態である。

ブラウザの横幅 = pタグ(例えば)

だからだ。 ではどうやったら中央寄せ出来るのか? ブロック要素に幅を設定してあげればいい。 そうすれば、ブラウザの横幅よりも小さくすることができる。 これで、ブロックレベル要素 ≠ ブラウザの横幅 となった。 次に、ブロックレベル要素に余白を設定する。 marginという命令は、要素の外側の余白を設定する命令。 marginは上下左右にそれぞれ別の余白値を設定することができるので、 例えばmargin: 1px 2px 3px 4px;とかくことができる。 これは、↑、→、↓、←の順で指定されている。 このうち、左右の余白については数字の代わりにautoという値が設定できる。 auto、つまり余白を自動計算してくれるという命令だ。

これを、margin: 0px auto 0px auto;としてみよう。 上下は0pxで、左右はそれぞれ等しい余白を設定してくれる、という意味になる。 もっと上下が同じ値、左右が同じ値であれば省略してmargin: 0 auto;と書くこともできる。

f:id:dorak:20170521105346p:plain 左右に均等に余白が入っていることが分かるはずだ。

さて、これで中央寄せが実現できるようになった。 今日はここまで。

上のコード全文

<html lang="ja">
  <head>
    <title>練習サイト</title>
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="container">
      <img class="icon" src="images/icon.jpg">
      <p>Shusay</p>
      <p>My Works</p>
      <img src="images/1.jpg">
      <img src="images/2.jpg">
      <img src="images/3.jpg">
      <img src="images/4.jpg">
    </div>
  </body>
</html>
body {
  margin-top: 70px;
}

.container {
  width: 960px;
  text-align: center;
}

img {
  width: 24%;
}

.icon {
  border-radius: 50%;
}

宿題

【宿題】正方形にリサイズ・トリミングした画像を16枚並べ、自分の名前とSNSなどへのリンク(ボタン風に加工)を記載したギャラリーサイトのようなものをつくる。なるべくなら何も見ずにつくれるようになることが望ましい。