Warning: count(): Parameter must be an array or an object that implements Countable in /home/a11926240/programminglanguage7.com/public_html/wp-content/plugins/wordpress-ping-optimizer/cbnet-ping-optimizer.php on line 533
Read Article

htmlのサイトを作ろう

広告

この章ではまとめとしてHTMLのサイトを作ります。463464465466467468469 470471472結果は以下の通りです。473 521では初めにメニューの作り方について説明します。
メニューはリストで作成するのでulとliで作成します。
ulとli にCSSを施さないと以下の状態です。474
ここではマークは必要ないので、list-style-typeプロパティの値をnoneに指定します。476 結果は以下の通りです。477 次にこのメニューを横に並べますので、displayプロパティの値を inlineに指定します。
displayプロパティは要素の表示形式を指定する際に使用します。inlineには改行を外す機能があります。478 結果は以下の通り改行が外れたので、横一列に並びます。479 次に文字の下にある線を削除しますので、text-decorationの値をnoneに指定します。481 結果は以下の通りです。482 次はこのメニューにパティングを設定します。483 結果は以下の通りです。484
次はulにbackground-colorやborderの設定を施します。485 結果は以下の通りです。486 次にliにpaddingやborderに設定を施します。487 結果は以下の通りです。488 次にliのaのみにcolorを設定します。489 結果は以下の通りです。490 このリストにリンクを付けることでお問い合わせページなどに飛ばすことが出来ます。491492 例えばお問い合わせページをクリックすると次のお問い合わせページに移ることが出来ます
(お問い合わせページのHTMLは最後に載せています)。493 以下の箇所でimgにマージンやfloatを設定しています。494 以下の通り、画像と文字の間の距離を設定します。495 次にh3に以下の処理を施します。496 497ここで大事なのは498です。
この例の499500と書いても同じです。
つまり、imgに501を指定しているので、回り込みを解除するには502もしくは503と書きます。
504もしくは505を指定しないとh3が回り込んでしまうので以下の通りレイアウトが崩れます。506508

507509補足ですが、お問い合わせページのHTMLは以下の通りです。510511512513514515

522結果は以下の通りです。517

518519左右のマージンにautoを設定しないと以下のように内容が真ん中にはきません。520

URL :
TRACKBACK URL :
Return Top