すべての記事
-
画像や動画を全画面にフィットさせて中央に表示する
こちらの記事は古くなっています。同じことを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サイトにおいても同様で、インターネットユーザーはほんの数秒でそのサイトの判断をするということ。 私たちの脳はものすごいスピードで視覚... -
厳選！直感的で簡単、無料、登録不要なWebツール18選
WEB上に便利なツール、オンラインサービスは星の数ほどありますが、今回はその中でも下記の条件に見合うツールを厳選しました。 日本語、もしくは日本語でなくても直感的に使えるから問題ない 簡単 無料 登録不要 使用頻度のなるべく高いもの WEBデザイナ... -
縦書きを取り入れたデザインの優れたサイト10選
以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。 その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサ... -
グラデーションを使用したオシャレなサイト11選
Ultimate CSS Gradient Generatorなど便利なツールがありますので、WEBデザインにグラデーション簡単に取り入れられるようになりました。 今回はグラデーションを使用したオシャレなサイトをピックアップしてみました。 イグニション・ポイント株式会社 オ... -
下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る
最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。 KAMIMURA 特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思いま... -
デザインにマスクを活かしたサイト9選
大きな文字や、人物に合わせて画像や動画をマスクして見せているサイトを見かけるようになりました。 マスクで限定されたエリアのみに表示することによって洗練されたイメージでインパクトも大です。 今回はそんなサイトを集めてみました。 文字でマスク ... -
waypoint.jsとCSSでスクロールして画面指定位置で要素をアニメーションさせる
前回「アニメーションが心地良いWebサイト11選」という記事でアニメーションを取り上げました。 今回は実装編をやってみようと思います。その中でも今回は「ボックススライドイン」のアニメーションをやります。（※ボックススライドインという名称は私が勝...
