background: linear-gradient(); /* W3C, IE10+, FF16+, Chrome 26+, Opera 12+, Safari 7+ */
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの(サンプルによってはnav要素がないものもあります)になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
最近綺麗な画像を活用したフルスクリーンレイアウトのwebサイトが増えていますね! 私も最近、フルスクリーンレイアウトを実装することがあったのでその話をします。 今回は背景画像が全画面に表示され、コンテンツが縦横中央に配置されるだけのシンプルなレイアウトです。 Demo: https://codepen.io/omaemi/full/rWgBGW/ ".box" が画面フルサイズの要素で、".box" 直下の要素を縦横中央に配置します。 <div class="page"> <div class="box"> // 画面フルサイズの要素 // 中央寄せされるコンテンツ <p> LOREM IPSUM DOLOR SIT AMET,... <p> </div> <div class="box"> </div> . . 手順は以下の3つです。 画面サイズいっぱいの要素 ".box" を作る ".
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く