線の一部の色を変える

今回は線の一部の色を変える方法です｡こんな感じになります｡

タイトル

HTML

HTMLは以下になります｡

<p class="border">タイトル</p>

クラス名である､borderを指定しています｡これは､わかりやすい名前でいいです｡クラス名やIDは任意の名前でいいです｡わかりやすいものがいいですね｡

ちなみに､ここではpタグを使っていますが､h1やh2などでもいいです｡すべてのh1やh2､そしてpなど､すべてのタグに指定する場合は､クラス名は必要ありません｡

多くはh2などの見出しで採用される場合があるので､使いどころとしては､ブログなどの小見出しでしょうか｡あまりむずかしくありません｡が､SCSSは少し複雑です｡

SCSS

SCSSは以下になります｡

.border{
position: relative;
border-bottom: 2px solid rgb(0, 0, 0);
&::before{
content: "";
position: absolute;
width: 100px;
border-bottom: 2px solid rgb(255, 0, 0);
bottom: -2px;
left: 0;
}
}

起点を作り(position: relative)を書き､線の太さと色を決めます｡あとは､｢&::before｣を書きます｡

｢position: absolute｣で絶対配置し､長さや色を決めます｡

｢bottom｣と｢left｣で位置をしています｡なお､｢bottom｣は線の太さのぶんだけ､マイナスにします｡これでぴったりとくっつくようになります｡違和感がある場合は､プレビューしながら､調整をしましょう｡

CSS

CSSは以下になります｡

.border {
  position: relative;
  border-bottom: 2px solid rgb(0, 0, 0);
}
.border::before {
  content: "";
  position: absolute;
  width: 100px;
  border-bottom: 2px solid rgb(255, 0, 0);
  bottom: -2px;
  left: 0;
}

SCSSの方がわかりやすいですね｡SCSSは最終的にCSSにコンパイルする必要があります｡

コンパイルする方法がない人は､CSSを書きましょう｡

最初はCSSから入るのがいいかもですね｡ちなみに､SCSSとCSSはあまり変わりません｡SCSSファイルであっても､普通にCSSを書く感覚です｡

スクールはどうなっているか｡そこに興味がありますね｡

さいごに

バックアップを取ってから対応しましょう｡本番のファイルでするのは､中々､リスキーです｡無理のないように｡