魔ッドアングラー

Webアイコン「IcoMoon」の使い方とアイコンの追加方法

「IcoMoon」や「Font Awesome」はWebアイコン

Webアイコンとは、見た目は画像のようですが実はフォントという代物です。
これを使う利点は2つあります。

画像を用意しなくてもいい事と、大きさや色を自由に変えることが出来るという事です。

GoogleWebフォントの「はんなり明朝」や「Quicksand」を試してみる

この記事は、数種類のフォントを読み込むため表示が遅いかもしれません。
また、「はんなり明朝」が目的で訪れた方はこちらから一気に該当箇所へ移動できます。

Google Web Fonts

従来、フォントは読み手のデバイスにインストールされているものに依存します。
それに対抗するために、サーバ上にフォント本体を置いて読み手にそれを読み込ませて使うのがWebフォントです。

自分のサーバにアップロードしておいて使うのが一般的なやり方でしたが、いつの頃からかGoogleがフォントの収集を始め、Googleのサーバから直接読み込んで使えるという楽な仕組みを作ってくれました。

それがGoogleWebフォントです。

BootstrapからボタンのCSSだけ拝借する

Bootstrapって何だ

Bootstrapが何なのかはあちこちで説明されているので詳しいことは割愛しますが、ざっくり言うとCSSとJSを作り込んだセットみたいなもので、Bootstrapさえ導入しておけば用意されているclassを与えるだけで簡単に綺麗な装飾や動きの施されたレスポンシブサイトができてしまうというようなシステムです。

スマホに対応するため「Media Queries」と「viewport」を使用する

「WPtouch」から卒業し、サイトをレスポンシブ対応をしてみたので記録に残しておきます。
メディアクエリを使用し、PCのデザインを元に変更を加えていきました。
初挑戦する方の人柱となれれば幸いです。

スタイルシートはメディアクエリ用のものを新しく1枚作り、その中で3つのブレークポイントを作成しました。

CSS で div の場合でも文字数と背景の幅を揃える

ものすごく基本的なことだったのですが、今更知ったので忘れないうちにメモっておきます。

これまで文字数の長さに背景やボーダーの長さを合わせるには「span」を使うしかないと思っていました。でも「span」では上下の margin が効かないんですよね。

Webフォントの使い方 【 例：はんなり明朝 】

ここ「魔ッドアングラー」のようなブログやWebサイト上で使われている文字は「タイトルにはこのフォントを使う」とか「記事本文にはこのフォントを使う」といった具合に、作成者の好みで色々なフォントが指定されています。

フォントには多くの種類が存在するのですが、サイトの作成者側が＜特定のフォント＞を指定しても読む側のデバイス(PCでもスマホでもiPadでも、というよりOSの問題なのでWindowsでもMacOSでもAndroidでもその他なんでも)の中に指定された＜特定のフォント＞があらかじめインストールされていないと文字に変化は起こりません。