CSS3でテキストを長体・平体にする方法と注意点 ｜ Tips Note by TAM
テキストを長体にしたいとき、画像ではなくCSS3を使う方法があります。 テキスト要素に対してtransformのscaleの値を調整すると、文字の一つ一つを細くしたり平たくしたりできます。この方法はWebフォントに対しても使えます。 表現の幅が広がりますね。 ただし、transformの性質上、説明文などの長い文章や、文章中の一部に使おうとするとき、表示がうまくいかないことがあります。ハマりやすいポイントがあるので、すべてのテキストに適用するのではなく、使う場所を選んで設定することをオススメします。 基本的な使い方 <p class="text">普通のテキスト</p> <p class="text text-narrow">長体テキスト</p> <p class="text text-wide">平体テキスト</p> <style> .text { text-align: center;
font-family: monospace;だと文字が小さくなる - しらいとブログ
ChromeやSafariなどWebkit系のブラウザでは可変幅フォントと等幅フォント（monospace）のデフォルトのフォントサイズが違います。インストール時の初期設定では可変幅フォントが16px、等幅フォントが13pxになっており、等幅フォントのサイズはユーザーが簡単には変えられないようになっています。そのためfont-sizeを%指定やem指定している場合、Webkit系のブラウザだけ等幅フォントが小さく表示されてしまいます。ちなみに、Firefox系では初期設定はどちらも16pxになっていますが、ユーザーが別々に変えることが出来るので同じとは限りません。 等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。 font-family: monospace, serif; これはmonospaceフォントで表示できない文字はserifフォントで表示するという
けものフレンズっぽいロゴのジェネレータができたよ！ - Qiita
けものフレンズのロゴってカラフルでかわいいですよね！そんなわけで、けものフレンズっぽいロゴを作れるジェネレータをつくりました。たぶんだいたいのブラウザで動くと思います。（ただしＩＥはブラウザではないものとする。また、一部のブラウザでセキュリティ制限のため保存ができないという情報が入っています） けものフレンズ ロゴジェネレータ つかいかた！ 使いかたはサーバルちゃんでもわかるくらい簡単！テキストボックスに文字を入れれば、それがそのままロゴの文字に反映されます。あとはそのロゴの画像を右クリックとかそういうので保存すればＯＫです。下の方にダウンロードボタンもつけたので、これを押しても保存できます。ロゴの画像は背景が透明のPNG画像なので、何かの素材としてお使いください。なお、カラーリングや文字の傾きなんかは、ページを再読み込みをするとランダムに変化します。配色が気に入らない場合は再読み込みして
1emが何pxなのか自動的に計算する方法(Final) : やむにやまれず
2007年07月24日16:16 by 山崎泰宏 1emが何pxなのか自動的に計算する方法(Final) カテゴリJavaScript Tweet sparklegate Comment(0)Trackback(1) クロスブラウザでなおかつ以前より簡単な方法修正：ソースコードに余計な行が入っていたのを削除しました。 以前はgetComputedStyle()に取り憑かれていたのだけど、一つ前のエントリを書いている最中に「あ、もしかして」と違うことを思ったので早速実験してみたらうまくいきました。 1emのdivセクションを設けてあげれば、clientWidthかclientHeight辺りが良い感じにpxの値を返すようです。 それだけ！ <html> <head> <title>em2px</title> <script language="javascript" type="text/j
はてな匿名ダイアリーの標準スタイルシートでデコるバッドノウハウ
pタグやdivタグのclass要素を指定できるのでHTMLでそのまま記述する。 いつくかはてなダイアリーでの使用可能なはてな記法は無効になっており、例えばキーワードリンク無効記法が使えないためフォントカラーが キーワードリンクの黒に潰されちゃうかんじ。 以下サンプル。アルファベットはクラス名(自動アンカーついていててコピペしにくい。ソースみたほうがいいかも)。 アイコンicon-arrow :: 矢印 icon-tag :: タグ icon-folder :: フォルダ icon-keyword :: キーワード icon-linlink :: インリンク icon-page :: ページ icon-user :: ユーザー icon-download :: ダウンロード out :: アウト フォントhatena-asin-detail-title :: 太字 synStatement
フォントサイズを指定する - スタイルシート
フォントサイズを、BODYタグやTABLEタグなどに指定します。 ほぼ全てのタグに適用することが可能です。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { font-size: medium } /* 標準 */ .xs { font-size: xx-small } /* 小2 */ .xm { font-size: x-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
