すべての記事
-
縦のラインを活かしたスタイリッシュなサイトデザイン10選＋1！
デザイン手法として、縦のラインを活かしたデザインが最近スタリッシュで面白いなと感じました。 あまり他のサイトでも取り上げられていないようなので、考察と合わせてまとめてみました。 縦のラインを活かしたデザインのメリット 印象に残るデザインです... -
スプリットレイアウトの作り方を解説!レスポンシブにも対応！
以前「スプリットレイアウトの参考になるサイトまとめ」という記事を書きましたが、今回は実践編として実際にスプリットレイアウトのサイトを作成していきたいと思います。 サンプル 01.スプリットレイアウトとは その名のとおり画面をスプリット＝分割す... -
画像やテキストを縦横中央に配置する方法4つ
要素をブロックの縦横中央に配置するというシーンはたくさんあります。 横の中央揃えは簡単です。「margin:0 auto」か「text-align:center」で指定できます。ですが、縦中央揃えは「margin:auto 0」というわけにはいかないのが残念というか難点です。 そこ... -
動画ファイルサイズをオンラインで軽くする方法2つ
簡単に動画をWebサイトに設置できるので、Webサイト用に動画をアップする機会も多くなってきました。 ですが、動画は画像に比べるとファイルサイズが大きくなりがちです。 動画ファイルサイズを下げたくても、専用ソフトはないし、かといってフリーソフト... -
スクロールをセクションごとに制御するプラグイン「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の値を取得・保存・削除することができて便利ですので... -
参考にしたい！サイトのファーストビューデザイン集
人は初めて会う人の印象を３～５秒で決め、その決定材料となる情報のほとんどを「視覚情報」から得ています。 Webサイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。 私たちの脳はものすごいスピードで視覚...
