理想のデザイン像をまとめる
サルワカさんの見出しデザインののページを参考にする。
https://saruwakakun.com/html-css/reference/h-design
h1タグ → 立体感のあるバー
h1 {
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}h2〜h6タグ → 左線
h2, h3, h4, h5, h6,{
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
}サルワカさんの箇条書きのCSSを参考にする。
https://saruwakakun.com/html-css/reference/ul-ol-li-design
ul,ol,liタグ → シャドウボックス
ul, ol {
background: #dadada;/*灰色に*/
border-radius :8px;
box-shadow :0px 0px 5px silver;
padding: 0.5em 0.5em 0.5em 2em;
}
ul li, ol li {
line-height: 1.5;
padding: 0.5em 0;
}pタグ → line-heightの指定
https://saruwakakun.com/html-css/reference/line-height を参考
p {
line-height: 1.7;
}※ 強調装飾は、蛍光ペン風の装飾にする。
https://kagesai.net/css-marker-design/ を参考にする。
strongタグ → ライトブルー系マーカー線
/* マーカー線・水色 */
strong {
background:linear-gradient(transparent 75%, #bce2e8 75%);
font-weight:bold;
}emタグ → ライトブルー系マーカー線
/* マーカー線・水色 */
em {
background:linear-gradient(transparent 75%, #bce2e8 75%);
font-weight:bold;
}