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

  • このエントリーをはてなブックマークに追加
プロデザイナーが実践するHTML&CSSスキル向上トレーニング -Wikipedia編-
第1回:2014年3月10日公開 01:30:00

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

受講する

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

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

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

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

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

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

授業一覧
プロデザイナーが実践するHTML&CSSスキル向上トレーニング -Wikipedia編-
2014年3月10日公開
01:30:00

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

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

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

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

今回は、世界最大級のインターネットフリー百科事典『Wikipedia 』のWebサイトを題材にしてコーディングのポイントを解説する他、私が実際に使っているショートカットやプラグイン、ツールについてもご紹介する予定です。

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

※当日書き上げたコードは、GitHub にてご覧いただけます

プロデザイナーが実践するHTML&CSSスキル向上トレーニングvol.2
2014年3月24日公開
01:30:00

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

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

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

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

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

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

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

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

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

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

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

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

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

プロデザイナーが実践するHTML&CSSスキル向上トレーニングvol.4
2014年4月21日公開
01:30:00

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

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

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

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

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

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

タグ
授業で使用するファイル

※授業以外での利用は禁止します。

担当の先生
受講生代表
  • 未定

    未定

この授業を受けたい(2824人)
その他 2744人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×