kamenokoki.com

【40日目】flexboxにドはまり

Posted:  Last Update:

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

ロードマップ

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

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

昨日までの成果

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

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

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

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

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

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

HTML
<a href=リンク>
<div id="latestchild">
<img src="記事のイメージ画像">
<div id="latestctitle"><b> '記事のタイトル'</b></div>
<div id="indexlinktime">日付</div><br>
</div>
</a>
スタイルシート
#latestchild{
width:280px;
height: calc( 100% - 2em );
margin: 0.5em 0.5em 2em 0.5em;
border-radius: 2px;
box-shadow: 0 1px 3px 0 grey;
display: flex;
flex-direction: column;
}
#latestchild img{
width: 100%;
height: auto;
margin: 0;
padding: 0;
border-bottom: 1px solid grey;
}
#latestctitle{
margin: 0.3em;
}
#indexlinktime{
font-size: 0.9em;
color:grey;
margin-left:auto;
margin-top: auto;
}

実際の箱のスクリーンショットです。悪くないと思う。
2020.10.09 最新の投稿のデザインを弄ってみた

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

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

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

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

解決できない…

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

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

記事をシェアする

亀の子に連絡

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

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告