img – プログラミング入門

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

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

結果は以下の通りです。

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

この章ではvertical-alignプロパティについて説明します。
vertical-alignプロパティは行内のテキストの縦方向の位置を指定します。では例を見てみましょう。spanタグはstrongタグのように直接的に文字を太くするなどの機能を持っていませんが、 spanタグで囲んだ範囲をスタイルシートで適用するために使います。
結果は以下の通りです。
親要素であるp要素(猫)とテキストの縦の関係性をsuperなどを使って指定します。では他の例を見てみましょう。ここでimg要素について説明します。 =>img要素は画像を表示する要素です。
srcには画像ファイルのファイル名を指定、widthはpxか%で画像の幅を指定,heightはpxか%で画像の高さを指定します。
altは画像を表示させることに失敗した時に代わりに表示される文字を指定します。
heightとwidthを指定することで、画像の読み込みが遅れた場合にも、 heightとwidthで指定した分のスペースが事前に確保されますので、指定しておくことをお勧めします。
width, heightの「値」には以下の2種類のどちらかで指定できます。
〇 auto
=>ブラウザに応じて自動設定
〇 pxや%などの単位で設定する。
では画像にvertical-alignプロパティを使用した結果をみてみましょう。
親要素であるp要素と画像の縦の関係性をbaselineなどを使って指定します。
結果は以下の通りです。