初心者向け
ホームページの
作り方講座

メイン画像の配置

メニュー(nav)の装飾が終わりましたのでメイン画像の配置を行いましょう。

メニューの下に配置したいイメージ画像を用意して下さい

適当なものをお持ちでない場合、当サイトの姉妹サイトのPHOTO-CHIPSで探してみて下さい。今回は以下のビルの写真を使って紹介させて頂きます。ビルの写真はデスクトップ上(パソコン起動時に開いている画面。TeraPadなどのアイコンも同じデスクトップ上にあると思います。)に持ってきておきましょう。

写真をペイントソフトで開いて切り抜く

Windowsをご利用なら、ペイントソフトが入っていると思いますのでそれを使って作業します。
ペイントはパソコンの画面の一番左下の「スタートボタン」を左クリック→「すべてのプログラム」→「アクセサリ」→「ペイント」の順で開く事ができます。

ペイントを左クリックし、画面を開きましょう。

先ほどダウンロードしておいた写真を左クリックしながら、ペイント画面の中に移動してきます。ペイント画面内に移動するとマークが変化するので、変化したらクリックを離して下さい。

以下のように開く事ができましたか?

高さをちょっとカットします

このままだと写真の高さが大きすぎるので、横長にカットします。画像の一部をカット(切り抜く)事を一般的にトリミングするとも言います。

以下の場所を左クリックします。

切り抜きたい範囲を決め、左上で左クリックしたまま右下まで移動します。

右下まで移動したらクリックを離して切り抜き範囲を確認します。

問題なければ、画面内にある「トリミング」をクリックして下さい。

以下のように切り抜く事ができれば成功です。

上書き保存します

以下のボタンをクリックすると、そのまま上書き保存されます。

デスクトップ上にあったこの写真がトリミングされているか確認してみて下さい。
確認方法は、デスクトップ上の写真のアイコンの上で「クリック」し、出てきたリストから「プレビュー」を左クリックすれば写真を見る事ができます。

写真をHPフォルダに移動しておきましょう。

HPフォルダに画像専用のフォルダを用意しておきます。以前にcssフォルダを作った時と同じです。

画像用のフォルダなので「images」というフォルダ名をつけましょう。

imagesフォルダができたらクリック又はダブルクリックで開きます。
開いたら、外にあった写真を左クリックしながらフォルダまで移動します。
フォルダ内に来たらクリックは離してOK。

以下のように無事移動できましたか?

上記のように画像で見えない場合は画像で見れるように設定しましょう

上記のように写真本体でなく、ファイル名で表示されている場合は、写真が見えるように設定します。

表示方法は他にも色々あるので、この中からお好みのものをチョイスしてもらってもOKです。

index.htmlに写真を配置します

画像を配置する為のhtmlタグは、

<img src="(画像へのパス)" alt="(代替テキスト)">

です。

今回の場合は、
<img src="images/IMG_0552.JPG" alt="">
になります。

まず「images/」というのは、「imagesフォルダに入っている」という意味です。
続いて「IMG_0552.JPG」とあるのが、上で保存した写真ファイル名です。
もしここでimagesというフォルダを作らずにindex.htmlと同じ場所に写真を置いていたとしたら、
<img src="IMG_0552.JPG" alt="">
となるわけです。
最後の「alt=""」というのはその写真を文字で説明したい場合に入れる場所です。今回は装飾用の写真の扱いなので、「""」と空っぽの状態にしていますが、例えば商品写真などの場合は、「alt="赤い傘"」など具体的に入れる必要があります。

今回は、メニューの下に配置しようと思いますので、以下の場所に追加して下さい。

↓手打ちに自信のない人は以下のタグをコピペして下さい。

飾り画像のマークアップをしておきます

この写真は装飾用なので、以下タグを使います。

<aside>~</aside>

<aside>は本サイト内容と関連が薄いものに使うタグです。マークアップの方法については編集する人によって解釈が異なり、<p>段落タグで囲ったり、<div>タグで囲ったり、そのまま<img>タグだけ使ったりと様々です。明確に<aside>だけを使う必要はないので念の為覚えておいて下さい。
<aside>は他でも使う可能性があるので、専用の名前を付けてあげます。今まで何度もやっていますね。今回はmainimgとつけてあげましょう。

以下のようになればOKです。

index.htmlをプレビューで見てみます

写真の元サイズが大きかったので、多分このように枠から飛び出てしまっていると思います。

幅100%にちょうどおさまるようにstyle.cssファイルを指定していきましょう。
<aside id="mainimg">の中にある<img>タグへの指定になるので、css上では、
aside#mainimg img {
}

と記載します。imgとは文字通り<イメージ(画像)>の意味です。このイメージ画像を幅100%で表示させたいので、「width: 100%;」を追加します。
aside#mainimg img {
width: 100%;
}

次に高さも指定しますが、高さは幅によって変動させたいので、「height: auto;」と指定して下さい。 「auto」というのは「自動」という意味でこれも文字通りです。
aside#mainimg img {
width: 100%;
height: auto;
}

再びプレビューでindex.htmlを見ます

以下のように幅がちゃんとおさまっていれば成功です。

メニューの右端と画像にほんの少し隙間があるのが気になる場合はこちらの解説をお読み下さい。

次のステップは…

「HP外側に背景を設定」です。頑張りましょう!