cssスニペット集 - Qiita
自分用のメモを兼ねて。随時追記中。 ちょっと一手間で見た目が良くなるスニペット集 フォントのカーニングとアンチエイリアスの調整 テキストの両端を綺麗に揃える 1.フォントのカーニングとアンチエイリアスの調整 font-smoothingでアンチエイリアスの調整 font-feature-settingsでカーニングの調整します letter-spacingで文字間をお好みで空ける デモ：http://codepen.io/kokimaekochi/pen/XNLMdx @mixin fontBeauty { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt"
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Webフォントで複数のウェイトやスタイルを持つ書体を定義する - Qiita
Webフォントの設定 @font-faceでフォントを指定する時、font-familyを同じ名前にして、font-weightとfont-normalを使用するフォントに合わせる。 /*medium*/ @font-face { font-family: 'myfont'; src: url('fonts/myfont-medium.woff') format('woff'), url('fonts/myfont-medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } /*light*/ @font-face { font-family: 'myfont'; src: url('fonts/myfont-light.woff') format('woff'), url('fonts/myfont-l
今どきの見出しとしてのhタグの正しい使い方
[レベル: 初級] hタグに対するGoogleの扱いについて、GoogleのJohn Mueller（ジョン・ミューラー）氏が英語版のウェブマスターオフィスアワーで参加者からの質問に回答しました。 コンテンツを内容を正確に反映したhタグを使うべきなのでしょうか？ 複数のh1タグは検索エンジンの評価に影響を与えるのでしょうか？ 見出しには、階層をきちんと反映したhタグを使うべきか 次のような質問が出ます。 h2タグの見出しの下にコンテンツを書いています。 そのなかには小見出しもあります。 小見出しにはh3タグを使うべきでしょうか？ それともh2タグのなかにすべて置いたままにしておいたほうがいいでしょうか？ ミューラー氏は次のように答えます。 見出しタグはコンテンツの文脈を理解するのに少しだけ手助けになる。 だが特効薬となるようなものではない。 なので、見出しを正しく使っていないからといって、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ![[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1fd89076a824a2b1b121fa5a6c8839a4338de05/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012701.png)
プロなら知っておきたい！Photoshop文字設定とCSSプロパティの相互関係 | それからデザイン スタッフブログ