chevron_left

挫折した人のための 初心者速習HTML/CSS基礎

PREMIUM

スライド資料

会員登録して、全てのスライドを見よう

1 / 24

授業の概要

【html+cssを挫折した全ての人に贈るシリーズ 全5回】

このシリーズは1回で完結していますが、1回から5回まで同じサイトがどんどん完成して行く形になっています。1回づつ完結した出来上がり見本付きの演習ファイルがダウンロードできます。

第2回:初心者速習html+css【4ページのサイトマルッと制作編】

初めてコーディングを学ぶ人や、本を読んだり参考サイトを見ながらコーディングしても崩れてしまってうまく行かなかった人のために、テンプレートからページを量産してサイトを作り上げる方法を学びます。

1回目の授業を受講していなくても、理解度が深まるように、演習ファイルを用意しています。この授業を受講して、コーディングの基礎を学んでいきましょう!

■ 必要なもの■

1)Sublimeのインストール(授業中コードを打つのに使います)
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
設定は何も必要ありません。インストールして授業が始まる時間に立ち上げられる様にだけしておけば大丈夫です。

2)解凍ツール (授業中配布する教材の解凍に使います)
授業中にダウンロードしたファイルをすぐに解凍できる様になっていれば大丈夫です。(Mac OSXの場合はダブルクリックで展開します。windows7~の場合は右クリックのコンテキストメニュー「全て展開」を選択でOK)

3)その他のバージョンのOSは、MacであればApp StoreでWinArchiver Lite.appを検索してダウンロードしインストールしておきます。
Wiondwsであれば、下記のURLよりLhaplusをダウンロードし、インストールしておきます。
http://www7a.biglobe.ne.jp/~schezo/

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
03:45
play_arrow
質問 過去の授業は受けましたか?
01:56
play_arrow
サイト設計における大前提とは?
02:49
play_arrow
サイトの中にある「ナビゲーション」って?
04:08
play_arrow
なぜ「パンくずリスト」という名前なのか
01:50
play_arrow
パンくずリストと呼ぶ理由
03:50
play_arrow
CSSの記述の順番
01:43
play_arrow
ドット絵風のCSSの当て方
00:54
play_arrow
spanタグに指定するCSS
00:30
play_arrow
コーディングが楽になるPCコマンド一覧
01:41
play_arrow
さらにコーディングが楽になる「sublime」とは?
04:02
play_arrow
index.htmlにsublimetextで開き、コードを書き込む
03:25
play_arrow
【sublimeの便利な機能】<article>から</article>までを簡単にコピーする方法
03:07
play_arrow
sublimeでdps.htmlを開く
04:21
play_arrow
制作データを保存する
04:11
play_arrow
”.role”部分を指定する 〜文字の大きさや色を指定する方法〜
04:00
play_arrow
margin rightで余白を調整する
04:08
play_arrow
フォントをcssで設定する
03:24
play_arrow
paddingで隙間を調整する
05:29
play_arrow
line-haightで行間を調整する
03:45
play_arrow
Q:今後、スキルアップにあたって、ネットや書籍で勉強する際、注意すべき点はありますか?
04:15
play_arrow
Q:WEBフォントって初めて使いました。どんな環境のブラウザでも見られるんですか?
05:55
play_arrow
Q:WEBフォントは商用などの使用は自由ですか?
02:20
play_arrow
Q:練習するのにお勧めのWEBページはなんですか?
03:25
play_arrow
Q:今後はHTML5のみ覚えればいいんでしょうか?
01:20
play_arrow
Q:先生のお勧めのカラースキーマやプラグインはありますか?
06:47
play_arrow
課題発表