数字と単位の間のスペース
［要約］数字と単位の間には「スペース」を入れる。通常のスペースでもいいが、LaTeX なら「改行されない狭いスペース」\, が推奨。例えば 9.8m/s2 なら $9.8\,\mathrm{m/s^2}$ と書く。Web で \, に相当するものは U+202F (NARROW NO-BREAK SPACE)   だが、うまく表示できない場合があるので、U+00A0 (NO-BREAK SPACE) でもかまわない。 SI Brochure: The International System of Units (SI) には、数字と単位の間には「スペース」を入れると書かれている： The numerical value always precedes the unit and a space is always used to separate the unit
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
ash｜MARIO - only HTML & CSS -
A01 A02 A03 A04 BGM A05 A06 A07 A08 A09 A10 A11 A12 A13 A14 A15 A16 J01 J02 J03 J04 J05 J06 J07 J08 J09 J10 J11 J12 J13 J14 J15 J16
Web上の縦書きの国際標準がついに完成に近づく(W3C) | 慶應義塾大学SFC研究所
慶應義塾大学SFC研究所が世界4拠点の１つとしてホストをしているW3C（World Wide Web Consortium）※1は、福岡県福岡市で2019年9月16日から1週間にわたり開催されたW3C TPAC（World Wide Web Consortium Technical Plenary Advisory Committee Meeting）内の1つの会合である、CSS WG（Cascading Style Sheet Working Group）において、日本語の特徴である縦書きを正式な技術仕様書として完成し、標準提案として審議することを決定しました。 勧告案（PR・Proposed Recommendation）に採択されたことで、近々勧告化（W3C REC・Recommendation）されることが期待されます。 W3Cで文字や画像のレイアウトを定めているCSSワーキンググ
HTML Tables generator - TableGenerator.com
Select table theme Please, compose a theme for your table by selecting color, border and stripes themes shown below. How to use it? Using the Table menu set the desired size of the table. Enter the table data into the table: select and copy (Ctrl+C) a table from the spreadsheet (e.g. Google Docs, LibreOffice Calc, webpage) and paste it into our editor -- click a cell and press Ctrl+V or just doubl
W3Cで現在公開されているHTMLとDOM仕様、将来的にWHATWGのものに一本化する方針へ | スラド IT
2012年以降、HTML5規格の策定においてWHATWGとW3Cが個別に規格をリリースする状況になっていたが（過去記事）、これが解消されるようだ（水底の血）。 これによると、規格の策定についてはWHATWGが行い、W3Cがそれを承認してW3C勧告にする、という流れになるという。
「Webは次のギアにシフトしている」〜HTML5 Conference 2018 基調講演レポート：レポート｜gihyo.jp … 技術評論社
11月25日、東京電機大学千住キャンパスにて「HTML5 Conference 2018」が開催されました。本稿では基調講演の模様をレポートします。 カンファレンスの最初に基調講演が行われました。3名の登壇者が発表しました。 岩井将行氏「IoTとWEB技術が支える社会・大学としての人材育成の役割」 はじめに会場を提供している、東京電機大学未来科学部情報メディア学科准教授の岩井将行氏が登壇しました。 岩井氏の研究室からはWeb関係の会社に就職する学生も多く、これまでのように学術をやっている大学がハブになって企業とつながり、今後も若い人材を育成していきたいという話がありました。 そして岩井氏は、時代としてIoTから一進んでWeb of Thingsになってきていると、ますます感じていると言及しました。たとえば、ESP32とそのモジュールが秋葉原を中心に人気で、M5Stackという形で販売されて
CSSだけでtableを見やすく表示するカスタマイズ方法 - はるなぴログ
CSSだけを使ってtableを見やすく表示するカスタマイズ方法を備忘録として書いておきます。 スマホ表示もレスポンシブ対応を含めて考えていきます。 tableを見やすくするためにテーブルセルに枠線をつけます。さらにヘッダ領域に背景色をつけ、何を比較しているのか目立つようにします。 このカスタマイズでtableを更に見やすく表示しようという作戦です。 tableをどう表示するか スマホ表示 レスポンシブ対応 tableに枠線をつけるCSS テーブルヘッダに背景色をつける マークダウン記法でtableを書く tableをどう表示するか ブログを読むときに内容がtableで表にしてあると分かりやすいということが多いですよね。 列ごとの内容が簡単に比較できますから。 文字ばかりに頼った記述だと読者は疲れてしまいます。テーブル表示を織り交ぜることで読者が楽に内容を読み取ることができるようになります。
Meta robots noindex/nofollow/noarchiveタグの使い方 » 海外SEO情報ブログ・メルマガ
個の記事では、サーチエンジンのロボット（クローラ）の動きを制御するmetaタグについて解説します。 取り上げるのは、次の３つのmeta Robotsタグです。 noindex nofollow noarchive 順に説明します。 Meta robots noindex タグ noindexタグは、HTMLのheadセクションに次のコードを記述します。 <meta name="robots" content="noindex"> ※XHTMLで記述するときは、最後を「/>」で終了します。 noindexタグは、ウェブページをインデックスさせたくない、言い換えると検索結果に表示させたくないときに使います。 検索結果に出したくないページがあるときは、noindexタグが使えます。 他によくある使い道としては、まったく同じウェブページを複数公開する場合があります。 いわゆるミラーページを準備する
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
HTMLの文字コードをどうするべきか、あるいはHTMLとは何かという話 | なすびブログ
HTML文書は文字エンコーディングUTF-8でなければなりませんという記事があり、混乱があるようなのでHTMLについてHTML5とHTML Living Standard（以下HTML LSと省略）について、そしてHTMLファイルの文字コードをどうするかについて、まとめておきます。 TL;DR HTMLファイルの文字コードはHTML Living Standardに従ってUTF-8にする 古いSJISやEUC-JPのHTMLファイルをUTF-8に変換する必要はない What is "HTML" ? 一般にHTMLと呼ばれる規格には複数あります。 HTML4.01を含むそれ以前のHTML (W3C) XHTML1.1 (W3C) HTML5.1 (W3C) HTML Living Standard (WHATWG) まず一旦古い話は置いておいて、HTML5とHTML LSについて考えることに
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
ウェブを発明したティム・バーナーズ＝リー氏にチューリング賞
30年近く前にワールドワイドウェブ（WWW）を発明したTim Berners-Lee氏が、コンピューティング業界最高の権威を持つ賞を受賞した。大成功を収めた同氏の発明であるWWWは現在、新しいモバイル技術の台頭という局面に差し掛かっている。 Association for Computing Machinery（ACM）は米国時間4月4日、Berners-Lee氏に2016年度A.M.チューリング賞を授与した。受賞者には賞金100万ドルに加えて、最高の栄誉が贈られる。この賞は、英国の研究者であるAlan Turing氏にちなんで命名されている。Turing氏は、第2次世界大戦中にドイツの暗号機「エニグマ」の暗号解読を支援し、コンピュータの基本設計の考案に貢献した人物。 Berners-Lee氏は、HTML（Hypertext Markup Language）とHTTP（Hypertext
[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS
HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 インラインのスタイル リンクのターゲット アクセシブルではない画像 ドキュメントの言語指定 不適切な文字セット アクセシブルではないビューポート属性 ラベルのないフォーム要素 空のインタラクティブな要素 不必要、あるいは非推奨の属性 インラインのスタイル このセレクタは、インラインのスタイルが適用されているページ上のあらゆ
![[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a2a96d59143a2df01b38a0f16d119ef1fc6061d4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017031401.png)
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
複数のYouTube動画を埋め込んでも重くならないようにする方法 - オバサンになりたい。
2016/4/27更新 スマホでも動作するよう対応しました こんにちは、錠前（ @jomae_yasushi ）です。 YouTube動画が大量に貼り付けられたページを開いてPCがクラッシュしそうになった経験、ネトサフをよくする人なら一度はあるかと思います。とにかく重いですよね〜 私も先日動画をふんだんに貼り付けた 楽曲紹介記事 を作ってみたのですが、30本の動画を埋め込んだページはノートPCでも表示に少し時間がかかり、スマホでは何度リロードしてもなかなか表示されないといった具合で、これはいかんと急いで対応策を調べました。 ネットのあちこちに書かれている色々な方法を試してみたのですが、JavaScriptの知識に乏しい私でも簡単に実践できた方法を以下に紹介します。ついでに知っておくと理解が深まる周辺知識もまとめてみました。 YouTube動画とサムネイルのURL YouTubeの動画ページ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
