令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
4つの疑似セレクター:hover :active :focus :visitedの 挙動を理解して効果的に使おう！
2024/1/22 (更新日:2024/1/22) 4つの疑似セレクター:hover :active :focus :visitedの 挙動を理解して効果的に使おう！
【詳細版】Viteでコーダーのコーディング環境（HTML（ejsライク：ハンドルバー化）・Sass・JS）を作る - Web production note
※本記事はejsを利用していません。 代わりにHTMLファイルをejsと同等の機能を追加する（ハンドルバー化する）プラグイン vite-plugin-handlebars を利用しています。ejsは以下プラグイン vite-plugin-ejs を利用すると実装できるようです。 github.com GitHub – trapcodeio/vite-plugin-ejs: Vite: Use Ejs in your entypoints i.e index.html Vite: Use Ejs in your entypoints i.e index.html. Contribute to trapcodeio/vite-plugin-ejs …
イメージマップの作り方 ！HTMLで1画像内に複数リンクを設定 [ホームページ作成] All About
イメージマップの作り方 ！HTMLで1画像内に複数リンクを設定イメージマップの作り方をご紹介。1枚の画像内部に複数個のリンクを設定できるイメージマップ。画像1つを丸ごとリンクにするのではなく、画像内の一部分だけをリンクにしたり、画像の中の座標ごとに移動先の異なる複数のリンクを作ったりできます。HTMLのmap要素とarea要素を使って、画像内を円形や矩形など自由な形で区切るだけです。 イメージマップとは？ 座標を指定して画像の一部分だけをリンクにできる 画像1枚をまるごとリンクにするのではなく、画像の一部分だけをリンクにしたいと思ったことはありませんか？ また、1枚の画像のうち、場所によってリンク先を変えたい(＝1画像内に複数のリンク先を設定したい)と思ったことはないでしょうか？ HTMLのイメージマップ(クリッカブルマップ)という仕組みを使うと、座標を指定してリンク範囲を限定し、1画像内
![イメージマップの作り方 ！HTMLで1画像内に複数リンクを設定 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/776353dea615f594a76387cabf66729e1329f6d7/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F2%2F3%2Ftopimg_original.png)
【CSS】 <table>タグをCSS gridで実現する
<table>タグは表を表示するのに使うHTMLタグですが、表示のレイアウト挙動が独特です。例えばheightプロパティがmin-heightっぽく振る舞ったり、table-layoutプロパティの値をfixedにしないとwidthが効かなかったりと慣れが必要です。ほかにもcolspan属性やrowspan属性によってセルの結合ができるので、レイアウトがHTMLとも密接した関係があります。 かつてはページレイアウトに必須だった時代もある歴史のあるタグですが、現代においては少し使いづらい点があります。一方でCSS Gridが登場し、柔軟なグリッドレイアウトが可能になっています。 そこで<table>タグを利用しつつもCSS Gridでレイアウトを実現する方法を紹介します。 ▼実際のサンプル 以下のHTMLをもとに解説していきます。 <table> <thead> <th>見出し</th> <
#朝までマークアップ
「最終アンケート」はイベント全体に関してアンケートです。 アンケートのURLはDoorkeeperにログインし、日付の下に記載されているURLからリンクしているNotionに掲載しています。 YouTubeチャットにてURLはお知らせしません。 各時間にメールはお送りしません。 お問い合わせ 問い合わせはDoorkeeperのフォームからお送りください。 https://dtptransit.doorkeeper.jp/contact/new グッズ モンブランさんによるデザインの #朝までマークアップ のロゴ入りグッズ（22アイテム）をSUZURIで販売しています。 タイムテーブル 1時間ごと3組を「グループ」とし、AからHのグループに分けています。 PNG PDF PNG PDF PNG（1ページ目、2ページ目） PDF 書籍プレゼント 出演者や出版から書籍の提供をいただきました。 終
HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
div要素の正しい使い方
2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
H33: title 属性を用いて、リンクテキストを補足する | WCAG 2.0 達成方法集
C7: Using CSS to hide a portion of the link text | WAI | W3C