HTML/CSS Tips
- BOXモデル
- marginの相殺
- はみ出た領域の表示
- 文字の折り返し
- フォントサイズの単位
- 画像の配置
- 画像トリミング
- テキストの回り込み
- calc関数
- Crome DevTool（検証）
(1) BOXモデル
【サンプル】
width: 1000px;
height: 250px;
padding: 20px;
border: 20px #000 solid;
margin: 20px;
box-sizing: （指定なし）
width: 1000px;
height: 250px;
padding: 20px;
border: 20px #000 solid;
margin: 20px;
box-sizing: content-box;
width: 1000px;
height: 250px;
padding: 20px;
border: 20px #000 solid;
margin: 20px;
box-sizing: border-box;
BOXの中央揃え（box-sizingは「Reset CSS」に記述）
max-width: 1000px;
width: 100%;
margin: 0 auto;
height: 300px;
padding: 20px;
border: 20px #000 solid;
box-sizing: border-box;
(2) marginの相殺
【サンプル】
box1
margin-bottom: 15px;
box2
margin-top: 30px;
【サンプル】
.box1
margin-bottom: 15px;
子要素 .box2-1
margin-top: 60px;
親要素 .box2
margin-top: 30px;
【サンプル】
.box1
margin-bottom: 15px;
テキスト
子要素 .box2-1
margin-top: 60px;
親要素 .box2
margin-top: 30px;
(3) はみ出た領域の表示
【サンプル】
overflow: visible;（指定なし）
123456789012345678901234567890123456789012345678901234567890
01 テキスト
02 テキスト
03 テキスト
04 テキスト
05 テキスト
06 テキスト
overflow: visible;（指定なし）
12345678901234567890
01 テキスト
overflow: hidden;
123456789012345678901234567890123456789012345678901234567890
01 テキスト
02 テキスト
03 テキスト
04 テキスト
05 テキスト
06 テキスト
overflow: hidden;
12345678901234567890
01 テキスト
overflow: scroll;
123456789012345678901234567890123456789012345678901234567890
01 テキスト
02 テキスト
03 テキスト
04 テキスト
05 テキスト
06 テキスト
overflow: scroll;
12345678901234567890
01 テキスト
overflow: auto;
123456789012345678901234567890123456789012345678901234567890
01 テキスト
02 テキスト
03 テキスト
04 テキスト
05 テキスト
06 テキスト
overflow: auto;
12345678901234567890
01 テキスト
(4) 文字の折り返し
【サンプル】
123456789012345678901234567890123456789012345678901234567890<br>
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
word-break: normal;（指定なし）
英語は単語の途中で改行しないで日本語は表示範囲に合わせて改行（初期値）
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
word-break: break-all;
表示範囲に合わせて改行
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
word-break: keep-all;
単語の切れ目で改行
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
word-wrap: normal;（指定なし）
単語の途中で改行しない（初期値）
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
word-wrap: break-word;
単語の途中でも改行
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
white-space: normal;（指定なし）
1つの半角スペースとして表示して表示範囲に合わせて改行（初期値）
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
white-space: pre;
そのまま表示
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
white-space: nowrap;
1つの半角スペースとして表示して表示範囲に合わせて改行しない
123456789012345678901234567890123456789012345678901234567890
1 22 333 4444 55555 666666 7777777 88888888 999999999 0000000000
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。
(5) フォントサイズの単位
【サンプル】
html {
font-size: 20px;
}
テキスト
親：テキスト１
font-size: 30px;
子：テキスト１－１
font-size: 40px;
親：テキスト２
font-size: 200%;(40px)
子：テキスト２－１
font-size: 200%;(80px)
親：テキスト３
font-size: 2.0em;(40px)
子：テキスト３－１
font-size: 2.0em;(80px)
親：テキスト４
font-size: 2.0rem;(40px)
子：テキスト４－１
font-size: 2.0rem;(40px)
親：テキスト５
font-size: 5vw;
子：テキスト５－１
font-size: 5vw;
親：テキスト６
font-size: 5vh;
子：テキスト６－１
font-size: 5vh;
(6) 画像の配置
【サンプル】
<img src="images/256x256-red.jpg" alt="カメ"><br>
<img src="images/256x256-blue.jpg" alt="レッサーパンダ">
Hy
background: #ccc; font-size: 200%;
Hy
上記に加えて line-height: 1.0;
Hy
img { vertical-align: top; }
Hy
img { vertical-align: middle; }
Hy
img { vertical-align: bottom; }
<img src="images/256x256-red.jpg" alt="カメ"><br>
<img src="images/256x256-blue.jpg" alt="レッサーパンダ">
img { vertical-align: top; }
【サンプル】
<img src="images/256x256-red.jpg" alt="カメ">
<img src="images/256x256-blue.jpg" alt="レッサーパンダ">
<img src="images/256x256-red.jpg" alt="カメ"><img src="images/256x256-blue.jpg" alt="レッサーパンダ">
<img src="images/256x256-red.jpg" alt="カメ">
<img src="images/256x256-blue.jpg" alt="レッサーパンダ">
img { display: block; float: left; }
(7) 画像トリミング
【サンプル】
256px×256px（元画像）
200px×200px（トリミング画像）
256px×128px（元画像）
200px×200px（トリミング画像）
128px×512px（元画像）
200px×200px（トリミング画像）
(8) テキストの回り込み
【サンプル】
img {
margin: 5px 10px 10px 5px;
}
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
img {
margin: 5px 10px 10px 5px;
float: left;
}
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
img {
margin: 5px 5px 10px 10px;
float: right;
}
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
img {
margin: 5px 10px 10px 5px;
float: left;
border-radius: 100%;
}
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
img {
margin: 5px 5px 10px 10px;
float: left;
border-radius: 100%;
shape-outside: circle();
}
現生の最大種はアルダブラゾウガメ（A. g. hololissaを亜種とした場合）で最大甲長138センチメートル。化石種も含めた最大種はColossochelys atlasで甲長約200センチメートル。最小種はシモフリヒラセリクガメで最大甲長9.6センチメートルとカメ目全種でも最小種。背甲はドーム状やアーチ状に盛り上がる傾向がある。 頭部は中型で、縦幅は短いが幅広い。咬合面や顎を覆う角質（嘴）は幅広い。種によっては嘴に鋸状の突起や畝があり、歯のように植物を切断したりすることができる。舌が発達するが、舌弓はあまり発達しない。頸部はやや短い。四肢は太くて短く、指趾は退化して短い（趾骨が2個以上ない）。頭部や四肢は大型鱗で覆われる。
(9) calc関数
【サンプル】
テキスト領域
両端に256pxのイメージ領域で残りがテキスト領域
【サンプル】
テキスト領域1
左端に256pxのイメージ領域で残りを1/3のテキスト領域
テキスト領域2
左端に256pxのイメージ領域で残りを1/3のテキスト領域
テキスト領域3
左端に256pxのイメージ領域で残りを1/3のテキスト領域
(10) Crome DevTool（検証）
