プログラミング– category –
-
【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本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒... -
徹底検証！CSSで縦書きデザインをやってみる！
以前「縦書きを取り入れたデザインの優れたサイト10選」という記事を書きましたので今回は実践編をやりつつ、色々検証してみます。（IE以外はMac環境での検証です。） CSSで縦書きを設定 writing-modeプロパティ 縦書きは「writing-mode:vertical-rl;」だ... -
サンプル付きで確認！jquery.cookie.jsの使い方
それほどcookieを使用する機会は多くないかもしれませんが、ページを遷移したり、リロードしても値を保持することができるのでユーザビリティに役立ちます。 「jquery.cookie.js」を使えば簡単にcookieの値を取得・保存・削除することができて便利ですので... -
下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る
最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 KAMIMURA 特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思いま... -
waypoint.jsとCSSでスクロールして画面指定位置で要素をアニメーションさせる
前回「アニメーションが心地良いWebサイト11選」という記事でアニメーションを取り上げました。 今回は実装編をやってみようと思います。その中でも今回は「ボックススライドイン」のアニメーションをやります。（※ボックススライドインという名称は私が勝...
