Skip to content

Commit

Permalink
v4.0.0向けの内容に変更する
Browse files Browse the repository at this point in the history
  • Loading branch information
@windyakin
windyakin committed May 3, 2018
1 parent 0b6570d commit cb46f4d
Showing 1 changed file with 23 additions and 60 deletions.
83 changes: 23 additions & 60 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@

[![Honoka](docs/assets/img/sample.png)](http://honokak.osaka/)

"Honoka" は日本語も美しく表示できるBootstrapテーマです。
"Honoka" は日本語も美しく表示できる Bootstrap テーマです。

## About "Honoka"

通常の[Bootstrap](http://getbootstrap.com/)では，日本語のフォント指定や文字サイズは最適とはいえません。"Honoka"はそんなBootstrapをベースに，日本語表示に適したフォント指定や，文字サイズに関するコードを追記したBootstrapテーマの一つです。
通常の [Bootstrap](http://getbootstrap.com/) では、日本語を表示した時にそのフォント指定やウェイトが最適とはいえません。 "Honoka" は Bootstrap をベースに、日本語表示に適したフォントの指定や、ウェイトに関するコードを追記した Bootstrap テーマです。

## Live Demo

* [http://honokak.osaka/bootstrap-ja.html](http://honokak.osaka/bootstrap-ja.html) (日本語レイアウト)
* [http://honokak.osaka/bootstrap.html](http://honokak.osaka/bootstrap.html) (英語レイアウト)
* [http://honokak.osaka/bootstrap-ja.html](http://honokak.osaka/bootstrap-ja.html) (日本語レイアウト)
* [http://honokak.osaka/bootstrap.html](http://honokak.osaka/bootstrap.html) (英語レイアウト)

## Getting Started

### Download

[Releases](https://github.com/windyakin/Honoka/releases)から最新版をダウンロードしてください。
[Releases](https://github.com/windyakin/Honoka/releases) ページから最新版をダウンロードしてください。

### npm

Expand All @@ -35,11 +35,11 @@ Node.js のパッケージ管理システムである、 [npm](https://npmjs.com
npm install --save bootstrap-honoka
```

パッケージ名が 「**bootstrap**-honoka」 であることに注意してください。
パッケージ名が「**bootstrap-**honoka」であることに注意してください。

### Bower

[Bower](http://bower.io/)からインストールすることができます。
[Bower](http://bower.io/) からインストールすることができます。

最新版をインストールするには以下のコマンドを実行してください。

Expand All @@ -53,77 +53,40 @@ bower install --save-dev $(node -e "$(curl -fsSL https://cdn.honokak.osaka/last.
bower install --save-dev Honoka#(version)
```

``(version)``にはバージョン番号を指定します(ex. ``Honoka#3.3.5-c``)。Honokaの最新バージョン番号は[Releases](https://github.com/windyakin/Honoka/releases)から確認してください。
`(version)` には Honoka のバージョン番号を指定します(ex. `Honoka#3.3.5-c`)。 Honoka の最新バージョン番号は [Releases](https://github.com/windyakin/Honoka/releases) ページから確認してください。

## Usage

Honokaは単なるBootstrapテーマにしか過ぎないため，基本的な使い方は本家Bootstrapとほとんど変わりません。よって以下に書くことは[本家Bootstrap](http://getbootstrap.com/getting-started/)からの引用，もしくはその一部を変更したものです。用意されたCSSクラスやコンポーネントなど，より詳細な使い方のドキュメントは本家Bootstrapの各種リファレンスページをご覧になることを推奨します。
Honoka は単なる Bootstrap のテーマにしか過ぎないため、基本的な使い方は Bootstrap とほとんど変わりません。よって以下に書くことは [Bootstrap](http://getbootstrap.com/getting-started/) からの引用、もしくはその一部を変更したものです。Bootstrap によって用意されているCSSクラスやコンポーネントなど、より詳細な使い方のドキュメントは Bootstrap の各種リファレンスページをご覧になることを推奨します。

* [CSS](http://getbootstrap.com/css/)
* [Components](http://getbootstrap.com/components/)
* [JavaScript](http://getbootstrap.com/javascript/)
* [CSS](http://getbootstrap.com/css/)
* [Components](http://getbootstrap.com/components/)
* [JavaScript](http://getbootstrap.com/javascript/)

### Package

配布しているzipファイルの内容物は以下のとおりです。``bootstrap.min.*``といったように，ファイル名に``min``がつくファイルは，改行やインデント・スペーシングをなくした(minifyされた)コードで，ユーザがウェブページを読み込む際の転送量を少なくすることができます。通常はこの``bootstrap.min.*``を使うことをおすすめします。
配布している ZIP ファイルの内容物は以下のとおりです。 `bootstrap.min.css` といったように、ファイル名に `min` がついているファイルは、改行やインデント・スペーシングをなくした(minifyされた)コードで、ユーザがウェブページを読み込む際の転送量を少なくすることができます。通常はこの `bootstrap.min.*` を使うことをおすすめします。

```
honoka/
├─ LICENSE
├─ README.md
├─ bootstrap.html
├─ css/
│   ├─ bootstrap.css
│   └─ bootstrap.min.css
├─ fonts/
│   ├─ glyphicons-halflings-regular.eot
│   ├─ glyphicons-halflings-regular.svg
│   ├─ glyphicons-halflings-regular.ttf
│   ├─ glyphicons-halflings-regular.woff
│   └─ glyphicons-halflings-regular.woff2
│ ├─ bootstrap.css
│ └─ bootstrap.min.css
└─ js/
├─ bootstrap.js
└─ bootstrap.min.js
```

### Basic Template

Bootstrapをつかってウェブページを作成する際に基本となるHTML部分は以下のようになります。CSSやJavaScriptのファイルパスは環境に合わせて変更する必要があります。

```html
<!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.min.js"></script>
</body>
</html>
├─ bootstrap.bundle.js
├─ bootstrap.bundle.min.js
├─ bootstrap.js
└─ bootstrap.min.js
```

### Do you hate "YuGothic"?

もしあなたが日本語フォントに游ゴシックを指定したくない場合，その要素に対して``.no-thank-yu``(※``you``ではなく``yu``)を指定することで游ゴシックの指定はされなくなり，Windowsであればメイリオ，Mac OS Xであればヒラギノ角ゴを優先的に使用するようになります。
もしあなたが日本語フォントに游ゴシックを指定したくない場合、その要素に対して `.no-thank-yu` (※ `you` ではなく `yu`) を指定することで游ゴシックの指定はされなくなり、 Windows 環境であれば「メイリオ」、 macOS 環境であればヒラギノ角ゴを優先的に使用するようになります。

例えばページ全体に対して游ゴシックを用いたくない場合は，``<body>``に対して``.no-thank-yu``を指定(``<body class="no-thank-yu">``)することで，ページ全体で游ゴシックは使用されなくなります。
例えばページ全体に対して游ゴシックを用いたくない場合は、 `<body>` に対して `.no-thank-yu` を指定 (`<body class="no-thank-yu">`) することで、ページ全体で游ゴシックは使用されなくなります。

## Build

Expand Down

0 comments on commit cb46f4d

Please sign in to comment.