PREMIUM
第3回
PCサイトコーディング -CSSを調整してトップページを仕上げる-
2016年7月5日 60min
スライド資料
授業の概要
こんな人にオススメ
HTML、CSSの基本を学んだので実際にWebサイトを制作したいと考えているWebデザイナー
担当の先生／パーソナリティ
-
山本 麻美
株式会社ロクナナ UI/UXデザイナー
インディーズ音楽プラットフォームを作りたい一心でWebを独学。企業からWeb制作の仕事を請けるようになり1997年フリーランスのWebデザイナーに。 2010年何気なく参加した日本Androidの会で周囲からすすめられてAndroid, iOSのUIデザインを始め、モバイルアプリのUIに特化して仕事をするようになる。 2017年後半からIoTプロジェクトやグラスデバイスのUIデザインに仕事の範囲を広げる。 2020年より株式会社ロクナナ所属。 ・TechFeed 公認エキスパート（UX） ・東洋美術学校 デザイン研究室 講師 ・mmhmmヒーロー
-
田原 彩香
スクー放送部
チャプター
-
自己紹介
00:51 -
今日の授業のゴール
00:43 -
今日の授業内容
01:18 -
サンプルデータの説明
00:53 -
横並びのナビゲーション
00:27 -
float: left;
03:26 -
ナビゲーションの高さの指定
00:28 -
問題#01 ulの高さが70pxで、liは67pxになっています。なぜ3px少ないのでしょうか。
02:53 -
答え#01
02:57 -
footerナビがなんかおかしい、、、
02:47 -
CSSだけでhover時の色や見た目を変える
00:13 -
下線
00:28 -
透過
00:22 -
色を変える
00:35 -
おまけ知識
02:20 -
2行以上のテキストを縦方向にセンタリングさせる
00:09 -
テキストが1行なら、、、
00:42 -
テキストが1行以上になると、、、
00:43 -
そこで、CSSをこう書く！
00:50 -
算数のお時間
02:02 -
AtomでCSSを見てみた
00:42 -
問題#02 h1には背景写真を表示させるのに、背景色も指定しています。なぜでしょう？
04:22 -
答え#02
01:09 -
画像に回り込ませたテキストの余白を制御する
02:07 -
リスト - 指定業だけ、他の行と設定を変える
00:09 -
Topicsのレイアウト
01:01 -
問題#03 余白をつけるためにliの右側にmarginをつけたらレイアウトが崩れました。なぜでしょう？
04:49 -
答え#03
02:11 -
今回作ったものの確認
01:59 -
おまけ知識
01:42 -
まとめ
01:34
-
Q：画像についてですが、スマホで撮ったのをそのままimgタグで挿入したらドカンと大きくなります。どうすればよいでしょう
01:02 -
Q：昔は、HTML・CSS・JavaScriptを使ってホームページ作成を主流でしたが、今は、CMSが主流。なぜCSSを使うメリットはありますか？
01:55 -
Q：HTML5、CSS3に対応していないブラウザへの対応はどのようにされていますか？
00:57 -
Q：ブラウザは基本的には最新版でチェックしてますか？
01:38 -
Q：資料３０ページのおまけ知識ですが、自然なhoverに見せるには、元の色より薄目にするのがよいのでしょうか？
01:26 -
Q：画像を、均等に、３個横並びにする時に、width:やmarginを％で指定するよりも、先ほどの、nth-childでするのが一般的ですか？
02:06 -
Q：1限目の授業でサンプルファイル、Marketchフォルダの中に、3BDFCなんちゃら〜フォルダがあります。これは画像を表すフォルダですか？
00:50 -
Q：先生は画像作成やら編集にどんなソフトをお使いですか
02:17 -
お知らせ