現役Webクリエイターたちが手掛けるサイト、ウェブ業界の常識から知らなかったことまで全てご紹介します。デザインからマーケティングまで全てご紹介。わからないことはすべてJAM25でスッキリ解決!
【CSS3】BackgroundプロパティでWebPを使う方法
CSSでは分岐という概念がなく、pictureタグも使用できないため、jsプラグイン「Modernizr」を使っての分岐方法についてをご紹介!
【SEO効果あり】WordPressをWebPに対応させよう!
もっとも身近なものの改善でSEO効果を得れる可能性のあるWebPについて解説。WebPはGoogleが開発した画像フォーマットで、最大の特徴は「綺麗な画質のに軽い」ということです。Webサイトなどで一
aタグ(アンカーリンクタグ)はHTMLで作られたウェブサイトでは必ず使われているタグであり、ページ内のリンクから「他のページへ移動する」「アプリを起動する」など、さまざまなことができるようになります。
Web制作に携わっている人でも「formタグやinputタグの使い方がイマイチわからない。」という方、意外と多いと思います。フォームを機能させるためには、PHPなどといったサーバー(データベース)を操
Web制作に携わっている人でも「formタグやinputタグの使い方がイマイチわからない。」という方、意外と多いと思います。フォームを機能させるためには、PHPなどといったサーバー(データベース)を操
sectionタグはHTML5で登場した新しいタグであり、言葉の通り「節」や「章」という意味を持ちます。また、sectionタグを使用する場合、必ずh1~h6といった見出しタグを挿入するのがルールとな
brタグを正しい使い方、ちゃんと理解していますか?brタグの分岐方法からpタグとの使い分けについてを徹底的に解説!スマホで閲覧するユーザーのためにUIの改善、見直しを行いましょう!
brタグを正しい使い方、ちゃんと理解していますか?brタグの分岐方法からpタグとの使い分けについてを徹底的に解説!スマホで閲覧するユーザーのためにUIの改善、見直しを行いましょう!
CSSで色付けする方法について解説します。HTMLカラーとは何なのか、テキスト色、背景色、ボックス色、背景の一部に色を付ける方法、枠線、下線などなど徹底解説していきます。
WordPressプラグイン「Site Kit by Google」が正式リリースしたので使ってみた
GoogleがWordPressプラグイン Site Kitを正式リリース。SEO対策に欠かせないGoogleアナリティクス、サーチコンソールのみならずPage Speed InsightがWordP
【CSS】paddingとmarginの余白の指定方法の違い
CSSの余白調整方法の一つであるpaddingとmarginについて、ボックスモデルの余白の考え方から、paddingとmarginの基本の使い方、コーディング時のテクニックまで解説します。混同しやす
CSS(Cascading Style Sheets)とはWebサイトをデザインするためのマークアップ言語です。 皆さんが普段閲覧されるWebサイトは、基本HTML・CSS・JavaScriptなどの言語を組み合わせて構築されています。
【Google推奨】WordPressをアクセス解析もできるPWAに対応させよう!
ここではものの数分でWordPressをPWAに対応させる方法をご紹介!アクセス解析の設定方法まで画像付きで分かりやすく解説しています。
PHPの配列・連想配列の使い方はご存知ですか?配列の記述法から「foreach」を使った繰り返し処理までを紹介しています。配列・連想配列について網羅的に理解したい方は是非ご覧ください!
objectはapplet、embed、bgsound、imgなどに代わりJavaアプレットやマルチメディアリソースなどをページ上に貼り付ける際に使用します。パラメータ制御にはparamを使用します。
【HTML5】templateタグとは?使い方についてまとめ
template要素は、スクリプトで利用される要素のテンプレートを定義する際に使用します。ページを表示した際はtemplate要素内に記述した内容は表示されません。
htmlはHyperText Markup Language の略です。HTML文書であることを指定するためのタグです。
【HTML5】noscriptタグとは?使い方についてまとめ
noscript要素はscript要素に対応していないブラウザへのメッセージを表示させるために使用します。
canvasは図形を描画するためのキャンバスをサポートします。canvas要素内の領域にJavaScriptを用いて線や画像を表示します。
trackはaudio要素やvideo要素に対して字幕や時間指定されたテキストトラック(字幕など)を指定できます。
outputはform内で計算結果を表示する要素です。Webサイトやアプリなどで計算結果をする際に使用します。
【HTML5】progressタグとは?使い方についてまとめ
progress要素はHTMLでプログレスバーを作成することができます。主にHTMLで進捗表などを作成するときに使用できます。
【HTML5】progressタグとは?使い方についてまとめ
progress要素はHTMLでプログレスバーを作成することができます。主にHTMLで進捗表などを作成するときに使用できます。
【HTML5】datalistタグとは?使い方についてまとめ
datalistはoption要素と組み合わせて入力項目の選択肢を定義します。「input要素のlabel属性」と、「datalist要素のid属性」で両者を結び付けます。datalist付き input要素は、入力と選択の両方が利用できます。
button要素は、クリックできるボタンを表示させる要素です。フォームに限らず、文書内のあらゆる場所で使用できます。ボタンの見た目はCSSで変更可能です。
【HTML5】textareaタグとは?使い方についてまとめ
textarea要素は複数行のテキスト入力欄を表示するための要素です。レビューのコメントやお問い合わせフォームなど、大量のテキストを入力する際に使用します。
【HTML5】textareaタグとは?使い方についてまとめ
textarea要素は複数行のテキスト入力欄を表示するための要素です。レビューのコメントやお問い合わせフォームなど、大量のテキストを入力する際に使用します。
input要素は、formタグで作成したフォームの中で、ユーザーからのデータを受け取るためのテキスト入力や実行ボタンなどのフォーム部品を表示します。type属性の値によって様々なデータ入力フォームを表示可能です。
【HTML5】fieldsetタグとは?使い方についてまとめ
fieldset要素はformで定義するフォーム部品をグループ化します。fieldset要素内のlegend要素でグループのキャプション(タイトル)を記述することができます。
【HTML5】optgroupタグとは?使い方についてまとめ
optgroupに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字
optionに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字 st
area要素はmap要素と組み合わせて使用します。また、この要素はmap要素内のみで使用できます。詳細は を参照してください。
scriptは主にJavaScriptなどを実行するために使用される要素です。他にも、VBScriptなどの別のスクリプトも実行可能です。
paramはobject要素の引数を定義します。
labelは、フォームの中で、フォーム部品とラベルを関係付けるために用います。ブラウザでラベルをクリックした時や、ラベルのアクセスキーを押した時に、テキスト入力欄がアクティブになったり、読み上げソフトがラベルを読み上げたりといった利点があります。
mapはイメージマップを定義する要素です。イメージマップとはひとつの画像上のクリックする場所によって別のリンク先に遷移するイメージのことです。
selectに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字 st
selectに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字 st
menuはユーザーが実行またはアクティブ化可能なコマンドのグループを表します。リストメニューやボタンを押したときにボタン下部に現れるようなコンテキストメニューを表せます。li要素と組み合わせてコンテキストメニューを表します。
meter要素は測定値を表します。max属性に最大値、vlue属性に現在値を記述することで棒グラフなどで表します。
formとは、フォーム関連の要素をとりまとめ、ユーザーが入力・選択したデータをサーバーに送信する要素です。
summary要素はdetails要素の概要を表します。summary要素をクリックすると親要素であるdetails要素の開閉状態を切り替えることができます。
detailsは折りたたみウィジェットを作成します。普段は非表示ですが、クリックすると(openになると)、詳細表示されるものです。概要やラベルはsummary要素で表します。
addressはWebサイトを運営している個人、団体、組織の情報を表します。住所やメールアドレス、電話番号などを記述します。
legendに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字 st
footerは直近のセクショニングルート(body, blockquote, fieldset, td)、またはセクショニングコンテンツ(article, aside, nav, section)のフッターを表します。フッターには、作者、関連文書へのリンク、著作権情報などが含まれます。
headerは導入的なコンテンツを表します。例えば導入部やナビゲーション等のグループです。見出し要素だけでなく、ロゴ、検索フォームやその他の要素を含められます。
asideはHTML文書内のメインコンテンツと間接的な関係を持つ独立したセクションを表します。広告や各種リンクなどを含むサイドバーに使用されます。
hはheading(見出し)の意味です。セクションの見出しをh1からh6までの6段階で表します。h1が一番大きな見出し、h6が一番小さな見出しとなります。
navは現在のページ内の他の部分や別ページへのナビゲーションリンクへ遷移するためのセクションを表します。ナビゲーションセクションの代表的な例はメニュー、目次、索引などです。
articleは自己完結型のコンテンツを表します。例えば、フォーラムへの投稿、雑誌・新聞・ブログなどの記事、記事へのユーザーコメント、インタラクティブなウィジェットやガジェットなどが挙げられます。
sourceはvideoやaudioやpictureの子要素として使用し、複数のメディアソースを指定します。
videoは映像再生に対応するメディアプレイヤーを埋め込みます。ブラウザによってコーデックやフォーマットが異なるためsourceを用いて複数のフォーマットを指定することができます。
sectionタグは、ページ内のその部分が一つのセクションであることを示す際に使用します。divでボックス要素を作るよりはsectionで作るのが好ましい使い方です。sectionタグは一般的なセクションを定義するタグであるため、記事コンテンツなどを作る際は articleタグを使用しましょう。
audioはオーディオファイル(音声データ)を再生するための要素です。
bodyに使える属性 属性とは タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。 よく使うグローバル属性 id 概要 要素に対してID固有の識別名を付けることができます。 属性の値 英字から始まる英数字 class 概要 要素に対して分類名を付けることができます。 属性の値 英字から始まる英数字 styl
embedはembeddingの略です。外部コンテンツを指定された場所に埋め込みます。
【HTML5】noframesタグとは?使い方についてまとめ
noframesは廃止されたタグのため使用しないでください。noframesに代わりiframeを使用することが推奨されています。
frameは非推奨タグのため使用しないでください。frameに代わりiframeを使用することが推奨されています。
ここにディスクリプションを入れます。ここにディスクリプションを入れると検索結果に表示されます。
imgはimageの略です。HTMLに画像を埋め込む際に使用します。
picutureは0個以上のsourceと1つのimg要素を含み、様々な画面や端末の条件に応じた画像を表示させる要素です。レスポンシブイメージを実現されるための要素でimgで表示する画像の代わりに、ブラウザの横幅などの条件に準じて、他の画像を指定するsource要素をグルーピングするために用いられます。
iframeとはインラインフレームを作る要素です。インラインフレームとは文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。
delはdeleteの略です。delで囲まれた部分が後から削除されたものであることを表す時に使用します。多くのブラウザでは打ち消し線付きの文字で表示されます。
insはinsertの略です。ins要素内の文字列が後から追加されたものであることを表します。
uは非言語的注釈要素を意味します。何らかの曖昧な注釈が適用されるテキストに使用します。例えばスペルミスや中国語の固有名詞記号などに使います。
bdoはi18n bidirectional over-rideの略です(i18nはintarnationalization=国際化のこと)。現在の文字列の方向を上書きします。
bdiはbidirectional(双方向)の略で、左から右に読む言語と、右から左に読む言語が混ざるような双方向テキストにおいて、周囲の方向と独立して扱うよう定義する要素です。
kbdはkeybordの略です。kbd要素で囲まれたテキストがキーボード、音声入力、その他入力端末から入力される文字列であることを表します。
rtcはruby text containerの略です。ruby内のrbにルビで与える文字列の意味を表す注釈を表します。
rpはHTML5から追加されたタグで、Ruby Parenthesesの略。ルビの内容を囲む括弧等の記号を指定することが可能です。タグに対応していないブラウザの場合のみ表示されます。
フォームタグ buttonボタン meter特定範囲内の数量や割合を示す output計算結果の出力欄を作る progress作業の進捗状況を示す selectセレクトボックス textarea複数行の入力欄 inputtype属性がhidden以外の場合フォームの部品
rtはruby textの略でルビを振るための要素です。
rubyは日本語などの東アジアの言語でルビをふるために使用します。
type属性にresetが付与されておりフォームがリセットされたときに、その効果が得られる要素。
form属性を付与することができ、特定のフォームへの関連付けを指定することが許されている要素。
i要素は何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語や外国語のワードなどに使用します。
markは文書の中でハイライトしたい箇所に使用します。ユーザーが検索したキーワードなど、利用者側の操作時に強調したい箇所に使用します。類似のemやstrongはWebページの作者が強調したい箇所に使用します。
フォームデータが送信されるときにフォームデータセットを構築するために用いることができる要素です。
フォーム関連要素などによってリスト化された要素です。
bはboldの略です。b要素内のテキストを太字で表します。読者の注意を惹きたい場合で、他の特別な重要性が与えられない際に使用します。
フォーム関連要素とは、フォームと関連を持つことができる要素のことです。
subはsubscript(下付きの)の略です。sub要素で囲まれたテキストを下付きの文字で表します。
sampはsampleの略です。samp要素内のテキストはプログラムやコンピューターから出力されたサンプルであることを表します。
supはsuperscript(上付きの)の略です。sup要素で囲まれたテキストを上付きの文字で表示します。
data要素は機械が識別可能な形式の情報を与えます。コンテンツが時刻または日付に関連するものであれば、time要素を使用しましょう。
timeは日時や時刻を表します。timeを記述することによりユーザーエージェントは記事の発行日時などを判断することが可能となります。
セクショニングルートとは、言葉の通りセクションのルートとして扱われる要素です。該当する要素の内部に独自の階層構造を持つことができます。
その要素のコンテンツモデルが透過であることを意味します。このタイプの要素では、親要素のコンテンツモデルがそのまま継承されます。
varはvariable(変数)の略です。var要素で囲んだテキストが、プログラミングのコードの引数や変数であることを表します。
スクリプトサポーティングとは、要素をJavaScriptなどプログラミング言語を使い操作する際に使われるカテゴリモデルです。
セクションタグ headerヘッダを表す article自己完結したセクションを表す aside補足的なセクションを表す section一般的なセクションを表す footerフッタを表す address作者情報・連絡先 navナビゲーションを表す h1-h6見出し1~6 コンテンツタグ p段落 div範囲の指定(ブロックレベル) span範囲の指定(インライン) blockquote長文の引用(ブ
abbrはabbreviationの略です。略語を表します。HTTP(HyperText Transfer Protocol)やCSS(Cascading Style Sheets)などです。abbrはdfnと組み合わせて略語の用語の定義を行なうことができます。
code はプログラミングなどのコードを意味します。code要素で囲んだテキストが、プログラムなどのコードであることを表します。
dfnはdefinitionの略です。dfn要素で囲まれたテキストが定義部であることを表します。通常はその用語が最初に説明されている部分などに用います。
テキストタグ ahref属性があるときのみ リンクのアンカー コンテンツの埋め込みタグ embedプラグインデータを埋め込む iframeインラインフレーム embedプラグインデータを埋め込む iframeインラインフレーム imgusemap属性をもつときのみ 画像の埋め込み objectusemap属性があるときのみ オブジェクトの埋め込み audiocontrols属性があるときのみプラグ
qはquotationの略です。短い引用を表します。類似のタグであるblockquoteは長い引用を表します。qはインライン要素、blockquoteはブロック要素です。
「ブログリーダー」を活用して、JAM25公式さんをフォローしませんか?