新しい知識 Grid Layoutを使ってみた

寒すぎて寒すぎて震える為、ご飯食べないと身体が冷えてしまう体質なので、温かい麺類ばかり食しており体重の増加が気になる若杉です。こんにちは。

今日は再度ちー坊の坦々麺を食べてきました!今度は黒胡麻!真っ黒!笑でも美味しかったです。

汁無し坦々麺食べてみたいし、マーボー豆腐も食べてみたいし、杏仁豆腐も食べてみたい!
実習中に食べきれるのか!?

■サイト作成(今回の試練)

はい、こちらが昨日作成したカンプからhtml仮組したやつです。あとは細かい感覚や文字の大きさを調整するだけなんですが、今回自身に与えた課題と試練は

①どんなディスプレイでも綺麗に表示させる。
②後にレスポンシブで変更できるようにする
③Grid Layoutを使う

以上3点です。

■レスポンシブるるる

①と②は同じようなもんなのですが、widthの指定やフォントの大きさを意識して他のサイトを真似てみました。

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分

すごく簡単に書いてるのですが、ざっくりとフォントについて勉強できるのでオススメです!

文字の大きさと横幅は本当に何も考えずに組み込んだら後で目も当てられない。。。(泣)

基本スマートフォンサイズでの閲覧も可能にしたいので、@media使おうかなとも思ったのですが、フォントと幅を気をつけていたら、縦横比率・レイアウトが崩れないようにはなるので、ひとまずはこれだけですましております。

■Grid Layout

たまたま時間があるときに、webで最新のcssとかないのかなーと検索していたらでました。

どんなものかというと、タグで囲われ名前をつけられた画用紙をcontainerという掲示板に場所や大きさを指定して貼り付けられる!というもの。これからはflexbpxと併用して使われるかな?

この記事見たら基本的な使い方はすぐ理解できます。

CSS Grid Layout を極める!(基礎編)

記事自体でも2017年10月で、2016年でもでてきたので最新と言っても1年は経過しているのと思われます。

ただ対応していないブラウザなどもあるので、確認は必要です。

■新しい知識

10月に学校に入校して、はじめはfloatでのcleabothを教わり。。。今は使わないからとcleafixを教わる。。。

ちょっと調べるとflexboxなんてものが出ていて、気づいたらgridlayout。配置関係だけでもこの4ヶ月でころころ変わりました(泣)

吉田代表がおっしゃるとおり、日々の勉強とアンテナをしっかり立てることができていないと、すぐに流行に取り残されたり、対応ができないなんてことになりかねない世界だと実感しました。

最新過ぎるとブラウザが対応していなかったりと、ベンダープレフィックスの知識も必要になりますが、逆に、もう対応されていて必要ないようにベンダープレフィックスが記述されていたりもするようです。ソース見られたらかっこ悪い。。。

基本的なペライチサイトなら創れるようになってきましたが、そんなものは多くの人ができるしお金をもらえる技術じゃないので。

日々勉強日々精進。アンテナをびんびんに張り巡らしネットサーフィンにいそしみます!

PS 今回マタニティ図書館ということで参考になるサイトすらなくバナーに困っていたのですが、シンプルで意図が伝わる良いバナーができそうなのでちょっとテンションあがりました!

親子で楽しめる図書館。妊婦の方が来たくなるような図書館。。未知の世界過ぎてとまどいばかりですが、良い作品にしあげます!

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です