4月24日 -HTML/CSS 道場コース上級編終了-

1.今日の目標

HTML/CSSの道場コース上級編を進める

 

2.結果・感想

開始時間17:30-18:30。一時休戦。これからベガルタ仙台の試合あり。23時に再開し、23:15でHTML/CSSの道場コース上級編終了。コースが進んでいくにつれて、学んだことの書き出し量が少なくなってきた。一時的な知識にしないように、出来るだけアウトプットしながら覚えていきたいので、少なくならないように気を付けていきたいと思う。CSSのプロパティとバリューを混同して覚えてた。11:30からHTMLテンプレートを修正してLP制作。画像や文章を編集しただけ。思ったより簡単だった。ロゴは画像をすぐに切り替え出来なかった。ロゴを自分で作りたいなと思った。やはり今までの知識があるからどこにどの文章があるか、CSSでどんな指定をしているのかがある程度分かるようになっていた。自分で1から作り出すことはなかなか難しいけど、作られているサイトを見てその構造を少し把握できている自分がいる。これはとても嬉しい。成長が実感できる。プログラミングを勉強していて良いと思う所は頑張った分が実感しやすい所。でももともとWEBエンジニアになりたいなと思っていたんだけど今は完全にコーダーの勉強をしている。これでいいのかなとも思いつつ。paizaのランクはB。Aとか数問チャレンジしてみたけど難しい。二次元配列やらアルゴリズムやら。でも今そっちを勉強し始めると中途半端になってしまうからコーダー系(フロントエンド)の勉強をまずはキリが良い所までしっかり成し遂げたいと思う。

 

3.学んだことの書き出し

 width:100%

div.clearを作りclear:leftをCSSで指定してfloat:leftしたdivを複製

HTMLの要素はボックスと呼ばれる四角形の領域の集まりで出来ている

CSSの書き方の基本はセレクタ{プロパティ:バリュー}

URLリンクを貼る時は,<a href=" ">,画像を貼る時は<img src=" ">

色を指定する方法は4種類(#,色名rgb,rgba)

セレクタは.class,#id,タグはそのままで指定可能

position:absoluteで親要素の左上が基点になる

position:relativeは今いる場所が基点

border(-方向(top,bottom,right,left))でborder部分を色付け

バリューは太さ、スタイル、色(2px,solid,black)

z-index(boxの重なりの順序指定)は値が大きいほど上になる(画面手前側)

CSSのfont-sizeには絶対値pxと相対値remがある

レスポンシブデザインでメディアクエリを利用

@media(条件){ }

max-width指定は「以下」

hrは横線(Horizontal Rule水平線)

HTMLでセクション区切りに利用されたりする

 googlemapの埋め込みはサイトの共有→埋め込みから可能

 

4.明日の課題

ロゴを自分で作成してみる。それを自分で作ったLPに埋め込んでみる。faviconも作成する。LP製作編の大事な所を勉強し、次の目標をたてる。

 

5.参考URL

https://www.engineer-step.com/entry/site-seisaku-17