CASIO pocket computer
PB-100の宇宙

hamura.css
インストール

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

注意

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

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

ファイル構成

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

  1. ブラウザ別にビルドされた CSS × 9
  2. フォールバック用の Javascript × 1
  3. Web フォント × 4
  4. Data URI スキームで Web フォントを埋め込んだ CSS x 4
  5. pbLCD, pbChr 用の画像スプライト
  6. pbList のフォールバック用の画像スプライト
hamura.css assets
  - pbFont/
  - pbLCD/
  - hamura.js
  - modern.css
  - legacy.css
  - ie9.css
  - ie8.css
  - ie7.css
  - ie6.css
  - ie55.css
  - ie5win.css
  - ie5mac.css

三種類のインポート方法

  1. github.io から直接 hamura.css をインポートする
  2. リリースファイルをダウンロードして、自前の Web サーバから配信する
  3. 自身の Web サイト用に最適なビルドをする

インポートべからず集

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

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

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

この方法の欠点

  1. github.io は http: でアクセスすると https: にリダイレクトされるため、古いブラウザで読み込みに失敗します.
  2. 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";
@media screen {
    @media (prefers-color-scheme: dark) {
        body { background: #000; color : #ddd }
    }
}
/**/
</style></noscript><!--<![endif]-->
<script src="//pb-100.github.io/hamura.css/hamura.js"></script>
</html>

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

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

@media screen {
    @media (prefers-color-scheme: dark) {
        body { background: #000; color : #ddd }
    }
}

@media only screen and (prefers-color-scheme: dark) としないのは、Opera 9.0~9.27 でのメディアクエリの不具合を回避する為です.

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

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

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

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

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

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

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

資料とメモ置き場

関連記事とツイート

  1. アニメーションgifの制作と最適化のメモ