2020-10-13

10月12日フィヨルドブートキャンプ学習記録

学習内容

HTML初心者が知っておくべきリセットCSS と3つのポイントを読んだ。

理解した点

デフォルトCSSについてデフォルトCSSとはブラウザに初期状態で適用されているCSSのこと。ブラウザごとに異なる為、以前のWeb製作者はCSSハックや、条件分岐コメントなどを用いてブラウザごとに異なるCSSを適用させるなど、苦労が多かった。
Rest CSSについて HTML/CSSでコーディングする前に、ブラウザ毎の差異をなくす(デフォルトの設定を消す)目的で使用されるのが、Rest CSSである。 Reset CSSはYahoo! User Interface Libraryや、Eric Meyer氏によるCSSリセットなどがある。それぞれに特徴があるので、場合に応じて使い分ける必要がある。また、全てをリセットせずにある程度デフォルトCSSも有効に使おうという考えの「Vanilla CSS Un-Reset」という物もある。(これについては、資料内のリンクが飛べなかった)

分からなかった点、疑問に思った点

CSSハックや条件分岐コメントなど初めて聞いた単語が出てきたので、意味を調べて理解しておく。

所感

明日、職業訓練にて定期考査の為、そちらの勉強をしており本日はあまり時間を取れなかった。課題は出来れば金曜日までに一度提出、今週中に手直し等行って完了できるようにしたい。

明日の予定

Reset CSSの学習、課題を進める。

2020-10-12

10月11日フィヨルドブートキャンプ学習記録

学習内容

日本語対応！CSS Flexboxのチートシートを作ったので配布しますを読んだ。
FLEXBOX FROGGYを全問クリアした。

実施した点、理解した点

資料の読み進め資料を一通り読み、flexboxについての基礎事項を確認した。既に他の資料で学習した内容ばかりであった為、読み進めるのに特に困るような事はなかった。
FLEXBOX FROGGYを全問クリアゲーム感覚で楽しくFlexboxの基礎を身に付ける事が出来た。ラストの24問目のみはどのようなプロパティを使えば良いのかの指示がない総合問題であった為、少し悩んだが、自分で色々考えて正解を導く事が出来た。

分からなかった点、疑問に思った点

本日は特になし。

備忘録

flexの方向がcolumnのとき、justify-contentは垂直方向の、align-itemsは水平方向の並び方を変えるようになる為、注意。

所感

課題は骨休めして、Flexboxの学習に集中した。本日は、いつもより集中して出来た感じがして少しいい気分だった。

明日の予定

課題の続きに着手。プラクティスのReset CSSの資料を読む。

2020-10-11

10月10日フィヨルドブートキャンプ学習記録

学習内容

CSS上級課題を進めた。

実施したこと、理解した点

フォーム、フッター部分の装飾フッターについて、フッターナビとコピーライトの部分は大分それっぽく仕上げる事が出来た。作者プロフィールの部分が、まだ画像が大きすぎたり文章のバランスが悪かったりしているので明日はそこを着手する。フォームも大分完成に近づけられたが、テキスト部分の端が揃っていないなどの部分がまだ残っているので、こちらも明日着手する。

分からなかった点、疑問に思った点

疑問点見本ではプルダウンセレクト、リストセレクト、ファイル選択の部分が若干凹んでいるように見えるが、それを実現するにはどうしたらいい?
試してみたこと多分、borderプロパティを上手い具合に利用すればいけるんじゃないか?と思って少し調べてみたが、分からなかった。

所感

今日は少し時間を多めに取れて、集中して出来た。資料を読もうとして結局読んでいなかったので、明日こそはちゃんとやろう。

明日の予定

課題のフォーム、フッター部分の細部の作り込みに着手。プラクティスの資料を読む。

2020-10-10

10月9日フィヨルドブートキャンプ学習記録

学習内容

CSS上級課題を進めた

実施したこと、理解した点

CSS上級課題を進めた。フォーム部分の装飾を少し進めた。本日は週末で疲れが出たので、あまり出来なかった。

分からなかった点、疑問に思った点

本日は特になし。

所感

課題が少しずつ完成に近づいている。しかし、CSSで図形を作るところに手こずりそうなので、せめてあと5日以内には完成したいと思う。

