Webデザイン勉強80日目の成長報告！
はいどうも！
昨日、たくさん寝れたので今日は復活いたしました。
本日の作業進捗報告を行います。
【打ったコード】
[item-1-start] 〜 [item-1-end] = 名前です。任意に設定が可能です。
grid-column: item-1-start / item-1-end ; = 列方向で、どこに配置するかを設定可能
z-index 1; = 同じ場所に被った際、他の要素より上に表示する
【表示例】1が4の上に表示されています
【打ったコード】視覚的にgridを記述する方法
3行と3列に対して名前を設定することができます。
grid-template:
"header header header " 80px = 行方向にheader×3,数値は80px
"main main sidebar " 80px = 行方向にmain×2,sidebar×1,数値は80px
"footer footer footer " 80px = 行方向にfooter×3,数値は80px
/ 80px 80px 80px ; = 列方向に80px × 3
【表示例】
【コードの意味】
grid-row: span 2; = 行方向に2ブロック分
grid-column: span 1; = 列方向に1ブロック分
【表示例】
【コードの意味】
grid-auto-flow: dense; = 空いてる要素を左上行方向から埋めていく
【表示例】
【コードの意味】
grid-auto-flow: dense column; = 空いている要素を左上列方向から埋めていく
grid-auto-rows: 80px; = 枠からはみ出した際の行方向の数値の記述
grid-auto-columns: 80px; = 枠からはみ出した際の列方向の数値の記述
【表示例】
【打ったコードの意味】
jusitify-content: end; = 行方向に後ろに配置
align-content: center; = 列方向で中央に配置
【表示例】
【打ったコードの意味】
justify-items: center; = 要素の中身を行方向に中央に配置
align-items: center; = 要素の中身を列方向に中央に配置
【表示例】
【グリッドを利用して、レスポンシブデザインに対応させる方法】
gird-template:
"header " 50px = headerの高さ50px
"main " 50px = mainの高さ50px
"sidebar " 50px = sidebarの高さ50px
"footer " 50px = footerの高さ50px
/ 100%; = 横幅100%
↑
@media (min-width: 570px ) {
.container {
grid-template:
"header header " 50px
"main sidebar" 50px
"footer footer " 50px
/ 1fr 200px;
【意味】
570pxを超えた場合には、2カラムにして2行目にはメインとサイドバーがくるという意味。また、サイドバーは200pxに固定して余った横幅を1frの記述でメインに割り振る
【表示例】570px以下
【表示例】570px以上
今日の学習内容は以上です。
今日で、ドットインストールのグリッドデザインが終了しました！
おやすみなさい。
Webデザイン勉強79日目の成長報告！
はいどうも！
今日はグリッドでの移動です！
【打ち込んだコード】
表示した画面は一つですが、色々な記述方法がありました！
grid-row-start: 3; = 行方向の始まりが3
grid-row-end: 4; = 行方向の始まりが4
grid-row: 3 / span 1 ; = 行方向の始まりが3,終わりまで一つ分(つまり4)
grid-row: 3; = 行方向の始まりが3,終わりまで一つ分(つまり4)
grid-row: 3 / 4; = 行方向の始まりが3,終わりが4
grid-column-start: 2; = 列方向の始まりが2
grid-column-end: 4; = 列方向の終わりが4
grid-column: 2 / span 2; = 列方向の始まりが2で、そこから二つ分(つまり終わり4)
grid-column: 2 / 4; = 列方向の始まりが2で、終わりが4
grid-area: 3 / 2 / 4 / 4; = 行始 / 列始/ 行終 / 列終
【表示したHP】
今日は、ここまで。
Webデザイン勉強78日目の成長報告！
はいどうも！今日の作業進捗報告です。
【表示比率の調整方法】
①grid-template-columns: 100px 1fr 2fr;
左は100pxで固定し、残りの2列は1:2の比率で表示させることが可能
②grid-template-columns: 50% 100px 100px ;
左はブラウザに対しての50％、他の2列は100pxで固定させる表示方法
【行や列の余白の記述】
①grid-row-gap: 10px;
行方向の余白を10pxで指定
②grid-column-gap: 10px;
列方向の余白を10pxで指定
③grid-gap: 10px ;
行方向、列方向に10pxの余白を指定
数日日本に帰国しており、今マレーシアに帰ってきました。
あまり時間を確保できず少ないです。
反省して明日からまたやっていきます。
今日はここまで。
Webデザイン勉強77日目の成長報告！
こんばんは！
今日の作業進捗報告です！
今日はグリッドで区切る方法の学習を行いました。
display: grid; = グリッドを行うという記述
grid-template-row: 0px 0px 0px; = 各行のpx数の指定。3行でgrid指定があることを意味する
grid-template-columns: 0px 0px 0px; = 各列のpx数の指定。グリッドが3列あることを意味する
プロパティを一つで記述する方法もあります！
①grid-template: 80px 80px 80px / 80px 80px 80px; = 行の指示 / 列の指示
②grid-template: repeat (3,80px) / repeat (3,80px) = 行の指示 / 列の指示
表示した画面
今日の作業進捗は以上です。
一昨日から日本に一時帰国しています。
色々やっていて、作業時間がつくれず学習がほとんどできませんでした。反省です。
へこんでいても前に進まないので、明日も学習を進めます。
今日は、ここまで！
Webデザイン勉強76日目の成長報告！
はいこんにちは！
昨日、ブログを書き上げたと思ってブラウザ閉じたらUPできていませんでした汗
あたらめて昨日の作業進捗を行います。
以下の記述は、通常サイズの時は要素を左と右にFloatで横並びにさせて、400px以下の時は横並びにしないという記述の仕方です。
↓400px以下の場合↓
縦に並んでいます。
↓400px以上の場合↓
横に並んでいます。
今日は、ここまで！
Webデザイン勉強75日目の成長報告！
はいどうも！
今日も作業をしましたので進捗報告です！
小さい画面サイズ→大きい画面サイズになった時に表示を切り替える方法！
【画面サイズが小さい時】
画面サイズが小さい時は、widthを指定していないので100pxで横いっぱいに表示されています。
【中くらいの画面サイズの時(600px〜)】
600pxを超えると、imageのwidthの200pxが適用され、textが横に広がります。
【大きな画面サイズの時(800px〜)
799pxまでは画面いっぱいに表示され、横幅が800pxを超えたところからtextの部分を減らしてadが表示されます。
今日はここまで！
