メニューの背景色を変える

2015-05-28_200855色のCSSは「#」で始まる英字で表記されます。
例えば「赤色」は「#ff0000」です。(参考:Web色見本

color: #fff;

colorは「文字」の色

border-left-color: #fff;

border-colorは「線」の色(leftは左)

スマホの場合

/*-------------------------------- アコーディオン ---------------------------------*/ #s-navi dl.acordion p { margin: 0; } #s-navi dl.acordion { margin: 0 10px; } #s-navi dt.trigger { text-align: right; padding: 10px 0px; cursor: pointer; } #s-navi dt.trigger .op { font-size: 14px; color: #fff; padding: 0px 10px; } #s-navi dd.acordion_tree { padding: 0px 10px; display:none; overflow: hidden; } .acordion_tree li { float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; border-left-width: 1px; border-left-style: dotted; border-left-color: #fff; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px; } .acordion_tree li li { float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; border: 0px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 10px; } .acordion_tree li a { float: left; color: #fff; text-decoration: none; }

パソコンの場所

/*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 781px) { nav { background: #f3f3f3; color: #fff; padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-radius: 5px; background: linear-gradient(#fff, #f3f3f3); border: solid 1px #ccc; margin-bottom: 10px; } nav li:first-child { border: none; } nav li { position: relative; float: left; font-size: 13px; padding-left: 10px; display: inline; padding-right: 10px; border-left-width: 1px; border-left-style: dotted; border-left-color: #CCC; padding-top: 5px; padding-bottom: 5px; } nav li li { padding-top: 0px; padding-bottom: 0px; } nav li li { padding-top: 0px; padding-bottom: 0px; }
background: #f3f3f3;

backgroundは背景

background: linear-gradient(#fff, #f3f3f3);

linear-gradientはグラデーション。
linear-gradient(上の方の色,下の色)

※両方書いてあるのは便宜上で、下に記述されているグラデーションの方が適応されます。グラデーションが嫌な場合は削除して下さい。

広告が溶け込む魔法の子テーマ「JET」

大人気!

詳しく見る

情報配信中

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

投稿日:

Copyright© AFFINGER(WING) , 2018 All Rights Reserved Powered by AFFINGER5.