おためし受講中

CSS入門 -サイトの段組-

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトのデザインを担当するCSSを学んで行きましょう。

この授業では、W3C(Web技術の標準規格化非営利団体)で勧告となった最新情報に基づいてCSS2とCSS3を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとCSSに対する理解が深まります。

今日はいよいよページ全体のレイアウトをCSSで作り上げる手法を学びます。これまで積み上げてきたスキルの集大成ですが、本日学ぶスキルも沢山あります。
この授業は次回のシリーズ「シングルページの制作入門」の前提知識となります。

■ 事前準備

テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/がオススメです。

参考ファイル: 「webデザイナーのためのcss入門」のコード一式のURL
http://behomazn.com/schoo/css_Introduction/

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:06  (00:14 ~ )
    サイトの土台となるレイアウト
    03:35  (01:20 ~ )
    ボックスモデルを理解する
    02:05  (04:55 ~ )
    ボックスモデルを理解する: navの中のulの中のliの中のaの構造
    04:10  (07:00 ~ )
    2カラム固定幅のデザイン
    02:47  (11:10 ~ )
    2カラム固定幅のデザイン: 【実践】エディターを⽴ち上げてhtmlのテンプレを作ろう
    02:13  (13:57 ~ )
    2カラム固定幅のデザイン: 【実践】bodyタグの中にheaderタグ、articleタグ、asideタグ、 footerタグを⼊れよう
    01:35  (16:10 ~ )
    2カラム固定幅のデザイン: 【実践】header内にh1とp、article内にh2とp、aside内にnavの中に⼊れたulをコピペしよう
    02:56  (17:45 ~ )
    2カラム固定幅のデザイン: 【実践】ブラウザ感の差異を無くしてからcssを書いていこう
    03:27  (20:41 ~ )
    2カラム固定幅のデザイン: 【実践】⼤外のdivの横幅を、流用する4回⽬で作ったnavの横幅にあわせ背景色を指定しよう
    04:57  (24:08 ~ )
    2カラム固定幅のデザイン: 【実践】articleとaside合わせて親要素のdiv幅になるように 幅を指定しよう
    05:40  (29:05 ~ )
    2カラム固定幅のデザイン: 【実践】コース4限目で書いたnav部分のcssを加えてみよう
    02:29  (34:45 ~ )
    2カラム固定幅のデザイン: 【実践】新しく加えたcssの全てnavからのルートに指定しよう
    07:35  (37:14 ~ )
    【後半】質疑応答
    Q:firefoxやChromeの開発ツールが充実してからWEB制作を始めましたが、昔は大変だったのでしょうか?
    00:49  (46:11 ~ )
    Q:Webデザインに必要なCSSの基礎が固められるお勧めの本はありますか?
    02:04  (47:00 ~ )
    Q:子孫セレクタでulを書かなかったですが、今後仕様変更があると思われる場合は、略さないで書いた方がいいですか?
    00:56  (49:04 ~ )
    Q:先生はBEMを使用されますか?
    01:38  (50:00 ~ )
    Q:paddingの見てくれについて
    01:07  (51:38 ~ )
    Q:articleとasideの幅について、「左右が綺麗に見える割合のこつ」とかありますか?
    00:57  (52:45 ~ )
    Q:wrapperについて
    00:44  (53:42 ~ )
    Q:articleとasideの高さを常にnavの下段とfoterの上段に位置する状態に保つ方法はありますか?
    01:10  (54:26 ~ )
    Q:liのaは

    で囲むとSEO的に良いと、schooの授業でみたのですが、やはりpで囲む方が良いでしょうか。

      (55:36 ~ )