Bootstrapの基本をおさえよう(4/5):初心者のためのBootstrap入門

Bootstrapの基本をおさえよう (4/5)

作成:2017-02-04 10:25
更新:2017-02-04 10:25

■CDN利用の場合は？

これで基本的なコードはわかりましたが、「ローカル環境にファイルを置かず、CDNを利用する場合はどうするか」も説明しておきましょう。

下のリスト欄に、CDN利用の場合の基本コードを掲載しておきます。なお、ここではBootstrap 3.3.7ベースで利用する場合を前提に記述してあります。

CDNは、ここでは２つのサービスを利用しています。以下に整理しておきましょう。

・bootstrapcdn.com
これは、Bootstrapが提供するCDNです。２つのスタイルシートとBootstrap本体は、ここからロードするようにしてあります。

・Google Ajax API
jQueryだけは、ajax.googleapis.comというサーバーを使っていますが、これはGoogleが提供するCDNサービスを利用しているためです。jQueryの本掲載とのCDNでもいいのですが、Google Ajax APIライブラリは非常に安定して利用できるので便利です。Bootstrap本家のサンプルでもこれを使っているので、そちらに合わせてあります。

基本的には、<link>と<script>のファイルのサクセス先が変わっているだけで、それ以外はまったく同じです。CDN利用は、万が一、CDNサーバーにトラブルがあったりするとページアクセスが猛烈に遅くなったりしますが、ファイルの管理やメンテナンスが楽になります。バージョンアップも、リンク先のバージョン番号を書き換えるだけで済みますからね。

どちらも一長一短ありますから、まぁ「好きな方」を使えばいいでしょう。「こちらにしないと問題が起こる」なんてことはないので。

(by. SYODA-Tuyano.)

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!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>Bootstrap</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 
    crossorigin="anonymous">

</head>
<body >
    
<div class="container">
    
    <h1>Hello, world!</h1>
    <p>This is Bootstrap sample page!</p>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    crossorigin="anonymous"></script-->
    
</body>
</html>

※関連コンテンツ

<< prev next >>

「初心者のためのBootstrap入門」に戻る