シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。

[paris1204]

ボーダーの使い方

[kusamonaka]

便利！

[HenkouSunglass]

これは便利すぎる！

[oops_design]

おまけも含めて使えそう（違う意味で）

[shinagaki]

TENGAのt_

[taetae109]

50個もサンプルを公開してくれてありがたい

[anajalspg]

段落　css　wordpress　見出し

[Nyoho]

見出しに使えるサンプル

[lodge123]

“h1 { position: relative; text-align: center; } h1 span { position: relative; z-index: 2; display: inline-block; margin: 0 2.5em; padding: 0 1em; background-color: #fff; text-align: left; } h1::before { position: absolute; top: 50%; z-index: 1; content: ''; display: block; width: 100%; height: 1px

[botuku]

見出し変更に参考

[hinahiropapa]

見出しタグ参考

[rcorco]

リボンリボン

[nosinosi3]

めも

[hana4771]

CSS

[hazakuratoyume]

“body { counter-reset: titleNum; } section { counter-increment: titleNum; } h1 { position: relative; padding: 0 0 .5em 2em; border-bottom: 1px solid #ccc; } h1::before { position: absolute; top: 0; left: 0; content: counter(titleNum); width: 28px; height: 28px; line-height: 28px; background-color:

[miracle1998]

見出し装飾のアイデア(。・ｘ・)ゞ♪

[tailtame]

h1のみ 時々span入れ子 で自分向きだ！ / 全部見てなかったけど最後のネタわろた

[usaku]

“border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;”

[lui-kk]

便利見出し。

[snjx]

便利

[pro_searcher]

“.25em 0 .25em .75em”

[aiko_oomine]

“h1 { position: relative; padding: .5em .75em; background-color: #f0f0f0; border-radius: 6px; box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset; } h1::after { position: absolute; top: 100%; left: 30px; content: ''; width: 0; height: 0; border: 10px solid transparent; border-top: 15px solid #f0f0f0;

[hujuu]

“h1 { padding-bottom: .5em; border-bottom: 1px solid #ccc; } h1:first-letter { margin-right: .1em; font-size: 1.5em; }”

[ny20160302]

“3498db”

[minekoneko]

タイトルバー　CSS

[sapporojewel]

見出し、HTMLとＣＳＳ

[K8A]

css

[sabatora02]

これは便利！

[thera]

“h1 { padding-bottom: .5em; border-bottom: 3px double #ccc; }”

[yururiururi]

参考になります！

[marshmallow808]

“h1 { position: relative; padding: 0 .5em .5em 2em; border-bottom: 1px solid #ccc; } h1::before, h1::after { position: absolute; content: ''; border-radius: 100% } h1::before { top: .2em; left: .2em; z-index: 2; width: 18px; height: 18px; background: rgba(150, 150, 150, .5); } h1::after { top: .7e

[hitokatsu35]

“h1 { position: relative; padding: 1em 4em 1em 1em; -webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); border-radius: 6px; } h1::after { position: absolute; top: 0; right: 0; content: ''; width

[y-yasukawa1236]

タイトル部の見出しのデザイン集