pictSQUAREから見たpictSPACEの見出しをどうするか
個人的メモです。
頒布物をキレイに魅せる方法はいっぱい資料があるんですが、見出しについての資料は少なかった&もしかしたら求める人がいるかもなーということで残しておきます。
別名、「疑似要素を無理やりインラインスタイルで再現する方法」です。html・CSSわからん人向けなのでわかってる人はだいぶ下までスルーしてってオッケー。
例として、かわいいのがいっぱいあるJAJAAAN様の見出しデザインを引用させていただきます。
ごくシンプルな見出しデザイン
見出しでも文の下に線を引くなどは非常にかんたんで、
<div style="border-bottom: 3px solid #00a1e9; color:#00a1e9; font-weight:bold;">見出し1</div>
これで実装が可能です。
見出し1
実際に書くとこうなります。solidの部分をイロイロ変えると点線になったり二重線になったりします。詳しくは「border css」で検索してみてください。
頭の部分に縦線を引くのも実はかんたんオブかんたんで、
<div style="padding: 1rem 1.2rem; border-left: 6px solid #00a1e9; color: #00a1e9; font-weight: bold;">見出し2</div>
これでできます。paddingとかいうのが増えてますけどざっくり言うと縦線から文章までの距離を設定してます*1。なお結果的にそうなってるのであって本来は別の役割がある部分です。
見出し2
実際に書くとこんな感じ。これもsolidの部分を変えることが可能です。
この2つと背景色を追加で、見出しデザインは結構バリエーションが作れます。
<div style="padding: 1rem 1.2rem; border-left: 8px double red; color: white; font-weight: bold; background:black;">見出し3</div>
見出し2に背景色を追加し、線を太くして二重線に変えました。
見出し3
こんな感じ。
::Beforeと::afterをどうピクスペで使えるようにするか
では、ちょっと込み入ったモノの場合はどうすればいいのか、という話です。JAJAAAN様のサイトと見比べるとわかるんですが、先にあげた三つのデザインもJAJAAAN様だと別の書き方になっています。
HTML
<h2>CSS見出しデザイン</h2>h2 { border-bottom: 3px solid #000; }
見出し1はJAJAAAN様だとこんな感じですね。
まずHTMLとCSSに分かれているうえにdivじゃなくてh2になっています。ピクスク・ピクスペではdivのが取り回ししやすいだけなのでここはスルーしてください。
＜以下詳しく知りたい方向け＞なぜdivでやっているかというと、サイトの構成自体にh1などのタグは使用されていることが多くそこらへんと干渉したら表示が崩れる可能性が高いので時代に逆行したほうが良さそうという判断。まあそもそも疑似要素をインラインスタイルで書くのが時代を十年くらいさかのぼっているので今更のような。＜ここまで＞
CSSを見てもらえればわかりますが、見出し1のstyle=""内border-bottom:～;とborder-bottom:～;部分はよく似ています。#000が違うだけ。
つまり、たいがいのものはdivのstyle=""にcssの中身を入れるとその通りになります。太字にするためには「font-weight: bold;」を追加すればオッケー。ただピクスペ・ピクスクともタグ内の改行も表示の改行に反映するため、コピペする場合は改行とタブを削除する必要があります。めんどくさい。ここらへんは他の方も詳しく書いているのでそちらに譲ります。
問題は、::Beforeと::afterがでてきた場合です。
HTML
<h2>吹き出し風の見出し</h2>h2 { position: relative; padding: 1.5rem 2rem; border: 3px solid #d8d8d8; border-radius: 10px; background: #f9f9f9; } h2:before { position: absolute; bottom: -14px; left: 1em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #d8d8d8 transparent transparent transparent; } h2:after { position: absolute; bottom: -10px; left: 1em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #f9f9f9 transparent transparent transparent; }
これはJAJAAAN様の「吹き出し風の見出し2」です。この::beforeと::afterは疑似要素と呼ばれるもので、読み下し文をつけるとしたら「h2の中身より前にこれを追加」「h2の中身の後ろにこれを追加」となります。つまり、
<div style="position: relative; padding: 1.5rem 2rem; border: 3px solid #d8d8d8; border-radius: 10px; background: #f9f9f9; font-weight: bold; margin-bottom:10px;"><div style="position: absolute; bottom: -14px; left: 1em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #d8d8d8 transparent transparent transparent;"></div>吹き出し風の見出し2改造版<div style="position: absolute; bottom: -10px; left: 1em; width: 0; height: 0; content: ''; border-width: 14px 12px 0 12px; border-style: solid; border-color: #f9f9f9 transparent transparent transparent;"></div></div>
こうすればいいんだ！！！
<div style="h2のCSSを入れる"><div style=":beforeのCSSを入れる"></div>見出し<div style=":afterのCSSを入れる"></div></div>
コードがごちゃごちゃして分かりづらいですが、つまりこういうことです。前のやつを実際に書いてみると、
こんなふうになります。
んで、これにちょっと手を入れると、
お立ち寄りいただきありがとうございます！
こんなのも作れます。paddingやmarginは実際に書いて保存して実物を見て～で調整するのがオススメです。ピクスクから見るとremとかよりpxのが調整しやすそうではある。
<div style="position: relative; margin-bottom: 15px; padding: 10px 10px; color: #fff; border-radius: 10px; background: #00a1e9; text-align: center;">お立ち寄りいただきありがとうございます！<div style="position: absolute; bottom: -9px; left: 1em; width: 0; height: 0; content: ''; border-width: 10px 10px 0 10px; border-style: solid; border-color: #00a1e9 transparent transparent transparent;"></div></div>
上の水色の吹き出しのタグです。自己紹介のとこに書くとヨ。もし使う方がいれば#00a1e9が色の指定なので、こういった場所でカラーコード調べてお好きな色に変えてください。
番外編
CSSはまとめて書くことができるので、::beforeと::afterで同じ設定がある場合まとめられている場合があります。
h2 {
（h2の設定）
}
h2:before,
h2:after {
（共通する設定）
}
h2:before{
（before固有の設定）
}
h2:after{
（after固有の設定）
}
こういった場合はちょっと面倒ですが、
<div style="h2の設定"><div style="共通する設定&before固有の設定"></div>見出し<div style="共通する設定&after固有の設定"></div></div>
で可能です。
なお、アイコンとかwebフォント使ってる系はできませんたぶん。しゃーなし。
*1:1remじゃなくて1.2remの部分。1remを変えると縦線の高さが変わる
