下記デザインのWeb画面の作成方法を調べたので書き残しておきます。
＊参考
- Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る
- BootstrapのアイコンGlyphiconsとFontAwesomeの使い方
- BootstrapCDN/ Font Awesome（最新バージョンの確認）
- jQuery（最新バージョンの確認）
＊環境
- MacOS
- Bootstrap 3.3.7
- Font-awesome 4.7.0
- jquery 3.3.1
＊実装方法
下記HTMLファイルを作成し、ブラウザで開きます。headタグの読み込み部分では最新バージョンを設定します。bootstrap の下に font-awesome のCDNをを追記します。bootstrap の font-awesome を使うとクラス指定をしただけで簡易アイコンを表示させることができます。今回は
fa-sign-inを使ってログインアイコンを表示しています。<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li>
<a href="">サービス</a>
</li>
<li>
<a href="">サポート</a>
</li>
<li>
<a href="">事例紹介</a>
</li>
<li>
<a href="">会社概要</a>
</li>
<li>
<a href="">お問い合わせ</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href=""><i class="fa fa-sign-in"></i> ログイン</a>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.navbar {
border-radius: 0;
border: none;
background-color: #3E3A39;
}
.navbar-default .navbar-nav >li > a {
color: #fff;
}
.navbar-default .navbar-nav >li > a:hover {
color: #aaa;
}
</style>
</body>
</html>
＊所感
font-awesomeを使ったアイコンの表示が便利でした。種類も多そうなので、場面によって使い分けて活用していきたいです。Bootstrapの最新バージョンは「4」なので、今後はこちらのバージョンでの使い方も調べておこうと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon