HTML

最適な画像選択解説

hatena は webpが使える。

文字と行間の大きさは

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

コーディングガイド

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

「rel=”noopener”」を止めた

・「target=”_blank”」には「rel=”noopener”」を!htmlで外部リンクを貼る際の注意点。 | 無料のメールフォーム作成ツール「EasyMail(イージーメール) 」aタグの「target=”_blank”」に「rel=”noopener”」を挿入するのを止めた。

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

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

WebP(ウェッピー)

・問題となるのは、 IE がタグに対応していないことであるが対策しない。 <script src=”https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js”></script> ・サンプルのHTML <picture> <source srcset=”../test.webp” type=”image/webp”> <img src=”../test. jpg “> </picture> 引用元:WebP(ウェッピー)とは? JPG、PN…

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

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

Adobeは全ユーザーにアンインストールを推奨

・Flash Playerが使えなくなるまであと半年。Adobeは全ユーザーにアンインストールを推奨 - PC Watch

これまでのHTTP通信の問題点がHTTP/3でどのように解決されているのか

ウェブを支えるHTTP通信はどのように進化しているのか - GIGAZINE https://gigazine.net/news/20190930-http3-quic/

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…

base要素にtarget="_blank"を加えると、ページ内のすべてのリンクに適用できる

・これ知ってた? base要素にtarget=”_blank”を加えると、ページ内のすべてのリンクに適用できる | コリス知らなかった。関連: ・a 要素に target=”_blank” をつけること - nonbeiのIT日記・ほんっとにはじめてのHTML5とCSS3:base要素

世界初のウェブブラウザ「WorldWideWeb」

ソ-ス:世界初のウェブブラウザ「WorldWideWeb」をブラウザ内で体験できるサイトをCERNが公開 - GIGAZINE

読みやすいフォント

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

HTML5.1、5.2での仕様変更点

・HTML5.1、5.2での仕様変更点をメモ。 | とあるコーダーの備忘録 「HTMLマークアップに関連する部分のみ」だが有り難い。

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

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

Microsoftが「Chromium」ベースの新ブラウザ「アナハイム」を開発中

Microsoftのコーポレート部門ヴァイスプレジデントを務めるJoe Belfiore氏はWindowsの公式ブログの中で、「私たちはデスクトップでのMicrosoft Edgeの開発にChromiumオープンソースプロジェクトを採用します」と報道内容を認め、MicrosoftもChromiumプロジェ…

年賀状印刷

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

Firefox 63.0.3 : HTML 5.2の<dialog>要素を有効化 (user.js)

user.jsで user_pref("dom.dialog_element.enabled", true); 関連: ・Can I use... Support tables for HTML5, CSS3, etc・HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ | コリス・user.js // 機能停止・追加 user_pref("reader.parse-…

HTML5から意味の変わる要素(再確認)

タグ(要素) HTML4.01 の定義 HTML5 の定義 <b> 太字 文書内のキーワードや製品名など、他と区別したいテキストを表します。 一般的に印刷される際に太字となるようなテキストです。その箇所が重要であるという意味や強調する役割はありません。 <i> イタリック体</i></b>…

htmlのtableのデータをエクセルのように並べ替えることができる

jQueryのダウンロードページにアクセスしてください。ソースを読んだり変更を加える予定が無ければ「Download the compressed, production jQuery 〇〇」と書かれたファイルをダウンロードしてください。この〇〇というところにはバージョンが入ります。続い…

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

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

HTTPSが安全とは限らない

安全な接続だからサイトも安全というわけではない 緑色の錠アイコンは、そのWebサイトに対して証明書が発行されていて暗号鍵ペアが生成済みであることを意味します。緑色の錠アイコンを持つWebサイトは、サイト訪問者とサイトの間でやりとりされる情報を暗号…

©表示の意味

ベルヌ条約発効までの経緯 著作権保護の歴史は、15世紀中頃にドイツのグーテンベルグが活版印刷術を発明したことに始まる。この画期的な発明は、出版物の大量複製を可能にし、ルネサンスやルターの宗教改革にもひと役買うことになるのだが、それは同時に大量…

今なぜHTTPS化なのか?

・今なぜHTTPS化なのか?インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景 - エンジニアHub|若手Webエンジニアのキャリアを考える!

HTML5とJavaScriptで再現した「Winamp2-js」

・WinampをHTML5とJavaScriptで再現した「Winamp2-js」 - GIGAZINEWinamp2-js https://jordaneldredge.com/projects/winamp2-js/

HTML 5.2は2017年12月14日に勧告されていた

・HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ | コリスstrict doctypeはinvalid HTML 4またはXHTML 1で、strict doctypeを持つコンテンツ。dialog要素を有効に dom.dialog_element.enabled: true

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

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

css3 : font-displayプロパティ

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