おためし受講中

PCサイトコーディング -下層ページのCSSを書こう-

このコースでは、HTMLとCSSの基本的なスキルを持った方を対象に、企業のコーポレートサイトのような簡単なPCサイトのコーディングについて全6限で学びます。

「様々なテクニックを使いこなして、かっこいいWebサイトを作れるようになりたい」という気持ちは、Web制作を行う誰もが思うことです。しかしながら、基礎があやふやだと応用がききません。まずは基本的なレイアウトをきちっと実装できるように、基礎力をしっかり身につけることが大切です。

第5回は下層ページのCSSの書き方を学習します。レイアウトによってどんなCSSを使えば良いかを覚えましょう。

授業を通して、簡単なレイアウトのサンプルデザインを使って、実際にWebページとして完成させましょう。

この授業の先生

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    01:19  (00:13 ~ )
    授業のアジェンダ
    00:47  (01:32 ~ )
    サンプルデータの説明
    01:00  (02:19 ~ )
    floatを使った2カラムレイアウト
    03:13  (03:19 ~ )
    回り込みのおさらい
    01:32  (06:32 ~ )
    問題#01 この方法以外にも回り込みを解除する方法があります。それはどんな方法でしょうか?
    03:20  (08:04 ~ )
    答え#01
    03:31  (11:24 ~ )
    サイドバーのCSS
    00:58  (14:55 ~ )
    右端の矢印マーク
    01:38  (15:53 ~ )
    各リストの下線
    01:17  (17:31 ~ )
    マウスオーバーで背景色が変わる
    03:30  (18:48 ~ )
    メインコンテンツのCSS
    00:09  (22:18 ~ )
    object-fitおさらい
    04:30  (22:27 ~ )
    idやclassの命名ルール
    00:34  (26:57 ~ )
    問題#02 この命名の仕方だと問題がありそうです。それはどんな問題でしょうか。そしてどういう命名が適切でしょうか。
    02:28  (27:31 ~ )
    答え#02
    02:44  (29:59 ~ )
    リストを細かく制御するCSS
    01:07  (32:43 ~ )
    nth-child
    02:10  (33:50 ~ )
    last-child
    00:28  (36:00 ~ )
    問題#03 以下のように一番下のリストだけ点線が表示されないようにするには、CSSをどう書けばよいでしょうか。
    05:22  (36:28 ~ )
    答え#03
    02:12  (41:50 ~ )
    まとめ
    01:57  (44:02 ~ )
    【後半】質疑応答
    Q:スマホとかであるんですが、長くタップしても写真を保存出来ないのってCSSですか?それともJSですか?
    00:53  (46:28 ~ )
    Q:last-childはIEだと9からなので、対象ブラウザ8以下だと、対象のliにクラス名付けて対応するしかないか・・。
    01:49  (47:21 ~ )
    Q:案件にもよると思いますが、pcのブラウザチェックは、Internet Explorer・firefox・Google Chromeはどのバージョンから行うのが主流でしょうか?IE6~8はまだ案件で来る事もあるでしょうか?
    01:39  (49:10 ~ )
    Q:今回の、教材のサイト幅は何で1000pxにしたのですか?
    01:13  (50:49 ~ )
    Q:先生がATOMに入れてる、おすすめなPluginなどありますか?
    01:56  (52:02 ~ )
    Q:先生はワードプレスの授業も予定ありますか?
    00:41  (53:58 ~ )
    Q:ATOMのemmetしか入れてないですが、アップデートしたら動かなくなりました
    01:32  (54:39 ~ )
    お知らせ
      (56:11 ~ )