HTMLをさわってみよう

をさわってみようCode for KOSEN 勉強会 #4

HTML

2015.11.08 @yamasy1549

HTMLってどんなもの

何をするもの？

HTMLってどうやって書くの

どんな構成になってるの？

厳密な話

厳密には少し間違ってるようなことも言います

なんか小難しいことはしゃべらない。最初の理解はざっくりがいいかなぁ

宗教の話

思い入れが強いと、自分と違う考えを攻撃したくなる人もいるので

考えかたが違っても「そんなものか」と思ってね

HyperText Markup Languageテキストがリンクしたマークアップ言語

Web 上の文書を記述するための、文書の構造を表わす言語

Cascading Style Sheets連続する滝のようなスタイルシート

Web ページの見た目を指定する言語

・この部分は見出しにしたい

・見出しの色は茶色にしたい

・文の区切りだから改行したい

・スペース・余白をつくりたい

・説明のために画像を挿入したい

・かわいい背景画像を設定したい

文書の構造

見た目・効果

意味的なこと

見やすさ的なこと

本文に関すること

デザインに関すること

HTML

CSS

HTML

CSS

HTML

CSS

HTMLのバージョン

最新のバージョンは「HTML5」

以前のバージョンでは <font> タグなど

デザインに関するものもHTMLで書けるようになっていた

意味を持たないデザインのためのタグは

HTML5では別途意味が与えられているか、削除されている

ググって出てきたものがHTML5で廃止されていないか要チェック！

<html><head><body> の三部構成

<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8"> <title>C4K勉強会 </title> </head> <body> <p>ごちうさは癒やし。シャロちゃんかわいい </p> </body></html>

<html> で HTML 文書であることを宣言


バージョンは HTML5 やで

日本語で書くで

<head> で文書の情報を記述


文字コードを指定

タイトル

<body> 内が実際ブラウザに表示される


Tagタグ

文書を構成する 1 つの要素

Tagタグ

文書を構成する 1 つの要素

<style>

<br>

<a>

<span>

<address>

<td>

<title>

<p>

<nav>

<dd>

<meta>

<head>

<img>

<body><ol>

<footer>

<table>

<script>

<aside>

<li>

<div>

<ul>

<article>

<html>

段落など、ひとまとまりの文章

見出しと内容をまとめるセクション

特定の意味を持たないブロック

項目に関する記述リスト

項目に関する記述リストの項目

項目に関する記述リストの記述

<dl>

<div>

<section>

<p>

<dt>

<dd>

<h1>～<h6> 見出し

タグの例（ほんの一部です）

使えるタグは全部でいくつ？

だいたい 108個ぐらいです。

仕様が変わったりして、増えたり減ったりすることもあります。

全部覚えなきゃダメ？ぶっ倒れちゃうよ？

ぶっ倒れるまでして覚える必要はありません。

主要な・よく使うタグはもちろん覚えていますが、なじみの薄いタグは

都度調べて使っています。http://www.htmq.com/html5 がおすすめ。

もちろん、除夜の鐘に合わせて 1つずつ暗唱できたら楽しいと思います。

ブロック要素・インライン要素

今は無くなりましたが、HTML4では次のような分類がありました。

　・幅いっぱいに広がろうとする「ブロック要素」（<div><h1> など）

　・中身に幅を合わせる「インライン要素」（<strong><img>）

コンテンツモデル

その代わりに「どんな使われ方をするか」の目線で分類した

「コンテンツモデル」という考えかたが出てきました。

参考 : http://www.htmq.com/html5/007.shtml

属性

タグの役割や性質を指定したもので、開始タグにつける。

要素によって必須の属性もあるが、必ずつけるとも限らない。

e.g.　<a href="http://yamasy.info"> やましーのページ </a>

id / class 属性

「id」は要素にそれ固有の名前をつけるために使います。重複はNG

「class」では要素を分類したときの名前を指定します。重複はOK

class は主に CSS でスタイルを当てるときに役立ちます。

ご注文はうさぎですか？

あらすじ

高校入学を機に木組みの家と石畳の街に引っ越してきたココアは、下宿先

を探して道に迷う途中、ラビットハウスという名の喫茶店を発見する。そ

の名前からうさぎだらけの喫茶店に違いないと思ったココアであったが、

そこにいたのはチノという小さな少女と、ティッピーというモフモフとし

たうさぎだった。

登場人物

ココア / 保登心愛（ほとここあ）

本作の主人公。15歳の高校 1年生。

チノ / 香風智乃（かふうちの）

ラビットハウスオーナーの孫娘。13歳の中学 2年生。


あらすじ






登場人物






あらすじ






登場人物






あらすじ






登場人物





大見出し小見出し

段落

小見出し

記述項目名記述

項目名

<h1>ご注文はうさぎですか？ </h1> <section> <h2>あらすじ </h2> <p>高校入学を機に木組みの家と石畳の街に引っ越してきたココアは〜</p> </section> <section> <h2>登場人物 </h2> <dl> <dt>ココア / 保登心愛（ほとここあ）</dt> <dd>本作の主人公。15歳の高校 1年生。</dd> <dt>チノ / 香風智乃（かふうちの）</dt> <dd>ラビットハウスオーナーの孫娘。13歳の中学 2年生。</dd> </dl> </section>

「よっしゃブラウザで見てみるか～」

とりあえず書きたいことは書いたけど…

スタイルがないので味気ない…

私の知ってるWebサイトと違う…

CSS 編に続く

をさわってみようCode for KOSEN 勉強会 #4

CSS

2015.11.08 @yamasy1549

厳密にはスタイルが全く当たっていないわけじゃなくて

ブラウザがデフォルトで用意している、

ごくごく最低限のCSS が働いています。

その証拠に <h1> は <h2> よりも目立つようなサイズになっているし

<dt> に対して <dd> は少し右に下がっていますね。

Engineering

HTMLをさわってみよう