Navigation

関連記事

トップページ

見出しデザインサンプル集【CSS】


TAKAHIRO YAMADA
@rural_web
見出しデザインサンプル集【CSS】

HTMLとCSSでつくる見出しサンプル集。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いついたり、見つけたりしたら更新。

CSSがバッティングするとサンプル通りに表示されないので注意。PCでレスポンシブの確認するときは、ブラウザの横幅を変えて確認。

ベーシック系

1.べたなやつ

テキストサンプル

ソース表示

css

h3 {
    font-size: 1.5rem;
    display: inline-block;
    border-left: 6px solid #dd4b39;
    margin: 2% 0;
    padding-left: 6px;
}

html

<h3>テキストサンプル</h3>

2.中央ライン、テキスト中央寄せ

テキストサンプル

ソース表示

css

h3 {
    position: relative;
    display:inline-block;
    width:100%;
    font-size: 1.5rem;
    text-align:center;
    margin: 2% 0;
}
h3:before {
    content: "";
    display: block;
    position: absolute;
    border-top: solid 2px #dd4b39;
    height: 2px;
    width: 100%;
    top: 40%;
    z-index: 1;
}
h3 span {
    position: relative;
    display: inline-block;
    background: #FFF;
    padding: 0 10px;
    max-width: 70%;
    z-index: 2;
}

html

<h3><span>テキストサンプル</span></h3>

アイコン(font-awesome)系

1.左アイコン

テキストサンプル

ソース表示

css

h3 {
    position: relative;
    display: block;
    font-size: 1.5rem;
    padding: 10px 0 0px 24px;
    border-bottom: 2px solid #dd4b39;
    margin-bottom: 20px;
}
h3:before {
    font-family: FontAwesome;
    content: "\f040";
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 2rem;
    color: #dd4b39;
}

html

<h3>テキストサンプル</h3>

2.トップアイコン、下ライン

テキストサンプル

ソース表示

css

h3 {
    position: relative;
    display: block;
    font-size: 1.5rem;
    text-align: center;
    margin: 10px 0;
}
h3 span {
    display: inline-block;
    max-width: 80%;
    border-bottom: 4px solid #dd4b39;
    
}
h3:before {
    font-family: FontAwesome;
    content: "\f030";
    font-size: 2rem;
    color: #dd4b39;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
}

html

<h3><span>テキストサンプル</span></h3>
コメントを表示 (0)

Comments

CAPTCHA


関連記事

ホームページ制作

CSSでつくるボタン各種サンプル集

HTMLとCSSでつくる「ボタン」サンプル集。最近は画像ボタンよりもCSSでつくる機会が増えたので、ちょこちょこまとめてみる。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いつい […]

by TAKAHIRO YAMADA
ホームページ制作

フォントサイズの単位まとめ

フォントサイズの単位「px、em、rem、%」の違いについてのまとめ。 px(ピクセル)について 押さえたいポイント モニタ画面の最小単位1ドットと同等で考えておけばいい。 環境によって左右されない絶 […]

by TAKAHIRO YAMADA