斬新なのに効果的！最近流行している「非平行ヘッダー」の作り方
ホームページの冒頭で、視線を引きつけて大きく印象づけるためにヒーローと呼ばれる画像とキャッチコピーを添えた見せ方をする部分があります。 通常、ヒーロー部分に限らず、多くの区切り目部分を平行に区切っていきますが、あえて四角形のように直線的に区切らずに、曲線や斜めの線などを使って区切っていくデザインが徐々に増え始めています。 今回は、最近よく見かける非平行ヘッダーの実装の仕方を、チュートリアル形式でご紹介します。 長方形で囲むヒーローヘッダーは比較的作りやすいのですが、非直線のヘッダーはどのようにして作られるのでしょうか。 作成手順を見てみましょう。 非平行ヘッダーとは？ 非平行ヘッダー(Non-paralleled header) （非長方形ヘッダー(Non-rectangular header)とも言います）とは、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことをいいます。
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
