?> 最終更新日:2016年1月19日 作成日:2008年4月19日 | コメント(0)
見出しのサンプル集
web制作で必ず必要になる見出し(h1~h7のタグ)
毎回、どうしようかと悩むときもあるので、見出しのサンプル集を作成しました。
線をつけるパターン
見出しのサンプル(下線)
見出しのサンプル(下点線)
見出しのサンプル(左線)
見出しのサンプル(下線・左線)
見出しのサンプル(下点線・左線)
見出しのサンプル(上線・左線)
見出しのサンプル(上点線・左線)
見出しのサンプル(上線・下線)
見出しのサンプル(上点線・下線)
背景色をつけるパターン
見出しのサンプル(色)
見出しのサンプル(色・下線)
見出しのサンプル(色・下線・左線)
見出しのサンプル(色・上線・下線)
利用の仕方
各サンプルの下のエリアの部分をコピーして自由にお使いください。
CSSに組み込んで利用する方がいいです。
例)background:#dddddd;color:#222222;font-size:100%;font-weight:normal;padding:3px 10px 3px 10px;line-height:150%;を使う場合
h2{
background:#dddddd;
color:#222222;
font-size:100%;
font-weight:normal;
padding:3px 10px 3px 10px;
line-height:150%;
}
(別のCSSが組み込まれている場合、見え方に違う場合があります。)
各装飾を変更したい場合
各部分の英数字を変えてください。
背景色を変えたい場合
background:#dddddd;の#ddddddの部分を変える。
フォントの色を変えたい場合
color:#222222;の#222222の部分を変える。
フォントのサイズを変えたい場合
font-size:100%;の80%の部分を変える。
フォントの太さを太くしたい場合
font-weight:normal;のnormalをboldに変える。
線を変えたい場合
上線を作りたい:border-top:1px solid #999999;
右線を作りたい:border-right:1px solid #999999;
下線を作りたい:border-bottom:1px solid #999999;
左線を作りたい:border-left:1px solid #999999;
線の太さを変えたい:1pxの部分変える。
線を点線に変えたい:solidをdottedに変える。
色を変えたい:#999999の部分を変える
Tweet
web制作に関係のある記事一覧
- 見出しのサンプル集
- 複数のチェックボックスにチェックする入力支援javascript
- 画像メニューをCSSで作る(CSSでマウスオーバー)
- 検索キーワードチェックツール SEO対策
- 文字サイズを小さく、文字サイズを大きくするjavascript
- メニューを画像のように使う(CSSでマウスオーバー)
- メイリオとMS Pゴシックの違い
- グーグルサイトマップ(Google Sitemap)用のXMLを作成する方法
- クリックで画像を切り替えるjavascript
- カウンターを置く理由を考える
- アフィリエイトの登録について
- やさしいブラウザ webサイトのバリアフリーチェック
- ぞえ式web制作学(ホームページ制作学):制作に必要なソフト
- さくらインターネットでMovable Type4の拡張子をPHPでする方法
- webサイトのコンテンツツリー、フォルダとファイル構造を取得する方法
- W3CのHTMLの妥当性検証「The W3C Markup Validation Service」
- SEOに有効なディレクトリ登録・検索エンジン登録サービス
- PPC忍者:マーケティングに重要なPPCを調べるソフト
- PHPで扱えるファイルマネージャー(FM-V / File Manager - Valet)
- MTEntriesに関するタグの使い方(Movable Type)
- MovableTypeで公開時では表示しない項目をプレビュー画面で確認したい場合
- Movable Type:コメントを投稿できませんでした。エラー: 不正な要求です。
- Movable Typeで記事の「記事の続き」を表示する(MTEntryMore)
- Movable Typeで記事の「本文」を表示する(MTEntryBody)
- Movable Typeで記事の「タイトル」を表示する(MTEntryTitle)
- Movable Typeで携帯電話での投稿(モブログ):ubicast Mail Blogger
- JavascriptのみでRSSを表示するGoogle AJAX Feed API
- HTML・CSSタグの変換用辞書ファイル
- Firefoxでmixiにログインできなくなった場合
- CSSハックまとめ
- CSSで写真を綺麗に・アルバムのように見せる表現
- ClickHeatでクリック位置のヒートマップ:ホームページのどこをクリックしているかの統計
- 1枚の画像を使い画像メニューをCSSで作る(CSSでマウスオーバー)
- .htpasswdファイルの管理・編集するCGI
コメントする