明日の予定

引き続き、課題を進める。また、Flexboxの資料を読む事をサボりがちになっていたので、ちゃんとやる。

2020-10-09

10月8日フィヨルドブートキャンプ学習記録

学習内容

CSS上級課題を進めた。

実施したこと、理解した点

CSS上級課題ヘッダー部分の広告バナーの背景色を設定。 asideクラスの部分の広告バナー、ローカルナビの装飾。

課題で詰まった点

本日は特になし。

所感

body部分を大分完成に近づけられた。 asideクラスのローカルナビの一番上の要素の上側、一番下の要素の下側の角のみを若干丸めるという事に対して、昨日学んだ擬似クラスを使うなど、学習した内容を課題に応用する事が出来た。ページタイトルの横に四角い画像をつける事は時間がかかりそうで後回しにしているので、CSSで図形を作成する方法についても、復習をしておこう。

明日の予定

引付き、課題を進める。「flexboxfroggyに挑戦」を読んで、理解する。

2020-10-08

10月7日フィヨルドブートキャンプ学習記録

学習内容

CSS上級課題を進めた。
【CSS】奇数・偶数・n番目など、要素を指定する時によく使うセレクタまとめを読んで擬似クラスについて学習。

理解した点

擬似クラスについて擬似クラスを利用すれば、クラス名を書かなくてもクラス名を書いた時と同じように、最初の要素だけ、偶数番目の要素だけといった具合にCSSを適用する事ができる。 ①一番上の要素にのみ適用する例 https://codepen.io/ryotori1024/pen/rNLNyZK ②一番下の要素にのみ適用する例 https://codepen.io/ryotori1024/pen/GRqRWeo ③偶数番目の要素にのみ適用する例 https://codepen.io/ryotori1024/pen/xxOxqBB ④奇数番目の要素にのみ適用する例 https://codepen.io/ryotori1024/pen/eYzYvoj
CSS上級課題ナビゲーションの部分の色分け、クリックできる範囲を全体に広げる、パンくずリストの部分に不自然な空白があったのを取り除くなどを行った。ヘッダー部分はあらかた出来てきたので、明日はボディー部分を行っていく。ページタイトルの部分をリボンが折り曲がったような感じにしたり、横に図形を入れるなどを行わなければならないので、もう一度資料を読んでおく。

分からなかった点、疑問に思った点

本日は特になし。

所感

ヘッダー部分は一通り完成かなという所まで来た。次からボディー、フッターと続いていくがヘッダーよりも大変そうなので本腰を入れて取り組んでいこう。

明日の予定

Flexboxの学習、上級課題を進める。

2020-10-07

10月6日フィヨルドブートキャンプ学習記録

学習内容

CSSから考えるデザインのディテール第2回：FlexBoxで作る柔軟な横並びメニューを読んだ。
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法を読んだ。(途中まで)
CSS上級課題を進めた。

実施した点、理解した点

Flexアイテムの幅の指定方法について flex-growなどの概要、flex-basisに幅の指定がある場合の計算方法については前にFlexboxの基礎学習の際にやっていたので、そこまで理解に苦労はしなかった。しかし、「padding」が指定されている場合の計算方法はまだやっていなかったと思うのでじっくり読んで理解する事に努めたい。
上級課題ナビゲーションのリンクのクリックできる範囲を広げたり、パンくずリストの高さを揃える事を行った。

分からなかった点、疑問に思った点

①疑問点ナビゲーションの部分を見本のように、1、3、5番目の要素と2、4番目の要素とで色を分けるためにはどうしたらいい?

②自分の考え普通、要素ごとに色を分ける場合は要素ごとにクラスを分けてそれぞれに色を指定すれば良いと考えている。しかし、今回は全ての要素に同じクラス名が設定されている上にHTMLには手を付けない為、どうしたら良いか分からない。

所感

本日は昨日よりも早めに着手しようと思っていたが、職業訓練から帰宅後に猛烈な眠気に襲われた為遅い時間帯になってしまった。眠くなるのは仕方ない為、あまり自分を責めずに少しずつ学習時間を増やしていきたい。

明日の予定

引き続き、Flexboxの学習、課題を進める。