おためし受講中

PCサイトコーディング -CSSで大まかなレイアウトを整えよう-

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

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

第2回はCSSを記述して、レイアウトを整えていきます。 

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

この授業の先生

学生代表

  • 田原 彩香

    田原 彩香

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    01:14  (00:14 ~ )
    今日の授業のゴール
    00:43  (01:28 ~ )
    今日の授業内容
    01:16  (02:11 ~ )
    サンプルデータの説明
    01:03  (03:27 ~ )
    HTMLとCSS
    01:28  (04:30 ~ )
    reset.css
    01:37  (05:58 ~ )
    CSSファイルの作成とHTMLのリンク
    02:44  (07:35 ~ )
    レイアウトを制御する
    00:05  (10:19 ~ )
    コンテンツをブラウザ画面の中央に表示する
    01:39  (10:24 ~ )
    headerのレイアウト
    00:30  (12:03 ~ )
    ナビゲーションを横に並べる
    00:31  (12:33 ~ )
    問題#01 CSSの記述が間違っているわけではなさそうなのに、レイアウトがずれる。具体的にどうずれているのか確認する簡単で手軽な方法があります。考えてみてください!
    02:43  (13:04 ~ )
    答え#01
    02:51  (15:47 ~ )
    画像の表示を制御する
    00:06  (18:38 ~ )
    mainのレイアウト
    00:17  (18:44 ~ )
    背景に画像を表示する
    01:23  (19:01 ~ )
    テキストの画像回り込み
    00:41  (20:24 ~ )
    画像の表示サイズを指定する
    01:33  (21:05 ~ )
    CSSで画像をトリミングする
    00:25  (22:38 ~ )
    CSSで表示サイズを指定
    01:37  (23:03 ~ )
    object-fitで指定できる値
    02:58  (24:40 ~ )
    クリックしやすいリストやボタン
    00:06  (27:38 ~ )
    問題#02 ユーザーがクリックしやすいリストにするために、CSSをどう書くとよいでしょうか。
    02:39  (27:44 ~ )
    答え#02
    01:13  (30:23 ~ )
    記事の見出しをクリックしやすくする
    00:49  (31:36 ~ )
    Marketchで要素のサイズ確認
    03:24  (32:25 ~ )
    CSSでボタンを作る
    01:12  (35:49 ~ )
    問題#03 「ページトップへ」のボタンに使われている上向き矢印、どのように実装するのが良いでしょうか
    04:34  (37:01 ~ )
    答え#03
    06:16  (41:35 ~ )
    フッター
    00:05  (47:51 ~ )
    footerのレイアウト
    02:18  (47:56 ~ )
    まとめ
    01:44  (50:14 ~ )
    【後半】質疑応答
    Q:画像をCSSで縮小するメリットってなんですか?
    01:40  (52:23 ~ )
    Q:CSSを書く時に何か工夫している事とかありますでしょうか?書き方の順番とかどうしたら見やすくなるかいつも迷います。
    02:14  (54:03 ~ )
    Q:CSSのセレクタ(margin・width等)ですが、書く順番は決まっているのでしょうか?他のソースを見るとセレクタの順番がバラバラの場合もありますが、先生は書く順番に拘りや決まりがありますか?
    01:29  (56:17 ~ )
    Q:WEBサイトは1からコーディングするのが一般的だと思いますが、CSSフレームワークなどを使った方がいいですか?作業が楽みたいですが。
    01:46  (57:46 ~ )
    Q:ul li のwidth は、%にして、小数点以下3桁くらいを切り捨ててではいけませんか。
    01:39  (59:32 ~ )
    お知らせ
      (1:01:11 ~ )