[B! html] yahihiのブックマーク

令和のHTML / CSS / JavaScriptの書き方50選

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。そこで今回は﹁2024年のWeb制作ではこのようにコードを書いてほしい！﹂という内容をまとめました。質より量で、まずは﹁こんな書き方があるんだ﹂をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

yahihi 2024/05/15

リンク

ボタンには常に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以下は郵便番号と住所を入力するシンプルなフォームです。郵便

yahihi 2023/08/12

html

リンク

便利なのが登場！最近見かけるさまざまな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

yahihi 2023/01/18

html
css

リンク

デジタル庁公開のデザインをhtml/cssに落とし込んでみた。 - Qiita

はじめにデジタル庁が公開したデザインシステムがよさそうなデザインでしたので、適当に遊ぼうかと思いました。 html/cssで公開してくれればすぐに使いやすいと思ったんですが、どうやらFigmaでしか配っていない。。ということでhtml/cssに落とし込んでみました。注意事項趣味程度に作ったものを、使いたい人がいればどうぞというものです。細かい部分は間違っていることもあるかと思います。(ラジオボタン難しかったので、何とか再現した感じです。) 自分用に目的もなくつくっていましたので、命名等のポリシーもめちゃくちゃです。許してください。大変つかれましたので、厳しいコメントは受け付けません。気が向いたら、もう少しきれいにするかもしれません。ソースコード以下、に載せています。完成概要ページとしてはこんな感じ

yahihi 2022/11/15

リンク

よく見かけるレイアウト・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

yahihi 2021/02/19

css
html

リンク

スマートフォンはセンサーの塊！たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり) – ICS MEDIA

ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識 7月9日公開岩間日菜♥ 18

yahihi 2018/06/21

リンク

綺麗な数式を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 匿名さんからのコメントで、﹁\

yahihi 2018/05/14

html
Web

リンク

re-dzine.net situs togel online toto 2023 -

By penulis • January 10, 2023 • comments off Sebelum langsung ke poin utama yaitu mengenai trik rahasia main togel online yang beneran udah terbukti gacor buat hasilkan kemenangan, kalian yang mungkin masih berstatus pemula di game…

yahihi 2012/05/09

html

リンク

これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久

※2012-04-07　セキュリティ面の問題に関して追記しました。今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる︵可能性を秘めた︶、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。たとえば、この状態から、名前や住所などの標準的な項目が、一気に自動入力されます。どうでしょう。こうした機能をサイトに設けられたら、フォームの

yahihi 2012/04/04

html

リンク

Jade Syntax

Jade Syntax Jade is the daddy of HTML template engines for Scala Like Haml and Scaml, Jade uses whitespace indentation to represent nested markup blocks. HTML Elements The common case in Jade is a line starts with an element name followed by a space and any text content to put in the element.

yahihi 2011/12/26

jade
html

リンク

めんどうな作業がわずか数秒に！新人デザイナーが知らないと一生後悔するExcelを使ったHTML生成

お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let'sExcel1)

yahihi 2011/12/09

これは捗る！

リンク

Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。

デザイナー向けのチートシートまとめカラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。使いたい色を直感的に選んで、その色のコードを調べることができます。オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。拡大するとそれぞれのカラーのコードがわかります。色彩バランスを把握しやすいので、デザイン時に重宝します。ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。かなり詳細にまとめられているので、辞書のように使うこともできます。印刷して参照するのが向いているので、すぐに確認で

yahihi 2011/09/15

リンク

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を使ってみた | Chibiの覚え書き

yahihi 2011/03/09

リンク

もう、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

yahihi 2010/06/11

リンク

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は

yahihi 2009/05/07

リンク

はてなブックマーク

タグ

関連タグで絞り込む (21)

htmlに関するyahihiのブックマーク (15)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス