BootstrapとDropboxを用いたモダンなホームページ作成

Bootstrap on Dropbox

BootstrapとDropboxを用いたモダンなホームページ作成

今更ながらBootstrapと戯れる。

作成手順

ダウンロード

Bootstrap

上記サイトよりBootstrapをダウンロードします。中身はcssやjsファイルですね。

テンプレートの適用

exampleというしてテンプレートが公開されていますので、お好きな物のソースを取得します。適当にindex.htmlとでもしておけばよいでしょう。今回はこれを適用します。

[justified-nav/] (http://getbootstrap.com/examples/justified-nav/)

ホームページの作成

テンプレートよりcssやjsのリンクパスを修正したのち、適当にホームページを作ってみる。各種フォルダ構成はこんな感じがよいかな。

7010onCajon/css # 各ページのスタイルシート
7010onCajon/dist # Bootstrapの資材
7010onCajon/dist/css # Bootstrapのスタイルシート
7010onCajon/dist/fonts # BootstrapのWebフォント
7010onCajon/dist/js # BootstrapのJavaScript
7010onCajon/doc # 公開用ファイルなど
7010onCajon/html # HTMLページ
7010onCajon/html/index.html # HTMLページ(入り口)

Dropboxで公開

DropboxにはPublicフォルダという物があり、そこに配置していおくと外部に公開することが可能です。作成したホームページのindex.htmlの右クリックで公開リンクをコピーします。これをTwitterなどに放流すればよろしいかと。

いまさらながら自分のホームページを作ってみる

制作物の公開用のホームページを作ってみた。ファイル共有にはもってこいのデザインです。

7010onCajonの工作室

おしゃれでモダン

f:id:naotooncajon:20140619182256j:plain

レスポンシブなデザインも簡単です

f:id:naotooncajon:20140619182300j:plain

結論

今更ながら Bootstrapスゲー。 Railsと組み合わせてシステム作りてー。

以上