手作りのBootstrapサンプル集(過去のスクリプトなども含むframe.html)を、Movable Type 6.x に移行している。Web制作時に参考にするCSS/HTML/Scriptsを特定するのを容易にするために整理している。アーカイブURLを /assets/にしたので、それまでのindex.htmlは、frame.html に変更した。

手作りのページ

最近の記事

accordion

アコーディオンのようにひとつのメニューが開き、ほかのメニューは閉じる。ブラウザで開いたときにメニューも開くときは、accordion-body collapse in と書く。 〔例〕アコーディオン名 side-bar グループ名area01~area03 概要 Link1 … Tag:

Clean Energy

クリーンエネルギー、持続可能なエネルギーを代替エネルギーと呼ぶ。その長所と短所を一つずつしっかりと見る。確かな数字があってこそ説得力がある。 太陽光エネルギー 1平方キロmあたり 1kw 1W 懐中電灯 100W 人間が発する熱エネルギー 1,000W=1KW    小さな家 1…

Responsive Navbar

a collapsing responsive navbar を試作した。クラス.nav-collapse.collapseのDivに書いた内容が、スマホ(幅940px以下のウィンドウ)で隠れて、替わりにnavbar toggle button (.btn-navbarに書く)が… Tag:

Responsive Web

Windows, Android, iPhoneなどの端末の仕様に対応するようにWebページを設計することをレスポンシブ・ウェブ・デザインという。MTテンプレートでは、これを実現するのは困難である。ページレイアウトで横幅が固定されたテンプレートが標準になっているからである。MT6…

Glyphicons

無料で取得できるGlyphiconが、Bootstrapでも標準として使える。過去に作成したアイコンを glyphicon.css に追加した。大きいサイズのアイコンも追加した。すべて&ly;i>タグで引用する。大きいサイズは<i class="icon-glass …

Images

写真の一覧(サムネール)、ポップアップ拡大表示、スライドショーなどには、Fancyboxを改造したfbox.jsを使う。本文に埋め込む画像の体裁は、BootstrapにあるCSSを使う。 HTMLコード <div class=""> <img src="/ass…

Flowplayer

晩秋の向日葵 HTML <div class="flowplayer color-grn" data-ratio="0.5625"> <video poster="/video/001.jpg" src="/video/001.mp4" controls …

LabelとBadge

異なるのは形状だけで、使い方はおなじで、両方ともinline-blockになる。いずれもdefault, success, Warning, Important, Info, Inversの6色だが、自分好みに変更・追加できる。 …

Navigation

このサイトで使っているナビゲーションメニューのCSSとHTMLの例基本スタイルはBootstrapで、MT標準スタイルシートは無効にした。… Tag:

Button

Basic one two three <div class="btn-group"> <button class="btn">one</button> <button class="btn">two</butt… Tag: