プログラミング

30DAYSトライアル【1日目】HTML&CSSの入門編

30 DAYS トライアル 1日目のアイキャッチ

こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。

カズせん
カズせん
これから30DAYSトライアルを始めていきます。

ツッコミウルフ
ツッコミウルフ
がんばって5万稼げるようになれよ

参考:WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】

30daysトライアル まとめのアイキャッチ
WEB制作で月5万円稼ぐために!30DAYSトライアル【まとめ・随時更新】こんにちは!偉人ハックブロガーのカズせん(@kazusen5)です。 Twitterを見ていたら、このようなツイートを目にしました...

 

 

1日目の課題 【Progate HTML & CSS 初級編(4章まで)】  

1日目の課題は、『ProgateのHTML & CSS 初級編(4章まで)』でした。

課題で使われるProgateとは、プログラミングを無料で学べるオンラインサービス。

2019年現在の無料のオンラインプログラミングサービスと言えば、>Progateドットインストールの2巨頭ですね。

ツッコミウルフ
ツッコミウルフ
30DAYSトライアルではProgateを使うのね

僕は実際にどっちも使ったことがあるんですが、ざっくり分けると

  • Progate:イラストがふんだんに使われていてゲームっぽく学べる
  • ドットインストール:音声付き講義で予備校のようにストイックに学べる

って違いがある印象です。

カズせん
カズせん
プログラミングを学びたい方はどっちもやってみて、肌感で合う方を選んでみてください。

 

 

1日目の課題の忘備録

実はProgateはブログ書く前にちょっとやってて、初級編と中級編は終わらしてたんですよね。

カズせん
カズせん
その時はチンプンカンプンなとこもありました

 

で、数ヶ月ぶりにやってみたんですけど、これがなかなかスッと入ってきました。

おそらくブログで記事を書くときに、h2やらolやら<span>やらなんやらを使う機会があったのが大きかったと思います。

以下では、以前僕が「?」になってたところを忘備録を兼ねて書いていきますね。

 

 

divについて

始めたての人はdivの概念が慣れないかなと思います。

プログラミングはコンピューターに指令を与えるものですよね。

HTMLで書いたものに、CSSで『どこをどうするか』の指令をするんですが、その『どこを』の指令先をdivで囲うと考えればOKかと。

ツッコミウルフ
ツッコミウルフ
うん、よく分からん

ではここは紅白歌合戦で例えてみましょう。

紅白歌合戦では紅組と白組で分かれてますよね。

ボーイ
ボーイ
はいじゃあ白組の人たち舞台上がって〜!

って指令を出したいなら、divで白組を囲ってやる必要があるってことです。

30 DAYS トライアル div
ボーイ
ボーイ
紅組の人たち、舞台上がって〜

って指令を出したいなら、<div>紅組</div>

ボーイ
ボーイ
ジャニーズはマイク持って〜

って指令出したいなら<div>ジャニーズ</div>

『指令を出す対象を<div>で囲って固まりのブロックにして指令できるようにする』ってことですね。

 

 

ulについて

ulは、仲間であるolと一緒に記憶すると覚えやすいです。

ul: Unordered List  (順番のないリスト)

ol: Ordered List (順番つきリスト)

ulの『u』は、『〜じゃない』の意味の『un』の頭文字ですね。

 

 

 Floatについて

floatはプロゲートでやってるだけだと完全に『よく分からん』になるはず。

floatの意味は『浮かす』。

浮かせて左右に移動させて、テキストやインライン要素がその周りを回りこめるようにするものです。

30 DAYS トライアル float 1 30 DAYS トライアル float 2 30 DAYS トライアル float 3 30 DAYS トライアル float 4 30 DAYS トライアル float 5

floatはもっと複雑なルールがあるようなので、また追記していきます。

 

ABOUT ME
カズせん
元コメディアンブロガー&WEBライター。偉人たちの知恵や仕事術や習慣を現代のツールと組み合わせて次世代のHACKを作り出すことに精を出す20代。
smoothing: antialiased;