Webデザイン勉強74日目の成長報告！
はいどうも！
今日も動画で学習したので進捗報告を行います！
今日はflexboxの動画15本分やりました。
ドットインストールの動画は短いと2分とかで終わるので、結構サクサク進めた印象です。
display: flex = flexの指示を出す。今回だと要素を包むcontainerに対しての記述です。
flex-direction: column; = 縦方向に整列させる指示
flex-direciton: column-reverse = 縦方向で下から整列させる指示
flex-wrap: nowrap = 要素が横幅を超えても折り返さない（デフォルトはnowrap）
flex-wrap: wrap; = 要素が横幅を超えると折り返す
flex-wrap: wrap-reverse; = 要素が横幅を超えると折り返す（下から表示）
flex-flow: wrap row = 折り返し＆行方向 ※flex-flowは順不同で記述が可能
justify-content: flex-start; = 余白の設定であり、この記述だと上に揃える
justify-content: flex-end; = 余白の設定であり、この記述だと下に揃える
justify-content: center; = 余白の設定であり、この記述だと中央に揃える
※centerの場合は前に「flex」と記述がいらない
justify-content: space-between; = 角に要素を散らして、余白を均等配置
↓justify-content: space-betweenの例
justify-content: space-around; = 行方向の角に要素を散らして、余白を均等配置
（少し内側にパディングを設定してくれる）
↓justify-content: space-aroundの例
align-items: strech; = itemの縦幅が指定されていない時、指定されたboxの中で最大まで縦幅が伸びる記述
↓align-items: strech; の表示例
order: 1; = 表示の順番。デフォルトでは0となっているため、この記述だとbox-2,3が優先されて表示されるため一番後ろにまわる。
align-self: flex-end; = 縦幅方向で、下に合わせる記述
↓上記2個の記述をした際の表示例
【flexの記述】
flex: ○ ○ ○;
flex: grow shrink 横幅の順番を意味する
デフォルト値は0 1 auto
以下の記述は、80pxのboxが3個あり、それを包むcontainerが300だった時の余白の振り分け型の記述方法です。
余白=60px
1= 10px
2= 20px
3= 30px
今回は単純な余白の割り振りでした。
box1〜3に従って、横幅が大きくなっていることがわかります。
次は、box3個の合計値がcontainerの横幅を超えた時、どの割合でpx数を削るかという記述です。
(※.boxは不要でした）
boxの横幅合計が360pxなので、containerの300pxより60px増えています。
これを割り振ると、1=10px , 2=20px , 3=30px こちらを削っています。
表示例
発生するmarginを希望の場所へ移動する方法
以下ではbox-3のmargin-left: auto; と記述してbox−3の左側に60pxの余白を開けています。
表示例
要素を中央に配置する方法
justify-content: center; = 行方向に中央に配置
align-items: center; = 列方向に中央配置
表示例
画像の横に文章を記述する方法
↓HTML↓
↓CSS↓
画像、文章を包むclassに対してdisplay:flex; と記述 = 画像と文章が横並びになる
align-items: flex-start; = 要素を上方向に揃える
flex-direction: row-reverse; = 行方向に対して、表示順番を逆転させる
↓表示例↓
横幅の表示サイズに応じて、要素の横幅を変更する指示
※ポイントはCSS（左側）
flex: 0 100px = widthを100pxで指定して、かつそれ以上の横幅があっても割り振らない（割合は0）
flex: 1; = growの数値が1という意味。この場合、他が0なので割合の1は100%を意味する。
つまり、横幅が大きくなればなるほど.centerの横幅が広がるという意味。
↓横幅が狭い時↓
↓横幅が広い時↓
上記を設定しつつ、更に横幅が一定の数値を下回った時に要素を縦並びにする記述
-------------------------------------------------------
@media all and (max-width: 500px) { ←横幅500px以下の時
.container { ←containerは縦方向
flex-direction:column;
}
.center {
order:1; ←表示順番1
width: 100%
}
.left {
order:2; ←表示順番2
width: 100%
}
.right {
order:2; ←表示順番3
width: 100%
}
-------------------------------------------------------
↓横幅が広い時↓
↓横幅が狭くなった時↓（centerが一番上で、left,rightの順番で表示される）
こんな感じです！
flexboxはサクサク進んで楽しかったです！
ドットインストールで学習しているんですが、その人の説明がすごくわかりやすくてサクサク前に進めています！
今日は、ここまで！
Weｂデザイン勉強73日目の成長報告！
はいこんばんは！
今日の作業進捗を報告です！
今日は、印刷の際の記述を学習しました。
【リンクURLを要素の直後に文字で表示させる方法】
a href^="http:" : after {
content: attr(href)"";
color: blue
}
a hrefで始まるタグで、http:で始まるリンクを持っているタグの直後にURLを表示するタグです。
【ページ毎の指示】
@page {
margin: 5px;
}
【ページの最初に対する指示】
@page first {
text-weight:bold
}
【改ページについて】
page-break-before
page-break-inside
page-break-after
記述例
form page-break-before :avoid;
フォーム直前での改ページを避ける指示
【行数指定】
orphans
改ページの前に最低限あってほしい行数
widows
改ページの後に最低限あってほしい行数
【レスポンシブデザインとして表示させるための記述】
HTMLとCSSにそれぞれ記述をする必要があります。
HTML
<meta name="viewport" content="width=device-width,inicial-scale=1">
@media (min-width: 600px) and (max-width: 800px) {
body {
background-color: red;
}
}
この指示で、横幅が600以上800以下の時は背景を赤色にするという指定を行うことができます。
このとき、波括弧の後に指定をするセレクタを再度記述する必要があるので、そこが注意ポイントだと思います。
波括弧 in 波括弧ですね
今日はレスポンシブデザインの動画を学習中に、flexboxって表現が出てきて「？？」となりました。
ドットインストールにflexboxの講義動画があったので、明日はこれを学習しようと思います。
Udemyの教材ではflexboxは習っていなかったのですが、YouTube動画で勉強をしている時にさらりと登場してきました。
全て網羅できている教材はないとは思うので、独学でやっていく時には出てくる壁だと感じました。色々と参考にしつつ作業を進めます。
とはいえ、一つの学習内容に関して複数のコンテンツを使うと時間をロスしてしまうというという部分もあります。
お金を出して時間のロスを減らすということもできるので、誕生日プレゼントに教材の購入を検討しようと思います。
今日は、ここまで。
Weｂデザイン勉強72日目の成長報告！
はいこんにちは！
今日の作業進捗を行います！
レスポンシブ入門の勉強に入りましたが、CSSについての内容もあったので、それも学んでいきます。
cssの記述の意味をやりました。
【タグ→表示】の順番で画像を貼っていきます。
①
first-letter = 一文字目
firist-line = 一行目
②
before = 要素の直前
after = 要素の直後
※ポイント （2枚目で●を表示させています）
Download fileの直前、直後を意味するため、borderを表示させると文字と●の間に表示されるかと思いましたが、この擬似要素を使った際は対象の要素と同じまとまりとして扱われるようです。
③
x > y = xの子要素のyに対しての指示。（孫要素には適用されない）
div id=subの下のp要素（子要素）にのみ適用される。
④
mainの下（子要素）のp二つに対して文字幅がboldになっているが、孫要素には適用されず。
⑤
x + y = xと隣接していて、かつxの下に記述されているyに対する指示
⑥⑤と順番を変えているのですが同じです。
pの下に隣接しているspanタグにだけ指示を出しています。
⑦
p ~ span
pの下層にあるspanタグに対する指示（ただし子要素だけ対象。孫要素は対象外）
⑧
link = まだ訪れていないリンクタグに対する指示
visited = 既にクリックしたリンクタグに対する指示
hover = マウスを上にかざした時に対する指示
focus = フォーカスが当たっている時の指示（tabキーで移動して対象となっている時）
⑨
text-indent = 先頭の文字をあける指示
text-transform:capitalize; = 文字の先頭を大文字にする
text-transform:uppercase; = 文字を全部大文字にする
text-transform:lowercase; = 文字を全部小文字にする
⑩テキストシャドウは二重でかけることができる。
※かけるときは、一つ目の値と二つ目の値を「,」で区切る必要がある
今回は、黒の下に白のシャドウをかけました。
⑪以下の二つは同じ意味の記述です。
動画を何度か見ましたが、今の段階では使い分ける基準があまりわかりませんでした。
記述が楽になるケースもあるみたいです。
⑫
visibility: visible; = 表示している状態（通常）
visibility: hidden; = 非表示状態（隠す）
以上が今日の学習内容でした！
久々に、近場で飲みに行ってこようと思います。
今日は、ここまで。
Weｂデザイン勉強71日目の成長報告！
はいどうも！
今日の作業進捗報告です！
デベロッパーツールの使い方の学習は昨日までで一旦終了して、今日からレスポンシブサイト作成の勉強動画に進んでいます。
【今日学んだ記述】
:nth-child(odd) = liタグの奇数タグに関して処理を行う記述
:nth-child(even) = li タグの偶数タグに関して処理を行う記述
:nth-child(2n+1) = 1,3,5,7,9,,,,のliタグに対して処理を行う記述
:nth-last-child(2n+1) = 下から数えて1,3,5,7,9,,,,のliタグに対して処理を行う記述
li:last-of-type = liタグの最後に対して指示を出す方法
li:only-of-type = ulのタグにliタグ一つだけある場合、そのタグのみに指示を出せます。
（このタグはキャプチャ撮っていなかったのと、動画の説明を10回くらい聞いても意味がわからなかったです。これでずっと止まっていられないので、一旦進むことにします。動画説明している人との相性もあるのかもしれません、、。）
input:enabled = 選択or入力できる状態のinput要素
input:disabled = 選択or入力できない状態のinput要素
:checked = radioやcheckboxでチェックされた状態の要素
input[type="text"]:checked + label
↑この記述の仕方初めて見て、勉強になりました。
inputタグの中の入力方法textのタグで、チェックされた状態のラベルも含んだもの
（inputタグはラベルも隣接して記述しているため、 ＋で両方を記述する必要がある）
今日はこんな感じでした！
やっていることはそんなに難しい内容ではないのですが、YouTubeを見ながらだと自分で前提の記述環境を整えて作業に取り組むので結構タイムラグがありしんどかったです。
レスポンシブデザインの動画の量としては全部で20本ほどで、今日3本見終わったので終わらない量ではないのでちょっと時間はかかりますがこのまま進めようと思います。
今日は、ここまで。
Weｂデザイン勉強70日目の成長報告！
はいどうもこんばんは！
今日も勉強を行いました〜
今日は作業というよりか、昨日に引き続きYouTube動画でChromeのデベロッパーツールの学習を行いました！
昨日のブログで、学習が終わったら画像付きで説明すると言っていたと思うのですが
画像付きで説明をするとなると、画像のキャプチャを撮ってそれの説明の方が時間かかってしまいそうなので割愛することにしました、、。（作業や学習が大事なので）
今日もマナブさんのブログの記事にある英語の動画を見て、なんとなくこういう意味かと学習し、更に参考となるブログを読み学習をしました。
どの動画、ブログも共通して言っていることは一緒でした。
・自分のサイトの作成の時に、高速で確認ができる
・他サイトの作りをみて、勉強したり自分のブログに利用することができる。
・多数のデバイスでの表示を確認することができる
なお、他サイトのHTMLやCSSの変更をして表記を確認したり、Javascriptのテストを行うことができることも勉強になりました！
こちらの記事のデベロッパーツールの2本目の記事を読んでいる途中なのですが、今日は結構夜が遅くなってしまったので明日続きを読もうと思います。
今日はここまで！
Weｂデザイン勉強69日目の成長報告！
はいどうも！
今日からは参考にしているマナブさんの運営しているマナブログ
の記事を参考にして動画で学習を行いました。
上から見て環境を整えて、【6】の3本の動画を見ました。
（HTMLとCSSはUdemyで勉強したので、一旦飛ばしました）
今日学んだことは【デベロッパーツールの使い方】でした。
https://www.youtube.com/watch?v=lCcA3rQ3keg&feature=youtu.be
https://www.youtube.com/watch?v=qmfIMa8eFlE&feature=youtu.be
https://www.youtube.com/watch?v=x4q86IjJFag&feature=youtu.be
上の2本を見て、実際のサイトを表示させながら、どの部分がどのように指示を与えるのかということや、自分の思う通りに記述や数値を変えて転用し使えるんだということがわかりました。
すごいですねこれ、、、！！！
3本目が英語だったので、ちょっと苦戦しています。
コードを見ればやっていることはなんとなくわかるのですが、言葉が全部わからないので何回か見返したりしつつ前に進んでいます。
全部で50分ほどあるのですが、今日は16分のところまでしか見れなかったので明日引き続き見ようと思います。
3本を見終わった時点で、インプットした内容をブログに残そうと思います。
今日は、ここまで。
Weｂデザイン勉強68日目の成長報告！
はいどうも！
今日の作業進捗を行います！！
【作成したHP（料金体制〜フッター）】
【HTML＆CSS】
【修了証明書】
今日で終了しました〜！！！嬉しい！！！＾＾
このコースの受講で、【Photoshop,HTML,CSS】の基礎を身につけることができました！
とはいえ、基礎中の基礎なので
達成感で嬉しい気持ちもありますが、次のステップに進んでいこうと思います。
今日はこのあと、次の学習に移るための環境準備に時間を使ったので手をあまり動かせませんでした。
とはいえ丸一日コードを打たないのは気持ちが悪いので、動画でやったサイトの模写をなるべく動画を見ずに自分でコーディングしようと思い、作業をしました。
【模写するHP】
【作業途中画面】
【HTML,CSS】
まずはざっくりと枠組みを作ってから作業を行いました。
簡単な部分しかまだ着手できていませんが、動画を見ないである程度作業を進められている自分に成長を感じられたことがよかったです。
わかる部分があると、コード打つのが楽しいと感じました。
というわけで、今日の作業進捗報告はここまでにして、明日から作業をスムーズに進めるための環境構築を完了させておこうと思います。
明日から、またコードを書いて学習していきます。
今日は、ここまで！
