Web制作独学者へ見出しの装飾方法を伝授

Tweet

みなさん、こんにちは！
フリーランスエンジニアのKATSUMIです。

Webサイトでは各要素の装飾が重要です。​
今回は、見出しの装飾の仕方を紹介します。​

見出しに縞模様の下線を加える方法

下線を引いたり、背景色をつける場合、repeating-linear-gradientを使用し、斜めのストライプを作成しました。
角度を45度に指定し、白色と透過を3px毎に繰り返しています。​
index.htmlとstyle.cssは下記の通りです。

<div class="post-title">
   <h2><a href="#">見出し見出し見出し見出し見出し見出し見出し見出し</a></h2>
</div>

.post-title {
    padding-bottom: 10px;
    background-image: linear-gradient(45deg, #fff 30%, #ccc 30%, #ccc 50%, #fff 50%, #fff 80%, #ccc 80%, #ccc 100%); /*グラデーションで縞模様*/
    background-size: 6px 6px;
    margin-bottom: 1.5rem;
}
.post-title h2 {
    background: #fff; /*背景色白*/
    padding: 0 .5rem .875rem; /*値を調整して線の太さを変える*/
    font-size: 1.5rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 500;
    line-height: 1.5;
}
.post-title a {
    color: #949087;
    text-decoration: none;
}

Web制作のご依頼はこちらまで

蛍光ペンで線を引いたような見出しにする

下線を引いたり、背景色をつける方法を説明します。
太めの線を少しかぶせて表示しようとするにはCSSのグラデーションを使う必要があります。​
数値を変えると線の太さを調整でき、「padding-bottom」を加えると文字のベースラインより下にラインを描画が可能です。​
色や太さをカスタマイズしてカッコよく仕上げることができます。​
index.htmlとstyle.cssは下記の通りです。

　<h1>見出し見出し見出し見出し見出し見出し見出し見出し</h1>

h1 {
  font-size: 2rem;
  font-family: sans-serif;
  font-weight: bold;
  display: inline-block;
  background-image: linear-gradient(transparent 50%, #ff6 50%); /*グラデーションでテキストに線を少し被せる*/
  padding-bottom: .25rem; /*文字のベースラインより少し下にライン*/
}

Webページデザインでは、目を引くデザインが大切です。
デザインが良いと、ポートフォリオの出来も良くなりますし、仕事の依頼も増えます。

この情報が、Web制作初心者の転職採用やフリーランスエンジニアの仕事獲得のお役に立てますと幸いです。

下記を押していただけると励みになります！
↓

　　　　　　　　　　　　　　　　人気記事

プログラミングスクール：エンジニアおすすめの３社

フリーランス初心者にとってクラウドソーシングは登竜門だ！

Tweet