HTML+CSS 2019-05-24
前回
HTMLについて
セレクター
アップデート
やったこと
分かったこと
やってみる
分からなかったこと
全体の目標
エンジニアがマークアップしているというのはどういうことか雰囲気を知る
HTMLメールやWordPressでちょっとした見た目を調整できる
EPUBの調整ができる?
一からHTMLとCSSを書けるようになる
簡単なJavaScriptまで行けたら素晴らしい
今回の目標
HTMLについて
HTML
HTMLとは(復習)
ドキュメントの意味をコンピューターに教えるためのマークアップ(印付)の言語
形式
タグを使う
親子関係がある
先祖 - 親 - 子 - 子孫
種類が決まっている
<p>、<a>、・・・
例
code:title.html
<div class="title">
<h1>
<span class="aloha-shirts">
<span class="limited"><span>限定各色<br>70着</span></span>
<span class="lede">SPACE<br>BROTHERS</span>
<span class="product-name">アロハ</span>
</span>
<span class="ampersand">
&
</span>
<span class="slippers">
<span class="limited"><span>期間<br>限定</span></span>
<span class="lede">月面足跡スタンプ</span>
<span class="product-name">ビーチ<br>サンダル</span>
</span>
</h1>
</div>
HTMLを覚える
本
記事
ソース
人に聞く
HTMLのバージョン
HTML5
バズワード
HTML 4.01
XHTML 1.1
HTMLの構造(タグ)
https://www.ne.jp/asahi/infinity/x-madia/html/img/youso.gif
属性や中に入れられる物は、要素ごとに国がある感じ
全要素共通のルールがある
要素ごとにルールがある
その要素の目的から「こういう属性があるんじゃないか」と推測できるので、細かいルールより要素の目的を覚えると良い
それ以上のことは調べればいい
HTMLの構造(木構造)
名前だけなんとなく覚えれば充分
木?
https://upload.wikimedia.org/wikipedia/ja/8/8a/Tree-sample1.png
DOMツリー
https://piyo-js.com/05/images/img_dom.gif
インスペクター
書くときに考えること
意味
構造(何と何をまとめるか)
CSSの書きやすさ
JavaScriptでの操作しやすさ
<head>と<body>
<header>は別
<head>はめにみえないけど、そのページについての色々を書く
タイトルとか
og:imageとか
ファビコンとか
ビューポート設定とか
<body>ユーザーが読む本体
セクショニングコンテント
意味を伝える一つの手段として構造がある
セクショニングコンテントは構造をマークアップする
<header>、<footer>
<section> ... セクション
<article> ... ブログ「記事」とか
<nav> ... ナビゲーション(サイト内リンク集)
<aside> ... そのページのコンテンツを直接構成するものではないが、それなりに関係あるもの
ヘディングコンテント
<h1> ... <h6>
6までしかないです
フローコンテント、フレージングコンテント
それ以外のよく見るやつ。内容を構成する
フローかフレージングかその他か、というのは厳密に覚えなくてもいい(今は)
デフォルトでdisplay: block;
<div> ... コンテンツの区切りを定義。というかまとめるのに使う(division)
<p> ... 段落(paragraph)
<ol>、<ul> ... 順序なしリスト、順序つきリスト(ordered list、unordered list)
<li> ... リスト項目(list item)
<dl> ... ラベルと内容、というリスト
昔は単語とその定義だった(definition list)
<dt> ... ラベル(definition title)
<dd> ... 内容(definition description)
<blockquote> ... 引用
<hr> ... 水平線(区切り線)(horizontal rule)
デフォルトでdisplay: inline;
<span> ... 意味を持たない
<em> ... 強調(emphasis)
<strong> ... もっと強調
<a> ... リンク
<img> ... 画像
<br> ... 改行
テーブル
<table> ... テーブル全体のコンテナー
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
フォーム
最初はあんまり覚えなくていい
サーバー側との連携用の要素なので
<form> ... フォーム
<button> ... フォーム以外でもボタンとして使う
<input>
<input type="text"> ... 文字入力欄
<input type="file"> ... 端末内のファイルを選択する
<input type="radio"> ... ラジオボタン
<textarea> ... 改行ありテキスト入力
<select> ... セレクトボックス(プルダウン)
etc
メタデータ
<title> ... タイトル。ブラウザーのタブに表示されたりする
<link> ... リンク
CSSファイルへのリンク
ファビコンへのリンク
<script> ... JavaScript
中に直接書いたり
リンクにしたり
<meta> ... メタデータ汎用
<meta charset="UTF-8"> ... 文字化けさせないために入れておきたい
<meta property="og:image" content="...">とかもこれを利用
その他
<main>
<figure>
<audio>
<video>
属性
全要素共通属性
id ...
class ...
title ...
要素に特化した属性
<a href="...">
<img src="..." alt="...">
ある程度の要素に共通した属性
<img src="...">
<audio src="...">
HTMLとCSS
HTMLとJavaScript
HTMLとPHP(WordPress)
一から書く
html, head, body
charset
viewport
次回
HTMLの省略とか
CSSおさらいとよく使うプロパティと
一から書いてみる
参考リンク