<head>~</head>ないに書くその他の事項

<head>~</head>内に書くその他の事項

  1. <title>ページのタイトルを記述</title>
  2. 外部CSSの読み込み
  3. 外部scriptの読み込み
  4. IEなどへのベンダーフィックスの記述

などがあるが、動作を早くしたければ、CSSは、内部CSSに、
記述した方が、より読み込みが早い。
ご存知の通り、CSSの優先度は、後出しジャンケンなので、
内部の直前CSSが、最優先される。
例:<span stile=”color:#ff0000;>ここ</span>
この場合:<head><style>~</style></head>に、記述する。

なお、<Script>は、
最終行の、</body>の前に記述した方が、レンダリングが速いので、
<script>~</script>内に、記述する

ここまでの、記述例
<!DOCTYPE html>
<html lang=”ja”>
<head>
<title>Top</title>
<meta charset=”UTF-8″>
<meta name=”description” content=””>
<meta name=”keywords” content=””>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”apple-mobile-web-app-title” content=”favicon.ico”>
<meta name=”application-name” content=”/favicon.ico”>
<meta name=”theme-color” content=”#ffffff”>
<!– CSS –>
<link href=”layout/styles/main.css” rel=”stylesheet” type=”text/css” media=”all”>
<link href=”layout/styles/mediaqueries.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– Slider –>
<link href=”layout/scripts/responsiveslides.js-v1.53/responsiveslides.css” rel=”stylesheet” type=”text/css” media=”all”>
<!– webfont fontawesome –>
<script src=”https://use.fontawesome.com/e7651820af.js”></script>
<!– favicon –>
<link rel=”shortcut icon” href=”favicons/favicon.ico” title=”favicon” type=”image/x-icon”>
<link rel=”apple-touch-icon” href=”favicons/apple-touch-icon.png” title=”favicon” />
<link rel=”apple-touch-icon” sizes=”57×57″ href=”favicons/apple-touch-icon-57×57.png” title=”favicon57x57″>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”favicons/apple-touch-icon-72×72.png” title=”favicon72x72″>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”favicons/apple-touch-icon-76×76.png” title=”favicon76x76″>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”favicons/apple-touch-icon-114×114.png” title=”favicon114x114″>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”favicons/apple-touch-icon-120×120.png” title=”favicon120x120″>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”favicons/apple-touch-icon-144×144.png” title=”favicon144x144″>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”favicons/apple-touch-icon-152×152.png” title=”favicon152x152″>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”favicons/apple-touch-icon-180×180.png” title=”favicon180x180″>
<!–[if lt IE 9]>
<link href=”layout/styles/ie/ie8.css” rel=”stylesheet” type=”text/css” media=”all”>
<script src=”layout/scripts/ie/css3-mediaqueries.min.js”></script>
<script src=”layout/scripts/ie/html5shiv.min.js”></script>
<![endif]–>
</head>