CSSの練習 意外に難しかったセンタリング

CSSの勉強のためにこのようなページをつくってみました。
かかれている内容、文章に意味はありません。一ページでリンクは貼っていません。

農家民宿を題材にしたデモサイト

意外に難しかったセンタリング

ご覧いただけると思いますが、ブロックというか箱の集まりからできています。
この写真では文字をふくめて4つの箱になっています。

左下のまるは写真が外の箱とずれていることを示しています。
デザイン上と練習のためです。

どこが難しかったか？

センタリングとかきましたが、中央寄せに限らず位置の設定に苦労しました。

もちろん自身の勉強不足が原因ですが、なかなかおもうようにいきませんでした。

その原因のひとつが命令がぶつかるということでした。

外の箱と中の箱の位置取りに関する命令が干渉しあって思うようにいきませんでした。

どうすればよかったか？

外の箱から確実に位置取りをしていくことが大切なのかもしれません。

もうひとつは、当然各プロパティーの実行範囲など基本的なことが習得できていなかったことだと思います。

あせって次々に命令を書いていくと、お互いにぶつかり合ってうまくいきませんでした。

今後の改良点

考えてみると写真を張り付けているだけならば、CSSなど必要がないと感じました。

Photoshopとかillustratorなど、私はさわったことがないのですが、このソフトでつくればいいのでないかと思いました。

リンクなどでいろんなページを表示できるようにして、動きをあたえられればそれらしくなるのかもしれません。

もしかすると、PHPなどを使ってデータベースの活用もいいかもしれません。