現在、とあるプロジェクトでロゴを制作しておりまして、いろいろと参考になりそうなものを調べていると、
アルファベットを使ってロゴを作るときに参考になりそうな、見せ方のTipsをうまくまとめられている
“Strategies for Letter-based Logo Design“というページを発見したので、その中から、10のTipsを実際の企業のロゴと共にご紹介。。

1. 縦のラインであわせる
以下のように、縦のラインで二つの文字をあわせる。

↓のJRのロゴは、まさにそうですね・・・

2. 文字の一部を切り取ってあわせる
うまく、あわさらない場合は、文字の一部を切り取ってあわせるのもいい感じ。

↓のAIWAのロゴは、WとAをきれいに組み合わせていますね。

3. あたまであわせる
文字のあたまの部分であわせてみても。

↓の村田製作所のロゴは、下のラインでつながってます。。逆か・・

4. 真ん中であわせる
真ん中のラインを使って合わせる方法ですね。

↓のタイガー魔法瓶のロゴは、GとEが真ん中のラインでつながってますね。

5. 文字を反転させる
色を変えたり、反転させてあわせると面白い効果が出せそう。

↓のセコムのロゴは、色が変わってる。う～ん苦しくなってきた・・・

6. 文字をクロップする
文字の一部をクロップするのもいいですね。あまりやりすぎると読めなくなるのでやりすぎに注意ですが・・・

↓のkubotaのロゴは、うまくクロップされていますね。

7. ラインを入れる
ラインを使うと、つながりがはっきりしますね。

↓のCNNのロゴは、まさにラインでつながってます。

8. 連結させる
知恵の輪みたいに、文字を連結させたり、通してみたり。。

↓のコカ・コーラのロゴは、CがLのなかをきれいにくぐりぬけてますね。。

9. 置き換える
文字の一部を置き換えたり、空いたスペースを埋めたり・・・

↓のJALのロゴは、Aの横のラインを置き換えてポイントになってますね。。

10. 半透明を使う
アルファを使って、文字を重ね合わせてみても。。。

日本の方にはあまりなじみが無いかも・・・↓のポルトガル航空のロゴは、アルファを使って文字を重ね合わせてますね。

っと、今回はアルファベットを使ってロゴを作るときの見せ方に重点を置いたTipsをご紹介しました。。”Strategies for Letter-based Logo Design“では、他にもいくつか使えるTipsがご紹介されているので、興味のある方はどうぞ～。。

はいはい。今日から始まりました、CSSサンプルのコーナーでございます。

いろいろ、CSSの本やら、ウェブサイトやらいっぱいあるのですが、なかなか分かりやすいものがないもので・・・この際、自分でまとめちゃおうっちゅうことになりましてん。

記念すべき、第一回目は、テキストリンクのCSSについてまとめてみました～。

基本的にコピー＆ペーストで使えるようにしておりますよん。

1. 基本テキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:hover {
color: #D63597; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

2. 色変えテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

3. 訪問済み打消しテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
text-decoration: none; /*下線無し*/
}

a:visited {
color: #D63597;/*リンクの色*/
text-decoration: line-through; /*打ち消し線*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
text-decoration: underline; /*下線あり*/
}

4. 点線囲みテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
border: 1px dotted #D63597; /*囲み線*/
padding: 2px;/*文字と囲み線のすきま*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
border: 1px dotted #5ABCD9;/*囲み線*/
padding: 2px;/*文字と囲み線のすきま*/
}

5. 斜体テキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
font-style:italic; /*フォントのスタイル*/
}

6. ずらしテキストリンクCSS:

a {
color: #D63597; /*リンクの色*/
}

a:hover {
color: #5ABCD9; /*リンクの色*/
position:relative;
top:1px; /*ずらす距離（上から）*/
left:1px; /*ずらす距離（左から）*/
}