昨日の記事の修正を・・・

こんにちは、パソコンインストラクターの川上雄大です。

スマホ（iPhone6）で、昨日の自分の記事↓を見たら、

『記事内のメニューバーその２』

あらら、

記事内のメニューバーの右側が切れている・・・

（スマホでの表示↑）

あらら、こりゃまいずな・・・と（汗）

<style type="text/css">#navi3{width:405px;font-size:10px;}#navi3 ul{margin:0;padding:1px 0;list-style: none;}#navi3 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 80px;line-height: 2;float: left;overflow: hidden;white-space:nowrap;}#navi3 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi3 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi3"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

なので、

最初の、widthをautoに変更しました↓

<style type="text/css">#navi3{width:auto;font-size:10px;}#navi3 ul{margin:0;padding:1px 0;list-style: none;}#navi3 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 80px;line-height: 2;float: left;overflow: hidden;white-space:nowrap;}#navi3 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi3 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi3"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

すると、

スマホでも、ちゃんとみれるようになりました↓

（スマホでの表示↑）

ただ、折りたたまれてしまうので、どうしても１行に収めたい方は、

２つ目のwidthの数字を

80pxから60pxとかに小さくするとよいです。

（でも、あまり小さくすると、タップしずらいです〜^^;）

• メニュー1
• メニュー2
• メニュー3
• メニュー4
• メニュー5

<style type="text/css">#navi3{width:auto;font-size:10px;}#navi3 ul{margin:0;padding:1px 0;list-style: none;}#navi3 ul li{margin:0;padding:0 0 0 1px;display:inline;width: 60px;line-height: 2;float: left;overflow: hidden;white-space:nowrap;}#navi3 ul li a{display:block;text-align:center;font-weight: bold;background-color:#ffb6c1;color:#ffffff;text-decoration:none;border:1px solid #ffffff;}#navi3 ul li a:hover{background-color: #ffffff;color: #7B746B;border: 1px solid #ffb6c1;}</style><div id="navi3"><ul><li><a href="#">メニュー1</a></li><li><a href="#">メニュー2</a></li><li><a href="#">メニュー3</a></li><li><a href="#">メニュー4</a></li><li><a href="#">メニュー5</a></li></ul></div>

（スマホ表示↑）

以上、昨日の記事の修正でした。

LIDS札幌・ライフデザインスクール
川上 雄大

囲み枠｜見出し付枠｜色コード｜メニューバー