*

Bootstrapでホームページを作ってみて気がついたメモ

公開日: : 最終更新日:2013/12/30 WEBDESIGN

簡単にレスポンシブデザインできる Bootstrap を使ってみて、気がついた点をメモしています。実際にホームページを作りながらの疑問と解決の記録です。ただし、あらためてBootstrap についての紹介はしていません。

メニューの均等割

まずはメインメニューの均等割で悩みました。出来れば上に日本語で下に英語の2段で作りたいけど挫折。マニュアルを読んでも英語なので細かい点が不明です。数時間サイトを巡って均等割はサンプルで発見しました。

Justified nav
http://twitter.github.io/bootstrap/getting-started.html#examples

スクリーンショット 2013-07-01 23.43.09

しかしこのサンプルには問題があります。iPhoneなどで見るとメニューが画面から飛び出してしまい正常に機能しません。

スクリーンショット 2013-07-03 16.10.19

画面が広い時は問題ありません。画面を狭くすると文字が右側にはみ出します。

スクリーンショット 2013-07-03 16.10.09

なんとか解決策を探しましたが日本語の情報は見当たらず断念。仕方ないので画面幅によって「Starter template」の上部の黒い帯のメニューと切り替えるようにしてみました。

Starter template
http://twitter.github.io/bootstrap/getting-started.html#examples

仕組みは簡単です。「Responsive utility classes」の表を参考に、画面幅が広い場合(Desktop/Tablet)に表示したい部分を

で、狭い幅の場合(phone)を

で囲って併記してみました。

<body>
<div class="visible-phone">
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!--/.nav-collapse --> 
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="masthead hidden-phone">
    <h3 class="muted">Project name</h3>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">

「Starter template」を動かすにはJavaScriptの設定を確認しておく必要があります。「jQuery」を読み込んでから「bootstrap.js」へのリンクも確認してみてください。ソース最下段を以下のように書き換えて動くことを確認しました。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="./js/bootstrap.js"></script> 

CSS 関係にも若干不具合があったので親子関係を指定して迂回してみました。

.hidden-phone .navbar .nav {

span4で画像の幅は?

単純に写真を貼り付けようとして「いったい横幅いくつで作ればいいの?」ってことに気が付きました。

http://twitter.github.io/bootstrap/scaffolding.html
スクリーンショット 2013-07-03 0.29.10

公式ページを見ると、最大幅が「1200px and up」と。試しに1200ピクセルで作って貼ってみると、縮小されて表示されちゃってる。どうやら通常幅の980pxに縮められているようです。写真だけだと気にならないかもしれませんが、文字などが入る場合は困ってしまいます。

また、span4 の列に画像を入れる場合は???表を見るとspanが70pxで間隔が30px。12セットなので12×(70+30)で丁度1200ピクセル。あれ?最後は右側に30の余白が無いから1170ピクセル???

画像だけの場合は上の表を計算して入れればなんとかなりそうです。画像で文字を入れる場合は、文字だけPNGで透明にして逃げることでとりあえず解決?しました。これなら最小幅の480px以下で作った文字は小さくならないでしょう。

画像で文字なんて作るなよ!ってことなんでしょう。WebFontの時代なんですね。

アイコンの色は黒と白だけ?

ちょっとした小さなアイコンが用意されています。小さめでシンプルなので使いやすいのだが色を変えることができないようです。Bootstrap V3 からは font になるらしいので、色や大きさを簡単に変更できそうです。しかし現在のバージョンでは難しいみたい。下は白いアイコンを表示される例です。

<i class="icon-search icon-white"></i>

Google先生にお尋ねしてみたところ、素晴らしいページを紹介していただけました。どうやらWebFont「FontAwesome」でしのいでいるようです。新バージョンがでるまではこれしか方法がなさそうです。

http://9ensan.com/blog/design/twitterbootstrap-icon-color-font/

関係ないけど偶然発見したアイコン拡張と無料のテンプレートもメモしておきます。
http://marcoceppi.github.io/bootstrap-glyphicons/
http://inspiretrends.com/twitter-bootstrap-templates/


Sponsored Link


 
 

関連記事

素晴らしいブログが多いけど書籍に負けてるんじゃないかと

毎日のように素晴らしい記事を発見しています。特にブログの情報量にはホント驚かされます。しかし本を買う

記事を読む

BootstrapでGoogle マップを貼る方法がわかりません

Bootstrap google map で検索すると、表示の乱れをCSSで修正するテクニックは見つ

記事を読む

Bootstrap の新しいバージョン3がお試し公開中

Mobile first な Bootstrap 3 RC1 が出てる。RC版なので本格稼働には向か

記事を読む

BootstrapでGoogle map や Youtbeを貼る方法(iFrame)

よく探したらスグに見つかったのでメモしておきます。BootstrapでiFrameを綺麗に連動させる

記事を読む

FL Studio サイドチェインでワウワウ言わせる(2)

FL Studio での Side chain の方法。今回はリミッター編です。第一回目のサイドチェ

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

【開封】SmallRig Drop-In Baseplate (Manfrotto 501PL QR Plate Compatible) 2006

引き続き SmallRig Universal Shoulder Pa

【開封】SmallRig Universal Shoulder Pad 2057

最初にお断りしておきますが、いわゆる「単なる開封」記事です。予めご了承

【雑談】URSA mini の設定確認とか安物時計を貰った話

寒くなってきましたがスッキリ晴れ渡る日曜日。久しぶりに予定もなくノビノ

URSA mini & Filmconvert アップデート祭り

いつものように雑談更新。今更お断りすることも無いとは思いますが、今回も

SONY α6300 24p 30p 60p 120pで画質比較

世間では黒金とか言うケシカラン状況になっています。 浮かれポンチ

→もっと見る




  •