CSS

ディスプレイの仕組み

Retinaディスプレイが登場するまでは、基本的に画面解像度の物理的な値と論理的な値は同じでした。物理的な値とは、その名の通りディスプレイの物理的なドット数(画面解像度が1920×1080ならば、物理的な点が縦に1920個、横に1080個並んでいる)で、論理的な…

「はてな」の編集部の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); }・【応急処置】ウェブサイトをモノクロ・グレーにする手順・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』 -…