CSSメモ

トップメニュー ページ26

##
今度は理沙さんからのご質問です。

上のメニューの所を変える設定とのこと。

この画像に写っている白い部分です。
スマホからだとどう見えるんでしょう…？

とりあえず、調べてみたところ変えられそうなのでご紹介します。


が。
CSS定義ルールにもありますが、

見づらくすること
(例えば、背景色と文字の色を近い色同士にすること、背景を透過しすぎて画像で見えづらくなること)

は一切禁止です！！

CSS定義ルールに引っかかるだけでなく解説したem7側にも被害が来るので絶対にやめてください。

▽公式より引用

トップ部分(id="topcon","topmenu")については背景色を変更してロゴを認識しづらくすることやメニューを押しづらくすることは禁止です
こちらの部分のフォント、リンク色の変更は可能ですが、文字色を黄色や緑等、過度に変更することは禁止です

△

このルールに従えないのであればお戻りください。
変えること自体に反対してるわけではなく、それで見づらくなるのが嫌なだけです。
見えづらいと思ったら容赦なく声をかけていくつもりです。

とは言っても。
うるさいことを色々言ってきましたが、ルールを守れる範囲であればぜひとも変えたいところですよね〜。
気を取り直していきましょう。

まず、デフォルトで背景が白い部分ですが、
セレクタは「#topcon」です。

#topcon{
background:#カラーコード !important;
}
!importantをつければ変更できます。

次に、少しではありますが、白い部分の下のグレーのラインです。
雰囲気を壊していて、どうにか変えられないかなぁ…と色々いじったら出来ました。
これはborderプロパティで設定されていますので、同じくborderで設定します。
セレクタは「#topcon_line」です。
太さや、線の種類も変えられないことはありませんが、デザイン崩れに繋がるので一切変更しないでください。
変えて良いのは色だけです。

#topcon_line{
border-bottom-color:#カラーコード !important;
}

これで変えられます。

何度も言いますが、CSS定義ルールに従って、
見やすくオシャレに、CSSを楽しんでいきましょうね。

理沙さん、ご質問ありがとうございました。
また何かありましたら、遠慮なくお声掛けください！

##

囲み線機能→←次のお話に進むボタン

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す