令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
ボタンには常にtype="button"をつけよう
結論 ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。 なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンは すべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。 そしてデフォルトのtype属性の値はsubmitです。 つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。 起こった問題 予想外の挙動をするパターン1 以下は郵便番号と住所を入力するシンプルなフォームです。 郵便
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita
はじめに デジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。 ということでhtml/cssに落とし込んでみました。 注意事項 趣味程度に作ったものを、使いたい人がいればどうぞというものです。 細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。 大変つかれましたので、厳しいコメントは受け付けません。 気が向いたら、もう少しきれいにするかもしれません。 ソースコード 以下、に載せています。 完成概要 ページとしてはこんな感じ
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
スマートフォンはセンサーの塊！ たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり) – ICS MEDIA
ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識 7月9日公開岩間 日菜♥ 18
綺麗な数式をHTMLで出力する方法 - awacio.log
SICP解いてて、たまに数式を書かなきゃならない時があるんだが、特に何も疑問に思わずそれっぽく見えればいいや的な感じでゴリゴリ書いてた。 で、ふと「それこそTexみたいな綺麗な数式を出力できるサービスがあるんじゃね？と思って調べてみたらあった。 以下で紹介するサービス群は、全てLaTexフォーマットの記述で表示ができるとのこと。 ちなみに使用したTeXコードはこんな感じ。 x^2 + y^2 = z^2 e^{i\pi} = -1 f(x)=\int_0^{x}g(t)\,dt \iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)} \displaystyle \iota(f,z_{0})=\frac{1}{2 \pi i}\oint\frac{dz}{z_{0}-f(z)}※2014/04/22 匿名さんからのコメントで、「\
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Webページを速く見せるための5つのちょっとした工夫（1/3） - ＠IT
株式会社ライブドア マークアップエンジニア 浜 俊太朗 2009/4/30 ページ表示高速化をサーバの設定だけに任せていませんか？ HTMLやCSS、JavaScriptの書き方でも速くできます（編集部） 連載第1回の「Webサイトを“速く”表示させる7つの計測ポイント」では、YSlowを使って速度に関する問題を調査しました。 今回は、CSS・JavaScript・HTMLの工夫で速度を改善する下記5つの方法を紹介します。中にはYSlowの指摘に含まれないものもありますが、併せてチェックしていきましょう。 CSSはソースコードの上部に記述する JavaScriptはソースコードの下部に記述する CSSとJavaScriptを書く順番 JavaScriptを圧縮して読み込みを速くする 読み込みが遅いブログパーツには要注意 【1】CSSはソースコードの上部に記述する 連載第1回では、「CSSは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
Jade Syntax
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使ってみた | Chibiの覚え書き