Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
htmlの属性 - とほほのWWW入門
HTMLのタグには color=red や size=5 などの 属性(attribute) を指定することができます。color の部分を 属性名、red の部分を 属性値 と呼びます。 <font color=red size=5>～</font> 大半の属性は「属性名=属性値」の形式ですが、<audio> の autoplay 属性の様に属性名のみを記述するものもあります。 <audio autoplay src="..."></audio> 属性名は大文字でも小文字でも構いません。属性値も多くの場合、大文字でも小文字でも構いませんが、たまに、大文字・小文字を区別する場合(target="_top" の _top など)がありますので、注意してください。 ○ <a href="xxx.html" target="_top">～</A> ○ <A HREF="xxx.html" TAR
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
templateタグをjQueryで操作しようとしたらハマった話 - Qiita
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> <script> if ('content' in document.createElement('template')) { var clone = $($('#productrow').html()); $('td', clone).eq(0).text('0384928528'); $('td', clone).eq(1).text('Acme Kidney Beans'); $('tbody').append(clone); } </script>
<header> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
template要素についてのお勉強 - Qiita
はじめに HTML5の新たな要素としてtemplate要素 <template> がありますが、これを使うと何が便利になり何が嬉しいのか。 自分が後で見返すためのメモとして書き記しておきます。 template要素って何さ template要素はブラウザ上では表示されず、主にJavaScriptによる操作がメインになる要素です。 名前からもわかるようにテンプレートとして使うコンテンツを中に書いてJavaScriptであれこれできるやつです。 <template id="template"> <p>これはテンプレートだよ</p> <p><img src="./this_is_template.jpg" alt="これはテンプレートだよ"></p> <div id="templateContent"></div> </template> template要素内のコンテンツは、JavaScrip
HTML フォームで 日付や時間を入力できるinput要素は datetime-local を使う
HTML5でフォームを作ると、inputに使える要素がとても多いので良いのだが、日付などを入力できる「datetime」とやらに悩まされたことがあったので、備忘録。 datetime の何に悩まされたのかまだ、html初心者の時代、日時入力項目を、カレンダーみたいなもの（date picker）を表示し、選択できるようにしたいと思っていたら、html5には、「datetime」ってのがあるのを知って、使ってみたんですね。 <input type="datetime"> てな感じで。 でもですね、カレンダー全然表示されないんです。 色々調べてみたら、Chrome、Firefox、IEとかでは使えないと。それはダメです。 datetime-localを使う基本的な使い方で、調査を進めてみると、「datetime-local」を使えば良いというのがわかりました。 <input type="dat
<input type="date"> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
HTML［map要素］イメージマップを定義する - TAG index
同時にid属性を指定する場合は、name属性とid属性の値は同一である必要があります。 イメージマップを使用することで、1つの画像内に複数のリンク領域を設定できるようになります。 次の例では、四角、丸、三角の図形と、それ以外の領域の部分にリンクが設定されています。 古いブラウザでは、それ以外の領域に設定されたリンクが機能しない場合があります。 イメージマップ作成の流れ イメージマップは、画像を埋め込むimg要素、マップを定義するmap要素、リンク領域を設定するarea要素、この3種類の要素で構成されています。 まず、イメージマップに使用する画像を用意して、それをimg要素で埋め込みます。 <img src="menu.gif" alt="メニュー"> map要素に name="" を追加して、任意のマップ名を指定します。次の例では map という名前を指定しています。（他のマップ名と重複し
<input type="number"> - HTML: ハイパーテキストマークアップ言語 | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
フリガナ自動適用スクリプト Ruby AutoApply - profaim.jp
１．ウェブページにルビを振ろう １−１．難しい漢字や専門用語。ルビがあるだけでだいぶ違う。 ウェブページを記述する HTML にはルビを振るためのタグがあります。<ruby>や<rb>や<rt>や<rp>…。１つの単語にルビを振るだけでこれら全てのタグを使わなくてはなりません。これが慣れてきてもけっこう面倒だったりします。 ２．ウェブページに後からルビを振るライブラリ作りました。 profaim Ruby AutoApply スクリプト ルビを振りたいウェブページに Ruby AutoApply の JavaScript をリンクして１メソッドを呼び出し。後はルビの定義をメタタグでページ内に埋め込むか、外部ファイルとして配置しておけば、ルビの定義を解析してその語が一番最初に登場したタイミングで自動的にルビを振ってくれます。このページでもルビを振っています。ご覧のブラウザがルビに対応していれ
Rマーク（登録商標）とコピーライト（著作権記号）をHTMLで表す - Rollpie
Rマーク（登録商標）とトレードマークはHTMLで次のように表します。 Rマーク： 記号 ® 実体参照 ® 数値参照 ® トレードマーク： 記号 ™ 実体参照 ™ 数値参照 ™ セミコロンもつきます。 出力例 ® ® ™ ™ アンド記号とセミコロンの間に reg や trade を入れると記号が出力されます。数値参照ではアンドにシャープを続けます。 著作権記号（コピーライト） コピーライト（著作権記号）はHTMLで次のように表します。 記号 © 実体参照 &copy; 数値参照 &#169; セミコロンもつきます。ページUTF8に設定している場合、実体参照で記述する必要はありません。そのまま直打ちで©と入力しても表すことができます。 参考 2019年に学ぶべきプログラミング言語まとめ（web系） 学生の時からプログラミン
多様なフォーマットに対応！ドキュメント変換ツールPandocを知ろう - Qiita
追記（2020.4.19） Pandoc User’s Guideを日本語に全訳しました。 よろしければご参照ください。 新しい翻訳をプレリリースしました！（翻訳途中の部分もあります） Pandocユーザーズガイド 日本語版 [2.7.2] — 日本Pandocユーザ会 2019.02.21 ドキュメント 旧日本語版：Pandoc ユーザーズガイド 日本語版 はじめに 今回は、ドキュメント作成Tips Advent Calendar 2012の1日目 （マインドマップから全てを紡ぎ出す - XMind+Pandocのドキュメント作成術 -） で少し紹介したPandocというツールについて、もう少し深く掘り下げて紹介したいと思います。 MarkdownとかreStructuredTextとか、流行ってますよね いわゆる軽量マークアップ言語が最近流行しています。特にMarkdownは猫も杓子も
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
基本的な動作方法
赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名 前のページ 読み込み時に動作 <script>タグ内にJavaScriptの命令を書き込むことで、ページの読み込みと同時に実行されます。 <script type="text/javascript"> <!-- （ここにスクリプトを記述） //--> </script> 使用例 <script type="text/javascript"> <!-- document.getElementById("text").innerHTML = "ようこそ私のページへ"; //--> </script> リンクをクリック（直接記述） <a>タグ内にスクリプトを直接記述します。 hrefには通常URLを記述しますが、「javascript:」から記述を始めることでJavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLタグ/テキスト・フォントタグ/強調を示す - TAG index
formのinput valueを配列で受け取りたい場合のname属性 - Qiita
emタグとは｜コーディングのプロが作るHTMLタグ辞典
felicyle.com
HTML：tableの横幅をtdの横幅に依存させたい