笠井枝理依さんのHTMLスケッチ動画で学んだこと

150705_eyecatch_htmlskecth.jpg

コーディングがうまくなりたい!Sublime Textを使いこなしたい!と思ってて、少しずつでも前に進めようと思ってgoogle検索していると「HTMLスケッチ」という摩訶不思議な言葉に出会いました。

HTMLでスケッチ?どういうことだろう?

HTMLスケッチとは?

私が本格的にHTMLとCSSを学び始めたのは、2013年の4月から。冒頭に書いた悩みは、初めてWebページを作成しようとした時に私も抱いていました。

そこで、HTMLとCSSスキルを向上させるために始めたのが、今回ご紹介する「HTMLスケッチ」です。
本授業では、実在するWebページをHTMLとCSSを使って自らの手で再現するこの手法を実際に授業で行います。ライブコーディングを見ることでページの構造や成り立ちを理解でき、より実践的な知識に進歩させる一助になるのではないかと考えております。
schooより引用

デザインカンプなどは使わずに完成・公開されているHPを見ながらコーディングしていくのが「HTMLスケッチ」
これを行うことでHTMLの構造を理解するとともにスキルが身に付く!これってすごいなと思って勉強してみました。

schooで笠井枝理依さんという方が教えて下さっているのですが、会員ではないのでほかに動画ないのかなーと思って探してみたら、ご本人が動画をアップされていたものがありました。
今回は、schooで取り扱う前にご自身でアップされていた動画を見て「HTMLスケッチ」してみました。

動画は1回10分程度の全5回構成

  1. 笠井枝理依のHTMLスケッチ #1 Wikipedia, Part 1 – YouTube
  2. 笠井枝理依のHTMLスケッチ #1 Wikipedia, Part 2 – YouTube
  3. 笠井枝理依のHTMLスケッチ #1 Wikipedia, Part 3 – YouTube
  4. 笠井枝理依のHTMLスケッチ #1 Wikipedia, Part 4 – YouTube
  5. 笠井枝理依のHTMLスケッチ #1 Wikipedia, Part 5 – YouTube

1回10分程度にまとめられており、最後まで集中して学ぶ事が出来ました。
ただ残念なことに途中でschooの方で取り扱われるようになったようで、最後までやりたい方はschooを見るのがベストだと思います。

内容は世界最大級のインターネットフリー百科事典『Wikipedia 』のWebサイトを題材にしてコーディングのポイントを解説されており、実際に使っているショートカットなどについても学べるので初心者向けだと感じました。

コードはGitHubにてご覧できるそうですよ。

schoo編はこちらから

:before, :after擬似要素についてもここで初めて知った。

例えば「パンくずリストのli要素の後に”>”をつけたい」という要望がある場合は、:after擬似要素を使えば簡単に実現できる。
ぼくはやり方を知らなかったけど、この動画を通して学ぶことができた。

詳しいことは分かり易く書いてあるサイトがあるので、そちらで確認してみるといい感じです。

border-widthを使うとborderの管理が楽になる。cssの記述も簡単。

今までぼくはborderを使うときは下ならborder-under、上ならborder-topとしていた。
これでももちろんいいけど、border-widthを使うと四角の枠を作る際、2行で済む。上下左右のボーダーの太さをまとめて指定する際、便利だ。

人のコーディングから学ぶことは多い

職業訓練校で学んでいた時は、先生のコーディングの順番や考え方を生で見ること知ることができるが、そういう機会は多くない。
多くない割には、人のコーディングを見て学ぶことは意外に多かった。HTML5から追加された図や表を表す時に使う「figure要素」、定義・説明する言葉を表す時に使う「dl・dt・dd要素」なども知る事ができた。
独学で学ぶ場合は、何から進めればいいのか分からないのがやる気を下げる要因でもある。HTMLスケッチは実践的な知識を学ぶ一歩になるのでオススメします。

150705_eyecatch_htmlskecth.jpg

大画面でサクサクプレイ
【徹底解説】これからPC版を始めるあなたに送るシャドウバースPC版の圧倒的メリット3つ

もっと大画面でサクサクプレイしたい。高画質で動画配信をしてみたい。新たにカードを引いて、新しく始めたい。そんな方におすすめ!

コメントを残す

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