カテゴリー別アーカイブ: CSS

[Web]小さなアイコンを文字として扱う

6月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。

春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。

さて、本日はとってもナイスなWebサービスをご紹介です。

——

例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか?

グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。

ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場合もまた作り直しってことになります。

そんな小さなアイコンをフォントとして表示できるWebフォントがあるんです。

Font AwesomeというWebフォントサービスです。
http://fortawesome.github.io/Font-Awesome/

使い方はとっても簡単。ユーザー登録なんかもいりません。

なかなか使い方は奥深いんですが、今回はカンタンに使えるさわりの部分だけご紹介してみます。

利用の手順

利用はカンタン、以下の2ステップです

  1. Font Awesomeを利用するためのタグを1行書く
  2. アイコンを利用したい場所に適当なインライン要素タグを書いてクラスを指定する

以上です。

では、1工程ずつやってみましょう。

ステップ1

最初のステップでは、Font Awesomeを利用するための準備をします。

Font Awesomeを利用するには、関連ファイルを一式ダウンロードして、自分のサイトに組み込んでしまう方法と、Font Awesomeのサーバーから呼び出して利用する方法の2つがあります。

後者の方がカンタンに利用できるので、そちらでやってみましょう。

HTMLファイルの<head>から</head>の間に以下のタグを貼り付けます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

上記のタグはXHTMLを基準にしてありますので、HTMLのページで作っている場合は、最後の「 /」を外してください。

準備はこれだけです。さぁ使ってみましょう!

ステップ2

例えば、以下のようなソースがあったとして…

<p>ダウンロード</p>

この「ダウンロード」の文字の先頭にアイコンを入れたい場合、以下のように「ダウンロード」の文字の前に適当なインライン要素のタグを書きます。
ここでは<span>タグを使ってみます。

<p><span></span>ダウンロード</p>

さらに追加した<span>要素に以下のクラスを指定します。

<p><span class="fa fa-download"></span>ダウンロード</p>

以上です。ブラウザで確認してみましょう。

カンタンでしたねー。

アイコンの種類

上記のように、クラス名に「fa fa-(アイコン名)」と指定することで、任意のアイコンを指定することができます。

他にも以下のようなアイコンが呼び出せます。

アイコン クラスの指定
fa fa-shopping-cart
fa fa-sitemap
fa fa-tag
fa fa-search-plus
fa fa-thumbs-o-up
fa fa-trash
fa fa-truck
fa fa-user
fa fa-car
fa fa-bus
fa fa-subway
fa fa-file-o
fa fa-gear

上記は一例で、まだまだ種類はたくさんあります。

↓のページを参考にしてみてください。
http://fortawesome.github.io/Font-Awesome/icons/

装飾

ここで表示しているアイコンは、文字の扱いですから、CSSで文字として装飾を行うことができます。

ボタン作ってみましょう。

HTMLソースを用意します。

<ul id="fnav">
<li><a href="#"><span class="fa fa-sitemap"></span> サイトマップ</a></li>
<li><a href="#"><span class="fa fa-car"></span> 交通アクセス</a></li>
</ul>

では、CSSで装飾をしてみましょう。

#fnav {
	padding: 0px;/*リストのパディングをクリア*/
	margin: 0px;/*リストのマージンをクリア*/
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,  sans-serif;/*フォントの指定*/
}
#fnav li {
	list-style: none;/*リストマーカーをなしに*/
	width: 10em;/*横幅の指定*/
	float: left;/*リストを横並びに*/
	text-align: center;/*文字を中央揃えに*/
	margin-right: 10px;/*ボタン間の隙間を指定*/
}
#fnav li a {
	display: block;/*幅を有効にするためブロックレベル要素に*/
	padding: 5px 10px 3px;/*ボタン内側の余白*/
	text-decoration: none;/*リンクの下線を消去*/
	color: #FFFFFF;/*文字の色を白に*/
	font-weight: bold;/*文字を太く*/
	border: 2px solid green;/*まわりの枠線を表示*/
	border-radius: 10px;/*角丸の指定*/
	background-image: -webkit-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -moz-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -o-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: linear-gradient(180deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-color: #008700;/*グラデーション未対応ブラウザのための背景色*/
	-webkit-box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	text-shadow: -1px -1px #025104;/*文字を立体的に見せる影の指定*/
}

ブラウザで確認すると、以下のようになります。

DEMOページ

どうでしょう?画像ファイルは一切使っていませんが、ここまでの表現が可能になります。

画像を使用していない分だけ、修正や変更も容易ですし、データの軽量化が見込めます。

かなり便利に使えるサービスです。ぜひチャンスがあったら利用してみてください!


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

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

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

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

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[CSS3]box-sizingプロパティ

3月になりました。

春が待ち遠しい、桜が大好きなスタッフ「ほ」です。

さて、本日はWebネタです。

Web作成の授業をしていると、どうしても皆様の前に立ちはだかるボックスサイズの壁。

通常、CSSでボックスのサイズを指定する場合、ちょっとした計算が必要になります。

たとえば、DIVボックスを用意して、

div { width:300px; }

という指定を行ったとします。

この場合、ほかの指定がなければ、

width = ボックスの幅

ということになります。

ただ、このままではボックスの内側の文字まわりに余白がまったくないために窮屈な印象を受けます。

そこで、ボックスにpaddingの指定を行ったとします。

#box2 {
width:300px;
   padding:50px;
}

下図の2つ目のボックスにpaddingの指定を行っています。

ボックスのサイズが大きくなってしまいました。

これは、widthが「内容の幅」を指定するプロパティだからです。

この場合、width:300pxは下図の幅を指定しています。

この指定の場合、ボックスの幅は

