【40日目】flexboxにドはまり

サイトを作成し始めて40日目になりました。だいぶ時間が経ちましたねえ。昨日は最新投稿を「おしゃれっぽく」していきました。今日はページをさらにパワーアップしていきたいです。

ロードマップ

ロードマップで進捗を見ると下記の通りです。

• 準備 - サイトの全体像を決める
• 使用するプログラミング言語を決めて環境を整える
• サイトの基本構造を作って公開する
• 収益化に最適なサイトにアップグレードする
• コンテンツを充実させる（他の作業と同時進行）
• サイトを見てもらえるようにサーチエンジンに登録する
• sitemap.xmlとRSSを作成する
• コンテンツに合わせてサイトを修正、スマホにも対応する　←今ここ
• お問い合わせページを作る
• 検索ボックスを作る
• サイトマップページを作る
• 個人情報に関するページを作る
• SEOとセキュリティについて調べ、対応する
• GoogleアドセンスとAmazonアソシエイトの申し込みをする
• ローカルで簡単に入力ができるようにフォームを作る
• フォローアップ - より収益化に向いたサイト構造に変更する

昨日までの成果

昨日は最新投稿を「おしゃれっぽい」箱でくくってみました。箱自体の出来栄えは悪くないのですが、サイト全体を見ると、白いんです…。どうしたものか…。

やっぱり、要素を全て真ん中に寄せてみようかな…。そうしたら、画面幅で本文が中央に来るとか来ないとかも迷わなくて済むし…。ちょっとテストしてみました。

まだ白いなぁ。色が欲しいなぁ。ヘッダに置いているリンクを帯状にして、ヘッダと本文の仕切りみたいにしてみようかな…？…今やっても混乱するだけになりそうなので、またゆっくり考えます。

最新投稿の箱をもう少しおしゃれにしていく

さて、昨日「おしゃれっぽく」した最新投稿の箱ですが、今日はもう少しパワーアップさせたいと思います。日付の位置を一番下に持ってきたりとか、したいです。あと、スマホで表示するときは少しデザインを変えたいです。いろいろと検索した結果「flexboxでデザインする」のが良いと分かりました。ここでもまたflebboxを使うんですね…。入れ子状態のflexbox3つ目です。自分でも訳が分からなくなりそう。…でも、まぁ、やってみましょう。

HTMLとスタイルシートはこんな設定になりました。

実際の箱のスクリーンショットです。悪くないと思う。

最新投稿の箱をレスポンシブデザインにしたい…

さて、今まで本文の横幅900px用にデザインしてきた「最新投稿」ですが、画面幅に合わせて大きさを変えていきたいと思います。今は画面の横幅が900pxを下回ると、3つ並んでいた箱が2つになってしまいますが、3つ並んだまま大きさを縮めていきたいです。さらに、640pxを下回ったときには、箱が一つになって、画像と説明文を横並びにしたいです。

まず最初にwidthを30%にしてみたのですが…。画面幅よりも小さいのに、なぜか縦に整列する箱たち…。「width: 280px」だと横並びになるのに、「width: 30%」にすると縦に並ぶ…

意味が分からない…。なぜだっ！！

解決できない…

画像をdivでくくったり、中のflexboxをいったん外したりして、色々とテストしてみました。どれも解決策になりませんでした。google検索すると、中の画像の大きさに合わせて%をとってしまうと言う情報もありましたが、画像を外してみてもうまくいかない…。いったい何の30%をとっているんだ!?

もう時間もないので悔しいけれど今日はここまでです。明日また頑張ります。

記事をシェアする

亀の子に連絡

ランキング参加中！ぽちっとしてね