BLOG

ブログ

前にも書いたけどCSSって苦手。
何か目的がないとやろうと思わないんだけど、今回は顧客要望のため 仕方なく 鋭意勉強!
というわけで、以下の要望を満たすべく、検索(苦笑)

【要望】
タイトルに使う文字の背景色をつける
タイトルは左寄せ
文字数によって背景色も変更されるように

最初、入れ子の原理がわからなかったのだけど、ここを見て納得。とても分かり易かったです。なるほどね。でも、これだと文字数に応じた枠線の可変設定ができないので、また調べる。
どうやらinline-blockを使って実装できるみたいだったので、それを採用…したら中央によらなくなっちゃった(苦笑)
inline-blockを使うとfloatが使えないのね。分かりました。
で、参考にしたのがこちら
他にもここここも参考にさせてもらいました。ありがとうございます。
で、完成したのがこれ。

.top_bace {
width: 100%; /* 幅指定 */
text-align:center; /* 要素中央指定 */
}

.top_tit {
color: #fff; /* 文字色指定 */
height: 135px; /* 高さ指定 */
display: inline-block; /* 幅指定 */
font-size: 2.5em; /* 文字サイズ指定 */
text-align: center; /* 文字位置指定 */
background-color: #EF454A; /* 背景色指定 */
padding: 20px; /* 枠内余白指定 */
margin: 20px; /* 枠外余白指定 */
position: relative; /* BOX中央指定 */
}

それから、MW WP Formの確認、送信ボタンを変更したいというリクエストはこちらを参考にさせてもらいました。
ここまで来るのに朝から昼までかかっちゃったよ。これでやっと完成。
しかし、本当に便利だよね。こうやって書いておかないと忘れちゃいそうだけど。まぁ、忘れたらまた検索ってことで。

関連記事一覧