CSS初心者向け。僕がbootstrapを使うまで

2021年4月14日 15:13

bootstrapを使ってみよう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="ブログ説明文">
<meta name="keywords" content="HTML,HTML5,HTML解説,HTML5テンプレート,HTML5解説">
<meta name="author" content="高橋政重">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{blog_name}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<style type="text/css">

body {
background: #eeeeee;
font-family: Meiryo;
width: 980px;
margin: 0px;
font-size: 24px;
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;


}

*{
margin:0;
padding:0;
margin-left: auto;
}

.img{width: 100%;
 height: 400px;
 object-fit: cover;
}


a{
margin:0;
padding:0;
}


.navh {
color: #cc0099;
font-size: 24px;
float: left;
overflow: hidden;
margin:0;
padding:0;
width: 980px;
margin-left: auto;
}

.btn btn-primary{
margin:0;
padding:0;
margin-left: auto;
margin: 0px;


}

.navf{
color: #cc0099;
font-size: 24px;
overflow: hidden;
width: 980px;
margin-left: auto;
}

article{
text-align: left
margin-left: auto;
background: #bbbbbb;
width: 700px;
margin: 0px;
font-size: 24px;

}

header
{
font-size: 45px;
overflow: hidden;
max-width: 980px;
margin: 0 auto;
}

.col-3{
width: 280px;
margin: 0px;


}

.b{
width: 293px;
margin: 0px;
text-align:  center; 
}

header h1
{color: #cc0088;
font-size: 58px;
overflow: hidden;
}


header p
{color: #cccccc;
font-size: 23px;
overflow: hidden;
}

h2{
 overflow-wrap normal;
}

h2{
 overflow-wrap: break-word;
}

</style>

</head>
<body>

<header>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
 <a class="navbar-brand" href="#">
   
	
<i class="fa-award"></i>{blog_description}
 </a>
</nav>
<br>

<h1>{blog_name}</h1>
</header>
<br>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
 <div class="carousel-inner">
   <div class="carousel-item active">
     <img class="d-block w-100 img" src="http://img-cdn.jg.jugem.jp/60b/3926819/20210323_3004944.jpg" alt="First slide">
   </div>
   <div class="carousel-item">
     <img class="d-block w-100 img" src="http://img-cdn.jg.jugem.jp/60b/3926819/20210323_3004944.jpg" alt="Second slide">
   </div>
   <div class="carousel-item">
     <img class="d-block w-100 img" src="http://img-cdn.jg.jugem.jp/60b/3926819/20210323_3004944.jpg" alt="Third slide">
   </div>
 </div>
 <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>


<div class="row">
<div class="col-3">

<ul class="list-group">
   <li class="b list-group-item list-group-item-success">当サイトについて</li>
   <li class="b list-group-item list-group-item-info">お知らせ</li>
   <li class="b list-group-item list-group-item-warning">利用規約</li>
   <li class="b list-group-item list-group-item-danger">自己紹介</li>
   <li class="b list-group-item list-group-item-success">著作権について</li>
   <li class="b list-group-item list-group-item-info">画像集</li>
   <li class="b list-group-item list-group-item-warning">ガイドライン</li>
   <li class="b list-group-item list-group-item-danger">おすすめサービス</li>
<li class="b list-group-item list-group-item-info">画像集</li>
<li class="b list-group-item list-group-item-warning">ガイドライン</li>
<li class="b list-group-item list-group-item-danger">おすすめサービス</li>
<li class="b list-group-item list-group-item-danger">おすすめサービス</li>

<li class="b list-group-item list-group-item-danger">おすすめサービス</li>
</ul>

<div>


</div>
</div>


 <div class="col-xs-6">


<article>
<h1 class="h1">{entry_title}</h1>
<h2 class="h2">{entry_description}</h2>
<h3 class="h3">{facebook_comment}</h3>
<h4>
{love}</h4>
<h5></h5>
<h6></h6>
</article>

</div>

</div>


<footer>
<nav class="navf">
<a href="4.html" class="btn btn-light">ガイドライン</a>
<a href="5.html" class="btn btn-light">利用規約</a>
<a href="{user_name}" class="btn btn-light">自己紹介</a>
<a href="http://jpcm.jugem.jp/?mode=sitemap" class="btn btn-light">お知らせ</a>
</nav>  
<br>


<table class="table">
 <thead class="thead-dark">
   <tr>
     <th scope="col">WordPress</th>
     <th scope="col">XOOPS Cube</th>
     <th scope="col">Joomla</th>
     <th scope="col">Drupal</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">concrete5</th>
     <td>TYPO3</td>
     <td>SOY CMS</td>
     <td>nucleus cms</td>
   </tr>
   <tr>
     <th scope="row">EC-CUBE</th>
     <td>Zen-Cart</td>
     <td>Moodle</td>
     <td>Joruri</td>
   </tr>
   <tr>
     <th scope="row">Geeklog</th>
     <td>Movable Type</td>
     <td>Plone</td>
     <td>MODX</td>
   </tr>
 </tbody>
</table>

<table class="table">
 <thead class="thead-light">
   <tr>
     <th scope="col">CS-Cart</th>
     <th scope="col">Umbraco</th>
     <th scope="col">eZ Publish</th>
     <th scope="col">Zope</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <th scope="row">島根県CMS</th>
     <td>NetCommons</td>
     <td>はてなブログMedia</td>
     <td>a-blog cms</td>
   </tr>
   <tr>
     <th scope="row">PowerCMS</th>
     <td>Refinery CMS</td>
     <td>シラサギ</td>
     <td>NOREN</td>
   </tr>
   <tr>
     <th scope="row">WebRelease2</th>
     <td>HeartCore</td>
     <td>Blue Monkey</td>
     <td>ShareWith</td>
   </tr>
 </tbody>
</table>


<p>Copyright 2021/&#169;&#65039;テンプレート 高橋政重</p>

</footer>
<br>
<aside>
{ad}
</aside>
</body>
</html>

bootstrapを使うには、

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

を<head>にリンクを配置するか、自分でサーバーにダウンロードしてscriptを適用するかになります。大半のCSSフレームワークは自分でダウンロードするようになっており、CDN?版bootstrapは良心的です。

bootstrapを使用する上で重要なのは、管理画面に使用するかサイトに使用するかです。管理画面に使用すれば統一感のあるデザインが期待できますが、サイトに使用すれば「どこにでもあるデザイン」と揶揄されます。それゆえ、bootstrapを越えようと様々なCSSフレームワークが芽生えました。まあ、僕のHTMLソースの例は気にしないでください。

サポートありがとうございます。理由あって、全て無料コンテンツにしています。noteで様々なことを配信しています。励みになります。－高橋政重