おためし受講中

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

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

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

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

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

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

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

学生代表

  • 未定

    未定

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

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

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