個人練習用:ブログパーツ、h2やh3の装飾CSS
h2やh3のデザインのcssです。解説なしです。
最初から順番に下線、点線、二重線、上下線、塗りつぶし、線で囲む、左線、立体、影、蛍光マーカー風、両端が線。のh2,h3のCSSを書いています。最後のだけちょっと長いです。
関連タイピング
-
CSS 3 暗記用です
プレイ回数636 英語長文587打 -
css 3 暗記用です
プレイ回数962 英語長文438打 -
CSSでよく使うプロパティのタイピング
プレイ回数431 英語長文584打 -
自分練習用、英語長文
プレイ回数2695 英語長文1127打 -
2022.12.14:プロパティを削除・追加。
プレイ回数3175 英語90秒 -
jQuery基本例文集です。解説なしです。
プレイ回数1014 英語長文1554打 -
CSS 暗記用です
プレイ回数466 英語長文562打 -
css 3 暗記用です。
プレイ回数1085 英語長文1146打
問題文
ふりがな非表示
ふりがな表示
(h2 { border-bottom: solid 3px black; })
h2 { border-bottom: solid 3px black; }
(h2 { border-bottom: dashed 2px #6594e0; })
h2 { border-bottom: dashed 2px #6594e0; }
(h2 { border-bottom: double 5px #FFC778; })
h2 { border-bottom: double 5px #FFC778; }
(h2 { color: #364e96; padding: 0.5em 0;)
h2 { color: #364e96; padding: 0.5em 0;
(border-top: solid 3px #364e96;)
border-top: solid 3px #364e96;
(border-bottom: solid 3px #364e96; })
border-bottom: solid 3px #364e96; }
(h2 { background: #c2edff; padding: 0.5em; })
h2 { background: #c2edff; padding: 0.5em; }
(h2 { color: #364e96; border: solid 3px #364e96;)
h2 { color: #364e96; border: solid 3px #364e96;
(padding: 0.5em; border-radius: 0.5em; })
padding: 0.5em; border-radius: 0.5em; }
(h2 { padding: 0.25em 0.5em; color: #494949;)
h2 { padding: 0.25em 0.5em; color: #494949;
(background: transparent; border-left: solid 5px #7db4e6; })
background: transparent; border-left: solid 5px #7db4e6; }
(h2 { padding: 0.4em 0.5em; color: #494949;)
h2 { padding: 0.4em 0.5em; color: #494949;
(background: #f4f4f4; border-left: solid 5px #7db4e6;)
background: #f4f4f4; border-left: solid 5px #7db4e6;
(border-bottom: solid 3px #d7d7d7; })
border-bottom: solid 3px #d7d7d7; }
(h2 { padding: 0.5em; background: aliceblue;)
h2 { padding: 0.5em; background: aliceblue;
(box-shadow: 0 0 4px rgba(0, 0, 0, 0.23); })
box-shadow: 0 0 4px rgba(0, 0, 0, 0.23); }
(h1 { background: linear-gradient(transparent 70%, #a7d6ff 70%); })
h1 { background: linear-gradient(transparent 70%, #a7d6ff 70%); }
(h3 { position: relative; display: inline-block; padding: 0 55px; })
h3 { position: relative; display: inline-block; padding: 0 55px; }
(h3:before, h3:after { content: ''; position: absolute;)
h3:before, h3:after { content: ''; position: absolute;
(top: 50%; display: inline-block; width: 45px;)
top: 50%; display: inline-block; width: 45px;
など
(height: 1px; background-color: black; })
height: 1px; background-color: black; }
(h3:before { left:0; } h3:after { right: 0; })
h3:before { left:0; } h3:after { right: 0; }