6日目:ドットインストールで勉強中(CSSレイアウト入門終了)

SNSやってます。

引き続きドットインストールで勉強しています。

昨日終えたのは下記7レッスンです。ブログを書く者としては興味深いレッスンでした。

こんにちはSPF36.comのダイ(@daijirok_jp)です。

2日前の2017年1月24日から腫れていた左目は、抗菌目薬のおかげかだいたい腫れも引いてきました。

という事で結構頑張る事が出来ました。

昨日終えたレッスン

CSSレイアウト入門 (全15回中) >> 終了しました^^

  • #09 3カラムレイアウトを作ってみよう
  • #10 可変幅のカラムを作ってみよう
  • #11 リストでメニューを作ってみよう
  • #12 メニューを完成させよう
  • #13 positionプロパティで使ってみよう
  • #14 画像付きリストを作ってみよう
  • #15 画像付きリストを完成させよう

感想

今回、CSSレイアウト入門の最後2つのレッスンで勉強した画像付きリンクというのは、よくあるブログカード↓(こういうやつ)

5日目:ドットインストールで勉強中(CSSレイアウト入門中)
何とか毎日勉強しています。昨日も、ドットインストールでの勉強を進めました。 こんにちはSPF36.comのダイ(@daijirok_j...

のレイアウトの方法でした。

こういう画像がついたリンクはブログカードだけではなく、ブログの記事一覧でもよく見かけるレイアウトです。これを一から作ってみるというのはカスタマイズする際にとても参考になる物です。

CSSと実行結果

↑ 実際にいろいろやってみました。

ところでレッスン13のPositionプロパティですが、Relative、Absoluteの指定というのがよく分かりませんでした。これを使って上の画像左側にある、鍋焼きうどんの写真の右上ちょっとずれたところに、100円と値札が付いているような構成を作る事ができます。

これに関して他の解説サイトを確認してみたのですが、やっぱりよく分かりませんでした。これは、また必要になった時に勉強しようと思います。どうせまた出てくるでしょう。

ボックス要素とインライン要素の違いやフロートはだいたい理解できたと思います。

次は順当に行けば「実践!ウェブサイトを作ろう (全17回)」を勉強するところですが、その前に今使っているプログラマー用のテキストエディタ「Atom」について勉強しておこうと思います。

Atomの公式ウェブサイト:https://atom.io/

入力の効率が上がれば勉強の効率も上がると思うはずです。