[教えてエンジニア父ちゃん！]　flexプロパティで要素を縦にしてみよう！

昨日のブログではflexを使って要素を横並びにし、メニューのボタンを作りました。 今日はflexのことをもっと知っていこうと思います。

flexで柔軟なデザインを作ろう

html
<div class="flex"> <div><a href="toppage.html">トップ</a></div> <div><a href="greeting.html">ご挨拶</a></div> <div><a href="profile.html">プロフィール</a></div> <div><a href="contact.html">お問い合わせ</a></div> </div>
css
.flex { display: flex; justify-content: center; gap: 10px; } .flex >* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; }
表示するとこうなります。
今日はここからさらにflexを深めてみようと思います。

もっとflexを知る

.flex { display: flex; justify-content: center; gap: 10px; flex-direction: column; align-items: center; } .flex >* { border: 1px solid black; padding: 10px; width: 120px; text-align: center; height: 100px; }
flex-direction: column;
これを指定することで、縦方向へのレイアウトも可能になります。
align-items: center;
これで縦線上にアイテムを並べることができます。 heightで高さも指定してみます。 表示するとこうなります。

まとめ

flexを使えば要素は横にも縦にもできるし、さらに一つ一つに高さや横幅の指定、色も変えられるのですね。 flexを知っているとデザインの汎用性は高くなると言えますね。

コメント

コメントを投稿

このブログの人気の投稿

映画『ミステリという勿れ』を観て気づいた自分の癖の話

イメージ
『ミステリという勿れ』の映画版、観てきました。 原作の漫画も、実写化されたドラマでも、久能整が話す言葉が優しくて芯があって心に沁みます。 映画でも心が温かくなる名言が盛り沢山でした。 改めて言葉って薬なんだなあと感じたのと同時に、言葉を大切に使う人になりたいなと思いました。 映画終盤のシーンがかなり印象に残り、自分に対しての気づきもあったので書いておきたいと思います。 （一部ネタバレとなる箇所があります） 印象に残ったシーンと言葉 事件が解決し、大学生の久能整（くのう　ととのう）は女子高校生の狩集汐路（かりあつまり　しおじ）に話しかける。 「汐路さんは、お母さんと一緒にカウンセリングへ行ってみるのもいいかもしれません。」 それに対して狩集汐路は、「大丈夫だよ。わたしどこも悪くないよ！」と答えた。 そんな彼女に、久能整は汐路の目をまっすぐに見てこう伝えた。 「アメリカでは、刑事が犯人を傷つける、傷つけられることがあった場合、カウンセリングを受けさせられます。 カウンセラーからちゃんと許可が出るまでは、その人は働けません。 それは人の弱さをわかっているから。 人は強くない。弱いんだ。 だから弱ったら、壊れたら、ちゃんと治すんです。 弱さを認めているから、それを治そうとする。 でも日本では、心が弱いことを悪いとされている。 もっと強くなれと、そんな小さなことで悩むなと、そんなんじゃダメだ、と。 どこまでいっても根性論。 汐路さんは、否定疑問文で話すことが多い。 『行ってくれない？』 『こうしない？』 そう言って、行動は傍若無人なのに、本当は怯えている。 きっと、セメントに沢山の跡があるんですね。 でもあなたはまだ子どもだから、まだセメントは柔らかいから、固まる前に空いた穴を少しは塞ぐことができるかもしれない。」 （中略） 久能整は皆に見送られながら新幹線に乗った。 新幹線の席に着くと、後ろの人に「すみません。席マックスまで倒させてください。」と声をかけた。 そして相手が返事をすると、席を倒して目を閉じた。 私の口癖と性格 最後の席を倒してもいいか確認するシーンで、自分の口癖について気づいたことがありました。 「させてください」とお願いする形は、自分の意思も相手の都合や気持ちも、両方を大事にしているからこ
続きを読む

やると決めたことをちゃんとできていない時

