バンフートレーニングスクール Illustrator/Photoshop/InDesign/Web作成が学べるスクール

03-5229-8285

カウンセリング

[CSS]ユーザースタイルシート

今日は雨と雪が交互に降っていますね。
本日、夜の講習でご来校される方は、足元に気をつけてお越しください。

もちろん日程変更も可能ですので、お気軽にお電話ください。

スタッフ「ほ」です。

今日はちょっと制作時のテクニックとは違うのですが、「CSSを覚えるとこんなこともできるんだよ!」ということを知っていただきたいので、ユーザースタイルシートをご紹介します。

みなさんは、どこかのサイトを閲覧しているときに、「文字の色が薄くて見づらいなぁ」とか「背景画像がごちゃごちゃしていて見づらい…」なんて感じたことないでしょうか?

ほかにも「プリントアウトすると、広告バナーだらけのせいでプリント枚数に無駄がでる!」なんてこともあるかもしれません。

そういったサイトには、自分が書いたCSSを適用して、見た目を変えてしまうことができるんです!

それがユーザースタイルシート。

まぁ、とりあえずやってみましょう。

たとえば、バンフートレーニングスクールのトップページを利用してやってみましょう。

http://www.vanfu-vts.jp/

スクールのトップページは、こんなデザインです。

ページ右部にあるバナーエリアは、rightMenuというIDを振ったDIVボックスに入っています。

メモ帳やテキストエディットを起動し、ファイル内に以下のような記述をしてみましょう。

#rightMenu {  display:none !important; }

書けたらファイルを「mystyle.css」など、好きな名前をつけてデスクトップに保存します。

ここで保存したCSSをブラウザに読み込ませて使用するのですが、プラグインや拡張機能を使わずに使えるのがInternet Explorerですので、今回はIEでの設定方法をご紹介します。

IEを起動し、「ツール」メニューから「インターネットオプション」を開きます。
※メニューが表示されてない場合はAltキーを押すと表示されます。

ダイアログが開いたら、画面右下の「ユーザー補助」をクリックします。

さらにダイアログが開くので、ダイアログ下部にあるユーザースタイル欄のチェックを入れて、先ほど保存したCSSファイルを指定します。

「OK」ボタンでそれぞれのダイアログを閉じてから、バンフートレーニングスクールのサイトにアクセスすると…

画面右側にあったバナー・ボタン類がすべて非表示になりました!

これをうまく利用することで、いつも読んでいるサイトの広告バナーを非表示にしたりできます。

また、文字のサイズや色、背景の画像や色も、このユーザースタイルシートで指定が可能です。

基本的に書き方は通常のCSSと同じなのですが、一点だけ違うのが

#rightMenu {  display:none !important; }

この「!important」の存在です。

通常、CSSの優先順位は

サイト制作者のCSS > ユーザースタイルシート

となっています。

そのため、たとえばユーザースタイルシートの中で

p { font-size:21px; }

と書いていたとしても、制作者がCSSの中で

p { font-size:16px; }

と書いてしまっていたら、文字サイズは制作者のCSSを優先し、16pxで表示されます

そこで、ユーザースタイルシートの指定でセミコロン(;)の前に「!important」の文字をつけてあげます。

p { font-size:21px !important; }

すると、この指定が制作者のCSSよりも優先されるため、文字サイズを強制的に21pxに変えることができます。

ユーザースタイルの適用をやめたい場合は、保存したmystyle.cssの内容を空っぽにするか、インターネットオプションから、ユーザースタイルシートのチェックを外すことで適用されなくなります。

覚えておくと、何気に便利な機能です。

なお、IE以外のブラウザでの適用方法は「ブラウザ名+ユーザースタイルシート」のキーワードで検索をすると情報が出てきますので、そちらをご参照ください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

The following two tabs change content below.

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

▲トップ

無料体験へのお申込み

バンフートレーニングスクールでは3種類の無料体験をご用意しております。
ご希望の体験を選択していただくと詳細とお申込みのページへ移動します。

ポストカード制作

イラストレーターとフォトショップを使ってのポストカード制作体験です。作成したポストカードはお持ち帰りいただけます。

パンフレット制作

インデザインを使ってのパンフレット制作体験です。文字と画像の流し込みからページ番号設定、文字への装飾まで行います。

ホームページ制作

WindowsやMacintoshでHTMLを記述してホームページを作成します。ページの基本である文字、画像、リンクの設定を行います。

資料のご請求

スクールのパンフレットを画面上でご覧いただけます。

パンフレット(PDF)を今すぐ見る

パンフレットの郵送をご希望の方は以下のフォームよりご請求ください。

お名前必須
フリガナ必須
ご住所必須
-
メールアドレス必須
備考

下記、プライバシーポリシーをお読みいただき、ご同意いただいた上で次の画面にお進みください

プライバシーポリシーを開く

同意して次へ