サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。 Cool headings with pseudo-elements [ad#ad-2] デモ 実装 デモ デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+,Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。 デモページ 実装HTMLHTMLは非常にシンプルで、h1要素にclassを与えるだけです。 <h1 class="headline1">I took lessons</h1> ※デモは4つあり、classを変更するだけです。CSS: 各デモ共通のベース body要素をメインのラッパーとして使用します。 h1要素にはfont-familyとsizeのみ共通で指定
ホバーエフェクトのキャプチャHTML マークアップは非常にシンプルで、内部にリンクを配置したただの見出しです。 <div class="module"> <h2>Community <a href="#">Blue</a></h2> <!-- stuff in module --> </div>CSS ヘッダの基本となるスタイルで、a要素の左にborderでホワイトの領域を設定します。 .module h2 { background: #ccc; padding: 0 0 0 10px; font-size: 16px; /* Thickness of the bar more easily achieved withline-height since padding would push link inward. */line-height: 2; } .module h2 a
紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 Centered Heading Overlaying a HorizontalLine withCSS [ad#ad-2] 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像は使用しない。 余分なHTMLは使用しない。Scalable:フォントのサイズを大きくしても調整される。 Fluid: 可変。JavaScriptは使用しない。 Method 1: 疑似要素 見出しの疑似要素で水平線を配置し、spanタグを内側に配置し水平線が中央
TOP > Design , Font > 見やすく見出しに最適なフリーフォント集「20 More Fresh & Free Fonts for Beautiful Headlines」 数多くのフリーフォントが発表されていますが、分かりやすく見やすいフォントはデザインにも利用しやすく、クリエイティブを行う上で、重要な武器となります。今回紹介するのは見やすく見出しに最適なフリーフォントを集めたエントリー「20 More Fresh & Free Fonts for Beautiful Headlines」です。 Font FoglihtenFr02 – made by gluk 見やすさを追求しながらもデザイン性の高いフォントが多くまとめられていました。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Lost Type Co-op |
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525)Twitterアイコン・バナー(64)RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52)フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207)ファッション(200)音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整えるWebサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTML とCSS コードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらっても OK です :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF,Chrome, Sa
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7pxsolid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7pxsolid #ccc; border-bottom:1pxsolid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
谷です。 今回はデザインブログらしく、デザイン系の記事を書きます。 私は企画デザインで主にHTML/CSSコーディングと プロモーション系以外のデザインをしています。 具体的にはボタンの画像や、見出しの装飾画像などです。 ※制作するサイトによっては全体の情報設計などもおこないます。 デザインブログというからには、ブログの投稿記事なども 見やすく見栄えよく！と思い立ったので、CSSを利用した 簡単な見出しのデザインを紹介します。 画像・余分なマークアップ(タグを加えたりとか）無しでデザイン ↑のような見出しのデザインですね。 見出しに該当する文章は基本的に「h○タグ」でマークアップされますので そのh○タグ（今回はh4タグ）を装飾していきます。 1.これは見出しです。 非常にシンプルな形です。ブログの記事のタイトルの装飾は これの色違いですね。 2.これは見出しです。 付せんのようなデザイン
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
