CSS 一覧

画像を使わずHTML/CSSだけを使ってアイコンを表示する!Font Awesome がとても便利!

Webフォントの時代。通常は自分の持っているパソコンにインストールされているfontを使ってブラウザの文字は表示されています。そのため、パソコンが異なる環境だと表示するフォントが限られてきます。一般の方のパソコンに入っているフォントを使おうとなるわけです。

大きく違うのは、WindowsとMac。などの機械やOSの違い。またインストールされているソフトによってもフォントは入っている、入ってないが決まってきます。できれば、そういうことを気にせず、このフォントでホームページを表示したい!というのは節なる願いで、そこに最近登場している手法がWebフォント。フォントファイルを読み込ませてCSSで指定をすることによって表示させるといいものです。

Web フォントについては、こちらで詳しく解説中。

そのWebフォントにアイコンが存在します。そのフォントデータをサーバにアップ。もしくは呼び出しておいて、そのフォントデータをHTML内配置するというものです。文字の扱いと同じな為、CSSでfont-sizeを変更したり、color  配置などを扱うことができ、とても幅広く使われています。

今回はその中でもメジャーな Font Awesome をご紹介します。

Webアイコン Font Awesome を設定してみよう

 

スクリーンショット 2015-12-19 10.47.11

Font Awesome

605種類以上のアイコンを表示できます。アイコンは常時追加されているので、まだまだ増える可能性の高い Font Awesome。様々なサイトで見かけるアイコンは、多くのWebデザイナーが利用している証のようなものです。トップページにDownload ボタンからダウンロードすると一揃えセットで入っています。こちらをサーバにアップロードする方法もありますし、こちらのサイトでは、ナビゲーションにある Get Stated をクリックして、CSSファイルの読み込みを行うことができます。

スクリーンショット 2015-12-19 10.53.46

Get Statedページをクリックして、少しスクロールを下げたところに

スクリーンショット 2015-12-19 10.54.57

下記の部分を選択して、HTMLファイルに貼り付けるだけで準備は OKです。

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

WordPressなどで使う場合は、外観のCSS編集に

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

とコピーペーストして使っていくこともできます。

アイコン例 使ってみよう!

  • fa-phone-square
  • fa-phone
  • fa-shopping-cart
  • fa-credit-card
  • fa-arrow-right
  • fa-arrow-circle-o-right
  • fa-envelope-o
  • fa-rss

などなど、小さな画像をイラストレーターで作ってスライスしてHTMLに<img>で貼り付けるという手間は全て吹っ飛んでしまいます。

Webアイコンを使いた場所のHTMLに下記のコードを貼り付けるだけ

<i class="fa fa-home"></i>

上記コードで、 を表示させることができます。

コードは、Font Awesome 内のiconsというページを開いて、一覧から、該当のアイコンをクリックするだけ

スクリーンショット 2015-12-19 13.01.38

例えば coffee と検索ボックスに入力すると

スクリーンショット 2015-12-19 13.03.22

アイコンが出てきますので、そのアイコンをクリックして

スクリーンショット 2015-12-19 13.04.27

<i class="fa fa-coffee"></i>

上記コードをコピーペーストです。大きさを変更したり、色を変えたりしたい場合は、 class 名の faとfa-coffee を使います。 fa の方は、全てのアイコンについているクラスなので、統一した内容を、fa-coffee は、このコーヒーアイコンのみについているclassなので、特別性をもたせた方が効率的です。

Classがよくわからないという方は直接、CSSにstyleを書いても大丈夫です(あまりオススメはしませんが)

<i class="fa fa-coffee" style="font-size:500%;color:red">Cofee Shop</i>

Coffee Shop

画像をスライスしたり、作成して呼び出す手間を考えると非常に便利なWebアイコン

Webサイトのデザインもより一層クールなものに変わりますので、ぜひお試しください。

 


HTMLやCSSコードを入力するテキストエディタのオススメ4選。SublimeTxet

テキストエディタとは?

テキストエディタは、Windouwでは、アクセサリーの中に入っているメモ帳。macではmiなどの標準で入っているプログラムで、テキスト(文字)をだけを扱うことを主体としているものです。Wordなどは、その文字の書式を変える(文字サイズや色・配置)ことできますが、テキストエディタは、そういう機能は持ち合わせていません。そういう機能がないぶん、動作は軽くスピーディに入力できる点に重点をおいています。

良い点(こういう点を備えています)

  • 検索や置換の設定
  • 行番号がでる
  • 行末揃えを変更できる
  • スペースなどが記号になる
  • 文字エンコードを操作できる
  • 保存がテキスト形式なので、他のプログラムでも開くのが容易

