個人サイトのイラストや写真をCSSで整える

ウェブサイトにイラストや写真を掲載してより魅力的に見せるためには、いくつかの小さな工夫が必要になることもあります。

高解像度の画像を使用する: 鮮明で高解像度の画像を使用することが基本です。
でも画像サイズが大きくなるとページの読み込み速度が遅くなることもありますよね。
いきなり難題ではありますが、このAI学習が問題になっている中で、どの程度までやれるか…
このサイトの場合、適切に圧縮した上でJavaScriptを経由しないとイラストが表示されない仕組みにしてあります。─ このJavaScriptを経由するという話題については、また別のところでご紹介しようかと。 ─
レスポンシブデザイン: レスポンシブデザインを取り入れて、さまざまなデバイスで画像が美しく表示されるようにすることが重要です。
CSSの max-width: 100%; や height: auto; を使うことで、画像がデバイスの幅に合わせて自動的に縮小されます。

レスポンシブデザイン：CSSの事例


img {
  max-width: 100%;
  height: auto;
  }

一貫性のあるスタイル: ウェブサイト全体で一貫性のあるスタイルを保てるといいですね。
画像のサイズ、配置、枠線などを統一することで、サイト全体がまとまりのある印象を与えます。
とはいってもなかなか難しい状況もあるかと。
全てを統一する必要もありませんが、ある程度はまとまっていた方がいいですよという程度です。
適切なキャプション: 画像にキャプションを付けることで、内容をより理解しやすくすることができます。
でも全ての画像にキャプションを付けるわけにもいかないでしょうから、これも可能な限りという話です。
キャプションを付ける時は、短く簡潔に書きましょう。


<figure>
  <img src="example.jpg" alt="Example Image">
  <figcaption>この画像の説明</figcaption>
 </figure>

アクセシビリティの確保: 画像に適切なalt属性を設定することで、視覚障害のあるユーザーや検索エンジンに対して画像の内容を伝えることができます。
画像の適切な配置: 画像の位置や配置に関しては、そのサイトの形態によって違ってきますよね。
テキストと画像のバランスを考えて配置できれば、視覚的に見やすいデザインが実現します。
画像の効果的な使用: 必要以上に画像を使いすぎないことも大切です。
必要な場所に適切に配置することで、視覚的なインパクトが高まり、ユーザーの注意を引きつけることができます。

これらのポイントを活用しつつ、ウェブサイトのイラストや写真をより良く見せるためのコードをご紹介します。

このページに関する注意事項

当Webサイト作成者は、例示を目的としてマークアップ及びプログラミング例を提供しており、明示または黙示にかかわらず、いかなる責任も負わないものとします。
このページは、説明されているマークアップ及びプログラミング言語、手順を作成およびデバッグするために使用される各種ツールに読者が精通していることを前提にしています。
このページは、特定の機能を説明するのに役立つ可能性がありますが、当Webサイト作成者がこれらの例を変更した上で、特定の要件を満たすために追加の機能を提供したり、システムを構築したりすることはできません。
加えて、この例の手順に従う場合は、読者の各種ファイルを事前にバックアップすることを推奨いたします。

Webサイトのロゴ画像

画像に関する設定はちょっと長期戦になります。
上述の見出しにしてもそうなんですが、その気になればコードを短縮することもできるのです。
でもやらない理由があって、それは今後も変更される可能性があるからなんだよね。
まとめてスタイル設定している箇所があると、今後の変更がやりにくくなる可能性があります。


/*サイトタイトル*/
img.moray {
    display: block;
    margin: auto;
    width: 80%;
    height: auto;
}

display: block;
画像をブロック要素として表示しています。
画像が独自の行に表示されるようになるのですが、これは単発で大きく表示したりするときに向いてますね。
このページではページ上部のウツボの切り絵を大きく掲載しています。
これにはaltにWebsite Logoとしっかり記入してあります。

