Webサイトをクリエイティブに！魅せる最新テクニック、トレンド14個まとめ
ウェブデザインが印刷をベースとし、コンテンツと画像が固定されたグリッドに並べられていたのは、それほど昔のことではありません。しかし、HTMLやCSS、JavaScriptなどのツールが進化するにつれて、Webレイアウト設計の可能性もひろがり、進化しています。 この記事は、クリエイティブで魅力的なWebページを表現できるテクニック14個を、具体的なサンプル例と一緒に詳しく見ていきます。 1. パララックスエフェクトで奥行き感を演出しよう https://www.awwwards.com/inspiration/mountain-illustration-parallax パララックスエフェクトの使用は、レイアウトに奥行きを演出する方法です。スクロールと動きを合わせることで、グラフィックや画像、文字テキストをレイヤー化し、よりダイナミックなレイアウトを表現できます。このテクニックの特長は、前景
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
Photoshopのレイヤーパネルどこに置いてる？ 作業効率がぐっとアップするPhotoshopのワークスペースのまとめ
WebサイトやアプリのUIデザイナー・デベロッパをはじめ、写真のレタッチ、イラストやお絵描きの塗りなどの作業効率がアップするPhotoshopのワークスペースを紹介します。 写真: Girly Drop ワークスペースの配置を決める最初のポイントは、ドキュメントを1つ or 2つにするのか、そして残りのスペースに必要なパネルを配置します。 よく使うパネルはドキュメントの近くで十分な大きさにし、不要なパネルは消し、たまに使うのはボタンにする、など自分にベストのワークスペースができると思います。 業種によってどのようなワークスペースを使っているか見てみましょう。 フロントエンド デザイナー向けワークスペース via: A Web Developer’s Guide to Photoshop 21:9くらいのモニターでないときついワークスペースですね。配置されているパネルは左列から順に。 ヒスト
背景、全画面で動画を再生。BigVideo.js #jQuery / Maka-Veli .com
いつかきっと使うメモ 今回の記事は以下から How To Build a Fullscreen Background Video Player | Vandelay Design Blog About the Author:Jake Rocheleau @jakerocheleau. Jake’s Google+ profile. より詳しく、技術的に読みたい方は今すぐGOです（記事は一応チュートリアルで全文英語です） jQuery / jQuery UI / Video.js / imagesLoaded を用いて、bigvideo.js と以下の指定で動くそう。 <script type="text/javascript"> $(function() { var BV = new $.BigVideo(); BV.init(); BV.show('動画.mp4'); });
[JS]表示サイズに合わせてレイアウトやフォントのサイズ・ポジションを変更するスクリプト -jFL
デモ3：幅800pxで表示 [ad#ad-2] jFLの実装 現在、開発者バージョンが公開されており、それを参考に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jFL.min.js"></script> HTML 3カラムのデモのHTMLです。 ※シンプルにしています。 <div id="container"> <div id="left"><p>カラム：左</p></div> <div id="center"> <img src="gnu.png" id="the_img" style="float:left"> <p>カラ
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
アニメーションでレイアウトを変更するMasonryを使ったポートフォリオのテンプレート
グリッドベースに配置されたパネルをダイナミックなアニメーションで配置変更するポートフォリオ用のテンプレートを紹介します。 Expanding Fullscreen Grid Portfolio オンラインデモ [ad#ad-2] Masonryは以前紹介した「パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry」のjQueryのプラグインで、パネルをグリッド状に配置し、ブラウザのサイズを変更すると、それに合わせてアニメーションでパネルの配置を変更します。 スライドショー時のキャプチャ 実装 ダウンロードファイルには、HTML, JS, CSSなど一式が揃っています。 コンテンツは必要な箇所のみ変更するだけで、そのまま利用できると思います。 HTML 最初に表示されるパネルのHTMLです。 <div class="item block" data-bgimage="imag
[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート
バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 ブラウザの幅を狭くしたキャプチャ 以下は各ポイントを意訳したものです。 まず、ブロックレベルのエレメントの幅は当然、親エレメントと同じ幅になります。単純に<body>直下に<h1>を配置すれば、自動的にブラウザの幅いっぱいになるのではないか、と思うでしょう。 しかし、それはテキスト部分もブラウザの幅いっぱいになってしまい、それは読みやすいものではありません。下記のように、バーはブラウザ幅いっぱいで、テキストは読みやすい幅になっているのが理想です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
q-Az