ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

メインビジュアルの作成

メインビジュアル表示部を作成しよう

ホームページの「顔」となる、メインビジュアルを作成しましょう。

メニューの出来上がりイメージとソースコードは、以下のようになります。

[HTMLの記述例]
ソースコードの記述例
[完成図]
メインビジュアルの完成図

大きな画像が表示されているので複雑そうに感じますが、ソースコードを見ると<img>タグで画像を挿入しているだけなので、とてもシンプルです。

さっそく、メインビジュアルの画像を挿入してみましょう。

挿入する画像

メインビジュアルで表示させる画像は「img」フォルダ内の「mainimg.jpg」となります。

挿入する画像

<div id="mainimg"></div>の間に、画像を挿入するコードを入力しましょう。

[入力するコード]
<div id="mainimg">
<img src="img/mainimg.jpg" alt="さきちんカフェ、メイン画像">
</div>

なお、「img」フォルダから画像を呼び出すので、画像ファイル名の前に「img/」を付けるのを忘れないようにしましょう。
また、alt属性を付けておきましょう。

[HTMLの記述例]
imgタグの入力例

ブラウザで確認しよう

入力が完了したら、「index.html」ファイルをブラウザで確認してみましょう。

下画像のように、メインビジュアルの画像が表示されていれば成功です。

メインビジュアルの完成図

なんだか本格的にホームページっぽくなってきましたね!
次はメインコンテンツ部分の作成に取りかかりましょう。

覚えておきたいポイント

画像を挿入するだけでOK

メインビジュアルは1枚の大きな画像を<img>タグで挿入しているだけなので、とてもシンプルで簡単です。

入力ミスに注意

もし見本の画像と違うように表示される場合は、どこかが間違っている可能性があります。
よくソースコードを見て間違いがないか確認しましょう。

メインコンテンツのスタイルを作成
« 前のページへ メニューの作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。