読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

HTMLの雛形

基本的な雛形と役割

  • 「bootstrap.min.css」「bootstrap.min.js」の2つのファイルをHTMLから読み込みます


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
  • 言語設定を「日本語」
  • meta要素で、IEの互換モードを無効にし、最新のレンダリングモードで描画する指定
  • meta要素で、viewportは「initial-scale=1」を指定
  • 「bootstrap.min.css」を読み込む
  • IE9未満の場合に実行される、条件コメントを記述
  • jQueryは、CDNで読み込む
  • 「bootstrap.min.js」は、ダウンロードしたデータを読み込む(CDNも可能)


http://www.bootstrapcdn.com/