HTML/CSS/JSザザッと復習
Kumamoto-HamachiHTML用語整理
タグ(tag)とエレメント(element)
エンプティーエレメント(empty element)
ケースセンシティブ(case sensitive)
大文字小文字どちらでも良いが小文字推奨
アトリビュート(attribute)
クオート("")なくてもいいけど推奨
style attribute
<h1 style="font-size:60px;">Heading 1</h1>
title attribute
The value of the title attribute will be displayed as a tooltip when you mouse over the element.
ヘディング(heading)
Users often skim a page by its headings. It is important to use headings to show the document structure.
パラグラフ(paragraph)
ホリゾンタルルール(horizontal)
スタイル(style)
アトリビュートの一種
<tagname style="property:value;">
テーブル
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
リスト ulとol、dl
dlはdescription list
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dt>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Block elementとInline Element
2つのdisplayの値。
「block」の特徴
- 常に新しい行から
- 常に利用可能な幅いっぱいに配置されます(ただし幅を指定出来る)
- トップとボトムのmarginを持つ。(インラインにはない)
「inline」の特徴
- 新しい行から始まらない
- エレメントは必要分しか幅を取らない(内容に合わせる。幅指定は出来ない)
Classとid
classは.
idは#
Iframes
webページの中にwebページを表示する。
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
Headエレメントの中のエレメント
<title><style><link><script><base><meta>
=><base>と<meta>について補足
<base>
The <base> element specifies the base URL and/or target for all relative URLs in a page.
The <base> tag must have either an href or a target attribute present , or both.
<meta>
下記が主なmetaタグ
<meta charset="UTF-8">
# Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, JavaScript">
# Define a description of your web page
<meta name="description" content="Free Web tutorials">
# Define the author of a page
<meta name="author" content="Kumamoto">
# Refresh document every 30 seconds
<meta http-equiv="refresh" content="30">
# Setting the viewport to make your website look good on all devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
※補足：viewport
viewport = 仮想的なウインドウと考えよう
content="width=device-width"は仮想ウィンドウの大きさを実際のウィンドウ幅と同じにしている。
例えばcontent="width=360,initial-scale=1"とするとどんな端末でも同じ幅(360px)となる。
そこまで重要じゃないけど一応
ピクチャ(picture)
複数の画像を保有。サイズによって別の画像を表示。
Emojis in HTML
metaはUTF-8指定。
😄 is 😄
😍 is 😍
💗 is 💗
Kumamoto-HamachiHTML重要事項整理
HTML Layout Elements and Techniques
レイアウトの主なテクニックは下記4つ
(1)CSSフレームワーク(Bootstrapなど) 今回はパス
(2)Float floatとclearプロパティを使用するだけ。
nav{
float:left;
width: 30%;
height: 300px;
background: #ccc;
padding: 20px;
}
article{
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section::after{
content: "";
display:table;
clear:both;
}
(3)Flexboxによるレイアウト
nav{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
article{
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
(4)Grid
Kumamoto-HamachiCSS用語整理
セレクター(selector)とプロパティ(property)、ディクレアレーション(declaration/宣言)
背景画像
背景画像はリビートする
<style>
div {
background-image: url('img_girl.jpg');
background-repeat:no-repeat;
}
</style>
背景画像をリピートしない、エレメント全体に指定する。
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* 100% 100% でもおｋ; */
}
</style>
CSS重要事項
CSSボックスモデル
- Content-box
内容 - Padding box
コンテントと枠の余白 - Margin box
親の要素との間 - マージンの相殺
(A、Bが並んでいて、Aがmargin-bottom20px、Bがmargin-bottom30pxなら50pxにならず大きい方の30pxが採用される。) - Border box
枠線、border-topとかにすると枠線上だけにつけたり出来る。 - box-sizingプロパティ
box-sizingプロパティは「要素の幅（width）と高さ（height）の中にpaddingとborderを含めるかどうか」の設定に用いられる。直感的に扱うにはborder-boxとする。(paddingとborderを含めてくれる。)
※参考：ボックスモデル/MDN
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
ブロックボックスとインラインボックス
※参考：ブロック要素とインライン要素
※参考：【基礎知識】ブロックレベル要素・インライン要素の性質と違い
簡単にまとめると、、、
- インライン 例：<span>タグ
横並びにしたいとき、横幅/縦幅の指定が出来ない！
→display: block;としてやればインライン要素であってもブロック要素のように振る舞ってくれる！(inlineでインラインのように振舞う)
インラインはmargin,padding,borderが来た時に他の要素を無視してかかるので基本はかけない。 - ブロック 例：<div>タグ
縦に配置したい時、横幅/縦幅の指定が出来る - diplay
inline どんな時でも横並び、縦横の幅指定は無視
block どんな時でも縦並び、縦横の幅指定反映
inline-block：基本は横並び(正確には違うか？)だが縦横の幅反映
Flexbox
#hoge_class{
display: flex;
justify-content:center;
}
justify-content 横の並び方を調整(アイテムを水平方向に並べる)
flex-start: アイテムはコンテナーの左側に並びます。
flex-end: アイテムはコンテナーの右側に並びます。
center: アイテムはコンテナーの中央に並びます。
space-between: アイテムはその間に等しい間隔を空けて表示されます。
space-around: アイテムはその周囲に等しい間隔を空けて表示されます。
aligh-items 垂直に並べる
flex-start: アイテムはコンテナーの上部に並びます。
flex-end: アイテムはコンテナーの下部に並びます。
center: アイテムはコンテナーの垂直方向中央に並びます。
baseline: アイテムはコンテナーのベースラインに表示されます。
stretch: アイテムはコンテナーの大きさに合うよう広がります。
align-self 個別のアイテムへ設定
orderと組み合わせ重要
flex-direction コンテナー内でアイテムが配置される方向を決定(グルグルまわす〜)
row: アイテムは文章と同じ方向に配置されます。
row-reverse: アイテムは文章と逆の方向に配置されます。
column: アイテムは上から下に向かって配置されます。
column-reverse: アイテムは下から上に向かって配置されます。
order 順番の指定(0がdefault？)
flex-wrap アイテムを強制的に一行に並べるか複数行にするか
flex-wrapとflex-directionをショートハンドにしたflex-flowもよく使われる。
nowrap: 全てのアイテムは、ひとつの行にフィットします。
wrap: アイテムは他の行へ折り返します。
wrap-reverse: アイテムは逆順になって他の行へ折り返します。
align-content 複数の行が他の行とどう距離を取り広がるのかを指定
flex-start: 行はコンテナーの上側に詰められます。
flex-end: 行はコンテナーの下側に詰められます。
center: 行はコンテナーの中央に詰められます。
space-between: 行はその間に等しい間隔を空けて表示されます。
space-around: 行はその周囲に等しい間隔を空けて表示されます。
stretch: 行はコンテナーに合うよう引き延ばされます。
nowrap: 全てのアイテムは、ひとつの行にフィットします。
wrap: アイテムは他の行へ折り返します。
wrap-reverse: アイテムは逆順になって他の行へ折り返します。
レスポンシブデザイン
基本
<meta name="viewport" content="width=device-width, initial-scale=1.0">
画面いっぱい
<img src="img_girl.jpg" style="width:100%;">
元の画像の大きさいっぱい
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
※メディアの大きさによって画像を変えるmediaアトリビュートはパス
レスポンシブなテキストサイズ
-
vw
viewport widthの略。1vw = 1% of viewport width
※ % の場合は対象となる要素のプロパティが親要素のそれと紐付けられるため、必ずしもビューポートの幅が基準になるとは限りません。 -
メディアクエリ
画像やテキストのサイズを動的に変える。例は上記リンクを参考に
Kumamoto-HamachiJS 特にDOM周り
innerHTML
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
attribute関連
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
document.getElementById("image").src = "picture.gif";
HTML Responsive Web Design
vw、calc、tarsnformあたりが使えるようになってくると、基本的にはどんなレイアウト・デバイス（限度はありますが、、）でも崩さずに表示できるようになってくる