イメージ
だんだん寒くなってくるこの時期は毎年手荒れがひどくなります。 保育士をしていたからだと思い込んでいたのですが、普通に家の食器洗いをするだけでも手は荒れるものですね。 ということで寝る前に塗れるようにと枕元にはハンドクリームが置いてあるのですが、あれ？昨日塗ってから寝た？と毎朝なっています。 結果のために準備がある ハンドクリームを塗るために枕元に置いているのですが、もちろん置くだけじゃ手は保湿されません。 塗ってからやっとつるつるな手に”近づける”ということで、一度塗ったぐらいじゃ乾燥は治りません。 調べるだけでやった気になる現象とよく似ていますが、準備をしたところで満足していてはだめなのですね。 準備が結果の全てという言葉をよく成功者から聞きますが、準備で終わっていたら始まってすらいないということに気がつけました。 めんどくさいは身の破滅 実は、朝になって罪悪感を感じている時もあります。 それは「あ〜眠い。今日ぐらいいっかなあ。あ〜でもな〜〜」と生半可な気持ちで先送りにしたまま眠ってしまい、気がついたら朝だったという時です。 「面倒だからと後回しにしているから手が荒れていくというのに…」 と自分への信頼も失っていきます。 だらだらと先送りにしていることって、楽をしているように見えて実は自分を傷つけている行為なのですね。 『めんどくさいは身の破滅』というのは、中学生の頃の国語の先生が口酸っぱく言ってくれていた言葉です。 今になっても、めんどうだなあと思うたびにこの言葉を思い出します。 あとがき 今日こそはハンドクリームを塗って寝よう！2日もかけていなかったから今日こそはブログ書こう！と思いながら書いたブログでした。 立ち止まることがあっても、また歩き出せればいつか到達できるものがあると信じています。 チャレンジは気楽に、今できることは全力でやっていけたら良いなと思います。 ということでこのあとはハンドクリームしっかり塗ったら全力で良い睡眠を取ろうと思います。
続きを読む

免許証の裏面で意思表示してみた

イメージ
よくファミレスなどで”アンケートのご記入をお願いします”と置いてあると、書きたくてそわそわしてしまいます。 「笑顔が素敵でまた来たいと思いました！」などと、そのお店のいいなと思ったこと伝えるチャンスなので、ほぼ毎回といった具合に書き込んでしまいます。 あと居酒屋のトイレにある”ご意見でも落書きでもなんでもどうぞ！”みたいに置いてあるノート、これにも何かしらを書いてしまいます。 夏に免許証を手に入れたのですが、”記入は自由です”と書かれた欄を発見したので、前傾姿勢でペンを握りました。 免許証の裏面、記入してる？ 免許証の裏面を見てみると、二つの欄があります。 一つは備考欄。 そしてもう一つが臓器提供の意思表示ができる欄です。 今回私が記入したのは、この臓器提供の意思表示ができる部分。 なんでも記入したがる私にとっては『もちろん書くでしょ！』という勢いで記入していたのですが、”あれ、この記入欄の書き込みは自由だけど、実際書いている人はどのぐらいなのだろう？”とふと気になったので調べてみました。 日本臓器移植ネットワーク(2016年調査) をみてみると、免許証に意思表示欄があることを知っている人の割合が68%なのに対し、実際に記入している人は約19%とのことでした。 意外と少ないですね。 ちなみにこの意思表示欄があるのは免許証だけでなく、身近なものだと保険証の裏面にもあります。 これらを全て合わせた全体で見てみると、意思表示カードや運転免許証、健康保険証での意思表示率は、なんと10.3％～11.2％なのだそうです。 備考欄に手書きはNG 私のようになんでも書き込みたくなるからと言っても、免許証の裏面の記入はしてはいけません。 この備考欄は、例えば引っ越して住所が新しくなった時や、氏名が変更となった時に正式に書き加えられるものらしく、自分の手で書き込むと公文書変造罪となってしまうこともあるらしいのです。 保険証は自分で新住所を書き込むことがあるので、書いてもいいものだと勘違いをしている人も多いようです。 免許証の裏面は、臓器移植に関する意思表示のみ自分で記入ができるということですね。 私の記入したこととその理由 私はこの意思表示欄で、”脳死後および心臓が停止した死後のいずれでも、移植のために臓器を提供します”に丸をつけました。
続きを読む