コピペで出来る見出しデザイン10選:CSSをそのまま使用可能

WEB制作/デザイン

この記事では、HTMLとCSSだけで色々な用途で使用可能な見出し(h1,h2など)のデザインをいくつか紹介します。ブログやHPで使って下さい。

初心者の方でもあまり難しく考えないで済む様にHTML内にスタイルを記述しているので全て丸々コピペでOKです。

使い方

WordPress:カスタムHTMLに丸々コピペ
静的サイト :bodyの中に丸々コピペ
サイト全体 :下記を読んで下さい

HTMLとCSSを別々にしてサイト全体に反映させたい場合は、classを外してから<style>〜</style>の中身を切り抜いてスタイルシートに記述して下さい。(ある程度マークアップ言語のリテラシーがある方じゃないと崩れちゃうかもしれないです。)

注意‼︎

一つ一つに個別でclassを付けてHTMLに記述しています。基本的に被らなそうなクラス名にしていますが、classが重複してしまうとスタイルが崩れる場合があるのでご注意下さい。その場合はclass="この部分"を任意のものにすれば解決します。

CSSの基本的な書き方は以下。

シンプル

まずはシンプルで簡単な王道デザインを紹介します。

黒で太文字

黒一色で太文字です。結局これが一番。

下記が実際の見え方です。以下省略。

シンプル1/これは見出しの見本です。

下記のHTML(CSS付き)をコピペして下さい。CSSのみ使いたい場合は<style>の中の「titledesign1」の部分を各要素名(h1やpost h2など)に置き換えて使って下さい。以下省略

<h1 class="titledesign1">シンプル1/これは見出しの見本です。</h1>

<style>

.titledesign1 {
   color: #111;
   font-weight: 700;
}

</style>

灰色中央

灰色にして中央揃え。どんなページでも見た目がまとまり、当サイトでも採用しているおすすめデザインです。

シンプル2/これは見出しの見本です。

<h1 class="titledesign2">シンプル2/これは見出しの見本です。</h1>

<style>

.titledesign2 {
    color: #777;
    text-align: center;
}

</style>

ボーダー線

シンプルな下線を付けてみました。

シンプル3/これは見出しの見本です。

<h1 class="titledesign3">シンプル3/これは見出しの見本です。</h1>

<style>

.titledesign3 {
   color: #111;
   border-bottom: solid #111 2px;
   padding: 0.2em;
}

</style>

ボーダー線2本

シンプルな下線を2本付けてみました。

シンプル4/これは見出しの見本です。

<h1 class="titledesign4">シンプル4/これは見出しの見本です。</h1>

<style>

.titledesign4 {
   color: #111;
   border-bottom: double #111 4px;
   padding: 0.2em;
}

</style>

ボーダー上下

ボーダー線を上下に2本入れました。

シンプル5/これは見出しの見本です。

<h1 class="titledesign5">シンプル5/これは見出しの見本です。</h1>

<style>

.titledesign5 {
   color: #111;
   border-top: solid 3px #111;
   border-bottom: solid 3px #111;
   padding: 0.3em;
}

</style>

囲い

シンプルにボーダー線で囲っているだけのデザインです。

シンプル6/これは見出しの見本です。

<h1 class="titledesign6">シンプル6/これは見出しの見本です。</h1>

<style>

.titledesign6 {
   color: #111;
   border: solid #111 2px;
   padding: 0.3em;
}

</style>

丸み

ボーダー線で囲い丸みを付けました。

シンプル7/これは見出しの見本です。

<h1 class="titledesign7">シンプル7/これは見出しの見本です。</h1>

<style>

.titledesign7 {
   color: #111;
   border: solid 3px #111;
   border-radius: 0.5em;
   padding: 0.2em;
}

</style>

白黒反転

黒背景に白テキス。

シンプル8/これは見出しの見本です。

<h1 class="titledesign8">シンプル8/これは見出しの見本です。</h1>

<style>

.titledesign8 {
   background: #777;
   color: #fff;
   padding: 0.3em;
}

</style>

点線

ボーダー線を点線に変えました。

シンプル9/これは見出しの見本です。

<h1 class="titledesign9">シンプル9/これは見出しの見本です。</h1>

<style>

.titledesign9 {
   color: #111!important;
   border-bottom: dashed 2px #111;
   padding: 0.2em;
}

</style>

立体的

背景色と下線に強弱を付けて立体的な見た目に。

シンプル10/これは見出しの見本です。

<h1 class="titledesign10">シンプル10/これは見出しの見本です。</h1>

<style>

.titledesign10 {
   color: #111;
   background-color:rgba(230,230,230,0.5);
   border-bottom: solid #dcdcdc 4px;
   border-right: solid #dcdcdc 1px;
   border-left: solid #dcdcdc 1px;
   padding: 0.3em;
}

</style>

色付きのデザイン

今後追加予定


以上が『コピペで出来る見出しデザイン10選:CSSをそのまま使用可能』でした。

今後気が向けばどんどんいろんなデザインを追加していきます。コーティング作業やブログ運営、HP制作などに適当に使って下さい。(全部丸々コピペでいけます。)

他のHTML/CSSデザイン集は以下から