■HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charSet="utf-8"/>
<title>Title</title>
<meta name="description" content=""xxx/>
<link rel="stylesheet" href="xxx.css"/>
<script src="js.php"></script>
/// Resource Hintsによる表示高速化
https://blog.members.co.jp/article/33474
dns-prefetch、preconnect、prefetch、prerender縺?4つの鐔??素、やりす縺?よ縺?ないが
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//example.com">
<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">
<link rel="prerender" href="//example.com/next-page.html">
/// 他
大きめな画蜒?でもRetina端末で鐔??るとぼやけてしまうというの縺?SVG、大きい画蜒?だと容驥?も食う
IMGタグやCSSだ縺?SVG形藹??ファイルに対し縺?JavaScript等で臀??切操作ができない、objectならマウスオーバ等データにイベントを含めておける
<img src="logomark.svg" width="32" height="32">
<object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>
<svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
<polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
</svg>
■OGP
<head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
TOPページであれば臀??の「website」、TOP以藹??のページでは臀??の「article」を使う、fb縺?Facebook逕?
<meta property="og:url" content=" ページ縺? URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページ縺? タイト繝?" />
<meta property="og:description" content=" ページのディスクリプショ繝?" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画蜒?縺? URL" />
<meta property="fb:app_id" content="App-ID（15文字の半角数藹??）" />
<meta name="twitter:card" content="カード種饅??" />
<meta name="twitter:site" content="@ツイッターユーザー名" />
他にも細かい要素がある
https://ferret-plus.com/610
OGP画像確鐔??
http://ogimage.tsmallfield.com/
ツイッターカード確鐔??
https://cards-dev.twitter.com/validator
■CSS
CSSレイアウト（Grid、Float）
https://www.bangboo.com/cms/blog/page_327.html
https://www.bangboo.com/cms/blog/page_18.html
CSSセレクタ繝?
https://www.bangboo.com/cms/blog/page_152.html
ブラウザ間の問題
https://www.bangboo.com/cms/blog/page_184.html
https://www.bangboo.com/cms/blog/page_19.html
/// calc は鐔??算ができるのでレイアウトもできる
.foo {
width: calc(100% - 50px);
}
他にもいろんな鐔??算が、単位は鐔??調譟?
.foo {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate( calc(1turn + 28deg) );
background: hsl(100, calc(3 * 20%), 40%);
font-size: calc(50vw / 3);
}
/// @supports は觸??能クエリ、機能があるかないか縺?CSS適藹??を変えられる
https://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html
/// グラデーショ繝?
http://www.htmq.com/css3/linear-gradient.shtml
http://www.css-lecture.com/log/css3/css3-gradient.html
https://qiita.com/yasumodev/items/9ccac31860c31ce24a13
webkit邉?:Safari/Chrome, Moz邉?:Firefox
#gMenu .menu > li > a{
background-color:#006600;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#006600), to(#003300));
background: -moz-linear-gradient(#006600, #003300);
background: linear-gradient(#006600, #003300);
}
■RWD
ビューポート <meta name="viewport" content="width=device-width, initial-scale=1">
メディアクエ繝? CSS側縺?@media screen and (max-width:767px){
相対サイズ指定
max-width: 100%; ではみ出るのを押さえる
→ https://www.homepage-tukurikata.com/css/max-width.html
max縺?minの臀??般的な使い方→ https://saruwakakun.com/html-css/basic/max-min-width
liを使ってナビやパン縺?ずを表現し、サイズでスタイルを変える
Divを使ってパーツを表現し、サイズでスタイルを変える、レイアウトを変える（Floatの觸??れ、Grid等）
/// srcset 縺? sizes による画蜒?切り替え
https://www.tagindex.com/html5/embed/img_srcset_sizes.html
https://laboradian.com/img-srcset-sizes/
https://terkel.github.io/srcset-sizes/
https://qiita.com/taichi0514/items/7ffc93b8b4d0f349e9b6
<img src="image/small.jpg" srcset="image/small.jpg 320w,
image/medium.jpg 640w,
image/large.jpg 1280w"
sizes="(max-width: 1280px) 100vw, 1280px" alt="a">
ビューポートの藹??が1280pxまで縺?100%の藹??で、それ以臀??の場合縺?1280pxの藹??で画蜒?を表示します
<img src="image/small.jpg" srcset="image/small.jpg 320w,
image/medium.jpg 640w,
image/large.jpg 1280w"
sizes="(max-width: 420px) 100vw,
(max-width: 800px) 70vw, 50vw" alt="a">
2つのブレイクポイントを設藹??し、画蜒?の表示藹??が3段髫?で藹??化するようにしています
<img src="image/small.jpg" srcset="image/small.jpg 1x,
image/medium.jpg 2x" alt="a">
一般的なディスプレイで縺? small.jpg、高画軆??密度のディスプレイで縺? medium.jpg が使用されます
<img src="image/small.jpg" srcset="image/small.jpg 320w,
image/medium.jpg 640w,
image/large.jpg 1280w"
sizes="(min-width: 600px) calc(100vw - 300px),
100vw" alt="a">
表示領域の藹??が600px以臀??ある場合はサイドバー用の臀??白・??300px）が入り、それ以藹??の場合は藹??100%で画蜒?が表示されます
ブラウザは臀??から見ていって最初に合致したものを採逕?
メディアクエリーで場合分けする場合縺?width属性を指定しない事、指定すると場合分けされない
指定するサイズの単位は、px, em, vw など、但し% は使えない
em は親要素縺?font-sizeプロパティの値を1としたときの大きさ、rem はルート/htmlに対する
ピクセル藹??度鐔??述藹??縺? (1x や 2x な縺?)により指定
実際のピクセルでのサイズ単位縺? w で指定、スマホやRetinaは物理ピクセル数が違い3pxを1pxで扱う等縺?
vw ビューポートの藹??に対する割合
vh ビューポートの饅??さに対する割合
vmin ビューポートの藹??と饅??さのうち、値が蟆?さい方に対する割合
vmax ビューポートの藹??と饅??さのうち、値が大きい方に対する割合
相対単位「px」「ex」「em」「rem」
絶対単位「ch」「cm」「mm」「q」「in」「pt」「pc」「mozmm」「vw」「vh」「vmin」「vmax」
↓使うならこんな感じ？ブラウザサイズで読み直しがなかったり、preloadが必要だったり、%でいいんじゃ？
<img src="small.jpg"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="100vw"
alt="A rad wolf" />
<img srcset="img-320w.jpg 320w,
img-480w.jpg 480w,
img-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="img-800w.jpg" alt="a">
POLY シンプ繝?
http://treehouse-code-samples.s3.amazonaws.com/poly/index.html
normalize.css
ブラウザごとの鐔??素の相違を吸藹??
レスポンシブウェブデザイン・??テンプレートを使えば・??(有料でも無料でも商用可でも）
https://ferret-plus.com/3312
http://photoshopvip.net/109116
https://www.site-convert.com/archives/1310
https://free-hp.net/
https://liskul.com/homepage-template-27631
https://popo-design.net/template/ シンプ繝?