chevron_left

プロデザイナーが実践するHTML/CSSスキルアップ術

PREMIUM
第2回

プロデザイナーが実践するHTML&CSSスキル向上トレーニングvol.2

2014年3月24日 90min

スライド資料

会員登録して、全てのスライドを見よう

1 / 4

授業の概要

「HTMLとCSSの基礎知識はあるけど、その知識をどう応用したらいいのかわからない」
「実際にWebページをコーディングしようとすると指が動かない」

この授業は、こんな悩みを抱えている方におすすめです。

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

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

授業では、Webサイトを題材にしてコーディングのポイントを解説する他、私が実際に使っているショートカットやプラグイン、ツールについてもご紹介する予定です。

新人ならではの視点を活かしてお話しすることで、同じような悩みを持っている方のコーディングスキル向上に少しでも参考になれば幸いです。

チャプター

play_arrow
自己紹介&アジェンダ
01:30
play_arrow
今回、作業するページを見てみよう
01:08
play_arrow
実習1
01:37
play_arrow
footerのコーディング
05:46
play_arrow
自分で作ることなくかわいいアイコンを使う方法
01:45
play_arrow
footer-innnerのコーディング
01:42
play_arrow
カラーピッカーの使い方
01:00
play_arrow
ページ上のピクセルを測る方法
01:16
play_arrow
実習2
00:25
play_arrow
footerの各部分をそれぞれ適切な位置に配置する
01:56
play_arrow
footerを横書き表示する
00:43
play_arrow
項目の間隔を開け、アイコンを中央配置する
05:16
play_arrow
mainのコーディング
00:57
play_arrow
container-leftのコーディング(画像のサイズ変更、名前を大きく表示する)
03:47
play_arrow
実習3
11:15
play_arrow
プロフィール部分のコーディング
04:15
play_arrow
実習4
00:50
play_arrow
可変対応する箇所を作る
01:35
play_arrow
container-rightを作る
06:43
play_arrow
main-contentsを作る
06:17
play_arrow
実習5
18:57
play_arrow
Q:*2,*3と入力してタグを複数出力する機能ってsublimeに標準搭載されているんですか?
00:50
play_arrow
Q:先生はcss先行でクラスを作っておいてhtmlタグに複数付けていく手法をとっていますが、Web業界では一般的な手法なんでしょうか?
01:20
play_arrow
Q:Winでもエックスコープに似た物はありますか?
00:53
play_arrow
Q:css内で「li+li」のような形式がありますが、どういう意味ですか?
02:02
play_arrow
Q:画面を指定する時に白くなっていましたが、どんな機能でしょうか?
01:37
play_arrow
Q:i要素で置いているインラインアイコンを、どこから持ってきているのか教えて下さい。
01:45
play_arrow
課題発表