今月はありがたいくらい時間があり、LPの作成を行うことができました。
今回は「近所の散歩」をテーマに作成。
JavaScriptを少し入れたり色々入れております。

（もう少しテーマをしっかり考えた方がよかったかなぁと反省しています。）

今回作成していて「CSSで気がついたこと」や「サーバーにあげて気がついたこと」をちょっとまとめました。

CSSの気がついたこと

transformについて

今回作成していて、回転したい、傾けたい画像があったので、
どうすれば回るか考え、調べてみたら2点ほど見つけてみました。

cssの「transform」プロパティにrotate
transformは移動させることもできるが、回転もできる優れものですね。

cssの「rotate」プロパティ
こちらは最近のプロパティ「rotate」は回転するという意味。
奥行きも表現できますね。

text-alignについて

CSS のプロパティの一つで、要素のコンテンツ（特にインライン要素やテキスト）の水平揃えを指定するために使用されます。このプロパティは、ブロックレベル要素の内部のテキストやインライン要素の配置を制御します。

「インライン要素」ということは
画像(img)も調節行うことができます！
状況に応じて使うといいですね。

margin: auto;について

「margin: 0 auto;」はよく聞くものの「margin: auto;」はどういうものか気になりchatGPTに質問してみました。
margin: 0 auto;
左右のマージンをゼロに設定し、水平方向に中央配置します。
つまり、左右のマージンがゼロであることを示しており、要素を水平方向に中央に配置。

margin: auto;
左右のマージンを自動的に計算し、水平方向に中央配置します。
左右のマージンが自動的に計算され、要素を水平方向に中央に配置します。左右のマージンが等しくなるため、要素は中央に配置。

どちらも水平方向に中央に配置だけどmargin: 0 auto;だと明確で確実にできそうです。

CSS修正はブラウザの検証はよく使うこと

CSSを書いてブラウザで表示させた後ずれることがよくありました。
そのたびコーダを開いて行っていたのですが、思ったより手間がかかっていました。
何か代用ができないか考え、ブラウザの「検証」でcss調節行った後にコーダ再確認することに。
ブラウザ内でそのまま反応するので早くてとてもやりやすかったですね。

サーバーにあげて気がついたこと

サーバーにアップしてもCSSが適応されないことがある。

できたページをサーバーにあげて確認した後「あれ？なんか違う」と感じた後CSSを修正を行なって再度あげました。
ところが…変化することなくそのまま変わらず表示。

調べてみるとブラウザにキャッシュが残っていたようで、それを消して表示させるとなんとか更新されていることがわかりました。

画像表示のスピードは確認しよう！

サーバーにあげて確認すると画像サイズが大きすぎて表示が遅くなっていることに気が付きます。
サイズを変えたり、いらないCSSなど見直したりする必要がありますね。

次の作成はこれらを生かして作成できればと考えております。