HTML+CSSのメニューボタンをより理解して組み込むには、
5/30の公開記事
スタイルシート3種類の適用方法の練習http://cid2016web.blogspot.jp/2016/05/3.html
をより正しく理解してから取り掛かることが必要です。
やみくもにコードをコピペや改変すると、迷宮入りしてしまいます。
プリントを見て、
CSSが反映される仕組み3つと、その有効な順位(強さ)を把握しましょう。
↑
練習のコードが最後に掲載されています。
完成サンプルはリンク先のページのここから見られます。
完成サンプルを見てみましょう。
-----------------------------------------------------------
1
赤い文字は外部スタイルシートなので、styleseet.cssをheadから<link rel="~">のコードを使って読み込んで、表示されています。
HTMLのbody内に書くのは id="ichi"のコードを必要なdivボックスに記述し指定するだけです。
-----------------------------------------------------------
2
緑の文字はhead要素の中にスタイルシートを書き込んで指定して表示しているので、
<style type="text/css"> .green { color: #0F0; } </style>
をhead内に記述し、
HTMLのbody内にclass="green"のコードを必要なdivボックスに記述し指定します。
3
青い文字は、インラインスタイルシートなのでstyle="color:#0000ff"をHTMLのbody内の必要なdivボックスに記述し指定します。
その有効な順位(強さ)
1<2<3
です。
効果が強けいれば良いというものではなく、
それぞれに使い勝手の良い場面があり使い分ける必要があります。
主に1の方法で作成することが後々混乱しませんが、
１の方法だけでは反映できない場合がでてきます。
その場合には、2.3.の方法をとる必要があります。
0 件のコメント:
コメントを投稿