HTML/CSSの実践演習②

サイト制作

動物園のサイトをHTML/CSSを用いて作成しました。
HTMLとCSSの紐付け方法は、CSSファイルを２つ作り、
「link href=css/reset.css」
「link href=css/style.css」
必ずリセットCSSを最初に書くようにする。

自分で画像を変更してみましたが…

動物園を水族館バージョンとして編集してみましたが、画像がうまくあいませんでした。
HTML内に書かれてあるサイズと実際のサイズが違った様です。
写真はフォトショップでサイズ変更する必要がありました。

編集後（2025.10.29)

再度画像とHTML、CSSの編集を行いました。

変更箇所
・フォントの形を明朝体にした。
・全体のカラーを変更した。
・写真を動物から海の生き物に変更。
・フォントサイズの変更。
・文字の箇所にドットの四角を装飾。

【実際に作ってみての感想】
HTMLの構造がどうなっているのかよく読み取り、CSSに的確な文を打つ必要があるなと思いました。
また検証ツールを使って色の具合など目で見て確認すると全体の雰囲気がわかり、気づいてよかったなと思ういます。marginやpaddingなどの言語も実際に入れてみてどう変化するのかみる方が頭が整理されてやりやすいなと思いました。まだまだ言語の使い方がわからない部分があるので、実際にサイトを作ってみて理解を深められたらいいなと思います。

アイコンの作り方

アイコンは正方形にする。
「ファビコンジェネレーター」で作成。１６〜６４にチェックを入れる
作成できたら自分のimagesに画像を入れる。

CSSでの入力

.(ピリオド)はクラス名。ピリオドなしは要素名となる。

CSSのフォントを入れる方法

bodyの中に
background-color：
color：
font -family：　　　←ここに入れたい値を入れる