令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
電話番号にリンクが自動で付くのを防ぐ方法
2017/06/22 スマホのブラウザは、電話番号に自動で電話をかけるリンクを付けます。また、連続した数字を電話番号だと誤認識してリンクを貼ってしまいます。この余計な機能を無効にするには、専用のmeta要素を追加します。 サンプルコードname属性に"format-detection"、content属性に"telephone=no"を指定したmeta要素を用意しましょう。 <meta name="format-detection" content="telephone=no">デモデモは、iPhoneなどでご確認下さい。 リンクを付けない <!-- このコードは編集できます。 --> <!DOCTYPE html> <html> <head> <meta name="format-detection" content="telephone=no"> </head> <body> <p>電
HTML目次 | TechMemo
HTMLを勉強したい！でも何から始めればいいかわからない・・・という方のための記事を掲載しています。よく習うより慣れろと言いますが、慣れるためにも最低限の知識は必要だと考えています。基礎知識を頭に入れずに慣れようとした時と基礎知識を頭に入れてから慣れようとした時では、後者の方が慣れるまでの時間も短くなるでしょう。予備知識が全くない方でも理解できるよう簡潔でわかりやすい記事になるよう心掛けます。 iOSでinputやtextareaにフォーカスした際に画面が自動でズームしてしまうのを回避する方法videoタグによる埋め込み動画がiPhoneでのみ表示されない時の対処法Google Chrome 75からサポート予定のloading属性による画像やiframeの遅延読み込みを実装する方法スマートフォンのブラウザでツールバーの色を変更する方法ブラウザによる電話番号への自動リンクを無効化する方法P
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
ＨＴＭＬの基本－HTMLの書式の基本
HTML は要素と属性からできている HTML 文書の基本構造 HTMLは要素で構成されている 適切な要素選択 属性と属性値 HTML 文書の基本構造 HTML文書は、後述するDOCTYPE 宣言と head 要素と body 要素からなる html 要素で構成されます。 ヘッド (head) 要素 ヘッド （head 要素） とは文書に関する情報 （タイトル、関連ページなど） を記述した部分で、本にたとえると、本の表紙カバーに書かれた本の名前や裏カバーの著者のプロファイルなどです。この部分はメタ情報と呼び、省略することもできますが、title 要素だけは省略できません。 ボディ (body) 要素 ボディ （body 要素） が文書の本文です。HTML文書をブラウザで見たときに、ウインドウに表示させたい部分を body 要素内に記述します。 HTML文書の記述手順は、まず全体を html
ここにブログの名前を入れます
文章を書いた時に、補足となる説明が必要だったとします。こんな風に→（＊注１） 補足説明を文中に書くと、長くなって文章が散漫になってしまったりするかもしれません。また、ドラえもん（＊注２）のように、多くの人が知っているけど、知らない人がいる場合に備えて注釈を入れるなどという場合もあります。 実際に（＊注１）か（＊注２）をクリックすると、この記事の最後の注釈に飛びます。今回は、Wikiのように、記事の最後に注釈をまとめて書いておき、記事中から、そこへリンクを張る方法です。 リンクを張る実例 ページの途中へのリンクの張り方は、以前の記事に詳しく書いています。ですので、理屈の説明は省略します。今回は実例のみの説明です。
『記事内の一部の文章を枠で囲み、記事にメリハリを出す方法（エディタ編）』
アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！カスタマイズ,アクセスアップ,カスタム,スキン,依頼,料金,スキン作成,スキンのデザイン,オリジナル,CSSの編集,HTML,JavaScript,ヘッダー,ヘッダーデザイン,広告,非表示,フリープラグイン,フリースペース,メッセージボード,改造,オリジナルデザイン 長い文章を書く場合に、文字数が多くなって強調したい部分が分かりづらかったり、 メリハリがなく読者が読みづらかったりします。 そこで、画像を挟んだりするのもメリハリを出すには良い方法ですが、 大切で読んで欲しい文章や、強調したい文章を枠で囲ったりするのも、 メリハリを出し、読者を飽きさせない良い方法です CSSに書く方法もありますが、今回はエディタに直接タグを書く方法を説明しますね。 【エディタ貼り付け用タグ】 グレー実線枠
pekebatu.com - このウェブサイトは販売用です！ - ナチュラルハーベスト ナチュラルバランス ナチュラルチョイス ペット リソースおよび情報
このウェブサイトは販売用です！ pekebatu.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、pekebatu.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
引用や参照などでCSSやPタグを使わず"HTMLタグ"blockquote"のstyle指定する方法 - 世界四季報
ブログを書いていていつも引用など"blockquote"タグを使うときに枠線や背景を指定したいと思って調べてみたら、ブログの玉手箱さんのところで紹介されていました。備忘録も兼ねてますので完コピですみませんm(_ _)m <以下転載> 背景色をつけるだけなら、background-color属性で <blockquote style="background-color:#e1f6dd;">背景色をつける</blockquote> 背景色の上下左右に余白をつけたいなら、padding属性で <blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;">背景色の上下左右に余白をつける</blockquote> 背景色の周りに線をつけたいなら、border属性で <blockquote style="backgr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】
【HTMLタグの簡単検索】TAG index - ホームページ作成情報