HonokaはオリジナルBootstrapテーマです HonokaはBootstrapテーマの一つですが、以下の特徴を持っています。 Easy to Start HonokaはBootstrapを元に製作されているため、非常に高い互換性を持っています。マークアップに関する規約はほとんど変わりません。
一定量スクロールした後に追従を開始 一定量スクロールした後に追従を開始するアフィックスaffix.jsサンプル。 スクロールに追従させたい要素に、data-spy属性を追加し、affixを指定する。 data-offset-top属性を追加し、ページの上端から、スクロールに追従させたい要素までの距離を指定する。これにより、一定量スクロールした後に追従を開始する。 HTML <body role="document"> <div class="jumbotron"> <div class="container"> <h1>サンプル</h1> <p><a href="../javascript/affix-top.html" target="_blank">一定量スクロールした後に追従を開始するアフィックス(affix.js)</a>のサンプル。</p> </div> </div> <div
<div class="map_wrapper"> <div class="googlemap"> <!-- 地図埋め込み用 HTML コードをペースト --> </div><!--end of .googlemap--> </div><!--end of .map_wrapper--> https://maps.google.com で住所を入力して、鎖のようなアイコン(リンク)をクリックし、「ウェブサイトへの地図埋め込み用 HTML コード」を取得する。(カスタマイズしたい場合は、「埋め込み地図のカスタマイズとプレビュー」をクリック) 追加情報 現在は Google Map が変更されてこれを書いたときとは少し違っています。「新しいバージョンの地図の場合」に少し追記しました。 取得したコードを HTML に貼り付ける。 <div class="map_wrapper"> <div cl
第1回 「CSSフレームワークって何?」 第2回 「グリッドシステムって何? グリッドシステムを学ぶ」 第3回 「セットアップして利用開始できる環境を作ろう」 第4回 「制作事例をみてイメージを膨らまそう」 第5回 「全体的な構図の作成とナビゲーションバーの設置」 第6回 「ヘッダー部分を作る」 第7回 「コンテンツ部分とサイドバーを作る」 第8回 「オーソドックスなシンプルなフッターを作る」 今回は第5回になる Bootstrapを使ってWEBサイトを作ってみようぜ です 今回は、作成するWEBサイトの全体的な構図を考えて、そして実際にナビゲーションの導入まで行います 全体的な構図を考える 全体的な構図はレイアウトってことなんですが、大体でいいので作成します ナビゲーション ヘッダー メインエリア(サイドバー+コンテンツ) フッター メインエリアは1カラムのデザインでもいいし、2カラムの
公式サイトを一通り動かしてみたときのメモ。 まずは CSS。 Hello World Bootstrap を入手する ここ から zip ファイルをダウンロードする。 HTML を書く <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css" /> </head> <body> <h1>Hello Bootstrap!!</h1> </body> </html> HTML5 の DOCTYPE を記述する。 css ファイルを読み込むだけで使い始められる。 モバイル用に viewport を設定する meta タグを記述する。 user-scalable=n
Twitter社が開発した人気のCSS/JavaScriptフレームワーク「Bootstrap」。誰でも簡単に利用できることが売りですが、一からサイトを作り上げるとなると、それなりに時間がかかってしまうかもしれません。 「Bootstrap Zero」は、そのような時に参考にしたい、高品質なBootstrap用のテンプレートコレクションサイトです。Bootstrap的ではない、美しいデザインのテーマから、Bootstrapっぽさを残したオーソドックスなテーマまで、たくさんのテーマを無料でダウンロードすることができます。 Custom Bootstrap Templates Custom Bootstrap Templatesカテゴリには、Bootstrapっぽさをできるだけなくした美しいテーマが集められています。製品/アプリの紹介サイトや、管理画面に使える、最近よく見かける形式のテーマが揃
話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく本連載「HTML5アプリ作ろうぜ!」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く