margin: auto;
画像を中央に配置しています。
本来なら余白も追加しますが、画像自体に白いスペースを用意しているので、ここでは不要です。

width: 80%;
画像の幅を親要素の80%に設定しています。
ギリギリまでカラーを広げるの…どうなんだろう…
とりあえず、Webページの上下左右に余白が欲しいです。

height: auto;
画像の高さを自動的に調整しています。
幅に合わせて高さが変わるようにしてあります。

画像によって大きさを使い分ける

display: block;は「Webサイトのロゴ画像」と同じ。
height: auto;も「Webサイトのロゴ画像」と同じですが、こういうのを「アスペクト比の維持」なんて言ったりしますね。
ちなみにこれはCSSに共通ですが、IDやクラスを持つタグに対してスタイルを適用します。
ここなら、img.biggraphicやimg.graphicに対してスタイルを適用していることになります。


/* とても大きいイラスト */
img.biggraphic {
    margin: 20px;
    display: block;
    width: 80%;
    height: auto;
}

/* 大きいイラスト */
img.graphic {
    margin: 20px;
    display: block;
    width: 50%;
    height: auto;
}

margin: 20px;
画像の周りに20ピクセルの余白を設定しています。
普段はこうやってCSSで余白を取ってますね。

width: 80%; と width: 50%;
画像の幅を親要素に従って設定しています。
画像の大きさや性質によって、80%や50%と使い分けていくのです。

イラストとテキストの配置：回り込み

これはけっこう基本じゃないかな？
私が持ってた教科書だけじゃなく、Webサイト作成に関する本ならたいてい掲載されている話だと思います。


/* イラストを右にしてテキストを回り込ませる */
img.right-image {
    float: right;
}
div.content {
    overflow: hidden;
}

