令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
How To Center a Div • Josh W. Comeau
First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. I could constrain the width with a fixed value (eg. 200px), but really what I want in this case is for the element to shrinkwrap around its content. fit-content is a magical value that does exactly this.
Sign-in form best practices | Articles | web.dev
If users ever need to sign in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress. Poorly designed sign-in forms get high bounce rates. Each bounce could mean a lost and disgruntled user—not just a missed sign-in opportunity. Here is an example of a simple sign-in form that demonstrates all of the b
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました
見ているサイト上に露出している機密情報(APIトークン、IPアドレスなど)を見つけるブラウザ拡張を作りました SecretlintというAPIトークンなどの機密情報がファイル内に含まれているかをチェックできるツールを書いています。 Secretlintはコマンドラインツールとして動くので、主にCIやGitのpre-commit hookを利用して、リポジトリに機密情報が入るのを防止できます。 SecretlintでAPIトークンや秘密鍵などのコミットを防止する | Web Scratch 一方で、実際のウェブサービスなどは機密情報がファイルにハードコードされているわけではなく(Secrelint自体がこういうハードコードを防ぐツールです)、環境変数やDatabaseに保存していると思います。 このような場合にも、コードのミスなどによって公開するべきではない情報(秘密鍵、APIトークン、Sl
今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景
【変更履歴 2018年2月15日】当初の記事タイトルは「いまなぜHTTPS化なのか？ 技術者が知っておきたいSEOよりずっと大切なこと ― TLSの歴史と技術背景」でしたが、現行のものに変更しました。現在GoogleではWebサイトのHTTPS対応と検索結果の関係を強調しておらず、本記事の趣旨の一つにも本来は独立した問題であるSEOとHTTPS化を関連付けるという根強い誤解を解くことがありますが、当初のタイトルではかえってSEOとHTTPSを関連付けて読まれるおそれがあり、また同様の指摘もいただいたことから変更いたしました。 HTTPとHTTPSは、共にTCP通信上で動作します。したがって、いずれもTCPハンドシェイクで通信を開始します。 HTTP通信の場合には、このTCPハンドシェイク直後に、HTTPリクエストとレスポンスのやり取りが始まります。このHTTPのやり取りは平文通信であり、途
子どもがいる家庭で使うRaspberryPi＆Slack
皆さんRaspberry Pi使ってますか？買ったけど使いみちが無くてほったからかしと言う方も多いのでは無いでしょうか。今回は、幼稚園～小学生くらいのお子様がいる家庭のリビングで使うRaspberry Pi（+ちょっとだけSlack）と言う内容です。電子工作はありません。 この記事は、家庭を支える技術 Advent Calendar 2016 – Adventar の13日目の記事として書きました。 色んな問題点 最近、子供が成長し写真や家族写真を撮らなくなった RasPi内の音楽再生をスマホで操作するのが面倒くさい 学校に出る時間など子どものルーチン的な事に関して毎日言うのが面倒 子どもに直接注意するのはエネルギー使う（宿題やったの？とか、自分の物くらい片付けて欲しいとか） 今日の予定や何ゴミかなど、スケジュールをいちいちスマホで見るのが面倒 と言うことで… 家ではこんな感じで使ってます
実はFiddlerがすごすぎたので、機能まとめ紹介
今までFiddlerをただのセッションの中身を確認できるLocal Proxyとしてしか見ていなかったのですが 改めて良く調べると色々できることが多すぎると判明。感動したので便利な機能をまとめてみました。 先に簡単に説明しておくと、FiddlerはMicrosoftが無料で配布しているWeb Debugging Proxyです。 Windows環境にインストールして、ブラウザとサーバの間の通信を読んだり操作したりできます。 配布サイトはこちら。 Fiddler Web Debugger – A free web debugging tool 動作環境は「Windows 2000 / XP / 2003 / Vista with Microsoft .NET Framework v2.0 or later」 今回使ったバージョンは、2009年9月10日時点で最新の安定版、2.2.4.6。 と
アイデアを大量生産できる最強のフレームワーク「オズボーンのチェックリスト」 | お土産屋さんブログ
若かりし頃、上司から「アイデアを出せ」「次の会議までにアイデアを考えておけ」と言われ、 そのたびに「またアイデアかよ・・・。」「全然思いつかない・・・。」と悩んだものです。 アイデア本を片っ端から読んで試してみましたが、そう簡単にはアイデアは出ないもので、上司へのアイデア報告は大変苦痛だったことを思い出します。 そんな当時の自分に「オズボーンのチェックリスト」を教えることができれば、ずいぶん状況は変わっていたのではないかと思います。 「オズボーンのチェックリスト」は、「入れ替えてみたら」「大きくしてみたら」「逆にしてみたら」などと、１つのお題からアイデアを大量生産することができるフレームワークです。 アイデア出しに困っている方、ぜひ「オズボーンのチェックリスト」を試してみてください。 「オズボーンのチェックリスト」は、どんなツールなのか？ ９つの視点から、アイデアを発想できるツールです。
久里浜アルコール症センター｜ネット依存治療部門（TIAR）
独立行政法人 国立病院機構 久里浜アルコール症センター特徴 長年の依存症治療の実績にもとづく治療 エビデンスにもとづく治療の提供 家族の相談にも応じる体制 研究や最新情報収集に取りくむ ネット依存治療研究部門（TREATMENT OF INTERNET ADDICTION AND RESEARCH）について 近年のインターネットの普及、およびそのサービスの発展はいちじるしく、わが国でもインターネット嗜癖（本治療研究部門では一般的な「ネット依存」という用語を使います）におちいる人々の増加がけねんされています。我々の2008年の調査によると、20歳以上でネット依存が疑われる者は全国で270万人にのぼることが推計されました。となりの韓国や中国では長時間連続してオンラインゲームを利用して死亡する事故も起きており、大きな社会問題になっています。アメリカでもインターネットに長時間をついやすことから離婚
ログインしてください：日経クロステック（xTECH）
会員限定サービスです 有料会員（月額プラン）は初月無料！ お申し込み 会員の方はこちら ログイン 日経クロステック TOPページ
Twitterに考えさせられること | I AM BLOGGING NOW.
無意味な発言の集合体。不完全なメディア。社会に何も貢献していない。にも関わらず熱狂的なユーザーを獲得し続けているTwitterには最近いろいろと考えさせられることがあります。Twitterの登場による情報伝達の高速化、断片化、編集作業の不要化、そしてリアルタイムの楽しさ。WEBは従来のメディアに更なる打撃を与えるのか？そして情報コンテンツはWEBというプラットフォームでどのように変わっていくのか？Twitterはただの一時的なブームではなくコミュニケーションを変化させる歴史上のマイルストーンなのかもしれません。 まずTwitterに関心した事は障害（バリア）の無さでした。技術的にも精神的にもなんの抵抗も無く情報を発信し、他人との繋がりを作る事ができます。プライベートでも無く、完全にオープンでも無く、メッセージは確実に届くけど、そこまで重要ではない。あらゆるコミュニケーションの煩わしさを上手
マイクロソフトが「IE 6」と決別できない理由
Microsoftが「Internet Explorer 6（IE 6）」をリリースしてから、およそ8年になる。しかし同社は、いろいろな意味で、この古びた製品にいまだしばりつけられている。 Microsoftはここ数年で「Internet Explorer」のメジャーバージョンを2度リリースしたが、多くの人にとってIEの顔となっているのは、いまだに、タブのない誉れ高きIE 6だ。 その主な理由は、IEユーザーの多くが、OSに付属しているブラウザを変えない傾向があるということだ。それは、そのようなタイプの消費者であるからという場合もあるし、仕事用のPCを使っていて、IEの新しいバージョンにアップグレードしたりほかのブラウザに乗り換えたりすることができないからという場合もある。 IE担当ゼネラルマネージャーのAmy Barzdukas氏は先週のインタビューで、Microsoftは「8年前あるい
「サイトの横幅」再論：950px時代のウェブデザイン［絵文録ことのは］2009/01/14
以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増
高木浩光＠自宅の日記 - CSRF対策に「ワンタイムトークン」方式を推奨しない理由
水色の四角は画面を表し、白抜き実線枠の四角はボタンを表す。 これを、Webアプリという実装手法を選択する場合に特化すると、図2のような遷移図が描ける。 実線矢印はブラウザが送信するHTTPのrequest（ヘッダおよび、POSTの場合はボディを含む）を表し、黄色の丸がサーバ側での1アクセスの処理を表し、点線がその処理結果を返すHTTPのresponse（ヘッダおよび、HTML）を表す。responseの上の文はHTMLの内容を説明するものである。黄色の丸の中の文は処理内容の説明であり、ここから複数のresponse矢印が出ている場合、処理の結果によって遷移先の画面が異なる場合であることを表し、破線の白抜き四角がその分岐の条件を概説している。 この図で例に用いているのは、ECサイトやblogサービスなどに見られる典型的な「登録個人情報変更」の機能である。「メインメニュー」画面の「登録情報変更
高木浩光＠自宅の日記 - クロスサイトリクエストフォージェリ（CSRF）の正しい対策方法
■ クロスサイトリクエストフォージェリ（CSRF）の正しい対策方法 「クロスサイトリクエストフォージェリ」がにわかに注目を集めている。古く から存在したこの問題がなぜ今まであまり注目されてこなかったかについて考 えているところだが、引越しやら転勤やらでいまひとつ日記を書く時間がない。 しかし、 @ITの記事などのように混乱させる解説も散見されるので、一点だけ対策 方法について書いておくとする。 クロスサイトリクエストフォージェリ——Cross-Site Request Forgeries (CSRF)を防止する簡潔で自然な解決策は以下のとおりである。 前提 ログインしていないWeb閲覧者に対するCSRF攻撃（掲示板荒らしや、ユーザ登 録を他人にさせる等、サイト運営者に対する業務妨害行為）はここでは対象と しない。 ログイン機能を持つWebアプリケーションの場合、何らかの方法でセッション 追
おさかなラボ - CSRF対策法と効果
自分でもう一度整理するために、他のサイトに倣って現在挙げられているCSRF対策法とその効果を列挙してみる。ざっと書いたので多分ツッコミどころ満載だと思うがとりあえず公開。現在思いつく最善解は一番下に書いた。あとは順不同。 POSTを用いる 推奨: とりあえず 効果: あり 回避法: あり(Javascriptによる自動Submitなど) 実装: 簡易 副作用: なし 確かにPOSTでのCSRFを破る手法は存在するが、だからといってこの対策に全く効果がないわけではない。完了画面への直接リンクでのCSRFの発生は抑制できる。実装が簡単な上、副作用が特にないので実装しておいて別に損はない。 リファラ(Referer: ヘッダ)をチェックする 推奨: ケースバイケース 効果: 大 回避法: 特になし 実装: やや難(コードに汎用性を持たせるのが難しい) 副作用: ブラウザ
@IT: 「ぼくはまちちゃん」 ――知られざるCSRF攻撃
ある日、大手SNS（Social Networking Site）のmixiの日記にこのような書き込みがあった。それも1人だけでなく、同日に数多くのユーザーの日記に同じ文面が掲載されていた。 これは、単にこのような文章がはやり、ユーザー自身が意図して掲載したのではなく、ある仕掛けによってユーザー自身が気付かないうちに引き起こされた現象なのである。その仕掛けとは、CSRF（Cross-Site Request Forgeries）と呼ばれる攻撃手法の一種だ。 編集部注： 現在、「はまちちゃん」トラップは、mixi運営者により対策されています。上記のサンプルは、mixi風に再構成したものです。 本稿の内容を検証する場合は、必ず影響を及ぼさない限られた環境下で行って下さい。また、本稿を利用した行為による問題に関しましては、筆者およびアイティメディア株式会社は一切責任を負いかねます。ご了承ください
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ログイン - Yahoo! JAPAN