CSS

知っているといざというとき便利なテキスト周りの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を適用した要素が入れ子構造になって…

FC2はSSL化してた

・【重要なお知らせ】 FC2サービスのSSL化につきまして - FC2総合インフォメーション知らなかった。

「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 文字…

ディスプレイの仕組み

ソ-ス:「えーと、画像は全部2倍で作ればOKなんだよね?」を卒業しよう | un-Tech 関連: ・ASCII.jp:Windowsと高DPIディスプレイ【その1】 8までのDPIスケーリング (1/2)|Windows Info・ASCII.jp:Windows 10+高解像度ディスプレイでのアプリのボケはRS…

はてなの編集部のHTMLとCSSの基礎

・新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」 ・改行のはなし - はてな編集部ブログ「編む庭」

HTML5: 絶対パスについては最上位階層からの指定

HTMLの相対パス、絶対パスを紹介します【HTML5実践編】 関連: ・絶対パスと相対パスとルート相対パスのメリットデメリット

CSS3 : 鏡文字にして表示する方法

Facebook→ʞoodɘɔɒᖷのように英数字を鏡文字にして表示する方法|Colorless Green Ideas ウェブページで鏡文字を使いたければ、CSS3のtransformプロパティを使うのが良いだろう。最近のブラウザならちゃんと鏡文字になるはずである。Internet Explorerの8以前…

HTML5.1が勧告されていた

CSS

11月1日付けでHTML5.1が正式に勧告されていた。関連: 2016年秋登場!HTML5.1で追加される新機能とは? | SiTest (サイテスト) ブログ

CSS: Flexbox

CSS

・floatより辛くない「flexbox」でざっくりレイアウト - Qiita 関連: ・Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法 – Rriver・CSS Flexboxの勉強に最適!コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ | …

CSS: Webサイトをモノクロにする

CSS

・タイ観光庁のサイト body{ filter: grayscale(1); -webkit-filter: grayscale(1); }・【応急処置】ウェブサイトをモノクロ・グレーにする手順・css - zuzukiiのブログ

CSS: CSSだけで高さ不定フッターを最下部に固定する

CSS

・CSSだけ(flexbox)で高さ不定フッターを最下部に固定する方法に書いてある。 <html> <head> <style > .body { padding: 0; margin: 0; display: flex; flex-direction: column; min-height: 100vh; } header { background: red; } section { flex: 1; background: yellow; } fo</style></head></html>…

フォントサイズについて改めて考える

CSS

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説 | コリス今後は pxでの指定をやめ、rem を使ったフォントサイズの指定にする。 Example: remとemフォントサイズの指定にemを使った場合には、親要素すべてのフォ…

CDNからのXSSを防ぐ

・「HTML - [Chrome 45+][Firefox 43+][Opera 32+] CDNからのXSSを防ぐ - Qiitahttp://qiita.com/anqooqie/items/29177ece314ecdbc5f9a」 より フォールバックファイルが改竄されていた場合、そのファイルはロードされないのでサイトの表示が崩れることにな…

sticky footer with calc(vh)

CSS

・[ sticky footer ][ CSS ] たった2行でフッタをコンテンツが少なくても最下部にするスタイルシート - Qiitahttp://qiita.com/feo52/items/b1f502f5329e591ba165こんなに簡単にできるのか。 関連: ・footerをウィンドウ下部に固定する『footerFixed.js』 -…