img.right-image {
スタイル適用を行うための宣言です。
ここでは、クラス名が「right-image」となっているimg要素に対して行います。
書式設定とは少し違いますが、いわゆるCSSの作法として覚えておく必要があります。

float: right;
このプロパティが大切です。
画像を右側に配置し、テキストがその左側を回り込むようにします。

div.content {
スタイル適用を行うための宣言です。
ここでは、クラス名が「content」のdiv要素に対して行います。
htmlタグの内容まで書かなくても良いんだけどね。
.contentだけでも効くのですが、私は気付いたときに書くようにしてます。

overflow: hidden;
このプロパティは、div要素の内容がその境界を超えた場合に、超えた部分を隠すという設定です。
これを付けておかないと高さが正しく計算されず、レイアウトが崩れることがあるのですよ。

画像の配置にtableタグは止めよう

画像を２つ横に並べたいとき、tableタグを使って配置するのは止めましょう。
私はその世代じゃないのですが、昔はそうやって画像を配置するのが流行ったとか？
htmlタグは本来あるべき形で使わないと、ブラウザが正しくコンテンツを認識できません。


/* グラスタ表の火力20倍の話に添えるイラスト */
.grastaimage {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.grastaimage img {
    max-width: 45%;
    height: auto;
}

display: flex;
子要素が柔軟に配置されます。
フレックスボックスレイアウトとか、呼んだりしますね。

justify-content: space-between;
子要素を左右に均等に配置し、間にスペースを作っています。

gap: 5px;
子要素間の間隔を5ピクセルに設定しています。

max-width: 45%;
画像の最大幅を親要素の45%に制限しています。
全体が100%ですから、半分は50%。
そこから少し余裕を持って画像を小さくします。

敢えて表の中に画像を入れるケース

ここはクラス名まで含めて説明してみましょうか。
ちょっと長くなるけどね。
本来であれば、表の中に画像を入れるのは望ましくないと思っています。
表を使ってレイアウトを整えているのと変わらないからね。
ただ、この場合は広すぎるセル内に彩りを添えたいからやってます。


/* グラスタ表内部の画像 */
div.gtable {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.toptext {
    margin-bottom: 10px;
}

.bottomimage {
  display: block;
  max-width: 80%;
  height: auto;
  margin: auto;
}

div.gtable { display: flex; }
gtableクラスを持つdiv要素をフレックスボックスにします。
フレックスボックスというのは、要素を並べるためのレイアウト方法となります。

flex-direction: column;
フレックスボックスの方向を縦方向（列）に設定しています。
要素が上から下に並びます。

justify-content: flex-start;
ここで、フレックスボックス内の要素を上端に揃えます。

.toptext { margin-bottom: 10px; }
toptextクラスを持つ要素の下に10ピクセルの余白を追加しています。
余白は大切です。

.bottomimage { display: block; }
bottomimageクラスを持つ要素をブロック要素にします。
ブロック要素は普通、全ての幅を占めていきます。

max-width: 80%;
bottomimageクラスを持つ要素の最大幅を親要素の80%に制限しています。
こうしないとキツキツになってしまう。

height: auto;
bottomimageクラスを持つ要素の高さを自動調整します。
幅に応じて高さが変わるようにしています。

margin: auto;
bottomimageクラスを持つ要素を中央に配置します。
こうすることで、上下左右の余白が自動的に設定されていきます。
左詰めでも良いと思うけどね。
ここは彩り目的の画像だから。

Webページを彩る画像の配置

このサイトでは自然の草花を使っています。
私自身が撮影しているものなので、著作権リスクとも無縁でいられますしね。
そういうWebページを彩る画像を配置するために使っているhtmlとcssを掲載します。

写真を飾るためのhtml


<div class="flowerclearfix">
  <div class="flowerfade-out">
    <img src="../flower1/flower1(●●●).JPG" alt="FLOWER">
  </div>
●●●
</div>

htmlはそんな難しくないですよね。
ていうかhtmlコードをあんまり難しくしてしまうと、後からいろいろ更新する時に大変です。
ここではdivタグについて説明しましょう。

汎用性の高いコンテナ：div

HTMLコーディングでよく使われる<div>タグは、「division」の略で、ページ内のコンテンツをグループ化するための汎用的なコンテナ要素です。
いくつか例となるコードを書いてみます。

1.コンテンツのグループ化

複数の要素（テキスト、画像、リンクなど）を一つの<div>タグで囲むことで、それらを一つのまとまりとして扱います。
このページで使っているコードの紹介にしても「<div class="code-container">」という形でグループ化していますよ。
そうやってグループ化しておけばコピペコードにしやすいし、cssの適用もラクなんです。

コンテンツのグループ化を行っているコードの例


<div>
    <h1>タイトル</h1>
    <p>段落テキスト</p>
    <img src="image.jpg" alt="画像">
</div>

2.スタイルの適用

CSSを使って、<div>タグ内のコンテンツに対して一括でスタイルを適用できます。
一番使うのはこれだと思いますね。
一定範囲をdivで括り、その範囲内をまとめてcssで調整する。
これは個人サイトを作る上で覚えておいたほうが良いです。

スタイルの適用を行っているコードの例


<style>
    .container {
        border: 1px solid #000;
        padding: 10px;
    }
</style>
<div class="container">
    <h1>タイトル</h1>
    <p>段落テキスト</p>
    <img src="image.jpg" alt="画像">
</div>

3.レイアウトの構築

ページのレイアウトを作成する際に、<div>タグを使ってセクションを分けることができます。
これにしても、レイアウト構築をした上でcssを適用するわけですよ。
あるいはこの例にあるようにヘッダーフッター程度であれば、<section>タグを使っても大丈夫です。

レイアウト構築を行っているコードの例


<div class="header">ヘッダー</div>
<div class="main-content">メインコンテンツ</div>
<div class="footer">フッター</div>

<div>タグは非常に柔軟で特定の意味を持ちません。
たいていのコンテンツを包むことができます。
class付けも併用することでページの構造を整理しやすくなり、スタイルやスクリプトを適用する際にも便利です。

写真を飾るためのflower.css


@charset "UTF-8";

/* flowerfade-out クラスのスタイル */
.flowerfade-out {
    position: relative; /* 要素を相対位置に配置 */
    width: 40%; /* 幅を40%に設定 */
    float: right; /* 右側に配置 */
    margin-left: 5px; /* 左側の余白を5pxに設定 */
    margin-top: 10px; /* 上側の余白を10pxに設定 */
}

/* flowerfade-out クラス内の img 要素のスタイル */
.flowerfade-out img {
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロック要素として表示 */
}

/* flowerfade-out クラスの擬似要素 before のスタイル */
.flowerfade-out::before {
    content: ""; /* 空のコンテンツを追加 */
    position: absolute; /* 絶対位置に配置 */
    top: 0; /* 上端を0に設定 */
    left: 0; /* 左端を0に設定 */
    width: 100%; /* 幅を100%に設定 */
    height: 100%; /* 高さを100%に設定 */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%); /* グラデーション背景を設定 */
}

/* flowerclearfix クラスのスタイル */
.flowerclearfix {
    overflow: auto; /* オーバーフローを自動調整 */
}

レイアウトを制御するpositionとfloat

positionとfloatは、要素の配置やレイアウトを制御するとても大切なCSSプロパティです。

positionプロパティの説明

positionプロパティは、要素の位置を指定する方法を決定します。

1.static（デフォルト値）: 要素は通常の文書の流れに従って配置されます。; 特別な位置指定は行われません。
2.relative: 要素は通常の文書の流れに従って配置されますが、top、right、bottom、leftプロパティを使用して、通常の位置から相対的に移動できます。; 他の要素の配置には影響を与えません。

このrelativeについては、もう少し丁寧に説明しようかな…
position: relative; プロパティは、要素を通常の文書の流れに従って配置しますが、top、right、bottom、left プロパティを使って、その通常の位置から相対的に移動させることができるのです。
次のようなコードを書くことができます。

position: relative;でleftプロパティを使う例


.element {
  position: relative;
  left: 20px;
}

この場合、.element は通常の位置から右に20ピクセル移動します。
しかし、他の要素の配置には影響を与えません。
つまり、.element が移動しても、他の要素はそのままの位置に留まります。

position: relative; を使う場合、top、right、bottom、left プロパティを指定しなければ、要素はそのまま通常の位置に配置されます。
つまり、相対的な移動は行われません。
次のようなコードを書くことができます。

position: relative;でプロパティを使わない例


.element {
  position: relative;
}

この場合、.elementは通常の文書の流れに従って配置され、特に移動はしません。
top、right、bottom、leftプロパティを指定しない限り、要素はそのままの位置に留まります。

また、position: relative; が必要かどうかは、具体的なレイアウトやデザインの要件によります。
次のコードは上記にある「写真を飾るためのcss」で使われているコードの抜粋です。

写真を飾るためのcss（抜粋）


.flowerfade-out {
  position: relative; /* 要素を相対位置に配置 */
  width: 40%; /* 幅を40%に設定 */
  float: right; /* 右側に配置 */
  margin-left: 5px; /* 左側の余白を5pxに設定 */
  margin-top: 10px; /* 上側の余白を10pxに設定 */
}

このCSSコードでは、position: relative; を使っていますが、現時点ではtop、right、bottom、leftプロパティを使用していません。
よって、position: relative; を削除して、下にあるようなコードとしてもレイアウトには影響はありません。
ここから先は私のクセみたいなものなんですが、もし後で top、right、bottom、left プロパティを追加して要素を相対的に移動させたくなった場合に便利なんですよ。
CSSコードは作りっ放しでしばらく触らないことも多いので。
他の理由として、レスポンシブデザインということもあります。
思わぬところで横に広がったりもするので、相対位置に配置するコードを入れておく運用としています。

写真を飾るためのcss（positionを抜いたケース）


.flowerfade-out {
  width: 40%; /* 幅を40%に設定 */
  float: right; /* 右側に配置 */
  margin-left: 5px; /* 左側の余白を5pxに設定 */
  margin-top: 10px; /* 上側の余白を10pxに設定 */
}

将来的に相対的な位置調整が必要になる可能性が高いんですよね…
こういった画像を飾るような要素の場合。
普段の細々した運用から、自然と入れるようになったという方が表現としては正しいかも。

そろそろ次の項目へ移りますが、私のケースだと、ほとんど position: relative; で済んじゃいますね。

3.absolute: 要素は最も近い位置指定された祖先要素（relative、absolute、fixedのいずれかが設定された要素）に対して絶対的に配置されます。; 通常の文書の流れからは外れます。
4.fixed: 要素はビューポート（ブラウザの表示領域）に対して固定されます。; スクロールしても位置は変わりません。
5.sticky: 要素は通常の文書の流れに従って配置されますが、スクロール位置に応じて固定される位置に移動します。

floatプロパティの説明

floatプロパティは、要素を左または右に浮動させ、周囲のテキストやインライン要素がその周りに回り込むようにします。
主な値だけ先に書いちゃいましょうか。

1.left: 要素を左側に浮動させます。; 後続の要素は右側に回り込みます。
2.right: 要素を右側に浮動させます。; 後続の要素は左側に回り込みます。
3.none（デフォルト値）: 要素は浮動しません。

「浮動」という言葉がちょっと分かりにくいと思うので、詳しく書きますね。
これは float プロパティが要素を通常の文書の流れから取り出し、左または右に配置することを指しています。
この配置により、他のテキストやインライン要素がその周りに回り込むようになります。

表現を変えれば、float プロパティを使うと、要素が「浮いている」ように見え、周囲のコンテンツがその要素の周りを流れる（回り込む）ようになります。
例えば、画像を左に浮動させると、その右側にテキストが回り込む形になります。

画像を左に浮動させ、右側にテキストを回り込ませるコード


img {
  float: left;
  margin-right: 10px;
}

この場合、画像は左に配置され、その右側にテキストが回り込みます。
「浮動」という言葉を使う理由は、要素が通常の文書の流れから「浮き上がって」別の位置に配置されることを視覚的に表現していると考えましょう。
要素が他のコンテンツとどのように相互作用するかを理解しやすいです。

ではおさらいとして、position: relative;とfloat: right;を使用したコード例を書きます。

position: relative;とfloat: right;を使用したコード例


<div class="container">
  <div class="box" style="position: relative; float: right;">
      浮動するボックス
  </div>
  <p>この段落は、ボックスの左側に回り込みます。</p>
</div>

この例では、boxクラスの要素が右側に浮動し、段落がその左側に回り込みます。また、position: relative;により、必要に応じて相対的に位置を調整できます。
positionとfloatの基本的な使い方として、こういうものがありますよというご紹介でした。

サイトマップ

アナザーエデン関連ページ・サイトマップ

アナザーエデンの強敵戦やストーリーコンテンツのリスト、お勧めバッジなどを掲載したコーナーです。
期間限定のない普通のRPGですので、初心者でも安心して続けていけるゲームとなっています。
もっとも重要なグラスタについては、場所別に網羅した表があります。

個人サイトのホスティングとコンテンツ作成

個人でウェブサイトを作るにはどうすればいいか。
HTML・CSS・JavaScriptの書き方はもちろん、無料かつ広告なしでホームページを作る方法を掲載したコーナーです。
Webデザインやレイアウトについても書いてあります。

魚釣りなどアウトドアのエリア

ゲームとパソコンだけじゃなく、アウトドアも趣味なんです。
このコーナーでは魚釣りの記録とか、魚料理のレシピ、はたまたサイクリングなどなど。
アウトドアに関連するコンテンツが詰め込まれています。