レイアウトの技法メモ①

台風が過ぎ去って長かった雨ばかりの時期が終わったかと思えば、もう直に秋だというのにジリジリと照りつける太陽・・・・・・非常に暑い・・・・・・_(：3 」∠)_
そんなわけでこんにちは。カーテンの隙間から入ってくる日光を微妙に受けて微妙に暑い中書いていきましょう。

それで今回の内容ですが、HTMLやCSSを使ったレイアウトの技法（方法？）について幾つか纏めたいと思います。
何故かというと、最近色々なサイトにあるカッコよかったり見栄えの良いHTMLテンプレートのソースコードを読んでインプットを増やす、という事をやってみたのに起因します。
まだ一つのテンプレにしかやっていないのですが、やはり解読に苦労はしますがレイアウトの仕方やページの動きについて新しい事を知れるというのが思ってたよりもずっと楽しい！　しかし、そうやって苦労して知ったとしても結局忘れたりしたら意味がない！
というわけで、そういう事についてメモ書きをブログの方に残しておこうと思った次第です。＋αとして、コードを読んでいて「あ、これ忘れてたな」って部分も復習がてら混ぜていったりもしてみます。

１つの要素の上にもう一つの要素を浮かび上がらせる

ページを開いた時に一番最初に見えるトップ画面の部分が、ページを開いて１秒くらいで背景色が変わり、同時に文字が浮かび上がってくる。
私がデモページを開いて最初に驚き、「これいいなー」と思ったレイアウトです。
そもそもこの手の演出は思い返してみるといろんなサイトで見た覚えがあるので割とメジャーな手法だとは思うのですが、実際どうやってるのか。
最初はHTMLやCSSだけじゃできなさそうだと思っていたのですが、CSSリファレンス本片手に解読していくと、CSSだけで出来る事が判明。結構衝撃的でした。

そのやり方というのが、まず開いた瞬間に表示される要素の上にもう一つの要素を重ねて、アニメーションにより後者の要素を時間差で表示させるというものです。要素を重ねるのは、前者の要素に擬似要素:afterをつけたセレクタに{position: absolute; top: 0; left: 0;}と記述する事で実現していました。
なるほど、確かにこれなら二つの要素をピッタリ重ねられると感心。続いてアニメーション部分ですが、これにはtransitionという、始点と終点の２点間のデザインをアニメーションで変化させるプロパティを利用するようです。これを、{transition: opacity 1s ease}と宣言する事で、もう一つの要素が１秒のディレイを置いて透明から不透明になる、つまり浮かび上がってくるようになるみたいですね。

こんな動作がこんな簡単な記述でできるというのは、感動というかワクワクというか、そんな感じがしますねｗ

要素内に水平線を表示させる

要素のボックスの周囲にならborder、ヘッダーとコンテンツ、コンテンツとフッターなどの区切りにはhrなど、罫線や水平線を表示させるプロパティは幾つかありますが、それじゃあそれらとは全く関係ない位置、要素中に水平線を装飾として入れるにはどうすればいいのか。
正直こんな事考えた事なかったのですが、これもまた先のページで学ぶ事ができました。

方法はとっても簡単で、背景色を指定した高さ1pxの要素を作るだけ。widthプロパティも必要ですが、こちらの長さは水平線の長さになるので自分好みに調整します。
最初見た時は「？」って感じだったのですが、これ要するに高さ1pxの背景を横幅○（任意）px分表示してるってだけなんですよね。背景色を黒くしておけば、あたかも黒い水平線が○px引かれているように見えるというわけです。勿論、背景色を赤くすれば赤い水平線が引かれます。

水平線の位置はmarginで調整できますし、要素内に水平線を置きたい時には便利そうなので覚えておきたいところですね。

今回は二つだけですが、今後もこういった感じにメモのようなものを書いていきたいと思います。その為のナンバリングですｗ

もし何か思い出したら、追記なり新しい記事なりでまた書くかもです。それでは、出かける用事があるのでこの辺で。