CSS

Variable Fontって

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

HTML要素は大きく分けて『ブロックレベル要素』と『インライン要素』に分けられていたが、HTML5ではこれら全て廃止

昔の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を適用した要素が入れ子構造になって…

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』 -…