HTMLやCSS入力に最適なテキストエディタ

素早い入力ができるテキストエディタは、ほとんどがHTML/CSSやJavaScriptなどのプログラムに適した作りになっています。コードと呼ばれるプログラム部分の色をこまかく変えたり、入力補助機能がついていたり。これらの機能を使うことで、正確に素早くコードを入力することができます。

Windouwsのエディタ

TeraPad

試験会場などでよく使われているエディタです。初めての方にはとても使いやすい導入編テキストエディタです。

tp_w7_s

http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

 

さくらエディタ

html

http://sakura-editor.sourceforge.net/

 

秀丸エディタ

http://hide.maruo.co.jp/software/hidemaru.html

 

SublimeTxet

本家は英語モードなので、日本語用に変える手間はありますが、非常に高性能なテキストエディタです。今回の動画はこちらのSublimeTextをご紹介します。

http://www.sublimetext.com/


WordPress ビジュアルエディタのススメ クライアント様の編集精度をアップ!

 WordPressの投稿画面で実際のテーマに近いデザインで、投稿編集したい・・・

これは毎月更新などを頻繁に行う場合、結構必須な要素となってきます。クライアント様は、エディタの画面が、こういうもんだと思って編集をされているので、これがテーマに近い内容で提供できると、更新するクオリティが上がるというか、失敗せずに綺麗に編集ができます。

テーマのCSSを適用し実際の表示に合わせる!

まずは、スタイルシートのファイルを別に用意します。こちらのCSSファイルは、ヘッダーやサイドバー・フッターなどは存在しないのでメイン部分のみとなります。Body に width 指定した作りでも問題ありません。

editor-style.cssを作成する

editor-style.cssがビジュアルエディタのCSSになります。必要な要素を配置してカスタマイズします。

あとは、function.phpにeditor-style.cssを読み込ませる為のコードを記述しておきます。

functions.php
1
add_editor_style("editor-style.css");

他にも、ビジュアルエディタのプラグインで有名な TinyMCEAdvanced を入れている場合は、ボタンのスタイルの中に汎用のCSSが入ってくるのでとても便利です。

スクリーンショット 2015-06-03 15.29.27

スクリーンショット 2015-06-03 15.29.43

1行目の Load ths CSS ~~~~のところにチェックを入れておきます。

スクリーンショット 2015-06-03 15.31.45


印刷プレビューで見るとリンクアドレスが表示している・・・CSS

クライアントから、作成途中のサイトを検証してもらっていたら、印刷プレビューで見た時にURLが表示されているんだけど、これどうにかならないの?と言われた。

URL ?  確かにサイトを印刷プレビューで見たら、URLが表示されている。

こんな感じだ・・・

スクリーンショット 2015-02-01 17.46.42スクリーンショット 2015-02-01 17.47.32

 

調べてみた。【CSS】印刷するとリンクの後ろにURLが勝手に表示される のサイトを参考にさせてもらうと、

@media print{
a[href]:after {
  content:"("attr (href)")";
  }
abbr[title]:after{
  content:"("attr (title)")";
}

という表示があるせいだと。確かにこれでは、URLが出てしまう。
ただ、なぜこの部分が入ってしまったのか、入れた覚えがなくて・・・
DWで検索してみると、DWで生成されたCSS内に下記の記述があった。

 /* ==|== print styles ======
  Print styles.
  Inlined to avoid required
   HTTP connection: h5bp.com/r
  ======================= */

@media print {
 * { background: transparent !important; color: black !important;
 box-shadow:none !important; text-shadow: none !important;
 filter:none !important; -ms-filter: none !important;
 } 

/* Black prints faster: h5bp.com/s */
 a, a:visited { text-decoration: underline; }
 a[href]:after { content: " (" attr(href) ")"; }
 abbr[title]:after { content: " (" attr(title) ")"; }
 .ir a:after, a[href^="javascript:"]:after,
 a[href^="#"]:after { content: ""; } 

/* Don't show links for images, or javascript/internal links */
 pre, blockquote {
 border: 1px solid #999; page-break-inside: avoid; }
 thead { display: table-header-group; }

 /* h5bp.com/t */
 tr, img { page-break-inside: avoid; }
 img { max-width: 100% !important; }
 @page { margin: 0.5cm; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3 { page-break-after: avoid; }
}

どうやらDreamweaver CCの可変グリッドで初期画面を作成した際にできる [boilerplate.css]にこの記述がある。

結局、クライアントからはブウラウザで表示させる状態と、ほぼ同じような印刷プレビューにしてくれないかという無茶な要望が増えた

ここで、print.cssと、とことん向き合うことになる・・・