モダンコーディング入門 - HTML5とCSS3 - その３
今日すること
こんにちは、ふるてつです。
🍉盆休みを使って下の本でHTML5とCSS3を勉強中です、その中で新しく知ったことを書いています。
書籍中では3種類のレイアウトのサイトを作るのですが、２つ目のレイアウトを作り終えました。
今回はMasonryというJavaScriptライブラリを使用し、ウィンドウサイズに合わせて自動に段組みが変わっていく可変グリッドレイアウトのサイトを作成しました。
下記のようなデザインになります。
出来上がったサイトはこちらです、リンクなどはクリックしても一切動きませんが、せっかくなのでGithub pagesで見れるようにしました。
https://tetsujifurukawa.github.io/learning_modernCodingOfHtml5Css3/grid-layout/index.html
● Masonry
これははじめて聞くライブラリです。
Masonryを組み込むと下のように縦に並んだボックスのエリアが、良い感じに整列します。
このMasonryは自分で撮った写真をいろいろなサイズに編集して1ページで見せたい時などに便利そうですね、
きっときれいにできそうです。
こちらが組み込み前
組み込み後
組み込み方は簡単。
HTMLのbodyの最後尾で下記のコードを書きます。
columnWidthはグリッド1列分の幅
gutterはグリッド同士の水平方向の間隔
<body>
～ 中略 ～
<script src="lib/masonry.pkgd.min.js"></script>
<script>
window.onload = function () {
new Masonry('body', {
itemSelector: '.item',
columnWidth: 180,
gutter: 4
});
};
</script>
</body>
詳しくはこちらを参照ください：https://masonry.desandro.com/options.html
● script要素はhead内？それともbody内？
HTMLの描画が終わる前に実行する必要があるJavaScript以外は、パフォーマンス上の理由からなるべくbody要素の最後に記述したほうが良いそうです。
これも知りませんでした、bodyにも書けますが、基本はheadの中に全部書くものだと思ってました。
jQueryなどもですかね、これまでずっと呪文のようにheadに書いてきた気がします。
headに書いた場合、HTML要素の描画の順番が最後になります。
<head>
<script src=""～""></script>･･･ 1. ファイルのロード、実行
<script>～</script>･･･ 2. コードの実行
</head>
<body>
<!- HTML -->･･･ 3. HTML要素の描画
</body>
bodyの最後尾に書いた場合、HTML要素の描画の順番が最初になります。
<head>
</head>
<body>
<!- HTML -->･･･ 1. HTML要素の描画
<script src=""～""></script>･･･ 2. ファイルのロード、実行
<script>～</script>･･･ 3. コードの実行
</body>
参考にしたサイト：https://www.1-firststep.com/archives/2086
● マージンのネガティブ指定
下記は一つのアイテムのブロックで、8px～11pxのpaddingを設定しています。
このようなエリアだとクリック領域がpaddingの内側までしか広がりません。
そこでネガティブマージンを使って<a>要素をエリアと同じ領域に広げます。
これは常識かもしれませんが、わたしは知りませんでした。
HTMLは下記のようになっています。
<section class="item item-m item-breaktime">
<a href="#">
<img class="image" src="images/image_M_3.jpg" alt="おやつの時間">
<div class="category">BREAK TIME</div>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
</p>
</a>
</section>
そして下記CSSのようにitemクラスのaにマージンのマイナス値を入れます。
.item>a {
display: block;
margin: -8px -8px -11px;
padding: 8px 8px 11px;
border-radius: inherit;
～ 中略 ～
}
● フォーカスが当たるとアニメーション付きでアンダーラインが出てくるTips
下記の「MAIN DISH」のところのように、フォーカスを当たるとアンダーラインがアニメーション付きでゆっくり出てきます。
こういうのがあるとちょっと楽しいですよねぇ。
AngularでMaterialをさわっているとInputになにか入力しようとすると、
下線にアニメーションがかかって良い感じでフォーカスが当たった感じになります。
Materialだから簡単にできるのかと思っていましたが、わりと似たようなことはCSSすぐにできるんですね。
これも知りませんでした。
https://material.angular.io/components/input/overview
ちなみにHTMLは下記です。
<nav class="nav">
<ul>
<li class="nav-item"><a href="#">HOME</a></li>
<li class="nav-item"><a href="#">ABOUT</a></li>
<li class="nav-item"><a href="#">MAIN DISH</a></li>
<li class="nav-item"><a href="#">APPETIZER</a></li>
<li class="nav-item"><a href="#">BREAK TIME</a></li>
<li class="nav-item"><a href="#">COLUMN</a></li>
<li class="nav-item"><a href="#">OTHER</a></li>
</ul>
</nav>
CSSは下記。
.nav-item a {
display: inline-block;
}
.nav-item a::after {
content: '';
display: block;
width: 0;
margin: 6px auto 0;
border-bottom: 1px solid #7C5119;
transition: width 0.3s ease-in-out;
}
.nav-item a:hover::after {
width: 100%;
}
nav-itemクラスのaの後にafterで疑似要素を作り、そこにあらかじめborder-bottomで下線を引いておきます。
widthはゼロにしておき、hoverしたときに100%にします。
その際にtransitionのease-in-outを設定しておくと、アニメーション付きでアンダーラインが表示されるようになります。
● Githubに絵文字
最後はHTMLとは全然関係のないお話です。
MasonryのGithubをみたのですが、コミットのコメントに絵文字が入っていてなんだかかわいいと思いました。
開発系のGithubでは見たことがないですけど、デザイン系だと普通なのでしょうか。
業務では怒られそうなので個人で使っているGithubに今度から絵文字を入れてみようかと思いました。
今日の感想
盆休み最終日にやっと2種類目が終わりました。
まだまだ知らないことはありますね、勉強し放題です。
盆休みが終わったので他のAngularやAWSもくもく会もまた再開するので、
残り1種類は少し期間が空きそうですが、9月末くらいには全部終えたいと思います。
では、今日もお疲れ様でした。
