CSS

文字と行間の大きさは

まとめ:読みやすさはKPIに貢献し得る予備実験の結果から、文字と行間の大きさには適切な組み合わせに傾向があることがわかりました。すなわち、17px × 1.6を中心とした周辺の組み合わせが視覚的にバランスが良く、心理的負荷を下げたい場合はそれより文字を…

コーディングガイド

コーディングガイド by @mdo

日本語文字が中華フォント化してしまう

日本人が想像するよりかなり広い範囲で日本語文字が中華フォント化している現象。CJK処理系における日本語の扱いに対する問題としてそろそろ何とかしていかないと、ソフトウェアの中の日本語が死んでいく危機感がある。そもそもなんでChineseに分類されるフ…

Fontのインスト-ル

すべてのユーザーに対してインストールしておかないと、@font-face の src : local() でローカルフォントとして読み込めない引用元:【Windows】インストールした筈のフォントをCSSのfont-faceで指定してもローカルから読み込まれなくて悩む。 - freefielder…

cssで日の丸を描く方法

CSS

日章旗 日の丸: cssカスタマイズより引用:◆radial-gradient()で描く ・html <div class="hinomaru1"></div> ・css .hinomaru1 { width: 300px; height: 200px; background-color: white; background-image: radial-gradient(circle closest-side,#be003f 60%,transparent 60%); border: 1p…

CSSのaspect-ratioプロパティがすべてのブラウザにサポートされた

・CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法 | コリス 関連: aspect-ratioプロパティ

Webアイコンフォント【Font Awesome】のアカウント登録必須

・Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました | Webクリエイターボックス

wgetの使い方

HTMLとその表示に必要なファイルをダウンロードする 「wget URL」でHTMLファイルをダウンロードできますが、通常は、HTMLからはスタイルシートや画像などがリンクされています。「-p」オプションを付けると、そのHTMLの表示に使用しているファイル、例えばス…

Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート

Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なこと。 ソ−ス:Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesh…

文字が描画されるまでの処理は?

ソ-ス:文字が描画されるまで - Qiita

読みやすいフォント

上記をまとめると、以下の CSS ができ上がります。ご参考になれば幸いです。 body { /* フォントの種類 */ font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; /* フォントのサイズ */ font-size: 16px; /*…

OSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたもの

Mac/Winで共通の日本語フォントがあります。游ゴシックと游明朝です。でもフォント名が微妙に違います。Mac/Winともに表示させるには、CSSに両方とも指定する必要があります。 ソ-ス:標準の日本語フォント / もうパンツはかない 関連: ・読みやすいフォン…

英語圏でないため気付きにくいルール

ベースラインとは文書内に配置されたプレーンテキスト(以下テキスト)の下に仮想的に存在する線です。テキストを打ちこむと、当然のように文字はその線上にキレイに並びます。 日本語と英語を打ちこんだテキスト しかし、英語の場合は小文字のgやy、j等、この…

年賀状印刷

・html + css で年賀状の宛名書き - adbird(広告鳥) 備忘録html+cssでのやり方には気が付かなかった。 関連: ・郵便番号の記入方法。枠にこだわらなくても良い | たまトラ・住所の記載省略は、どのようにすればよいのですか? - 日本郵便

Webページに使う画像

CSS

・画像解像度は「dpi」で表記され、1インチの中にどれだけのドット(点)を敷き詰めるかを表す ・画像解像度は印刷物を作成する時には高い方が鮮明に印刷できる ・Webページを表示させるディスプレイの解像度(dpi)は製品によって異なる ・解像度が高くなると…

Variable Fontって

「Rockridge- Layout-Variable Fontのデフォルト有効化はFirefox 62に延期された」でVariable Fontの存在を知った。・The Typekit Blog | バリアブルフォント – 柔軟なデザインを可能にする新しい種類のフォント・Variable Fontについて - console.blog(self…

HTML側の管轄としての概念が廃止になった

昔のHTMLでの要素は大きく分けて『ブロックレベル要素』と『インライン要素』に分けられていましたが、HTML5ではこれら全て廃止となりました。 これはHTML側の管轄としての概念が廃止になったというだけの理由ですのでこれまで解説したとおりCSS側のレイアウ…

CSSをハックしてパスワードを盗み取るキーロガー

・CSSをハックしてパスワードを盗み取るキーロガーが登場 - GIGAZINE GitHub - maxchehab/CSS-Keylogging: Chrome extension and Express server that exploits keylogging abilities of CSS. https://github.com/maxchehab/CSS-Keylogging

文字詰め

CSS

使い方は簡単。CSSで次のプロパティーを設定するだけです。 .selector { font-feature-settings : "palt"; }このCSSプロパティーを使ったからといって全てのフォントで自動文字詰めができるわけではありません。利用できる条件は、OpenTypeフォントであるこ…

強調を表すタグ

CSS

強調を表すタグ ... は強調(emphasis)を表します。 ... も強調ですが,em より強い強調を表すのが一般的です。デフォルトでは em は斜体,strong は太字になります。ただし,日本語を機械的に斜体にしたものは見苦しい上に,ブラウザによっては日本語は斜…

フッタを最下部に表示する5つのテクニック

・[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリスHTML <body> <div class="content"> コンテンツ </div> <footer class="footer">フッタ</footer> </body>CSS .content { min-height: calc(100vh - 50px); } .footer { height: 50px; }

知っているといざというとき便利なテキスト周りのCSS

CSS

・もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita 「日本語、文字詰めできないかな?ほら、このカタカナとかキモい。。」 「あ、欧文フォントがリガチャしちゃってるんだけど、外してくれないかな?」 「ここのpタグ?のところ…

css3 : font-displayプロパティ

・[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリスFirefox57 layout.css.font-display.enabled を true にする。Firefox58 標準でサポ-トLinux版だけ設定、Windows版はBetaなので。 関連: ・…

文字サイズの指定を「rem」に

このような問題を解決できる単位として、CSS3では新しく「rem」という単位が追加されました。この単位「rem」は、(親要素ではなく)「ルート要素の文字サイズ」を基準にして文字サイズを指定できる単位です。そのため、CSSを適用した要素が入れ子構造になって…

「JSは圧縮するもの」という認識で圧縮していた

CSS

・JavaScriptのファイル内容を圧縮する理由など | mtdew2圧縮は止めることにした。

はてなブログをレスポンシブな縦書きに

・はてなブログをレスポンシブな縦書きにする - anti scroll

柔軟で、恒久的であり、持続性のあるHTMLとCSSの標準コーディングガイド

コーディングガイド by @mdo

HTML CSSを再度、理解する

・HTML5要素のカテゴリーを押さえましょう・HTML5のコンテンツモデルって何?という方にオススメの記事です。・【CSS】セレクタによるスタイルの優先順位・CSSを使ったflexレイアウトが3秒で理解できる「軸」の考え方|SeleQt【セレキュト】

デザイナーはなぜMS Pゴシックを使わないのか?

・デザイナーはなぜMS Pゴシックを使わないのか? - エディトリアルデザイナーに聞いてみた | マイナビニュース「MS Pゴシック」が「解像度の低いディスプレイ」と「貧弱な文字の表示性能」という選択肢しかなかった昔のPC環境で、読みやすさを確保するために…

CSS の font-family プロパティ

注意: font-family プロパティでは、優先順位の高い方から低い方へ、フォントのリストを指定します。フォント選択は、ユーザのシステム上に存在する、リスト中の一番最初に指定されたフォントを選んで終わるとは 限りません。むしろ、フォント選択は 1 文字…