ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心！
次は、メインビジュアルの表示枠となる「mainimg」スタイルを作成しましょう。
「mainimg」スタイルは、ホームページの「顔」であるメインビジュアルを表示するためのスタイルです。
横幅960px、縦幅350pxの枠を作成し、上に10px、下に15pxの領域間余白を設定します。さらにfloat:leftで回り込み指定をします。
このスタイルの中にimgタグで画像を差し込み、表示させています。
メインビジュアルはトップページの最も目立つ場所にあり、利用者にホームページ全体のデザインを印象付けることができます。
メインビジュアルの画像を差し替えると、全体の印象をガラリと変えることができます。それくらい、メインビジュアルはホームページ全体のデザインに影響します。
それでは、メインビジュアルを入れるmainimgスタイルを作成していきましょう。
まずはセレクタ名を入力します。
「mainimg」というスタイルを作るので、セレクタ名は「mainimg」とします。
}
なお、「mainimg」は一度しか使わないので、「#」とします。呼び出す際には<div id="mainimg">で呼び出す必要があるので注意しましょう。
次に、プロパティを入力します。
「mainimg」では表示幅が固定されています。
横960px、縦350pxなので、width:960px; height:350px;を入力します。
次に、左方向に回りこみ処理をさせるためにfloat:left;を入力します。
これを指定しておかないと、後々の作業でレイアウトが崩れてしまう場合があります。
最後に領域間余白を指定します。
他のコンテンツとの間に余白がないと窮屈に感じますので、適当な余白を設けましょう。
上方向に10px、下方向に15pxの領域間余白を指定します。
入力が完了したら、「UTF-8N」で上書き保存しておきましょう。
これで「mainimg」スタイルの完成です。
HTMLやCSSを作成するときにやりがちなのがスペルミス。
1文字でも違うとレイアウトが崩れる可能性があるので、一語一句、確認しながら入力しましょう。
安心してホームページを運営するための心がけ。
よく使う、HTMLの特殊文字・記号の一覧表。
HTML・CSSで使えるカラーコードの一覧表。
当サイトをご利用になる前に、必ずご確認ください。
よくあるご質問など。
さきちんWEBについてのお問い合わせはこちらから。
個人情報管理とWeb広告配信について。
さきちんWEBの管理・運営者、さきちんについて。
さきちんWEBのサイトマップ。