「昔のインターネット」の精神を取り戻す、HTMLエネルギー運動
今日のWebは商取引などの目的に最適化され、少数の企業によって所有されている。個人に力を与え、自己表現を促すかつてのWebの魅力を取り戻す「HTMLエネルギー（HTMLエナジー）」というムーブメントが密かに盛り上がりつつある。 by Tiffany Ng2024.01.08 363 9 Webサイトは、常に洗練されたデジタル体験だったわけではない。 かつて、ネットサーフィンをするには、自分の意に反して音楽が再生されるタブを開いたり、色つきの背景にタイムズ・ニュー・ローマン書体の文字がびっしり詰まったページを読んだりする必要があった。スクエアスペース（Squarespace、Webページ作成サービス）やソーシャルメディアが登場する以前の2000年代、Webサイトは個性を表現するものであり、コードの知識とインターネット上に存在したいという願望を持ったユーザーが、HTMLを使ってゼロから作るもの
marquee 入れ子 どうなる - hogashi.*
<marquee scrollamount="1" direction="right"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="9"> <div style="width: 100px; height: 100px; background-color: green;"></div> </marquee> </marquee> <marquee scrollamount="10" direction="right"> <marquee scrollamount="10"> <div style="width: 100px; h
「SEOに強いHTMLの書き方」についての個人的な見解
「SEO に強い HTML の書き方」というツイートがそこそこバズっていて、その内容に対して駆け出しエンジニアの方たちが「参考になった」などと称賛の声を挙げていたのを見かけて思うところがあったのでこの記事を書きました。 元ツイの概要は次の通り。 body > main > article > sectionに h1は 1 ページに 1 つ（要キーワード） 見出しタグは毎度 section で囲む ヘッダーメニューは nav で囲む 画像に適切な alt を設定する title / description を書く 階層を意識して書く div はあまり使わない 画像は p で囲む この記事は元ツイおよび元ツイの投稿者を批判する意図で書いたものではなく、あくまで挙げられている内容に対する個人的見解をまとめたものです。 正しいか正しくないかをそれぞれの項目のはじめに書いていますが、あくまで僕個人の
2021年だから人類はHTMLを手打ちしろ
youkoseki.com 2021年だから人類はHTMLを手打ちしろ 新しい年だ。人並に新しいことを始めようなどと考える人もいるだろう。しかし、なにを始めればいいのか？ 僭越ながら一つ提案をさせてもらえるなら、私はこう言いたい。HTMLを手打ちしろ。ハイパーテキストマークアップランゲージを学べ。なぜなら、個人がコツコツとタグを手打ちしたウェブページには暖かみがあるからだ。 私は中学一年生のとき、はじめてパーソナルコンピュータを買ってもらった。中学受験がうまくいったら買ってもらえるという約束で、受験には失敗したのだが、買ってもらったのだ。中学時代、ほとんどずっとパソコンと向かいあっていたが、CONFIG.SYSとAUTOEXEC.BATを書き換えてメモリ残量の上下に一喜一憂していた記憶しかない。あとA列車で行こう4や、ルナティックドーンのようなアートディンクのPCゲーム。Windows 3
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
京都大学 <br /> 同好会
京都大学 <br /> 同好会 Tweet 京都大学 <br /> 同好会とは 京都大学 <br /> 同好会は <br /> が好きな人間が集まる同好会です。 <br /> とは? <br /> は、HTML5 / XHTML1.1 で改行を意味するタグです。 例 京都大学 <br /> 同好会の推奨する br タグ 京都大学 <br /> 同好会では <br /> の使用を推奨しています。 HTML5 でも、 <br /> は使用できます。 その他の br タグ <br> <br> は XHTML1.1 では許容されません。 <br /> を推奨します。 <br/> 古いブラウザとの互換性のため、 <br /> を推奨します。 これは XHTML1.1 でも言及されています。 <br></br> XHTML1.1 では有効ですが、 HTML5 では許容されません。 <br /> を推奨
FN1707007 | Sass: SCSSの基本的な書き方 | HTML5 : テクニカルノート
SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Sassの書き方の基本を公式サイトの「Sass Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。 Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。まだ環境を整えていない方は、先に「Sass: 使えるようにするには」をお読みください。 01 変数 変数に納めた値は、スタイルシート全体で使い回せます。変数の値を変えると、変数で与えたプロパティの値もすべて書き替わるのです。Sassの変数は$記号を頭につけて定めます。SassをコンパイルしたCSSからは変数は除かれます。変数を参照したプロパティの値は、CSSでは変数値に書き替えられるのです。サイト全体で使うカラーやレイアウトの尺度な
実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか - Qiita
9月15日(土) DNSについて追記しました。バックエンド？今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ（知らないので書けません😔） 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ HTTP2のヘッダ圧縮技術に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうございます！
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた
Web標準化という仕事、そしてWebの今後について、W3Cの中の人に聞いてきた 白石 俊平（HTML5 Experts.jp編集長） Webの現状をどう見る？ 白石: 今日は取材お受けいただきありがとうございます。簡単に自己紹介からお願いします。 芦村: W3C/Keioで働いている芦村です。Webの標準化を仕事にしていまして、アクセシビリティやコンピューターを使いやすくすることに興味を持って取り組んでいます。 白石: W3Cの方に直接お話を伺う機会なんてそうはないので楽しみにしてきました。芦村さんから見て、今のWebの現状はいかがですか？ 芦村: HTML5のムーブメントを経て、アプリケーションやシステム構築のための共通プラットフォームになってきました。 WebDINO Japan（元Mozilla Japan）の浅井智也さんが作った「Web曼荼羅」という図ですが、凄まじい数の仕様が、様
<a>か<button>か - hitode909の日記
クリックできるものがあって，<a>にするか<button>にするか，という話をしていて，いろんな観点があるなと思ったのでメモ． 単なる画面遷移なら<a> 単にformを送信したいときは，<input type="submit">や<button> <button>はdisabled属性を使って無効状態にできるので，押せない場合もあるなら便利 リンクを<a>にしておくと，PCではホバーするとリンク先が見えるので，ユーザーにとっては何が起きるか予想できて便利 そう考えるとformは押してみるまでどこに飛ぶか分からないので怖い気がする リンクを<a>にしておくと，:visitedを使って訪問済のリンクの色を変えることができて便利 モーダルウィンドウを出すとき，ウェルカムメッセージを開くボタンを<a href="#welcome">として，/#welcomeのときにウェルカムメッセージを出す，とし
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
Web廃墟を作るときに心がけるべき7箇条
お初です！ ホームページを作り始めたウエンツといいます！ 普段はエンジニアをやっています。 最近ふと思い立ってホームページを作り始めました。 ■わたしのホームページ http://2nd.geocities.jp/ssd_kfk/ するととっても楽しく、自由に溢れていることに気が付きました。 仕事でウェブサイトづくりにまみれている中、様々なルールや常識に縛られかつて熱中したホームページづくりのの自由を忘れているのでは？と感じました。 この楽しさを、みんなに楽しんでほしいと思い、このホームページを作っていくにあたって、心がけている、または心がけたこと事をまとめました。 皆さんのホームページ作りを再度始める切っ掛けになれば幸いです。 必要なもの ジオシティーズのアカウント html4の知識 懐かしむ心 30超えた年齢 各種心得 仕事でやってるいつもどおり作ってしまうと、廃墟ではなく普通の家がで
リンクのURLを欄外に配置して印刷する
印刷向けCSSの手法のひとつに、擬似要素とattr()関数を使ってリンクテキストの後ろにURLを挿入する、というものがあります。BootstrapやHTML5 Boilerplateなどでも取り入れられているものです。 a[href]::after { content: " (" attr(href) ")"; } 簡単かつ効果的ではありますが、挿入されるURLによってテキストが分断されてしまうので、どうしても本文が読みにくくなりがちです。URLが長い場合はとくに。 そこで、URLをページの欄外に配置し、番号を振ってリンクテキストと結び付ける、という「傍注」形式にすれば、本文が読みやすく、かつURLも必要に応じて参照できて良いのではないかと思います。 これはカウンターとフロートを利用した簡単なCSSで実現が可能です。main要素内のリンクを対象にする場合のコードのうち、必要最低限の部分
新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎 - はてな編集部ブログ「編む庭」
こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。 いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ（これで大体の年齢がバレる）から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。 徐々に有料の
target="_blank" のセキュリティリスク(デモ動画あり)
HTMLを勉強する際に最初に覚えるものの1つにa要素(タグ)があります。HTMLのアイデンティティと言っても過言ではない、ハイパーリンクを実現する大事な要素です。 href属性に設定されたリンク先のURLをどのウィンドウ等に表示するかを決めるtarget属性というものがあります。任意の値を設定してウィンドウに名前を付ける事で、複数のa要素から同じウィンドウへリンク先URLを表示する事もできますし、常に新しいウィンドウを開く_blankのような、あらかじめ挙動が設定されている値もあります。 target="_blank" のセキュリティリスク リンクの開き方を決定するtarget要素ですが、この挙動を利用してリンク先からリンク元のウィンドウを操作できるというセキュリティリスクが公開されています。 Target="_blank" - the most underestimated vulner
「動画視聴ページ HTML5版（β）」提供開始のお知らせ‐ニコニコインフォ
2016年10月27日（木）13時より一部のプレミアム会員を対象に、 新しい動画視聴ページである「動画視聴ページ HTML5版（β）」 （以後、 「HTML5版」と記載）の提供を開始いたしました。 「HTML5版」では、動画再生可能となるまでの速度が、 従来の「動画視聴ページ Flash版」（以後、「Flash版」と記載）と比較して 高速化しており、より快適に動画をご視聴いただけます。 しかしながら「Flash版」で提供中の"シークバー上のサムネイル表示"や"コメントのNG追加"などの一部機能や導入を計画中の新規機能につきましては、追っての提供予定となるため、今回、β版での提供とさせていただいております。 β版提供期間中は、「HTML5版」と「Flash版」の新旧動画視聴ページを 自由に御切り替えいただけます。 ▼【対象ユーザー】 一部のプレミアム会員ユーザー （対象ユーザーは順次増加し、
brとpどちらを使う – デジタル文具手帳 2!
段落替えには<p>（p element）を使うというのは、HTMLのマークアップを行う人にとっては常識かもしれないけれど、幅広く紙媒体で書いている執筆者からブロガー、一般人まで、文章を書く上で、どういう改行と空白を理想として書いているかはだいぶん認識が違うように思う。ポエムのように無駄に改行で空白を稼いでいるように見える書き方を、わたしは「アメブロ方式」と名付けているけれど、あれはあれで意味があると思う。執筆者が神ならば、編集者はいただいた原稿が見た目通りになるように版にすればいいが、世の中そんなシーンばかりでもなかったりもする。では、どういう書き方が、すくなくともウェブではベターなんだろうか？ あるいはウェブ上に公開されたテキストを書籍に落とし込むときあの空白どうするの？ ウェブではどうやって段落替えをしているか 英語の文章では、段落を変えるときは「ひとつの提言がしおわったとき」で、1つ
HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す - hitode909の日記
ブラウザの幅を変えるとさまざまな眠いのを我慢している全然効率的でない男性が出てきてたのしい!! 解説 HTML5のpicture要素を使っています． developer.mozilla.org こんなかんじ． スマホで見るときは，画面を横にすると何か変わるかもしれない． <picture> <source media="(min-width: 1450px)" srcset="//lh3.googleusercontent.com/-S_m9OixeJuI/V1_D1PsLAWI/AAAAAAABL-g/r4rj0cNH_gATzO1wFXGNzsmnEPAPcRXLQCKgB/s1024/IMG_0192.JPG"> <source media="(min-width: 1400px)" srcset="//lh3.googleusercontent.com/-ILHgX6OxywE/V
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
