インストール|PB-100の宇宙

この文書では hamura.css のインストールに関する情報を提供します．

注意

hamura.css をはじめとした CSS ライブラリを既存の Web 文書等に組み込むためには、HTML に関する知識が必要です．

これに不慣れな方は hamura.css を組み込んだブログテンプレート『4bit-city』の利用を推奨いたします．

ファイル構成

hamura.css は18個の CSS ファイルとフォールバック用 JavaScript、Web フォント、画像ファイル等で提供されます． CSS と JavaScript は適切に一本化と圧縮されています．画像ファイルについても最適化されています．

ブラウザ別にビルドされた CSS × 18
フォールバック用の JavaScript × 1
Web フォント × 4
Data URI スキームで Web フォントを埋め込んだ CSS x 4
pbLCD, pbChr 用の画像スプライト
pbList のフォールバック用の画像スプライト

hamura.css assets
  - pbFont/
  - pbLCD/
  - hamura.js
  - modern.css
  - gck07.css
  - gck08.css
  - gck09.css
  - gck12.css
  - gck13.css
  - gck19.css
  - opr70.css
  - opr72.css
  - opr8.css
  - opr9.css
  - ie9.css
  - ie8.css
  - ie7.css
  - ie6.css
  - ie55.css
  - ie5win.css
  - ie5mac.css

インポートべからず集

<script> に async, defer を付けてはいけません．
hamura.js, *.css, /pbFont, /pbLCD は同一ディレクトリに配置します．

1. github.ioから直接hamura.cssをインポートする

このセクションで示す方法は、とてもお手軽ですが次に示す欠点があります．この方法はお試しに留め、自前の Web スペースでの配信をお勧めします．

この方法の欠点

github.io は http: でアクセスすると https: にリダイレクトされるため、古いブラウザで読み込みに失敗します．
JavaScript, CSS ともに圧縮が不十分で適宜に改行を入れています．これはビルド時の Diff を確認しやすくする為であり Web サイトでの使用に最適ではありません．

読み込み用HTML

github.io から配信するファイルをインポートするために次のタグを使用します．

ブログサービス等を利用していて次の HTML タグの追加ができず自力での解決が難しい場合、Blogger 用ブログテンプレート『4bit-city』の利用を検討をください．

</body>
<!--[if IE 5]>
<style type="text/css">
@media tty {
i {content : "\";/*" "*/}}; @import '//pb-100.github.io/hamura.css/ie5win.css'; {;}/*";}
}/* */
@media tty {
i {content : "\";/*" "*/}}@m; @import '//pb-100.github.io/hamura.css/ie55.css'; /*";}
}/* */
</style>
<![endif]-->
<!--[if IE 6]><link href="//pb-100.github.io/hamura.css/ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if (IE 7)|(IEMobile)]><link href="//pb-100.github.io/hamura.css/ie7.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 8]><link href="//pb-100.github.io/hamura.css/ie8.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 9]><link href="//pb-100.github.io/hamura.css/ie9.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if !IE]><!-->
<noscript><style media='screen,handheld,projection,tv,print' type="text/css">
/*\*//*/ @import "//pb-100.github.io/hamura.css/ie5mac.css"; /**/ /*\*/
@import "//pb-100.github.io/hamura.css/modern.css";
/**/
</style></noscript>
<style>
@media only screen and (prefers-color-scheme:dark){
    .pbList {background:hsl(0, 0%, 0%);color:hsl(0, 0%, 87%)}
}
</style>
<!--<![endif]-->
<script src="//pb-100.github.io/hamura.css/hamura.js"></script>
</html>

ダークモード用のスタイルについて

hamura.css にはダークモード用のスタイルが記述されています．インポートする Web 文書でダークモードのサポートが未だの場合は、少なくとも次のスタイルを設定しておきます．

@media only screen and (prefers-color-scheme:dark){
    .pbList {background:hsl(0, 0%, 0%);color:hsl(0, 0%, 87%)}
}

色を HSL 指定するのは、Opera 9.27以下でメディアクエリ内の指定が問答無用で適用される不具合を回避する為です．

2. リリースファイルをダウンロードして、自前のWebサーバから配信する

hamura.css の最新のリリースパッケージをダウンロードして Web サーバに配置します．このパッケージの各ファイルは高度に圧縮されているため Web 配信に適しています．

JavaScript と CSS のインポートには先の HTML から9箇所の URL を書き換えます．

3. 自身のWebサイトに最適になるようにビルドする

ビルドタスクには gulp を使います．gulpfile.js を参照して設定を詰めます．複数あるビルドオプションを適切に設定することで、最良のファイルが得られることでしょう．

hamura.cssを適切にWeb文書にインストールできたか？チェックポイント

Web フォントがネットワーク監視アプリ等でブロックされている場合
Web フォントが無効の場合の、画像へのフォールバックの確認
画像が無効の場合
ダークモードでの表示
ハイコントラストモードでの表示
pbLCD のタブフォーカス

hamura.css
インストール

注意