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

AdobeのHTML・CSS・JavaScriptコードエディタ「Brackets」を使ってみた。


Adobeの新エディタソフトBracketsのダウンロード方法や、
使い方を説明しているページがなかったので自分メモ。

①下記のダウンロードURLから最新版をダウンロード
https://github.com/adobe/brackets/downloads
※Google Chromeをインストールしてないとダメそう。
※今回はbrackets-sprint-10.zipをダウンロード

②Windowsの場合、zipファイルを解凍すると、
binwinフォルダ内にBrackets.exeがあるのでダブルクリックしてエディタを起動。

③File>Openからファイルを選択して開いて編集。

================================================
感想
================================================
①英語版のためUTF-8以外は文字化けしてしまう。
②JS LINT ERRORSという項目が下段に出てコンソールエラー以外にも文法上不適切な記述も指摘してくれる。
③Debug>RunTestsを選択するとsrc内のファイルを片っ端からデバッグしまくってえらいことになる。
④シンタックスハイライトが見やすい。
⑤検索置換部分の挙動がいまいち不明。グレップ検索っぽいことはできる。

================================================
総括
================================================
リントチェック部分が便利だと思った。
そのほかは今後に期待したい。あと日本語版がほしいね。

IE8でpositionを使うときはtop(bottom)とleft(right)を両方指定しないとバグが起こるときがあるメモ


IE8でpositionを使うときはtop(bottom)とleft(right)を両方指定しないとバグが起こるときがあるので要注意。
大抵のブラウザでは未指定の場合はautoとなり0を指定したときと同じ状態になるが、
IE8でどちらか一方を指定し忘れると、もう一方の指定も無効化されてしまうことがあるので、
念のため両方指定しておいた方が安全な場合がある。

ol{
positon:relative;
}

li{
position:absolute;
top:-100px;
/*例えleftが0でも必ず指定しておく*/
left:0;
}

ロゴを和文フォントにしてCSS3のWebフォントで表示するデモを作ってみた。


ロゴを和文フォントにしてCSS3のWebフォントで表示するデモを作ってみた。

デモ画面

「欧文」ではなく「和文」フォントなところがポイント。
一文字づつ書き出したのでHTMLソースは冗長気味だけど、
一文字あたり1~3Kと比較的軽めにできた。
今後、企業ロゴもベクター画像化する流れが来るかもしれないしね。

画像との違いは、ベクター画像と同等なのでどこまで拡大しても綺麗なことと、
文字自体がテキストとしてコピペできる部分。

せっかくHTML5+CSS3で記述したのに、
IE6でも表示できるようにしてしまっている点は職業病。

もちろんスマホで拡大しても超キレイですよ。

ちなみの和文フォントの作り方を大まかに言うと、
①イラレでロゴを作成
②ttEditという和文フォント作成ソフトで新規フォント作成。
③Ctrl+T>ロゴの該当文字をフォームに入力+ラジオボタンの「文字」を選択
④イラレからコピペ。
⑤エクスポートの「1文字Webフォント」でWeb用に書き出す。
以上
※ただし、エクスポートされるサンプルHTMLは、IEでうまく表示されなかったため、別の方法にしました。

▼ttEditの使用方法の参考URL
TTEditのすすめ
http://homepage2.nifty.com/upright/ttedit.html
手書きフォントの作り方まとめ : TTEdit簡単マニュアル(1)
http://shodoka.com/world/modules/d3blog/details.php?bid=51

ソフトさえあれば超簡単。
IE6、7などでも表示できるようにしてあるため、
HTML5ライクなのにソースが冗長になっているのはご愛嬌ということで。

▼具体的なソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Webフォント表示デモ(ロゴフォント化計画)</title>
<style type="text/css">

@font-face {
font-family: '東';
src: url('./fonts/to.eot');
}
@font-face {
font-family: '東';
src:
url('./fonts/to.woff') format('woff'),
url('./fonts/to.ttf')  format('truetype'),
url('./fonts/to.svg')  format('svg');
}
@font-face {
font-family: '京';
src: url('./fonts/kyo.eot');
}
@font-face {
font-family: '京';
src:
url('./fonts/kyo.woff') format('woff'),
url('./fonts/kyo.ttf')  format('truetype'),
url('./fonts/kyo.svg')  format('svg');
}
@font-face {
font-family: 'ホ';
src: url('./fonts/ho.eot');
}
@font-face {
font-family: 'ホ';
src:
url('./fonts/ho.woff') format('woff'),
url('./fonts/ho.ttf')  format('truetype'),
url('./fonts/ho.svg')  format('svg');
}
@font-face {
font-family: 'ゲ';
src: url('./fonts/ge.eot');
}
@font-face {
font-family: 'ゲ';
src:
url('./fonts/ge.woff') format('woff'),
url('./fonts/ge.ttf')  format('truetype'),
url('./fonts/ge.svg')  format('svg');
}

p.logo{
margin:16px 0 32px;
font-size:600%;
color:#036;
}

p.logo span.logo_to {
font-family: "東";
}

p.logo span.logo_kyo {
font-family: "京";
}

p.logo span.logo_ho {
font-family: "ホ";
}

p.logo span.logo_ge {
font-family: "ゲ";
}

</style>
</head>
<body>
<p class="logo"><span class="logo_to">東</span><span class="logo_kyo">京</span><span class="logo_ho">ホ</span><span class="logo_ge">ゲ</span><span class="logo_ho">ホ</span><span class="logo_ge">ゲ</span></p>
</body>
</html>

ちなみに「東京ホゲホゲ」ロゴはイラレで適当に作ったオリジナルです。