プログラミング kino

【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7

 

 

こんにちは、キノ(@zB75pWavnhDTIxr)です。

4月11日に、30DAYSトライアルを終わりました！

次は30DAYSトライアルの2ndを進めています。

 

今日はProgate編 DAY5～DAY7について書こうと思います。

下記の通りに進めてみてください！

 

↓詳細はこちらからどうぞ！↓

Progate編

（補足説明です）DAY4    HTML & CSS 中級編最後まで②（absoluteの話）

DAY3に続いてレイアウトを学びます。個人的には最低２～3回やらないと身につかないと思います。

つまずきやすいところはposition : absoluteですね。

absoluteとrelative
「position : absolute＝絶対的な」と「position : relative=相対的な」、これらはセットで考えてください。

基本的にどっちか１つしか使わないのはまれです。

 

これらを使って文字と画像を重ね合わせています。

なぜ、この２つを使うのか。それはスマートフォンやタブレットから見ると崩れちゃうのを防ぐためです。

absoluteは「絶対的」とあるように、例えば、top:0;と指定をとれば、上頂部へ固定されます。

パソコンやスマートフォンなどの画面幅が違うものがあったとしても同じような見た目に見えるんです。

 

marginやpaddingは一見してみるとパソコンだと見栄えが良いのに、スマートフォンで見ると崩れているのが多いんです。

これは、marginやpaddingは「パソコンの余白」に合わせただけで、

スマートフォンやタブレットの余白に合わせたってわけではないんですよ。

 

使い方は、

配置したい文字（画像）をクラスを割り当ててやって、そのクラス名にposition : absoluteを付与するんです。

このまま何もしないとbodyタグを基準に動きますから、そうならないようにposition : relativeを使います。

そして、position : relativeは通常、親要素に使います。

 

hiro pon-programmingさんの動画で詳しく解説しています。↓

 

 

スポンサーリンク

DAY5　 HTML & CSS 上級編まで

重要な概念である「レスポンシブデザイン」、パソコン、スマートフォン、タブレットなどで画面が崩れないように設定をするんです。

メディアクエリは正直、これだけだと身につかないと思います。

これは、何度か模写コーディングをするしか身につかないと思いますね。

bootstrap編で模写コーディングをするので、自分のものにしてください。

 

Progateではresponsive.cssというファイルを作って、普通のcssとは別々に管理してました。

１つのcssファイルを使うのか別々に管理するのか。

これは、別にどっちでもいいです。

僕は１つにした方が見やすいと思ったので、あえてメディアクエリのファイルを作らなかったので…。

 

30DAYSトライアルの2nd、１DAYの課題をやり終えたとき、メディアクエリは泥臭い作業だと感じました。

「自分で見て確認をしながら画面上のバランスを整える」

メディアクエリに正解はないようです。

ただ、自分が見た感覚を信じていくのみです。(*´･ω･)b

 

スポンサーリンク

DAY6　HTML & CSS 初級・中級道場コースとDAY7　HTML & CSS 上級道場コース 

課題の復習です。正直いって一回では無理でした。

「今まで習ったことをアウトプットする」

これが一番難しい。

 

ヒントを見ても分からなければ、答えを見てもいいと思います。

ただし、自分がどこでつまずいたのか考えるまでは見てはだめです（２分でいい）。

個人的に難所だったのが、「<div>を囲うのにどこまで囲えばいいんだ？」って思ったりしていましたね。

 

余裕がある方はこちら↓（30DAYSトライアルの1stではJavaScriptは取り扱わないので注意！）

ランディングページ（LP)って何？

さて、中級編ではランディングページ（LP)作りました。

LPは企業がユーザー（僕たち）に情報を伝えることために作られています。一言で言うとウェブ上で自社の商品やサービスのチラシです。

そして、クラウドソーシング上で企業がフリーランスエンジニアに向けて発注しています。

下記のサイトがよく知られるクラウドソーシングですね。

クラウドソーシング

ランサーズ

クラウドワークス　

「コーディングのみ」や「html css」と検索すればランディングページ（LP)制作案件があります。

個人的にランサーズの方が見やすかったです。

 

 

終わりに

これでProgate編は終わりです。

 

一度で理解できないはずです。

ちょくちょく戻ってくると思いますので、また再チャレンジしてみてください。

「あなたがつまずいたところはみんながつまずいたところです」を忘れずに

 

お疲れ様でした。

では、また

ここまで読んでくれてありがとうございました。

 

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

ブログランキング・にほんブログ村へにほんブログ村へ

コメントを残す

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

RECOMMENDこちらの記事も人気です。