左padding(50px)+width(300px)+右padding(50px)

という計算が必要で、400pxになります。

これは、ボーダーにも言えることで、今度はボックスに25pxの太さのボーダーをつけてみました。

#box3 {
width:300px;
   border:25px solid orange;
}

widthは同じ300pxにしていますが、ボーダーの太さの分だけボックスの幅が広がったのがわかるでしょうか。

この場合は、

左ボーダー(25px)+width(300px)+右ボーダー(25px)

で350pxの幅となります。

このように、ボックスにpaddingやボーダーの指定を行うと、とたんにサイズの把握が難しくなるのです。

たいていWeb作成を始めたばかりの方は、ここでつまづいてレイアウトを崩してしまいます。

そこで、今回のネタである「box-sizing」プロパティの登場です。

先ほどのCSS指定に1行追加をします。

div {
   box-sizing:border-box;
}

結果、すべてのボックスが等しく300pxで統一されます。

今回挿入したbox-sizing:border-boxは、widthの幅を内容の幅ではなく、ボーダーを含んだサイズにするための指定です。

この指定をすると、純粋に画面に表示されたボックスの大きさが指定できるようになります。

計算不要!すごく便利!!

IE8以降で対応しておりますので、IE7以下を対象ブラウザからはずしてOKなサイトであれば、ぜひぜひ使ってみてください!!


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

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

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

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

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[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というアプリケーションを使った実践編もご用意しております。

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

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[CSS]リストマーカーの位置

先週雪が降ったときは、昨年の大雪を思い出してドキドキしましたが、あまり大雪にはならずにすんでほっとしたスタッフ「ほ」です。

さて、今日は受講生の方からいただいた質問がありましたので、ご紹介です。

HTMLでリストのマークアップを行うと、各リスト項目の先頭にマーク(リストマーカーといいます)が自動的に表示されます。

普段はあまり意識しないのですが、このリストマーカーはli要素が持っているボックスの外側についています。※厳密にはブラウザによって異なったりもしますが…

上記は、li要素を見やすく赤いボーダーをつけた例です。リストマーカーがボックスの外側にあるのがわかると思います。

レイアウトの都合などで、リスト周りから余白をなくした場合、リストマーカーが親ボックスの外側に飛び出してしまいます。

リストのul要素に再び余白を設定することで、リストマーカーを親ボックスの中に入れることができますが、CSSで以下の指定を行うと、リストマーカーをli要素の内側に移動させることができます。

li { list-style-position:inside; }

ただし、一点だけ気をつけたいのが、リスト内容が長文になる場合です。

2行目の先頭位置がリストマーカーの下に流れ込んでしまいます。

リストマーカーが外側にある場合は、インデントをかけたようにキレイに文字の先頭位置が揃います。

リストをどのように見せたいのか?で使い分けましょう。


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

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

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

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

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

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[css]属性セレクタ

最近、ノートPCを買いましたスタッフ「ほ」です。

かなり昔に買ったノートPCがダメになってからは、持ち歩いてなかったのですが、やっぱり移動中の時間を有効に使いたいのと、スマホやタブレットではどうしてもやりたいことが満たされないので、思い切って買いました。

持ち運びにも便利な11インチサイズを買ったので、今のところ有意義に活用できています。

さて、今日はまだまだ終わってなかったセレクタシリーズです。

今日は「属性セレクタ」です。覚えるとかなり便利に使うことができます。

指定した属性を含む要素部分のみを装飾することができます。

むむむ…やっぱり文字にするとわかりづらいですね。

例を挙げていきましょう。

【HTML】


<table width="200">
<tr>
<td colspan="3">横結合</td>
</tr>
<tr>
<td rowspan="2">縦結合</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

テーブルを作ってみました。一部、セルとセルを結合しています。

線が見えるように、CSSで以下の指定を行います。

【css】


table {
	border:2px solid #000000;
	border-collapse:collapse;
	width:300px;
}
td{
	border:1px solid #000000;
}

結果、ブラウザで表示すると、以下のような表示になります。

この中で、横結合されたセルと、縦結合したセルだけに背景色をつけたいとします。

上記のHTMLソースを見てみると、横結合されているタグにはcolspan属性、縦結合されているタグにはrowspan属性が指定されているのがわかります。

そこで、CSSで以下のような指定を行います。

【css】


table {
	border:2px solid #000000;
	border-collapse:collapse;
	width:300px;
}
td{
	border:1px solid #000000;
}

td[colspan] {
	background-color:pink;
}
td[rowspan] {
	background-color:lightblue;
}

結果、テーブルは以下のように装飾されます。

colspanが設定されたセルとrowspanが設定されたセルにそれぞれ背景色が適用されます。

さらに属性セレクタは、属性値も含めて指定をすることができます。

テーブルを少し変更します。

【HTML】


<table width="200">
<tr>
<td colspan="3">横×3 結合</td>
</tr>
<tr>
<td colspan="2">横×2 結合</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>

【css】


table {
	border:2px solid #000000;
	border-collapse:collapse;
	width:300px;
}
td{
	border:1px solid #000000;
}

結果は以下のようになるはずです。

この中でも横に2マス結合したセルだけに装飾を行いたい場合、以下のようなCSSを追加します。

【css】


table {
	border:2px solid #000000;
	border-collapse:collapse;
	width:300px;
}
td{
	border:1px solid #000000;
}

td[colspan="2"] {
	background-color:pink;
}

結果、2マス結合したセルだけに装飾がかかりました。

このセレクタをうまく使うことで、さらにClass名の指定が減らせそうですね。

フォーム部品の装飾指定などにも活躍しそうです。


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

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

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

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

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

 

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