Bootstrap関連の記事一覧



20160716-BootstrapのCSSのclearfixを最新版もチェック-01

みなさん、Bootstrapを使ってWeb制作していますか?

私の勤めている会社もMovable Typeで管理しているサイトはほとんどBootstrapのフレームワークに移行して、制作とメンテナンスがかなり楽になりました。Bootstrapはドキュメントが豊富なので、参考になる情報が多く便利ですね。


さて、そんなBootstrapですが、Bootstrap 3.xのCSSとBootstrap 4(4.0.0-alpha.2)のCSSを見ていたら、float要素を解除するclearfixのCSSが「ああ、ここまで短くなったのか〜」と感じたので、紹介します。



記事の続きを読む




20150909-BootstrapとGoogleカスタム検索のCSS-00

みなさん、Bootstrap使っていますか?

私はこれがないともうWeb制作ができないほど毎回使っています(笑)。



●BootstrapとGoogleカスタム検索は相性が悪い?

Bootstrapは非常に便利なのですが、Googleカスタム検索(Custom Search Engine:CSE)を使うと、こんな表示になりませんか?

20150909-BootstrapとGoogleカスタム検索のCSS-01

入力フォームは崩れ、虫眼鏡アイコンが入った検索ボタンは縦に潰れてアイコンが見えない…!


今回はこうした表示のトラブルを解消する方法を紹介します。

記事の続きを読む



Bootstrapでナビバー(navbar)に、均等分割(均等割)にするクラスがあります。

それが「.nav-justified」です。navをjustifyするということで、そのまんまですね。



●.nav-justifiedは均等分割していない

便利なクラスが用意されているものだと、会社のサイトであまり気にせず適用していました。

以下の画像の線で囲った部分です。

でも、よく見ると、本当に均等分割しているのか?って思いませんか。

一番左と一番右はpaddingで15px付けているから少し大きく見えるにしても、一番左の項目がかなり長く見えます。

20150430-BootStrap-3-nav-justified-均等割に修正する-05

画像出典:これからのカタログ印刷のカタチ - 分割型カタログ印刷 Stock!&Fresh!(吉田印刷所)



実際にサイズを見てみると以下の通りでした。全然、均等分割されていない!

20150430-BootStrap-3-nav-justified-均等割に修正する-06

どういうことなのでしょうか?

記事の続きを読む



レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap(Twitter Bootstrap)です。

このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。



さて、その強力なBootstrapで今回はTipsを紹介。

Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。

それでは実例を見ながら説明しましょう。


●実例「スマートフォン表示の時だけ改行する/○○を表示する」

実例で使うサイトは「グラシン工房」のページ。

スクリーンショットはPCのウェブブラウザーで見た時のものです。トップページの右側にあるサイトの説明文で「スマートフォン表示の時だけ改行する/○○を表示する」という技を使っています。

20141015-BootStrap-Tips-01

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


この部分は以下の様な文章が入っていて、実はそのままの状態でスマートフォンで表示すると、文字数の関係で変な所で折り返されたりしてしまいます。

2行目の「グラシンペーパーにパターン柄やイラストをプリントした」などはかなり長いですよね。

20141015-BootStrap-Tips-02

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


ひとつのHTMLでPCもスマートフォンもお手軽にキレイに表示したいので、スマートフォンで表示した時だけ改行を多く増やしたいわけです。

実際のサイトをスマートフォンで見た時には以下の様に表示されており、PCのウェブブラウザーで見た時よりも改行が多く入っています。(縦に長いという指摘は今回はご勘弁下さい)

20141015-BootStrap-Tips-03

20141015-BootStrap-Tips-04

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


それでは、ソースを見てみましょう。

記事の続きを読む



ということでテンプレートのカスタマイズが非常に自由度が高く、テンプレートタグがMovable Typeにもの凄く似ているライブドアブログを使い始めてから10年が経ちました。

管理画面でブログを始めた日を見てみると、2004年 3月28日からとなっています(それ以前の日付のエントリーは日付を操作したのだと思う)。


そんなつきあいの長いライブドアブログですが、なんだかんだでライブドアブログで用意されたテンプレートを自分なりに修正して使用してきました。今まで自分の力で最初からテンプレートを作ったことがなかったのです。

最近はBootstrapで会社のページを作ることが多く、だんだん慣れてきたので、練習がてらライブドアブログもBootstrapで作ってみるか!と突然思って作ってみました。

20140423-ブログの新しいデザイン-09

画像出典:Bootstrap


ただ単にBootstrapでライブドアブログのテンプレートデザインを作るのも芸が無いので、bootmetroというWindows 8のModern UIっぽいCSSやウェブフォントを利用して作成してみました。

20140423-ブログの新しいデザイン-10

画像出典:bootmetro

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索