サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
記事の最後に 変更履歴 を記載しております。 はじめに この記事は、HTML /CSSの知識はあるけど、ピクセルなどの各単位についてあまり理解していない初学者向けの内容です。 私自身未熟ですので説明に誤りがあるかもしれません。 誤りがあれば、ご指摘ください ((_ _ (´ω｀ )ﾍﾟｺ 第1章 メートルとは 第2章 インチとは 第3章 ポイントとは 第4章 ピクセルとPPIについて 第5章 ドットとDPIについて 第6章 解像度とは 今回、調べて記事をまとめるのに結構な時間を費やしました。 単位について理解を深めたいと考えている方の一助になれば嬉しいです。 第1章 メートルとは 私たちはメートルという単位を使って、長さを表すことができます。 先人の方々がメートルという単位を定義し、普及させてくれたお陰です。 最初は、このメートルという単位がどのように誕生したのか簡単に見ていきましょう。
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1.line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 MeiryoUI 'MeiryoUI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'YuGothic', 愛のあるユニークで豊かな書体Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体Windows8.1~ YuGothicUI 'YuGothicUI', 愛のあるユニークで豊かな書体Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MSUIゴシック 'MSUIGothic', 愛のあるユニークで豊かな書体 MS明
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
