Academia 2
アカデミア2回目
アジェンダ
- モジュールのつくり方を覚える
- クオリティを上げたPFサイトをつくってみる
- サイトを分析し、参考にできるようにする
前回のハイライト
前回はWebへの入門編だった。今回からはより実践的な技術とデザインを見ていく。みなさんが使えるようになった技術は以下の通りだ。
- 画像を表示させ、並べる
- 画像への角丸など、多少の工夫を入れることができる
- 色の変え方
- 文字の揃え方
- 余白のつけ方
今日つくりたいもの
どんな技術で作られているか
前回よりちょっとだけパワーアップしているだけ、と感じる人もいればなんのことかわからん、という人もいるだろう。正しいのは前者で、これは「前回よりちょっとパワーアップしているだけ」。つまり、もうちょっとテクニックを覚えるだけでつくれる。
全体感が掴めたところで、個別のテクニックを見ていく。
モジュールのつくり方
まずは今日の用意
作業を始める前に、まずは基本となるコードを入れておこう。
workspaceフォルダの中に、mypf_2という名前のフォルダをつくろう。これがプロジェクトフォルダになる。
プロジェクトフォルダがつくれたら、次はファイルとファイルをまとめるフォルダ。こちらは、前回と同じく、以下をつくる。
次。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サイトはすべての要素を「部品」として捉える。何故かと言うと、使いまわせるから。一度ボタンを作れば、コピペするだけで使いまわせる。もう一度作る必要はない。
画像 + キャプションという構成でギャラリーをつくる
← これのこと
さて、前回までの理解ですすめるならば以下のタグでいけると思うかもしれない。
<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>
なんか思うとおりに並ばないはず。前回は、画像はとりあえず書くだけで並んだ。なぜでしょうか。答えは、「ブロックレベル要素」「インラインレベル要素」の性質にある。
前回の復習として、以下を引用
ブロックレベル要素は、内部のテキストや画像といったデータの長さ(幅)に関わらず常にブラウザの幅いっぱいに広がるという特性を持っている
インラインレベル要素は、ブロックレベル要素の逆で、中に書いたテキストやデータの幅までしか広がらない。
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の部分。
うまくならんでるのがわかるはずだ。
余談だが、imgタグに対して幅100%を指定しているのは、親要素となるdivで幅を指定したから。でも、画像にはもともとのサイズがあって、大きい場合は親要素の幅を無視して広がるのだ。だから、width: 100%;としてあげることで、親要素いっぱいまで広がるように(=親要素と同じ幅に)してあげることにした。
なぜdivで囲うのか
floatという命令をあてたいとき、divでimgとpタグをまとめなければどうなるか。おそらくimgタグとpタグそれぞれにつけるといいのでは？と思うのではないだろうか。これだと、全部横並びになる。うまくいかない。そうではなくて、画像とテキストをグループみたいにして、そのグループに対して「並べる命令」をあてる...としたい。であれば、画像とテキストをdivで囲ってあげればどうだろうか。意図した挙動になるはずだ。
これがHTMLのグループ化。難しく言うとネスト化とも言う。
<div>タグの中にimgとpが入っていて、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・ブロック要素の仕様である。
floatを指定すると、300pxと指定したらほんとに300pxになるのである。 で、要素が300pxになって余白も消えればどうなるか。次に続く要素が並べるスペースができるのだ。 だから続く要素も並ぶようになる。ここが非常に重要。
floatの問題
ここまでの説明で、floatはなんでも並べられる万能プロパティだと思うかもしれない。まあ万能だ。しかし、floatはHTMLのルールを強制的に捻じ曲げるプロパティなので、いくつかの問題が起きる。それは後述。
本題にもどして
再確認すると、つくりたいのはこんな感じ。 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列にする
これは先日やったこと。
.workにwidth: 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;
さて、見てみよう。
3列が崩れた。2列になった。これはどういうことか。
widthの仕組み
上のfloatの解説で、widthはコンテンツの幅を決めるプロパティと話した。つまり、33.3333333%になっているのはコンテンツ部分だけで、余白は含まれない。 だから、余白を足すと3つのモジュールでブラウザ幅を超える幅となり、入り切らなくなって下にいってしまうのである。じゃあどうすればいいのか。
CSSには、余白までをコンテンツとして計算してくれるプロパティがある
box-sizing: border-box; がそれ。これはなぜCSSのデフォルトになっていないのか理解に苦しむ。さっそく指定してみよう。ちなみに、このbox-sizingプロパティは便利なので全体に指定したほうがいい。
app.cssの一番上に、次のように足そう。
* {
box-sizing: border-box;
}
この*は、すべてのタグにこのスタイルをあてるという意味。
さて、ブラウザを再読込してみよう。
...まだ変わらない。どういうことか。 答えは、余白の捉え方にある。
ボックスモデルと余白
タグにはボックスモデルというものがある。 具体的には次のような図だ。
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; }
今回はうまくいった。
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(なにもない)だから。]
「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がついているかはブラウザに標準で付いている「デベロッパーコンソール」というものを使うことで確認できる。
立ち上げ方
サイトを副クリック(winは右クリック)して「検証(もしくは要素を検証)」を選択する
ブラウザ
ほとんどのブラウザについている機能だが、使い勝手には差がある。ここではGoogle Chromeのデベロッパーコンソールを例としているので、そちらを使うようにして欲しい。
見方
どんなHTMLなのかを確認する
ある要素にどんなスタイルがついているかを確認する
本題に戻して、どんどんつくっていく。
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になってしまった。つまり、こんな感じになるのだ。
なので、.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();というもので実現可能。ここからさきはそう難しいことはないので、ガンガン進む。もし全画面写真で適当なものがなければ、以下の画像を使ってください。
作例の構成要件
作例では、まずブラウザの見えてる部分全体に写真が広がっている。
幅いっぱいに画像を表示
これは、HTMLの画像表示ではできない部分だ。なので、CSSの「背景画像プロパティ」を使う。
まずはHTMLの用意から。bodyの開始タグのすぐ下に入れよう。位置関係でいうと.worksの上。
<div class="keyvisual"></div>
次、画像を表示するためのcss。
.keyvisual { background: url(../images/cover.png); }
CSSから画像を読み込み
ここ注意！画像を表示する時にまた画像までのパスを書いてるが、あたまに..ってついてる。これは、「一つ上のフォルダに戻る」という意味。今回画像を読み込むのはapp.cssからなので、当然パスを書く基準もcssからになる。で、app.cssはcssフォルダの中に入っていて、imagesフォルダに向かうには一度cssフォルダを出てからimagesフォルダに入らないといけないということだ。その「一つ上に戻る」を表現するのが..なのである。パスを指定するのは..(一つ上)と/(ひとつ下)で完全に表現できるのだ。もちろん、同じcssフォルダ内に画像があればこんなことは考えずに画像名だけを書けばいいのだが、cssフォルダ内に画像って意味不明なのでひとまずやめておく。
本題にもどって、これで再読込してみよう。
なにも表示されません。
なんでか。それは、.keyvisualになにも入ってなくて、高さがないから。
ということは、.keyvisualに高さを設定すればうまくいきそう。
けど、「ブラウザの見えてる部分いっぱいに高さを設定する」ってどうやるんだろうか。ただheight:100%ってやると見えてない部分(=スクロール刷る部分)も高さとして計算されるので、縦に長いサイトだととんでもないことになる。
ブラウザの見えてる部分の高さいっぱいにサイズを指定する
この実現方法は意外と簡単で、cssでwidth: 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; }
上の方に白い文字が現れた。 さてこいつをいい感じに配置していきたい。どうしたらいいか。
インライン要素は、強制的にブロック要素に変換できる
displayというプロパティがある。cssでdisplay: block;という風に記述してあげれば、インライン要素だろうがなんだろうがブロック要素になる。で、ブロック要素はかならず改行される。この特性を活かして、.taglineの中にある.subhead(span要素でインライン要素)を改行したい。
.subhead { display: block; }
これで改行された。
表示位置を自在に操る
positionというプロパティがある。このプロパティを極めれば、Webでのレイアウトは思うがままだ。グラフィックデザインソフトと遜色ないデザインだって作れる。ということで、早速見ていこう。
positionとは
その名の通り、HTMLの各要素における「位置」の決め方を指定するものだ。値は、代表的なものとして以下がある。
- static ... 初期値。HTMLのルール則ったもので、レイアウトに自由度はない
- relative ...
position: relative;を指定すると、top, left, bottom, rightというプロパティが指定できるようになる。それぞれ、親要素の左上からみてどれだけ動かすかを値としてとる。注意点は、相対的に動かすので、動かす前のところに幅や高さが残る、ということ。なので、relative単体ではあまり使わない。 - absolute ... 絶対位置指定。これを指定すれば、top, left, bottom, right が使えるようになる。位置は絶対指定となるので、指定した位置に移動する。移動前の場所には当然何も残らないので、直感的といえる。レイヤーをイメージしてもらえればわかりやすいかもしれない。position: absolute;を指定すれば、親要素よりも１つ上のレイヤーとなる。したがって、他の要素に重ねることもできる。注意点は、親要素に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%; }
位置が移動した。
位置を移動させる手順まとめ
- 動かしたい要素に
position: absolute;を指定 - 動かす要素の親要素に
position: relative;を指定 - 動かす要素に
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に対してだ。１点注意したいのが、.navigationは右に寄っているのでfloat: left;ではなくfloat: right;となる。
加えて、メニューの「home」「about」も並んでいるので、そっちにもfloatをかける必要がある。
取り急ぎ、HTMLの現時点での反映はこんな感じ。
これをCSSでスタイリングしていく。 まずは左右にサクッとレイアウトしてしまおう。
.title { float: left; } .navigation { float: right; }
はい。こんな感じ。
次に、メニューの中もさくっと横並びにしてしまおう。
.navigation p { float: left; }
こんな感じ。ここで新記述。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; }
これで.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; }
ということで完成。
宿題
- 今日の内容を踏まえた上でPFのブラッシュアップ
- デベロッパーコンソールを使ってどんなHTML、CSSなのかを確認しながら、 http://www.frenchcuisse.com/ を真似してみる
