Home | Carousel »

Bootstrap

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

手作りのページ

昨年、Bootstrapを学習していくつかの例を作った。過去に学んだスクリプトのサンプルの整理もはじめた。DrupalやMovable Typeを使うと、それらで使っているHTMLテンプレートやCSS/Scriptsと競合したり矛盾したりするので、これを避けるために手作り(メモ帳だけ)で作成した。これをWeb制作時の参考にしている。

これはBootstrapだけでなく、動画用のFlowplayer、写真用のFancyboxなどのスクリプトを含んでいる。スタイルとスクリプトの例を参照したり、修正したりするときは、メモ帳(MKEditorなど)を使ってページのテキストを調べる。メモ帳はWindowsアプリなので、AndroidスマホやiPadでは使えない。またテキストをいじるのは確実だが、ミスを侵しやすく、面倒でもある。

Bootstrapは非常にたくさんのCSSとScriptの集大成なのでサイズが大きく複雑である。一つ一つの機能を確認するために、Bootstrap本体を解体して必要なCSSとScriptを抜き出さないといけない。また基本となっているjQueryのバージョンに依存することがあるので、その確認作業にも時間をとられる。

この作業を改善するために、Movable Typeをつかって整理することにした。

MT標準テーマのうち、もっともシンプルなPicoのテンプレートを最初に使って、これをカストマイズする。シンプルといっても標準テンプレートがモジュールを含めて18個、ウィジェットは24個もある。これをインデックス3個、アーカイブ4個、モジュール5個の計12個に絞った。

基本にするスタイルシートはMTではなく、bootstrap.css にした。インデックステンプレートのスタイルシート(styles.css)は、bootstrapの追加修正用に使うことにした。

この記事について

このページは、旅人が2014年5月12日 11:19に書いた記事です。

次の記事は「Carousel」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。