令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
Markdown の記法
Skip to: Content | Navigation | Footer Location: Hg's / Markdown の記法 Language: ja Hg's Now Loading... http://daringfireball.net/projects/markdown/syntax が英語でめんどくさい。 unmovabletype.org に Markdown 記法の日本語での解説があったらしいんだが、残念ながら今は閉鎖されている。まじっすか。 というわけで、このエントリは、ヲレ用 Markdown 記法メモ。っつーか上のリンク先の用例をコピペしただけという噂も。 追記:05/06/07 目次を追加。あと、チェック用にDingusへのリンクも追加しとこう。 Block Element Paragraph Header Blockquote List Code B
セブンネットショッピングの「事故」が報じられない理由 - NOW HERE
セブンアンドワイの通販サイトがとんでもないことになってる件。 最初は10月17日から1個あたりの単価で1ケース単位を売っちゃった。 10月17日、イトーヨーカドーのショップサイトでセット商品の価格を単品価格で表記してしまい、誤表記を発見した『2ちゃんねる』ユーザーたちから注文が殺到するという騒動が発生した。『2ちゃんねる』では『イトーヨーカドー祭り』や『イトーヨーカドー誤表記祭り、商品配送ｗｗ』というスレッド（掲示板）が作られ、アレもコレもと大量注文されるという事態に発展していったのだ。 イトーヨーカドー価格誤表記で祭り！ 2352円を98円で販売！ ｜ ガジェット通信 GetNews そして一旦閉鎖、12月8日、リニューアルしてオープンしたら、なんにも直ってないの。 539 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/12/08(火) 08:20:52.0
初心者のためのホームページ作成講座 - Personnel
初心者のためのホームページ作成講座～ Table of contents ～ （2003-02-25）目次 （2003-01-17）関連コンテンツ
HTMLを体系的に理解するための7仕様
はじめに最近マークアップエンジニア志望の若者と話す機会が多いのだけれど、そこで気づかされるのは、彼らの中に過去のHTML（特に90年代以前の仕様）を読んだことのあるという人が、驚くほど少ないことだ。 例えば「マーク・アンドリーセンをどう思う？」と聞くと、「アンドリーセンって誰ですか？」という答えが返ってくる。「ヨスケの独自要素で何が一番好き？」と聞くと、「見たことがありません」と言われてしまう。「ではきみは、昔のHTMLを見たことがあるの？」と聞くと、たいていが「とほほでやっていたものくらいなら……」という答えしか返ってこない。 今の若い人の間では、HTMLを体系的にとらえようという人は少ないようだ。見るのは専ら近年の話題仕様ばかりで、歴史を辿ってみたり、系譜をひもといて標準化団体ごと理解しようとする人はほとんどいない。 これは、ちょっと由々しき問題だと思わされた。HTMLは、もう長いこと
Latest topics > 銀座アップルストアのCSS Niteに行ってきた - outsider reflex
Latest topics > 銀座アップルストアのCSS Niteに行ってきた 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « SSTabRestoring/SSTabRestoredイベントが、「ウィンドウ全体の復元」の時の物か「個別のタブの復元（または複製）」の時の物かを判別する Main Ubuntu 9.04 Jaunty JackalopeからUbuntu 9.10 Karmic Koalaにアップグレードしてみた » 銀座アップルストアのCSS Niteに行ってきた - Oct 30, 2009 こたせんせがHTML5の話をされると聞いて、全然追いかけてないからそろそろ情報仕入れとかなきゃなーと思って、お説教を聴きに行って参りました
携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
「デザインは素敵なんだけど、携帯でこれはちょっとできないなー」とか、「無理ではないけどできれば避けておいた方がいいよなー」っていうデザインがあがってくることが多い今日この頃。 モバイルコーディングをやり慣れている人じゃないとモバイルでできることできないこと、cssを使わないと実現できないこと、table使わないと実現できないこと、などが分かりにくいと思うので当然だとは思うのですが。 ですが、知っているのと知らないのとでは工数がかなり違ってきます。 一旦デザインして、コーダーにそれを見せて「ココとココとココは実現不可能。やり直してください。」で差し戻され、デザインをやり直してってなると、デザインも2度手間、デザインをチェックして無理な項目を洗い出すコーダーにも余計な手間がかかります。 今回洗いだした項目は、なんせ自分がコーダーなので、コーダーがデザインファイルをもらった時にバーッと見てチェッ
Twitter携帯版のXHTMLが残念 | 水無月ばけらのえび日記
公開: 2024年3月3日23時15分頃 「Twitter」携帯版がオープン (internet.watch.impress.co.jp)だそうですが、アクセスしてみるとこんなことになっていますね。 <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd"> <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> 逆です、逆。端末によって文書型宣言を出し分けているようですが、いずれにしてもXML宣言のほうが先にないと駄目です……。でも、携帯端末はきっと全力でスルーして、ふつうに読めるのでしょうね。 ※そもそも端末ごと
引用元の明示は blockquote の cite や title 属性だけでは不十分なのか - カナかな団首領の自転車置き場ダイアリー
参照：引用のやり方についての論争まとめ 参照：はてなブックマーク - 引用のやり方についての論争まとめ 何周目だよ、という意見はさておき。 いったい、僕たちは、Webに公開するリソースとして、ナニを作っているのだろうか、という話で。最終的には、まあ、人間が理解するための（例えば「読む」とか「見る」とか「聞く」とかして）文書を作ってるという解釈は成立するんだけど。この「文書」のデータ形式というトコロで話を書いてみようと思う。 ここで争点となるのは、というか扱うのは、cite 属性や title 属性にしか引用元の表記が無い、闇黒式引用を行った場合に、引用を満たす要件のうち、地の文との区別、出典の明示についてで、特に出典の明示（引用元の表記）について、それが明示か否か、どう解釈するかという話です。 ところで、世の中には、なんでもかんでも、MS Word や EXCEL で、文書を配布するのが好
HTML5では、あの問題は解決するのでしょうか - カナかな団首領の自転車置き場ダイアリー
ふと思い出したわけですよ。 いや、p 要素の中に、ブロックレベルは配置出来ない問題なんですが。 問題文 2 ： しかし、私は上記に加えて、 ・水筒 ・タオル ・ちり紙 ・ビニールシート ・ビニール袋 ・雨具 も、必需品ではないかと思うのだ。 上記をどうマーク付けするか問題。 解答例 6 ： <p>しかし、私は上記に加えて、</p> <ul> <li>水筒</li> <li>タオル</li> <li>ちり紙</li> <li>ビニールシート</li> <li>ビニール袋</li> <li>雨具</li> </ul> <p>も、必需品ではないかと思うのだ。</p> これでいいや、ってことになったんでしょうか？（僕は、いいんだけど） 参照：マークアップの仕方、P 要素とか - カナかな団の躁鬱
NHK 2009都議選 開票速報ページがHTML的にも見た目的にもかなりキレイな件 | aquapple
NHK 2009都議選のサイトが見た目が美しく、操作性も良いのに、Flashを一切使わずJavaScriptで制御されていることがTwitterで話題になっていました。 速報時は自動更新で獲得議席数がリアルタイムに反映されていましたが、現在は速報も終わり開票結果になっています。 動作確認も主要なモダンブラウザ[1]で動作確認が行われています。 ソースは8つのJavaScriptとdivタグに直接スタイルシートが書き込まれているだけで非常にシンプル。75行のHTMLソースの中にFlash要素はゼロとなっています。 各ブロックをクリックすると、フローティングウィンドウが出てきます。これはドラッグしたり、サイト下部に固定表示しておくことが可能となっているほか、ウィンドウの並び替えもタイトルバーをドラッグするだけで行えます。 このページの公開は15日の午後6時までとなっています。無駄に凝っているだ
セマンティックHTML? KISS!
Keep It Simple, Stupid ウェブの文書とデータ 人間が読むためのウェブ文書にはさまざまな情報が詰まっている コンピュータ（エージェント／処理ソフト）はHTMLから文書構造の大枠を把握して提示できるが、内容（データの意味）は基本的に関知しない コンピュータ処理用のデータは別途用意する？ 両方まとめて、シンプルにしよう！ HTML文書中のデータをコンピュータ処理も可能にする HTMLのシンプルさを生かすことが大切 しかしコンピュータにとっても明快でシンプルであること だからセマンティックHTML ウェブリソースの型と関係 ウェブ文書中のデータを明示するためには 文脈によらない識別（名前付け）：何が同じで何が異なるかを明確にする データはどんなタイプ（型）か：文書について？ あるいは文中の映画について？ データどうしの関係：この日付は映画の封切り日？ 映画を観た日？ ウェブ文
XHTML の今後に関する FAQ
この文書は、XHTML の今後について寄せられた質問をまとめたものです。W3C が今後どのように XHTML と関わっていくのかを、コミュニティや W3C Member が理解を深められるように作成されました。 XHTML 2 Working Group はどうなりますか？ 2007 年 3 月に、W3C は HTML Working Group と、XHTML 2 Working Group という、ふたつのグループを設立しました。この際、私達は XHTML 2 の市場価値などを見ながら、今後について検討すると表明していました。 私達は、何年にもわたる XHTML 2 Working Group の活動と貢献をとても評価しています。しかし、参加者と話した結果、W3C は、2009 年末で失効する XHTML2 WG の憲章を改正しないことを決定しました。 HTML Working Gro
XHTML 2 WGが活動終了へ、XHTML 2.0も策定終了に | Web標準Blog | ミツエーリンクス
タイトルのとおりですが、XHTML 2.0をはじめとする各種XHTML仕様を策定していたXHTML 2 WGの活動が、年内で終了することがアナウンスされました。W3Cは、今後はHTML5に注力すると発表しています。 今後のXHTMLはHTML5で XHTML 1.1などのメンテナンスは活動終了までに行うものの、次世代のXHTML仕様はXHTML2 WGで行いません。すなわち、XHTML 2.0の策定は終了ということになります。 今後のXHTMLは、HTML5で定義されます。名前が「HTML5」とあるため紛らわしいのですが、HTML5仕様にはXML構文も含まれており、これは「XHTML5」と便宜的に呼ばれています。XMLでもcanvasやvideo要素などを利用することができるのです。 「XHTML 2.0と統合する」というわけではありませんが、機能のほとんどすべてがXHTML5でもカバーで
HTML5について思いついたことを書く - カナかな団首領の自転車置き場ダイアリー
HTML5なんだけど、なんつか、色々と要素が増えたらしい。で、便利になるとかならないとか。 あんまり複雑だと、初心者は敬遠したがるだろなあ。 ていうか、旧来の感じでマーク付けしてると、HTML5原理主義者（謎）とかがやってきて、最新はHTML5なので、4.01は古いですよ、HTML5をオススメしますとか言い出した挙げ句に、ここはsectionでマーク付けすべきだとか、ここは、ナビゲーションなのでnavが正しいとか、ヘッダだからheaderで、とか言い出すのかなあ。言い出すよなあ、たぶん。dlの使い方とかで、dtとddの対応が判然としないとか、グダグダ言い出すくらいだもんなあ。絶対、言うよなあ。やだなあ。 人間がマーク付けするなら、HTML4.01でイイよね。 ていうか、もうね、Plain text、最強ってことで。
HTML 4.01 strictへ
流行ってるらしいので。本当は、シングル・カラムに変更したかったり、エントリのタイトル等をh1にしたかったり、検索ボックスの位置を変えたかったり、marginのとり方の変えたかったり等色々やりたいことがあったので、ついでにHTML 4.01 strictにしてやったというところ。確認が面倒だった。想像していた以上に。それはもう。 作業は80%くらいは適当なPerlスクリプトでやった。スクリプトを動かし始めてからHTML Tidyを使えば良かったとかいう考えがよぎったけど、そのことは忘れた。残りの20%は目視で確認しながら手作業で直してた。途中で嫌になりそうになったけど、なんとかやり遂げた。達成感だけはある。 以下は変更したところのメモ。 s/ \/>/>/g 置換してから元に戻すのが大変なことに気づいた。やらなくても良かったかなーとも思う。 シングル・カラムに変更し、サイドバーを撤廃 さすが
文書型宣言の意味 -- ごく簡単なHTMLの説明
所有者識別子 (OwnerID) 公開文書の所有者を示します。ISO（国際標準化機構）出版物*はその出版物番号を用います。JISなどの国家規格あるいは工業規格もしくはISO 9070に従って割り当てた所有者（登録所有者）の場合は先頭に+//を、それ以外の未登録所有者は先頭に-//を加えます。W3CはこのHTMLを策定したWorld Wide Web Consortiumを示します（HTML2.0だとIETFになります）。 公開文種別 (Public Text Class) 公開されている文書の内容を示します。この場合はDTDを公開しているわけです。必ず大文字でなければなりません。 公開文記述 (Public Text Description) 公開文書がどんなものであるかを記述します。この場合はHTMLのバージョン4.01のために公開している文書ということになります。 公開文言語 (Pub
Google、ODP情報を表示させないMETAタグのサポートを開始 ::SEM R (#SEMR)
Google、ODP情報を表示させないMETAタグのサポートを開始 Googleが検索結果にODP(DMOZ)情報を反映させないNOODPタグのサポートを開始した。 公開日時：2006年07月17日 17:29 米Googleが検索結果におけるWebページの見出しとスニペット（説明文）表示において、DMOZ (ODP, Open Directory Project)データを反映させなくするMETAタグ (NOODPタグ）のサポートを開始した。 GoogleがWebページの説明文を表示するルールは (1) KWIC (Webページの検索キーワード前後の文章を引用する）、(2) META Descriptionタグ内の記述、(3) DMOZで用いられている説明文の3種類に分類される。このうち (3) については、DMOZで記述されている説明文が不明確・適切ではない、古いなどの問題でウェブマスタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ALT or TITLE属性でテキスト改行表示する方法 - HTML
文書型宣言の読み方 | 鳩丸よもやま話