Download to read offline
Recommended
More Related Content
Viewers also liked
Similar to HTML初心者向け勉強会
HTML初心者向け勉強会
- 1.
- 2.勉強会の流れ1. 自己紹介2. HTML・CSSを学ぶメリット3.HTMLとはなにか4. 基本的なHTMLの構造について5. HTML・CSSの書き方について6. ファイルパスの指定方法7. 実際に手を動かして作ってみよう30~40分60分2
- 3.自己紹介• 氏名荒木 快斗•前職2010/4~2014/10まで開発エンジニアとして様々なWebサービスの開発に携わる例）通販サイト、ポータルサイト、グルーポンサイト、某サッカーチームのオフィシャルホームページ、iPhoneアプリなど• 現職株式会社ローカルイノベーションにてエンジニア・デザイナー向けの就職支援サイト「Career Select」の開発・運営開発言語:PHP, JavaScript, HTML, CSSなど3
- 4.
- 5.HTMLとはなにか• HTMLという名前は、”Hyper TextMarkup Language”の頭文字からきています。• Web上でなにかをつくるときに使う「マークアップ言語」といわれるものの一種です。• タグというマーク（命令）を使い、文章の構造を指定したり、文字の大きさや色を変えたり、画像を表示させたりすることができます。（※ タグというのは「<」と「>」で囲われた要素のこと）☆早速ブラウザよりHTMLを見てみましょう！！5
- 6.
- 7.
- 8.
- 9.基本的なHTMLの構造について• <head>タグ内で指定すること→ページのタイトルや説明文、キーワードを入力します<head><meta charset="UTF-8"><title>ページタイトルをここに入力します。</title><metaname=“description” content=“ここにページ概要を記述します。”><meta name=“keywords” content=“html,勉強会 のように「,」区切りでキーワードを入力します。"></head>9
- 10.
- 11.
- 12.HTML・CSSの書き方について• 最も基礎の知識ブロック要素・インライン要素の違いを知ろう・ブロック要素（div, form,h1~6, p, ul, li, table, hrなど）：コンテンツごとに分けるときに使用するタグのこと・インライン要素（span, a, label, br, img, inputなど）：文字の色や大きさを変えたり改行するなど細かい部分の変更を行う際に使用するタグ言葉だけではわかりづらいので実際に目で見て理解していきましょう！！12
- 13.
- 14.HTML・CSSの書き方について• インライン要素：文字の色や大きさを変えたり改行するなど細かい部分の変更を行う際に使用するタグ※ インライン要素を使うと、前後が改行されないようこそ<span>勉強会</span> へ<br /><br /><a href=“?”>インライン要素</a>を理解しようブラウザようこそ 勉強会 へ<span>インライン要素を理解しようHTML14
- 15.
- 16.
- 17.CSS(Cascading Style Sheets)とは•CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。• ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。• HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。その他のスタイルシート言語：DSSSL, XSLなど17
- 18.CSSの記述方法CSSでは、右のように次の3つの要素を用います。1. セレクタ –どのHTMLタグに対して見合えを調整するか2. プロパティ – どういった内容のデザインを施すか3. 値 – プロパティはどの程度か簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。例)<p>タグで挟まれた文字を赤くしたいp {color: red;}例)<p>タグで挟まれた文字を赤くして20pxの大きさにしたいp {color: red;font-size: 20px;}しかし、これだと同じ各タグで全て同じデザインの指定しかできない。そこで、同じタグでも名前をつけて個別にCSSの指定ができる！！18
- 19.CSSの記述方法個別に指定を分ける場合、タグにid名またはclass名をつけてあげます。例) <div>タグにid名/class名をつけてスタイルを指定する<div id=“title”></div>#title{color: red;}※ より厳密に指定する場合は、このようにブロック名から記述div#title {color: red;}例) <div>タグにclass名をつけてスタイルを指定する<div class=“title”></div>.title {color: red;}19
- 20.CSSの記述方法• CSSの記述の方法は、3パターンある1 <head>タグ内に直接デザインの指定を書く2<body>タグ内の指定するタグに直接記述する3 別ファイルに記述し、作成したHTMLファイルに読み込ませるHTMLファイルとCSSファイルを別で作り、HTMLファイルに読み込ませるのが一般的。 20
- 21.
- 22.
- 23.CSSファイルの読み込み方法とその理由• 基本的には、CSSファイルは下記のように<head>タグ内に指定します。<head><title>自己紹介ページを作ろう</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><link rel="stylesheet" href="css/index.css"></head> ここに指定のCSSファイルの場所を記述する。この部分をファイルパスといい、ファイルの場所を示す。<img>タグで画像を指定する際も、同様に「href=“画像のファイルパス”」と記述する。 23
- 24.ファイルパスの指定方法• どんな時に、パスを指定する必要があるの？→<head>タグ内でのCSSのファイル読み込みを行う場合例）<link rel="stylesheet"href="css/index.css">→<body>タグ内で画像を表示したい場合例）<img src=“img/icon.png”>• パスの指定方法指定方法は、2種類ある。24
- 25.ファイルパスの指定方法• パスの指定方法- 絶対パスURLでページを指定して、目的地（情報）がどこにあるのかを確実に伝えます。-相対パス今いる場所（階層）を基準にして、目的地（情報）がどこにあるのかを伝えます。こちらの記述がおすすめ25
- 26.
- 27.
- 28.
- 29.実際に手を動かして作ってみよう• まず初めに、ダウンロードしたファイルを解凍してください。index.html imgcsshead_menu_logo.pngcover.pngpic01.jpgpic02.jpgpic03.jpgpic04.jpgindex.cssreset.css20160804_template29
- 30.実際に手を動かして作ってみよう• HTMLファイルの開き方1. まずはブラウザでファイルを表示する2.テキストエディタでソースを確認する【開発の手順】1. テキストエディタで編集後にファイルの上書きする2. ブラウザの更新ボタン(F5ボタンでも可能)で変更を確認する※ ここまでで何かご質問やわからないことはありますか？30
- 31.
- 32.実際に手を動かして作ってみよう• 早速index.htmlをブラウザで開いてみましょう。- 課題１：bodyタグの背景色をグレー（#e9ebee）に変更しましょう。-ヒント：プロパティは「background-color」を使用します。-回答：body {background-color: #e9ebee;}背景色：#e9ebee32
- 33.実際に手を動かして作ってみよう- 課題２：ヘッダーのブロックを作ってみましょう。ヘッダーと呼ばれる上部の部分は「<header>」タグが用意されているので使用します。■HTMLファイル(index.html)※ 画像は、同階層のimgフォルダ内「head_menu_logo.png」を使用してください<body><header><imgsrc=“画像パス”></header></body>ブロック①※しかし、これだけでは色や太さの指定をしていないため、、33
- 34.
- 35.
- 36.
- 37.実際に手を動かして作ってみよう- 課題３：ヘッダー下に画像のブロック②を作ってみましょう。課題２で作った<header>ブロックの下に下記を追加する■HTMLファイル(index.html)※ 画像は、同階層のimgフォルダ内「cover.png」を使用してください<body><header><imgsrc=“画像パス”></header><div class="cover"><img src=“画像パス" class="cover_img"></div></body>ブロック②37
- 38.実際に手を動かして作ってみよう- 課題３：ヘッダー下に画像のブロック②を作ってみましょう。課題２で作った<header>ブロックの下に下記を追加する■HTMLファイル(index.html)※ 画像は、同階層のimgフォルダ内「cover.png」を使用してください</header><divclass="cover"><img src=“画像パス" class="cover_img"></div>■CSSファイル（index.css）・ <div class="cover">タブで囲ったブロックの横幅を981pxに指定してくださいヒント：widthを使用して背景画像を指定する・ <div class=“cover”>タブで囲ったブロックを左右中心に表示するように指定してくださいヒント：marginを使用して「0 auto」を指定する・<img src=“画像パス” class=“cover_img”>で表示する画像を横幅100%で指定してくださいヒント：widthを使用して背景画像を指定するブロック②38
- 39.実際に手を動かして作ってみよう- 課題３：ヘッダー下に画像のブロック②を作ってみましょう。課題２で作った<header>ブロックの下に下記を追加する■HTMLファイル(index.html)</header><div class="cover"><imgsrc=“画像パス" class="cover_img"></div>■CSSファイル（index.css）・ <div class="cover">タブで囲ったブロックの横幅を981pxに指定してください・ <div class=“cover”>タブで囲ったブロックを左右中心に表示するように指定してください.cover {width: 981px;margin: 0 auto;}・<img src=“画像パス” class=“cover_img”>で表示する画像を横幅100%で指定してください.cover_img {width: 100%;}ブロック②指定したブロックの外側に余白を空けるmargin:0; (上下左右)margin:0 0; (上下) (左右)margin:0 0 0; (上) (左右) (下)margin:0 0 0 0; (上) (右) (下) (左)margin-top: 0;margin-left: 0;※ 左右にautoを指定すると中心に指定することができる→ブラウザを横いっぱいに開いたとしてもブロックが常に中心に表示させることが可能。39
- 40.実際に手を動かして作ってみよう- 課題４：ヘッダー下に画像のブロック③を作ってみましょう。課題３で作った<div>ブロックの下に下記を追加する■HTMLファイル(index.html)<div class="info_columnclearfix"><h3>基本情報</h3><ul class="left_menu"><li>ローカル 太郎</li><li>株式会社ローカルイノベーション</li><li>技術開発事業部</li></ul><ul class="right_menu"><li>080-1234-5678</li><li>東京都神田神保町</li><li>1987年12月8日</li></ul></div>ブロック③40
- 41.実際に手を動かして作ってみよう- 課題４：ヘッダー下に画像のブロック③を作ってみましょう。・ <divclass="info_column clearfix">タブで囲ったブロックのデザインを指定していきます■CSSファイル（index.css）- 背景色を#ffffffにしてください。ヒント：background-colorを使用して背景画像を指定する- 文字の色を#4b4f56にしてくださいヒント：colorを使用して文字の色を指定する- ブロックの囲い線（ボーダー）を「1px solid #d3d6db」と指定してくださいヒント：borderを使用して囲い線を指定する- ブロックの左右を中心にし、上は60px余白を作ってください。ヒント：marginを使用して余白を指定する※ clearfixのクラスの指定はここでは行いません。この次の課題５も終わって時間が余ったら、調べてみてください！ブロック③41
- 42.実際に手を動かして作ってみよう- 課題４：ヘッダー下に画像のブロック③を作ってみましょう。・ <h3>タブで囲ったブロックのデザインを指定していきます■CSSファイル（index.css）-背景色を#f6f7f9にしてください。ヒント：background-colorを使用して背景画像を指定する- 文字の大きさを20pxにしてくださいヒント：font-sizeを使用して文字の大きさを指定する- 文字の太さをboldにしてくださいヒント：font-weightを使用して文字の太さを指定する- 文章の行間を40pxにしてくださいヒント：line-heightを使用して行間を指定する- 下線を「1px solid #d3d6db」と指定してくださいヒント：border-bottomを使用して下線を指定する- 左に20pxの余白を作ってくださいヒント：padding-leftを使用して余白を指定する 42
- 43.実際に手を動かして作ってみよう- 課題４：ヘッダー下に画像のブロック③を作ってみましょう。・ <ulclass="left_menu">タブで囲ったブロックのデザインを指定していきます・ <ul class="right_menu">タブで囲ったブロックのデザインを指定していきます■CSSファイル（index.css）- ブロック内の上下の余白を20pxにしてください。ヒント：paddingを使用してブロック内部の余白を指定する- ブロックの横の長さを50%にしてくださいヒント：font-sizeを使用して文字の大きさを指定する- このブロックを左に寄せて配置してくださいヒント：floatを使用してブロックの配置位置を指定します。このようにどちらのタグにも同じスタイルの指定をしたい場合は、下記のようにコロンでつないでセレクタを指定するとどちらにも適用される。.left_menu,.right_menu {・・・}43
- 44.実際に手を動かして作ってみよう- 課題４：ヘッダー下に画像のブロック③を作ってみましょう。・ <ulclass=“left_menu”>と <ul class=“right_menu”>タブ内の<li>タグで囲ったブロックのデザインを指定していきます指定のタグの中の指定のタグにスタイルを指定する場合は、.left_menu li{・・・}のようにセレクタを「指定のタグまたはid/class名＋半角スペース＋指定のタグまたはid/class名」を指定する■CSSファイル（index.css）- 文字サイズを14pxにしてください。ヒント：font-sizeを使用してブロック内部の余白を指定する- 文章の行間を16pxにしてくださいヒント：font-sizeを使用して文字の大きさを指定する- このブロック外の下の余白を10pxにしてくださいヒント： margin-bottomを使用してブロック外の下の余白を指定します。- ブロック内の左の余白を25pxにしてくださいヒント：padding-leftを使用してブロック内の左の余白を指定します。 44
- 45.実際に手を動かして作ってみよう- 課題５：ヘッダー下に画像のブロック④を作ってみましょう。課題４で作った<div>ブロックの下に下記を追加する■HTMLファイル(index.html)<div class="info_columnclearfix"><h3>写真</h3><ul class="image"><li><img src=“画像パス"></li><li><img src=“画像パス"></li><li><img src=“画像パス"></li><li><img src=“画像パス"></li></ul></div> ブロック④45
- 46.実際に手を動かして作ってみよう- 課題５：ヘッダー下に画像のブロック④を作ってみましょう。- ■CSSファイル（index.css）・<ul class=“image”>内の<li>タブで囲ったブロックのデザインを指定していきます- ブロック内部に余白を上下に10pxを指定してください。ヒント：paddingを使用してブロック内部の余白を指定する- このブロックを左に寄せて配置してくださいヒント：floatを使用してブロックの配置位置を指定します。- このブロックを左に寄せて配置してくださいヒント：floatを使用してブロックの配置位置を指定します。- ブロック内のコンテンツを中心寄り(center)で表示させるヒント：text-alignを使用してブロック内部のコンテンツを指定の方向寄りで表示させます。- ブロックの横幅を25%に指定します。ヒント：widthを使用して横幅を指定します。・ <ul class=“image”>内の<li>内のimgタブで囲ったブロックのデザインを指定していきます- ブロックの横幅を95%に指定します。ヒント：widthを使用して横幅を指定します。ブロック④46
- 47.