"Ayame" は"Honoka"を元に作られた、日本語を美しく表示することに特化したBootstrapテーマです。
通常のBootstrapでは、日本語のフォント指定や文字サイズは最適とはいえません。"Honoka"はそんなBootstrapをベースに、日本語表示に適したフォント指定や、文字サイズに関するコードを追記したBootstrapテーマの一つです。
"Ayame"は"Honoka"を元に、ダーク系の配色を適用し、さらに行間やカーニング、日本語の表示によりこだわりました。 具体的には約物にYakuhanJPを使い、line-heightとletter-spacingを調整、vertical-rhythmを意識したブロック間のマージン、text-align: justify による均等割付、などが加えられています。
- Ayame/bootstrap-ja.html (日本語レイアウト)
Releasesから最新版をダウンロードしてください。
(Requirement: node.js, gulp)
git clone https://github.com/AquiTCD/Ayame.git
cd Ayame
yarn install #or $npm install
npm run deploy #or npm start
Ayameは単なるBootstrapテーマにしか過ぎないため、基本的な使い方は"Honoka"に順じ、本家Bootstrapとほとんど変わりません。よって以下に書くことは本家Bootstrapからの引用、もしくはその一部を変更したものです。用意されたCSSクラスやコンポーネントなど、より詳細な使い方のドキュメントは本家Bootstrapの各種リファレンスページをご覧になることを推奨します。
Ayame/
├── bootstrap-ja.html
├── css
│ ├── bootstrap.css
│ ├── example.css
│ └── plugins
│ └── yakuhanjp.min.css
├── fonts
│ ├── YakuHanJP-Black.eot
│ ├── YakuHanJP-Black.woff
│ ├── YakuHanJP-Black.woff2
│ ├── YakuHanJP-Bold.eot
│ ├── YakuHanJP-Bold.woff
│ ├── YakuHanJP-Bold.woff2
│ ├── YakuHanJP-DemiLight.eot
│ ├── YakuHanJP-DemiLight.woff
│ ├── YakuHanJP-DemiLight.woff2
│ ├── YakuHanJP-Light.eot
│ ├── YakuHanJP-Light.woff
│ ├── YakuHanJP-Light.woff2
│ ├── YakuHanJP-Medium.eot
│ ├── YakuHanJP-Medium.woff
│ ├── YakuHanJP-Medium.woff2
│ ├── YakuHanJP-Regular.eot
│ ├── YakuHanJP-Regular.woff
│ ├── YakuHanJP-Regular.woff2
│ ├── YakuHanJP-Thin.eot
│ ├── YakuHanJP-Thin.woff
│ ├── YakuHanJP-Thin.woff2
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
├── img
│ ├── ayame.png
│ ├── circle.png
│ └── sample.png
├── index.html
└── js
├── bootstrap.js
└── bundle.jsush
Bootstrapをつかってウェブページを作成する際に基本となるHTML部分は以下のようになります。CSSやJavaScriptのファイルパスは環境に合わせて変更する必要があります。
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>Ayameではローカルに源ノ角ゴシック（≒Noto Sans CJK JP）があれば優先的に使用します。存在しない場合は使用環境に準拠した読み易いフォントが使われます。(Web-fontとして使用しないのは現状はパフォーマンスが良くないため避けました）
もしあなたが日本語フォントに游ゴシックを指定したい場合、その要素に対して.i-love-yu(※youではなくyu)を指定することで游ゴシックの指定になります。
例えばページ全体に対して游ゴシックを用いたい場合は、<body>に対して.i-love-yuを指定(<body class="i-love-yu">)することで、ページ全体で游ゴシックが使用されます。
またAyameでは游ゴシックを使う際もOSやブラウザによる際をなるべく吸収するように設定されています。
yarn install
npm deploy
gulpfile.ts中の以下の設定で簡単に切り変えられる設定があります。
useCDN = true
modeKurenai = true
bootstrap.min.css(またはbootstrap.css)以外をCDNを使いたい場合、useCDN = trueにしてください。
modeKurenai = trueにするとプライマリーカラーが紅色になります。それにともない他の色も若干の調整が加わります。赤系の色が好きな人にお勧めです。
- windyakin (windyakin.net)
- AquiTCD (Trial and Spiral)