令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
東京五輪ボランティア応募サイトのコードがいかに酷いか - Togetter
リンク 東京2020大会ボランティア | 東京オリンピック・パラリンピック競技大会組織委員会 東京2020大会ボランティア 東京2020大会のボランティア活動についてご紹介します。 11 users 11076 池田 泰延 / ICS @clockmaker オリンピックのボランティア募集サイトが酷いと話題だったので、コードを見てみたら残念品質でした･･･ ・重複したid属性 ・javascript:void(0) ・まともに実装されてないWAI-ARIA （音声読上も酷い） ・body内にstyleタグが頻出 これらは一例。ちなみにReact製。 tokyo2020.org/jp/special/vol… pic.twitter.com/ed6TrpByy1 2018-09-27 14:50:01
「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人？ | HRナビ by リクルート
90年代後半から2000年代にウェブ制作を経験した者なら『とほほのWWW入門』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLやJavaScript、Ruby、Pythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはずだ。 2016年10月を最後に更新がされていないようだが、それでも20年間コンテンツを出し続けるのは、かなり大変なことだったのではないか。同サイトの管理人・杜甫々（とほほ）さんは、いったいどのような人物なのか。サイトを開設したきっかけやインターネット初期の空気感などについて、話を聞いた。 「とほほのWWW入門」管理人・杜甫々さんとは？ ――今回は取材に応じていただき、ありがとうございます。杜甫々さんは
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コーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
pelletkachels | blog over bedrijven en feitjes en de pelletkachel
Welkom bij Pelletkachels.nl, jouw ultieme bron voor alles wat met pelletkachels te maken heeft! Maar we zijn meer dan alleen een platform voor het bespreken van warmtebronnen. Bij Pelletkachels.nl geloven we dat het delen van kennis en ervaringen over bedrijven en gebeurtenissen ook essentieel is voor het creëren van een betrokken en geïnformeerde gemeenschap. In dit blog duiken we dieper in de we
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
2015年のWeb標準 | gihyo.jp
株式会社ミツエーリンクスの渡邉卓です。昨年の「2014年のWeb標準」と同様に、2015年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2015年のWeb標準については「より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加」「ECMAScript 6仕様の利用増加」「IE7・IE8 未サポートWebサイト増加」をキーワードとして取りあげます。 より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加 2014年10月28日、ついにHTML5がW3C勧告 (Recommendation) となりました。すでに多方面で利用されているHTML5仕様ですが、勧告になったことで、今まで利用を躊躇していた方々にも確実に浸透していくと予想できます。詳細は後述しますが、現役のWebブラウザでありながら
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
「blinkタグ」の開発者が明かすテキスト点滅タグが生まれた知られざる理由とは？
By Steven Martin 「blinkタグ」とはテキストを点滅させる効果を持つHTMLコマンドの1つで、多くの人々に最も嫌われるタグの1つとして知られています。Netscape Navigator 2.0に独自に実装されていたものですが、IEはもともとサポートしておらず、2013年にFifefoxがblinkタグのサポート廃止したこともあり、近頃は見かけることもなくなっています。そんなBlinkタグの発明者自らが、「なぜblinkタグを開発したのか？」というおもしろおかしな開発秘話を語っています。 the origin of the tag - www http://www.montulli.org/theoriginofthe%3Cblink%3Etag 1994年当時、ルーさんはNetscapeを設立したエンジニアの１人であり、現在のポピュラーなブラウザの先駆けとなったテキスト
プログラミング知らないHTMLコーダーがダメな理由
web業界にも様々な職種があり、最近では分業化も進んでるみたいだが、 だからって「自分はHTMLコーダーですから、プログラミングには興味ありません」は通用しない。 HTMLコーダーやデザイナーも、プログラミングは勿論サーバーやネットワークの知識を持つべき。 まぁデザイナーは別業界でもある程度潰しがきくかもしれない。 一番危ういのはHTMLコーダー。 HTMLコーダーって、HTMLしか書けない人が多い。 プログラミングは分からない、とか、勉強する気はない、とか言っちゃう人もいる。 HTMLなんて所詮静的なものだから、webっていう分野の中で見たときその重要度は最底辺である。 webは動的でこそ意味があるからね。 HTMLコーダーという職業が未だ成立しているのは、単にプログラマがHTML書くのが面倒くさいから。 そもそもHTMLなんて素人が一ヶ月本気で勉強すれば仕事になるレベル。 後はハックw
HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kなんとかの日記
デザイナーとプログラマーの間に優劣なんかない。あるのは役割の違いだけ。なのになんでHTMLコーダーとかデザイナーとかをバカにするプログラマーが多いのかサッパリわからない。 HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね。 web業界にも様々な職種があり、最近では分業化も進んでるみたいだが、 だからって「自分はHTMLコーダーですから、プログラミングには興味ありません」は通用しない。 HTMLコーダーやデザイナーも、プログラミングは勿論サーバーやネットワークの知識を持つべき。 まぁデザイナーは別業界でもある程度潰しがきくかもしれない。 プログラミング知らないHTMLコーダーがダメな理由 なんでやねん。なんのために仕事が分かれていると思ってんねん。デザイナーがサーバやネットワークを知らないといけないような状況って、プログラマーがクソなだけだろ。 そんないうんや
妻のパン屋のWebサイトを四苦HackしてIE対応した話 - give IT a try
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
SYNODOS JOURNAL : アップル vs. グーグル vs. フェイスブック ―― HTML5が切り開く未来 小林雅一
2012/7/39:0 アップル vs. グーグル vs. フェイスブック ―― HTML5が切り開く未来 小林雅一 フェイスブック（Facebook）は6月7日、App Centerの開始を発表した。ユーザーはトップ画面に表示されるメニューからアクセスし、ユーザーの関心事や過去のアクティビティをもとにパーソナライズされたアプリが紹介されるようになる。また、6月12日にはグーグル（Google）がChrome Web Storeにオフラインで使えるアプリ専用のコーナーを開設、ChromeがOSにまた一歩近づいたといわれている。 世界中に9億人のユーザーを持つ世界最大のSNS、フェイスブックが仕掛けるアプリの販売プラットフォームApp Center。あるいは、MacOSでもWindowsでもLinuxでも、Chromeが動いていれば共通のアプリケーションが実行できる、つまりはChromeのプ
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作で分からないことはすぐに確認！HTML5, CSS3, jQuery, WordPress, Bootstrapなどのチートシートのまとめ
スマートフォンブラウザ不具合特集
Components · Twitter Bootstrap
新人Webデザイナーに読ませたい、初心者向けの基礎を丁寧に解説している記事
