プログラミング– category –
-
フルスクリーンナビゲーションを作る。(シンプルバージョン)
先日「フルスクリーンナビゲーションの参考サイト15選」という記事を書きました。 今回は実践編をやっていこうと思います。シンプルに縦に並ぶフルスクーリーンナビゲーションを作ります。 サンプル1 全体のHTML まずは今回の全体のHTMLのコードです。 <... -
ページ内リンクをページ外からでもスムーズにスクロールさせる
当サイトの目次でもやってますが、縦長のランディングページなんかを作る場合、グローバルナビゲーションはページ内リンクにして、スムーズにスクロールさせるパターンがよくあります。 ですが、特定のページを別ページにしている場合、ページの外からペー... -
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
こちらの記事の内容は古くなっています。もっと簡単にヘッダーを固定表示できる最新の記事をアップしましたので、下記のリンクよりぜひそちらをご覧ください。 スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。... -
【WordPress】コピペでOK！新着記事に「NEW」をつける方法！
WordPressでサイトやブログを制作していると、カスタマイズ要件として「新着記事にNEWアイコンを付けたい！」という要望がよくあります。一言で新着といっても判別する方法は1つではありません。なので今回はその辺も踏まえて解説していきます。 新着記事... -
スプリットレイアウトの作り方を解説!レスポンシブにも対応！
以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す... -
画像やテキストを縦横中央に配置する方法4つ
要素をブロックの縦横中央に配置するというシーンはたくさんあります。 横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。 そこ... -
スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！
スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」は主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールしただけで、次のセクションまでスルスルとスクロールしていくサイトに出会ったことがある方もいるはず。 ... -
画像や動画を全画面にフィットさせて中央に表示する
こちらの記事は古くなっています。同じことをCSSだけでもできます。ぜひ下記の記事もチェックしてみてください。 以前、「ボックスの高さをブラウザの高さに合わせるテク3つ！」というのを書きました。 本当は今回の記事の内容まで一気に行きたかったので... -
ボックスの高さをブラウザの高さに合わせるテク3つ！
ボックスの幅をブラウザの幅にあわせるのは、親要素に幅を指定していなければ「width:100%」も必要ありません。親要素の幅に合わせて100％に勝手になります。 問題は高さです。高さは内包している要素の高さになりますので、「height:100%」としただけでは... -
CDNならこのサイトが超便利！jsDelivrの使い方
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。 jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒... -
超簡単！CDNのjQueryを読み込む方法
もはやWeb制作に必須と言って過言ではないjQueryです。だからこそ、なるべく無駄な手間は省き、制作効率を上げていきたいところです。 CDNを使用すれば、最新版を常に読み込むことができたり、バージョン管理ができたりと便利です。そこで今回はCDNのjQuer... -
徹底検証！CSSで縦書きデザインをやってみる！
以前「縦書きを取り入れたデザインの優れたサイト10選」という記事を書きましたので今回は実践編をやりつつ、色々検証してみます。（IE以外はMac環境での検証です。） CSSで縦書きを設定 writing-modeプロパティ 縦書きは「writing-mode:vertical-rl;」だ...
