おためし受講中

PCサイトコーディング -CSSを調整してトップページを仕上げる-

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

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

第3回はCSSを微調整してトップページを完成させます。 

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

この授業の先生

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    00:51  (00:15 ~ )
    今日の授業のゴール
    00:43  (01:06 ~ )
    今日の授業内容
    01:18  (01:49 ~ )
    サンプルデータの説明
    00:53  (03:07 ~ )
    横並びのナビゲーション
    00:27  (04:00 ~ )
    float: left;
    03:26  (04:27 ~ )
    ナビゲーションの高さの指定
    00:28  (07:53 ~ )
    問題#01 ulの高さが70pxで、liは67pxになっています。なぜ3px少ないのでしょうか。
    02:53  (08:21 ~ )
    答え#01
    02:57  (11:14 ~ )
    footerナビがなんかおかしい、、、
    02:47  (14:11 ~ )
    CSSだけでhover時の色や見た目を変える
    00:13  (16:58 ~ )
    下線
    00:28  (17:11 ~ )
    透過
    00:22  (17:39 ~ )
    色を変える
    00:35  (18:01 ~ )
    おまけ知識
    02:20  (18:36 ~ )
    2行以上のテキストを縦方向にセンタリングさせる
    00:09  (20:56 ~ )
    テキストが1行なら、、、
    00:42  (21:05 ~ )
    テキストが1行以上になると、、、
    00:43  (21:47 ~ )
    そこで、CSSをこう書く!
    00:50  (22:30 ~ )
    算数のお時間
    02:02  (23:20 ~ )
    AtomでCSSを見てみた
    00:42  (25:22 ~ )
    問題#02 h1には背景写真を表示させるのに、背景色も指定しています。なぜでしょう?
    04:22  (26:04 ~ )
    答え#02
    01:09  (30:26 ~ )
    画像に回り込ませたテキストの余白を制御する
    02:07  (31:35 ~ )
    リスト - 指定業だけ、他の行と設定を変える
    00:09  (33:42 ~ )
    Topicsのレイアウト
    01:01  (33:51 ~ )
    問題#03 余白をつけるためにliの右側にmarginをつけたらレイアウトが崩れました。なぜでしょう?
    04:49  (34:52 ~ )
    答え#03
    02:11  (39:41 ~ )
    今回作ったものの確認
    01:59  (41:52 ~ )
    おまけ知識
    01:42  (43:51 ~ )
    まとめ
    01:34  (45:33 ~ )
    【後半】質疑応答
    Q:画像についてですが、スマホで撮ったのをそのままimgタグで挿入したらドカンと大きくなります。どうすればよいでしょう
    01:02  (47:31 ~ )
    Q:昔は、HTML・CSS・JavaScriptを使ってホームページ作成を主流でしたが、今は、CMSが主流。なぜCSSを使うメリットはありますか?
    01:55  (48:33 ~ )
    Q:HTML5、CSS3に対応していないブラウザへの対応はどのようにされていますか?
    00:57  (50:28 ~ )
    Q:ブラウザは基本的には最新版でチェックしてますか?
    01:38  (51:25 ~ )
    Q:資料30ページのおまけ知識ですが、自然なhoverに見せるには、元の色より薄目にするのがよいのでしょうか?
    01:26  (53:03 ~ )
    Q:画像を、均等に、3個横並びにする時に、width:やmarginを%で指定するよりも、先ほどの、nth-childでするのが一般的ですか?
    02:06  (54:29 ~ )
    Q:1限目の授業でサンプルファイル、Marketchフォルダの中に、3BDFCなんちゃら〜フォルダがあります。これは画像を表すフォルダですか?
    00:50  (56:35 ~ )
    Q:先生は画像作成やら編集にどんなソフトをお使いですか
    02:17  (57:25 ~ )
    お知らせ
      (59:42 ~ )