Webデザイン・お手軽手抜き文字組み | Flöunder
やらないよりずっとマシ、Webデザインでのお手軽で手抜きな文字組みをしましょう。あまり突っ込んだことは書きません（書けません）し、デザインを手抜いてやろう、という話ではありません。 まだまだ画像テキストは必要 海外サイトではメインビジュアルのテキスト、見出しのテキストを画像ではなくHTMLで表現しているところが多いです。というか最近見かけるカッコいいサイトはほとんどそうかな。でも、同じように日本語のサイトでもそうしているものを見かけますが、やっぱりちょっとダサい…と思うのは僕だけではないはずです。 日本語は文字の種類が多く、異なる言語を混ざっているのに無調整だと、どうしてもバランスが気になります。やはり、しっかりデザインするならまだまだ画像テキストは必要だと思います。 でもぶっちゃけ、調整するのってめんどくさいですよね。そりゃもちろん、大きくて目立つテキスト、コンテンツ的に重要なテキスト
先日書いた「はてブ数」をテキスト表示するJavaScriptがカッチョ悪かったのでシンプルに書きなおしてみた。 – 和洋風KAI
真・はてブ数をテキスト表示するJavaScript+HTMLコード。 表示例：Controlキーを使いこなせばMacの作業効率は恐ろしく上がる! 覚えるべき7つのショートカットキー | 和洋風◎ ブログに貼り付ける新着エントリーリストコード。 注意：headには上のと同様のJavaScriptとCSSを貼りつけてください。 <$MTEntryTitle$> Chrome KeyConfig用にも作ってみた。 超個人的ですが、自分用にChrome KeyConfig用も作ってみました。 javascript:(function(){var ele=document.createElement('textarea');ele.style.width='100%';ele.value='関連：'+document.title+' ';document.body.insertBefore(ele,
テキストリンクの差別化にborder-bottomを使ってみる
最近海外のサイトなんかを見ているとテキストリンクにボーダーを使っているサイトが多い気がします。普段だと「text-decoration: underline;」のところ「border-bottom: 1px solid #003f8e;」って感じです。 ボーダーにすることで何ができるかというと、テキストの色と違う色の下線にできたり、点線にできたりします。 例えばこんな感じ。下線の色のみ変えています。 この部分ではテキストリンクに「text-decoration: underline;」ではなく「border-bottom: 1px solid #003f8e;」で下線を引いています。マウスを乗せると「border-bottom: 1px solid #c71585;」です。
phiary
上揃えにする方法 上揃えはデフォルトですね. 何もしなくても上揃えになります. 今回のサンプルでは他の CSS に合わせるためにあえて 下記のようなコードを追加しています. #box1 span { position: absolute; top: 0; } 中央揃えにする方法 まずは中央揃えにしたいテキストの親要素に position: relative; を適応します. .box { float: left; position: relative; margin: 10px; width: 25%; height: 90%; border: 1px solid black; background-color: white; font-size: 2rem; line-height: 2rem; } そして中央揃えにしたいテキストの position プロパティに absolute を設
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
文字組関連編 カーニング、字送り、文字ツメの違い
アドビは世界を変えるデジタルエクスペリエンスを提供しています。アドビのクリエイティブ、マーケティング、ドキュメントソリューションは、新進アーティストからグローバルブランドまでのあらゆるデジタルコンテンツを適切なタイミングで適切な人に提供することで最高の結果の実現を支援します。
PSDからテキストをコピーする
Windowsだと出来るか不明です。 こんな感じでFinderでPSDファイルを選択しまして、「Cmd + I」もしくは右クリックから情報をみるとクリックしますと こんなふうになりますので、「レイヤー」部分のテキスト情報をコピーすればOKです。 PSD内のフォルダ分けがキレイすぎてテキストだけを抽出しにくいんですけど、と言ったら牧下さんが教えてくれました。 ありがとうございます！
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 (PIXEL LAB)
小さい文字が綺麗になるかもしれない方法と、コマンド「PI_CleanText」 ( 2012年03月22日 ) Fireworksの文字のアンチエイリアスは、 「鮮明」「強く」「滑らかに」「カスタム」の4種類がありますが、 正直、どれもあまり綺麗ではありません。 あるフォントでは、「鮮明」が綺麗だけど、別のフォントでは、「滑らかに」が きれいだったり、フォントの種類だけでなく、文字の大きさによっても、 適切なアンチエイリアスの種類は変わってきます。 このエントリーでは、アンチエイリアスのかかった小さいテキストが 少し綺麗になるかもしれない方法を紹介します。 同時に、その方法をコマンド化したので、それの解説と配布を行います。
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
