PREMIUM
第2回
PCサイトコーディング -CSSで大まかなレイアウトを整えよう-
2016年6月28日 60min
スライド資料
授業の概要
こんな人にオススメ
HTML、CSSの基本を学んだので実際にWebサイトを制作したいと考えているWebデザイナー
担当の先生／パーソナリティ
-
山本 麻美
株式会社ロクナナ UI/UXデザイナー
インディーズ音楽プラットフォームを作りたい一心でWebを独学。企業からWeb制作の仕事を請けるようになり1997年フリーランスのWebデザイナーに。 2010年何気なく参加した日本Androidの会で周囲からすすめられてAndroid, iOSのUIデザインを始め、モバイルアプリのUIに特化して仕事をするようになる。 2017年後半からIoTプロジェクトやグラスデバイスのUIデザインに仕事の範囲を広げる。 2020年より株式会社ロクナナ所属。 ・TechFeed 公認エキスパート（UX） ・東洋美術学校 デザイン研究室 講師 ・mmhmmヒーロー
-
田原 彩香
スクー放送部
チャプター
-
自己紹介
01:14 -
今日の授業のゴール
00:43 -
今日の授業内容
01:16 -
サンプルデータの説明
01:03 -
HTMLとCSS
01:28 -
reset.css
01:37 -
CSSファイルの作成とHTMLのリンク
02:44 -
レイアウトを制御する
00:05 -
コンテンツをブラウザ画面の中央に表示する
01:39 -
headerのレイアウト
00:30 -
ナビゲーションを横に並べる
00:31 -
問題#01 CSSの記述が間違っているわけではなさそうなのに、レイアウトがずれる。具体的にどうずれているのか確認する簡単で手軽な方法があります。考えてみてください！
02:43 -
答え#01
02:51 -
画像の表示を制御する
00:06 -
mainのレイアウト
00:17 -
背景に画像を表示する
01:23 -
テキストの画像回り込み
00:41 -
画像の表示サイズを指定する
01:33 -
CSSで画像をトリミングする
00:25 -
CSSで表示サイズを指定
01:37 -
object-fitで指定できる値
02:58 -
クリックしやすいリストやボタン
00:06 -
問題#02 ユーザーがクリックしやすいリストにするために、CSSをどう書くとよいでしょうか。
02:39 -
答え#02
01:13 -
記事の見出しをクリックしやすくする
00:49 -
Marketchで要素のサイズ確認
03:24 -
CSSでボタンを作る
01:12 -
問題#03 「ページトップへ」のボタンに使われている上向き矢印、どのように実装するのが良いでしょうか
04:34 -
答え#03
06:16 -
フッター
00:05 -
footerのレイアウト
02:18 -
まとめ
01:44
-
Q：画像をCSSで縮小するメリットってなんですか？
01:40 -
Q：CSSを書く時に何か工夫している事とかありますでしょうか？書き方の順番とかどうしたら見やすくなるかいつも迷います。
02:14 -
Q：CSSのセレクタ（margin・width等）ですが、書く順番は決まっているのでしょうか？他のソースを見るとセレクタの順番がバラバラの場合もありますが、先生は書く順番に拘りや決まりがありますか？
01:29 -
Q：WEBサイトは1からコーディングするのが一般的だと思いますが、CSSフレームワークなどを使った方がいいですか？作業が楽みたいですが。
01:46 -
Q：ul li のwidth は、％にして、小数点以下３桁くらいを切り捨ててではいけませんか。
01:39 -
お知らせ