HTMLやCSSがわからなくても、コピペでOK!
このページでは、イエローベースの見出しデザインをご紹介します
イエロー系の色が持つ効果
- 幸福
- 元気
- 楽しい
- わかりやすい
- 初心者、子ども向け
イエローは太陽の色。ハッピーカラーです!
サイトやブログのテーマカラーに合わせて適用してみてくださいね(・ω・)
「はじめて見出しデザインのカスタマイズをする」って方は、下記の記事も参考にしてくださいね
初心者必読!見出しデザインカスタマイズ方法【CSS】 ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね! そんな見出しのデザインを色別に作成したので、ぜひ参考にし...
もくじ
枠あり見出しサンプル
内枠見出し
h2{
color: #fffffb;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background-color: #fdd22b;
border: 2px solid #ffffff;
box-shadow: 0px 0px 0px 5px #fdd22b;
}
縫い目風見出し
h2{
color: #fffffb;
background: #fdd22b;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
box-shadow: 0 0 0 5px #fdd22b;
border: 3px dashed #fffffb;
}
タグ風見出し
h2{
color: #fffffb;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background: #fdd22b;
border-radius: 30px 0px 0px 30px;
box-shadow: 0 5px 3px #c8baa7;
}
h2::before {
color: #fffffb;
content: '●';
}
折り目風見出し
h2{
position: relative;
margin:1.4em 0;
color: #fffffb;
padding: 0.3em 0 0.3em 0.5em;
background-color: #fdd22b;
}
h2::after {
position: absolute;
content: '';
top: 100%;
left: 0;
border-width: 0 20px 15px 0;
border-style: solid;
border-color: transparent;
border-right-color: #c8baa7;
}
ネオン風見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border: 1px solid #ffffff;
box-shadow: 1px 1px 20px 5px #fdd22b;
}
立体風見出し
h2{
color: #fffffb;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border-radius: 15px;
background: rgb(255,148,111);
background: linear-gradient(0deg, rgba(255,148,111,1) 0%, rgba(253,210,43,1) 77%);
box-shadow: 0 5px 3px #c8baa7;
}
グラデーションを変えたい場合、CSSグラデーション ジェネレーターで色を作成し、「background:」を書き換えてください
吹き出し風見出し
h2{
position: relative;
color: #fffffb;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background: rgb(253,210,43);
background: linear-gradient(90deg, rgba(253,210,43,1) 57%, rgba(255,79,79,1) 100%);
border-radius: 8px;
}
h2::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 18px solid transparent;
border-top: 18px solid #fdd22b;
}
グラデーションを変えたい場合、CSSグラデーション ジェネレーターで色を作成し、「background:」を書き換えてください
リボン風見出し
h2{
color: #fffffb;
margin:1.4em 0;
position:relative;
padding: 0.2em 0 0 0.5em;
background: rgb(253,210,43);
background: linear-gradient(90deg, rgba(253,210,43,1) 57%, rgba(255,79,79,1) 100%);
box-shadow: 0 4px 0 #c8baa7;
}
h2::after {
position: absolute;
content: '';
top: 0;
right: 0;
width: 0;
height: 0;
border-width: 25px 20px;
border-style: solid;
border-color: transparent;
border-right-color: #fff;
}
グラデーションを変えたい場合、CSSグラデーション ジェネレーターで色を作成し、「background:」を書き換えてください
コミック風見出しサンプル
初心者必読!見出しデザインカスタマイズ方法【CSS】 ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね! そんな見出しのデザインを色別に作成したので、ぜひ参考にし...
立体風見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border: 3px solid #000000;
box-shadow: 12px 8px #fdd22b;
}
ふんわり立体風見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border: 3px solid #000000;
box-shadow: 8px 8px 10px 1px #fdd22b;
}
付箋風見出し
h2{
margin:1.4em 0;
padding: 0.2em 0 0.2em 1em;
border: 2px solid #000000;
box-shadow: inset 0.9em 0 #fdd22b;
}
黒枠見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background-color: #fdd22b;
border: 4px solid #000000;
}
二十枠見出し
h2{
margin:1.4em 0;
border-radius: 18px 18px 18px 18px;
background-color: #fdd22b;
border: black 10px double;
background-clip: content-box;
}
マジック風見出し
h2{
color: #fffffb;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border-radius: 15% 25% 15% 25%;
box-shadow: 0 0 0 5px #000000;
background-color: #fdd22b;
}
ギザギザ風見出し
h2{
position: relative;
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background: #fdd22b;
height: 5vh;
}
h2::after {
content: '';
position: absolute;
right: 0;
left: 0;
top: 100%;
z-index: 10;
display: block;
height: 19px;
background-size: 12px 100%;
background-image: linear-gradient(135deg, #fdd22b 25%, transparent 25%), linear-gradient(225deg, #fdd22b 25%, transparent 25%);
background-position: 0%;
}
シンプル系見出しサンプル
初心者必読!見出しデザインカスタマイズ方法【CSS】 ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね! そんな見出しのデザインを色別に作成したので、ぜひ参考にし...
立体付箋風見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
border-left: 13px solid #fdd22b;
background-color: #fff2b8;
padding-left: 10px;
box-shadow: 0 5px 3px #c8baa7;
}
色枠見出し
h2{
margin:1.4em 0;
padding-left: 0.5em;
border:solid 8px #fdd22b;
}
拡張枠見出し
h2{
margin:1.4em 0;
padding: 0.2em;
background-color: #fff2b8;
border: solid 5px #fdd22b;
background-clip: content-box;
}
木の葉風見出し
h2{
margin:1.4em 0;
padding: 0.3em 0 0.3em 0.5em;
background: #fff2b8;
border-radius: 2px 150px / 100px;
box-shadow: 0px 0px 0px 5px #fdd22b;
}
上下二重線見出し
h2{
margin:1.4em 0;
padding-left: 0.5em;
border-top: 11px double #fdd22b;
border-bottom: 11px double #fdd22b;
}
左右ダブルライン見出し
h2{
margin:1.4em 0;
padding-left: 0.5em;
border-left: double 20px #fdd22b;
border-right: double 20px #fdd22b;
}
下線見出しサンプル
初心者必読!見出しデザインカスタマイズ方法【CSS】 ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね! そんな見出しのデザインを色別に作成したので、ぜひ参考にし...
マーカー風見出し
h2{
margin:1.4em 0;
box-shadow: inset 0 -0.7em #fdd22b;
}
ダブル下線見出し
h2{
margin:1.4em 0;
padding-left: 0.5em;
border-bottom: 4mm ridge #fdd22b;
}
左ダブルライン見出し
h2{
margin:1.4em 0;
border-bottom: 3px dashed #fdd22b;
border-left: 4mm ridge #fdd22b;
padding-left: 10px;
}
下線見出し
h2{
margin:1.4em 0;
padding-left: 0.2em;
border-bottom: 6px solid #fdd22b;
}
h2::before {
color: #fdd22b;
content: '★';
}
左の記号が不要の場合は「.u::before」を丸々削除してください
「★」の記号は変えられます
ドットライン見出し
h2{
margin:1.4em 0;
padding-left: 0.5em;
border-bottom: 10px dotted #fdd22b;
}
.u::before {
color: #fdd22b;
content: '✔︎';
}
左の記号が不要の場合は「.u::before」を丸々削除してください
「✔︎」の記号は変えられます
点線見出し
h2{
margin:1.4em 0;
padding-left: 0.3em;
border-bottom: 7px dashed #fdd22b;
}
h2::before {
color: #fdd22b;
content: '▶';
}
左の記号が不要の場合は「.u::before」を丸々削除してください
「▶︎」の記号は変えられます
補足事項
▼おすすめのカラーコードのリンク
カラーコード・アイキャッチ・ロゴ作成 に使えるリンク集画像や動画を作る時におすすめのサイトのリンクを集めました どれもデザインをする時に役立つ素敵なサイトで、実際にいつも利用させていた...
▼見出しに使えるCSSのプロパティメモ
見出しの装飾をするためのCSSプロパティ集 そんなお悩みをお持ちの方は参考にしてみてください https://learning-museum.inliberty.wo...
かわいい!ピンク系の見出しデザイン27種【コピペOKのCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、ピンクベースの見出しデザインをご紹介します ピンク...
かっこいい!ブルー系の見出しデザイン27種【WPカスタマイズ】HTMLやCSSがわからなくても、コピペでOK! このページでは、ブルーベースの見出しデザインをご紹介します ブルー...
おしゃれ!グリーン系の見出しデザイン27種【コピペCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、グリーンベースの見出しデザインをご紹介します グリ...