[教えてエンジニア父ちゃん！]　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を知っているとデザインの汎用性は高くなると言えますね。

コメント

コメントを投稿

このブログの人気の投稿

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

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

お台場『東京ラーメン国技館　舞』へ行ってきました！

イメージ
先日、従兄弟が東京に来ていたので、弟と従兄弟と一緒にお台場へ行ってきました。 到着したのがお昼時だったので、まずはご飯を食べようということで、 『東京ラーメン国技館　舞』 へ行くことに。 ということで東京テレポート駅で下車したあと、お腹を鳴らしながらアクアシティ5階へ向かいました。 美味しいラーメン屋さんがいっぱい 全国から名店が集まっている『東京ラーメン国技館　舞』。 ここでは本店では食べられない”お台場限定メニューのラーメン”も食べられます。 食べられる場所は各店内かテラス席 奥まで行くとテラス席がありました。 潮風が強いので、紙ナプキンなどが飛びやすく、強風の日にここで麺をすするのは少し大変かもと感じました。 でも寒い日にここであったかいラーメンを食べたら、それはそれで幸せを感じられそうです。 天候によっては検討した方がいいかもしれませんが、景色はとても良かったし、この日は晴れていて暖かかったので気持ちよく過ごせました。 グループや家族連れできている場合には、ここで色んなラーメンをシェアしながら食べられるのもいいなと感じました。 また、店舗によってはテラス席の利用が曜日によって限られていたので、確認してから利用することをおすすめします。 券売機でそれぞれの店で購入する 各店前に券売機があり、そこで半券を購入するという仕組みになっていました。 支払い方法が各店舗によって異なっており、”suica使えます””クレジットご利用の方は店内で承ります”などと張り紙をしてある店もあれば、ID支払いに関してなにも記載がされていない店もありました。 「現金持ってないからIDで支払えるところがいいな〜」という方は、一通りの店舗の支払い方法を見てから食べるラーメンを決めた方が良さそうです。 混雑状況と席の仕組み 平日だったのでとても空いましたが、週末や祝日は混んでいる可能性が高いです。 そして通路が狭くなっているので、混んでいる際にはラーメンのメニュー詳細や値段などの券売機に書いてある情報が読めないかもしれません。 事前にHPにて確認し、ラーメン情報を仕入れておくとスムーズにいけるかもしれません。 『東京ラーメン国技館　舞』のHPはこちら 今回食べたラーメンはこちら 悩みに悩んだ末、お店は『塩らーめん専門...
続きを読む

『台場一丁目商店街』へ行ってきました！

イメージ
お台場へ遊びに行った日記の続きです。 前回のお台場日記、 『らーめん国技館　舞』へ行ったブログはこちら ラーメンを食べてお腹が満たされた後は、台場一丁目商店街へ遊びに行ってきました。 台場一丁目商店街 アクセス 日本の古き良き文化が盛り沢山な台場一丁目商店街。 場所はデックスビーチ東京の4階。 お台場ジョイポリスの一つ上の階にあり、エスカレーターをあがるとすぐにあります。 入場料などはないので、ふらっと立ち寄るだけでも楽しめます。 駄菓子屋さん 駄菓子屋さんは中と入り口に2店舗あり、どちらもレトロな雰囲気で懐かしの駄菓子がずらっと並んでいます。 ゲームセンター 入り口左側にはレトロなゲームセンターがあり、昔ながらのゲームを楽しめます。 大好きなテトリスがあったので、弟と対戦しました。 横には他のゲーム機もずらりと並んでいます。 年中お祭り気分が楽しめる 射的ができるお店がありました。 射的の銃がかっこいいです。 おやつが取れて大満足です。 他にも金魚すくいやくじ引きのお店、型抜きができるお店があり、お祭り気分を味わうことができます。 お化け屋敷へ 本格的な作りで怖いと噂されている台場怪奇学校へ入ることに。 私も従兄弟も弟も苦手だけど怖いもの見たさで入ることに。 実際に入った感想としては、小学生から大人まで楽しめるお化け屋敷だと感じました。 怖さのレベルや内容は……実際に入ってみることをおすすめいたします。 4つのコースが選べるので、コースを変えたらまた違った楽しみ方ができると思います。 怖さレベルが店の前に書いてありました。 ちなみに平日だったので15分待ちだったのですが、祝日にこの前を通りかかった時はずらっと長い行列ができていました。 料金は一回800円です。 あとがき 台場一丁目商店街は中を歩いてるだけでも楽しめるスポットです。 お祭りに来たような高揚感があり、とても楽しかったです。 お台場へ行った際にはぜひ立ち寄ってみてください。
続きを読む