CSSとHTMLを適当に入力し成功などとブログに記載してしまったが

スマートフォンで表示したところなにも反映されず

原因は不明ですがおそらく私のやり方に問題があるはずです、また点線の部分については依然として何も分からず。といったところで参ってしまいました。

 そこで今回は、いろいろなデザインを紹介しているサイトがあるので。まずそれを参考にしていきたいと思います。青や赤のアンダ

ーラインをいろいろ変えて見出しに使おうと当初は考えていましたが、今後はデザインを固定しｈ１～ｈ４くらいまで背景色などを変えていく方向で進行していこうと思います。

今回お世話になるサイト

saruwakakun.com

「見出しデザイン」でトップに出てきたサイトですね。

 

おっ←いいじゃん（＾ｖ＾）

このサイトはコードを表示することも可能なのでそのコードをデザイン編集およびHTML編集にコピーしていきます

とりあえずテスト用見出し

 ｈ１要素で適用しようと思ったんですがとりあえずclassつけて

<H1 class="yajirusi"> </h1>にしてみました。

ちょっと長いですが

CSS

h1 {
  position: relative;　デフォルト値　他には fixed absolute 
  padding-left: 25px;  左に余白25px
}

h1:before {
  position: absolute;　　親要素の位置を基準に取る
  content: '';
  bottom: -3px;　下に3px
  left: 0;     どこにも
  width: 0;　　　　　うごか
  height: 0;　　　　　　　　ない
  border: none;
  border-left: solid 15px transparent;　左に線を引く　15px
  border-bottom: solid 15px rgb(119, 195, 223); 色の指定　で矢印の▽の部分
}
h1:after {
  position: absolute;
  content: '';
  bottom: -3px;　　▽の下の部分と同じライン
  left: 10px;　　　　場所的に一番左辺りから
  width: 100%;　　　　　　　線を引っ張るような感じ
  border-bottom: solid 3px rgb(119, 195, 223);
}

そのままコピーしました。が個人的に調べてみた結果色々なものが組み合わされて矢印はできているのだと思いました。自分で作成するとなると結構な作業になるはずなのでネット上で公開している方は非常に素晴らしいです。

そこで私は　

h1.yajirusi を黄色　RGB(255,255,0)

h2.yajirusi を　赤　RGB(255,255,0)

h3.yajirusi を　青　RGB(255,255,0)

h4.yajirusi を　緑　RGB(255,255,0)　にしてみようと思います。

各CSSを一つづつ入力して　色だけを変えてみます

結果

<h1 class="yajirusi"> 新しい見出しの表示</h1>

新しい見出しの表示

<h2 class="yajirusi"> 新しい見出しの表示</h2>

新しい見出しの表示

<h3 class="yajirusi"> 新しい見出しの表示</h3>

新しい見出しの表示

<h4 class="yajirusi"> 新しい見出しの表示</h4>

新しい見出しの表示

やっとなんとなくまともな見出しができてきた

 前回のブログの復習となりますが、このように、HTML編集でクラスを指定してそれに応じたCSSを編集・量産することで見出しを使い分けることができます。自分でデザインしなくてもネットでフリーのデザインコードを使用し、色の変更や線の太さを調節することでほとんどパクリにはなってしまいますがオリジナルっぽいものができることがわかりました。他にもデザインを適用したいのであれば

ネット上でフリーのデザインコードをコピーする

HTML でクラス指定　CSSにて編集の流れで作成は可能かと思われます。

次回からはしばらく←でやっていこうと思います。

でもスマートフォンは反映されないんだよなぁどうしてかな