アーカイブ

2014年01月

カテゴリ:

そういえばBootstrapでページを作って、それがどう印刷されるのか忘れてました。調べると専用のclassが2つあります。

Print classes

visible-printは画面には表示されないが印刷される。hidden-printは画面に表示されるが、印刷はされない。

下記のようにすると画像は表示されるますが、印刷されません。

<img src="tempest.jpg" class="hidden-print">

下記の場合は表示はされませんが、印刷はされます。

<span class="visible-print">www.tempest.jp</span>

Webページを印刷する人はそれなりにいるようなので、知っていて損はなさそう。

Bootstrapを利用してホームページを作る

カテゴリ:

TEMPESTのホームページのデザインがずっと放置状態なのが気になっていまた。しかし忙しいのと、スマートフォン対応がネックで延び延びになっていたのです。

そして調べていると見つけたのがBootstrap。これを使えば自分でCSSを書かなくても、スマートフォンに対応できるらしいよ。

ただこのサイトを見ただけでいきなり理解は難しい…。探してみるとドットインストールにありましたよ。

Bootstrap 3.0入門 (全18回)

全部見て大体理解しました(HTMLの基礎知識が必要です、CSSが何か知っている必要があります)。当たり前ですが、基本的なデザインは自分で考えて、必要なCSSやJavaScriptを呼んでくるんですね。元となるCSSやJavaScriptを自分で書かなくて済むのがポイントです。ただのHTMLがイマドキ風になります。

新しいページの具体的な変更点は2箇所。スマートフォンで見るとそのまま最適化されたページになるので、PCで見てください。

Wide_3Narrow_2まずホームページを開きます。するとトップにナビゲーションがあり、メインは2カラムですね。

そしてブラウザのウィンドウ幅を狭くしていくと自動的に1カラムになり、ナビゲーションも変更されるのが分かります。古いページをあえて残してあるので比較すると違いがよく分かります。

これを自分で一から作るのはかなり気の遠くなる作業ですが、Bootstrapを使えばあっという間です(HTMLの基礎知識があれば)。

ということで今後はBootstrapを理解していればそこそこのホームページは比較的簡単に出来ることが分かりました。大企業やデザインの会社以外は全部これでいいんじゃないのって思う。

今後はスマートフォンやタブレットからのアクセスがますます増えるわけで、それらに対応しているのがすごく重要だよね。

カテゴリ:

授業の中でウケが良いのがこれ。Linuxなどでログインする時にパスワードを打ち間違えたらどうするか。画面には何も表示されないので、バックスペースを押しても消えているのかどうか分かりませんね。そんな時は

Ctrl-u (Ctrlを押しながらu)

です。画面は何も変わりませんが入力値は破棄されますので、そのまま新しいパスワードを入れればログインできます。

このページのトップヘ

見出し画像
×