★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
パララックス効果が秀逸なWebサイト＆作り方まとめ
今更感がこの上ないですが「パララックス」をうまく取り入れたWebサイトをまとめて紹介します。パララックスは、5年くらい前からWebデザインのトレンドとしてなんだかんだで取り上げられ続けていますね。2017 Design Trendsでもピックアップされています。 この記事の後半では作り方も解説しています。参考にしてみてくださいませ。 1. パララックスとは？ パララックス（parallax）は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。 緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。 パララックスの例 実際に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
