CSS初心者向け。僕がbootstrapを使うまで
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/©️テンプレート 高橋政重</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で様々なことを配信しています。励みになります。-高橋政重