Bootstrapでシングルページをコーディング (1/5)
メインイメージを作る メインイメージ部分は、大きなロゴと短い文章のみの非常にシンプルな構成です。ロゴや文章を「index.html」に指定し、オリジナルのスタイルを「theme.less」に記述してデザインを整えます。 index.htmlは次のように変更します。 ■変更前のソースリスト（index.htmlの一部、緑色部分を変更） </nav> <div class="container"> <h1>Hello, world!</h1> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> ■変更後ソースコード（index.htmlの一部、緑色の部分が変更箇所） </nav> <div class="mainimage"> <div class="container"> <img src="images
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
美しいバランスの黄金比をウェブページのレイアウトに実用的に取り入れる -Golden Bootstrap
黄金比を使ったグリッドを組み立てたり、エレメントに使ったりなど、美しいレイアウトを生み出すGolden Bootstrapを紹介します。 Golden Bootstrap Golden Bootstrap -GitHub Golden BootstrapはBootstrapのプラグインで、「bootstrap.less」にファイルをインクルードして利用します。 // Grid system and page structure ... @import "golden-bootstrap/golden-bootstrap.less"; // Add support for Golden Bootstrap ファイルをインクルードすると、黄金比用の3つの変数を利用できます。 @goldenRatio: 1.6180339887498948482; @goldenLarge: 1/@golden
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
