chevron_left

HTML/CSS実践 シングルページの作成
PREMIUM
第4回

HTML/CSS実践 シングルページの作成 〜パーツの作り込み〜

2015年4月19日 30min
HTML/CSS実践 シングルページの作成 〜パーツの作り込み〜 play_arrow おためし受講

スライド資料

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

1 / 9

授業の概要

この授業ではHTML/CSSを用いたWEBページの作り方が学べます。実際に1つのWEBページを作成することで、基本的なレイアウトとコーディング方法を身につけましょう。

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
・https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
・http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はHTML/CSSの知識を前提としています。
自信の無い方は、下記コースを受けてみてください。
・HTML入門（全3回）
・CSS入門（全3回）

こんな人にオススメ

HTML/CSSの基本的なコーディングを知りたい方

担当の先生／パーソナリティ

授業で使用する教材

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

チャプター

play_arrow
自己紹介＆アジェンダ
00:43
play_arrow
仕上げ
05:00
play_arrow
オススメサイトの紹介：文法チェック
05:02
play_arrow
オススメサイトの紹介：画像素材
02:35
play_arrow
オススメサイトの紹介：リファレンス
03:10
play_arrow
Q：時によってどんどん代わって行くと思いますが、モダンブラウザの中で、Firefoxが標準対応が進んでいると聴きます。実際開発をされている方が作業時のメインブラウザとしては、実際どうなのでしょうか？
02:48
play_arrow
Q：サンプルはimgタグをpタグに入れた構成でしたが、人によってdivやpに入れないでそのままのコードがあります。本来どちらが良いのでしょう。いつも迷います。
00:56
play_arrow
Q：今回のシングルページのサイトを作る時に、デザインカンプ的な物は作成しましたか？
00:04
play_arrow
Q：navなどのulで、私はliの中に直接aタグを入れているのですが、先生はpタグで囲われているのは何か理由がございますか？
01:21
play_arrow
Q：今回シングルページでしたが、複数ページを作る場合の共通項目(meta要素、タイトル、メニューやタイトルなど)はどういった書き方をされていますか？ コードをページそれぞれにコピペすると修正があったときに大変なので、phpであればincludeで読み込んだりしているのですが、htmlで良いやり方があれば教えてください。
01:43
play_arrow
Q：後方互換はどの程度まで意識していますか？
02:06
play_arrow
Q：サンプルファイルのcssで、 ul.photo_image li の word-wrap:break-word; って説明ありましたでしょうか？