LoginSignup
0
0

More than 3 years have passed since last update.

学習 メモ

Posted at

Bootstrap読み込み

・CDNを使う場合(headとbodyの記述)

html
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

・CDNを使わない場合、Bootstrapをダウンロードして解凍したらhtmlファイルと同じ階層へ(headとbodyの記述)

html
<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

jQueryの読み込み

html
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</body>

viewportの設定

スマホに対応させるための設定

html
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

htmlのフォーマット例

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTMLフォーマット</title>
<!--以下三行記述-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="例.css">
  </head>
  <body>
    <div>コンテンツなど記入</div>
<!--以下三行記述-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="例.js"></script>
  </body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0