HTML

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでdfn要素を使って用語を定義する方法について解説しています。用語定義が使われる場面の例、dfnタグの基本の書き方、画面上でどのように表示されるかを見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLでdfn要素を使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

dfn要素を使って用語を定義する方法について詳しく説明していくね！

お願いします！

dfnで用語を説明するには（用語定義について）

文章に使用される予定の用語を定義するためにdefinition（ディフィニション）の略語であるdfnタグを使用できます。略語や語源を説明するための文書や用字用語を扱われているWebサイトでは、頻繁に活用されることが期待できます。

[PR] Webデザインで副業する方法とは

dfn要素とは

単純に用語や略語を定義するために用意されています。dfnタグとabbrタグのtitle属性を用いて、言語と略語の説明文も定義できます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。

HTML

<p>この文書には、<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>を用いて、dfnタグの説明が掲載されてあります。</p>

表示結果

See the Pen
2020-07-15-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

dfn要素を使って用語を定義してみよう

dfnタグのtitle属性の値に用語を定めてから、略語を用いて説明を述べることもできます。以下に、使用例としてのサンプルコードを掲載していますので、参考までに留めておきましょう。

例文のHTML

<article>
  <section>
  <h2>KGI</h2>
  <p><dfn title="Key Goal Indicator">KGI</dfn>とは、会社の『重要目標達成指標』です。会社の事業が目指す売上高や利益、そして、利潤も含めてから、数字や文章にて目標に定めて持続化させるための指標として扱われています。</p>
  </section>
  <section>
  <h2>KPI</h2>
  <p><dfn title="Key Performance Indicator">KPI</dfn>とは、会社の『重要業績評価指標』です。KGIを達成するためにも、具体的な業務（実務）を構成して、その過程（プロセス）や行為に生じる数字や、それの反復によって関係性のある結果などが指標として扱われています。</p>
  </section>
</article>

表示結果

See the Pen
2020-07-16-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

クリエティブな仕事場を！デザイナーのためのワークスペースまとめ

本稿は、designmodoのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、フリーランスのWebデザイナーPaula Borows...

Webデザイン

レンタルサーバー比較・15選【Webサイト制作の初心者におすすめ】

Webサイト制作の初心者の方は、どのレンタルサーバーがいいのかよくわからないということもあると思います。そこで、Webサイト制作の初心者にもおすすめでき...

Webデザイン

いざという時に便利！無料で使えるロゴジェネレーター10選

今回は無料で使えるロゴジェネレーターを紹介しています。ロゴはそのものを表す上で有益なものです。下手をすればあなたの顔や会社の顔にも成り得るロゴで...

Webデザイン

【初心者向け】Cyberduck（サイバーダック）の使い方

Webページを公開する際に使用するFTPクライアントソフトのCyberduck（サイバーダック）の使い方を紹介する記事です。 CyberduckはWind...

Webデザイン

HTMLのコーディングで起こるバグの見つけ方を現役エンジニアが解説【初心者向け】

HTMLのコーディングで起こるバグの見つけ方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法を現役デザイナーが解説【初心者向け

HTML5でvideoタグのposter属性で動画のヒント画像を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して...

HTML

あわせてよく読まれている記事

HTML5でdfnタグを使って用語を定義する方法を現役デザイナーが解説【初心者向け】

HTML5でdfnタグを使って用語を定義する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 dfnタグを使って用語を定義する方法について詳しく説明していくね！大石ゆかりお願いします！ dfnタグとは HTML5から新要素としてdfnタグが追加されています。dfnタグは、definitionの略語です。用語の定義を記述する場合に使用されています。 title属性も使用した場合、ブラウザの技術にtitle属性の値として定めた文字列が用語として扱われます。title属性に値として文字列が定められていなかった場合は、dfnタグにて定義された内部の文字がブラウザの技術に用語として扱われます。活用場面文章内にある用語を言語として定義するときに使用されています。 <p><span>GDP</span>とは、Gross Domestic Productの略称です。</p> HTML4.01のHTML文書にて、文章の内部に用語が登場する場合、CSSによる装飾のためにも、上記のおおよその書き方にてマークアップされていました。HTML5からは、これらを専用のタグにて定義することが可能です。また、以下に、spanタグからdfnタグに置き換えた場合のサンプルコードを用意しました。 See the Pen 2020-02-09-sample02 by YOHEI INAI (@yohei_inai) on CodePen. 利用規約のページや、ガイドページにも頻繁に活用されることが期待できます。なお、用語と対になる説明文を規則正しく箇条書きとして列挙する場合は、dfnタグよりもdl、dt、ddタグが適しています。これらのタグは、用語を一覧として説明するためのページ（辞典）などでは、活用される機会が多いと考えられます。そして、用語の意味を成立させるためにも使用されています。dfnタグの使用は、SEO対策において、ページランクの評価としても有利になると考えられます。辞典などを作成する場合は、積極的に活用してみましょう。 [PR] Webデザインで副業する方法とはdfnタグを使って用語を定義してみよう See the Pen 2020-02-09-sample01 by YOHEI INAI (@yohei_inai) on CodePen. 上記のサンプルコードは、略称を用語として説明するためにtitle属性も使用しています。 See the Pen 2020-02-09-sample02 by YOHEI INAI (@yohei_inai) on CodePen. 上記のサンプルコードは、略称を用語として説明するための定義文です。監修してくれたメンター井内洋平 TechAcademyの現役メンター。元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

HTML

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

JavaScriptでDOM操作で要素を削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptのDOM操作で要素を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのDOM操作で要素を削除する方法について詳しく説明していくね！大石ゆかりお願いします！ ※DOMとはHTMLを操作する仕組みのことで、木の枝のような階層構造になっています。DOMの操作について、詳しくは解説記事「JavaScriptでDOMを操作する方法【初心者向け】」をご覧ください。要素自身を削除する呼び出した要素自身を削除するときは、removeメソッドを使います。書式削除する要素.remove(); 削除する要素自身から、removeメソッドを呼び出します。 removeメソッドで要素を削除すると、削除した要素内の他の子要素も含めてすべて削除されます。クリックされた時の処理など、イベントを発生させた要素そのものを削除する場合は、受け取ったEventオブジェクトのtargetからremoveメソッドを呼び出せます。他の要素を削除したいのであれば、「document.getElementById」などで取得します。 ※イベントとは、マウスのクリックやページの読み込みが完了したときなどの動作を指します。JavaScriptではイベントが発生したときに実行する関数を指定するために、各要素のonclick属性などに処理する関数を指定できます。onclick属性については解説記事「クリック時の処理！JavaScriptでonclickを使う方法【初心者向け】」をご覧ください。 ※Eventオブジェクトとは、イベントが発生したときの情報が収められているものです。イベントの発生源である要素などが取得できます。JavaScriptの関数にEventオブジェクトを渡すには、HTMLのonclick属性に「event」を引数として渡します。サンプルコードクリックしたボタンそのものと、「パープル」の要素自身を削除するサンプルコードです。ソースコード // 「このボタンを削除」がクリックされた時の処理 function del_this(event) { //イベントの発生源の要素を削除 event.target.remove(); } // 「パープルを削除」がクリックされた時の処理 function del_purple(){ //「パープル」の要素をIDから取得 const elem_purple = document.getElementById('purple'); //elem_purple（idがpurple）の要素自身を削除 elem_purple.remove(); } <p>レッド</p> <p id="purple">パープル</p> <p>グリーン</p> <p>ブルー</p> <button onclick="del_this(event)">このボタンを削除</button> <button onclick="del_purple()">パープルを削除</button> 実行結果 See the Pen js_remove_this by mentor-inoue-y (@mentor-inoue-y) on CodePen. 解説クリックされた要素自身を削除 function del_this(event) { ～ } 「このボタンを削除」ボタンがクリックされたときに呼び出される関数を定義しています。 HTMLの「このボタンを削除」ボタン（button要素）にあるonclick属性に、「del_this(event)」と指定して関数が呼び出されるようにしています。 HTMLのonclick属性でeventを引数で渡すことにより、イベントを発生させた要素の情報を関数に送れます。イベントを処理する関数 del_this(event)でeventを受け取って、クリックされた要素をevent.targetで取得できます。 event.target.remove(); event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できます。取得した要素自身を削除 function del_purple(){ ～ } 「パープルを削除」ボタンがクリックされたら呼び出される関数を定義しています。 HTMLの「パープルを削除」ボタン（button要素）にあるonclick属性に、「del_purple()」と指定して関数が呼び出されるようにしています。 const elem_purple =

JavaScript

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] Webデザインで副業する方法とは開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。必要なフォルダとファイルを作成しようまずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。 HTMLをコーディングしよういよいよコーディング作業に入ります！今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="stage" class="stage"></div>  <div id="square-template" class="square"> <div class="stone"></div>

JavaScript

PHPの配列でjoinメソッドを使う方法を現役エンジニアが解説【初心者向け】

PHPで配列を結合する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPではさまざまな方法で配列を結合できますので、この記事では用途に合わせた使い分けについて解説しています。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPの配列を結合するにはどうしたらいいですか？田島悠介配列を結合する方法はいろいろあるけど、array_mergeが使えるよ。ただ連想配列でキーが同じだった場合に値が上書きされるよ。大石ゆかり連想配列？キー？上書き？　なんだか難しそうですね・・・田島悠介聞いただけではイメージするのが難しいかもしれないね。たとえば$sum[5]の「5」の数値が配列の添字、つまりキーだよ。連想配列はこのキーが文字列の配列だね。じゃあ、配列を結合する方法を実際のサンプルコードを使って説明するね。大石ゆかりお願いします！ ※この解説記事では配列のキー（添字）が数値のものを添字配列といい、キーが文字列の連想配列と区別しています。PHPの配列については解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」を、連想配列については解説記事「PHPで連想配列を使う方法【初心者向け】」をご覧ください。 array_mergeで結合する方法 PHPで配列を結合するには、array_merge関数が使えます。複数の配列をひとつに結合した配列を取得できます。構文結合された配列 = array_merge(配列1, 配列2); 配列1の後ろに配列2の要素が追加されて結合された配列が取得できます。 ※引数に指定する配列の数は、ひとつでも3つ以上でも指定できます。 ※結合された配列はarray_merge関数の戻り値で取得します。上記の構文だと配列1そのものが更新されるわけではありません。配列のキーが同じ要素を結合すると？配列が連想配列（キーが文字列の配列）かどうかで結果が異なります。キーが数値の添字配列の場合は、同じキーがあっても添字がゼロから振りなおされ、要素が追加されていきます。キーが文字列の連想配列の場合は、同じキーがあると新しい要素に上書きされて追加にはなりません。添字配列を結合する配列のキーが数値の添字配列をarray_merge関数で結合すると、すべての要素のキーがゼロから振りなおされて追加されます。ソースコード色の名前が入った2つの配列 $colors1と$colors2の要素をarray_mergeで結合し、$colorsに代入します。 $colors1と$colors2の配列はキーが数値のため、結合したときにキーが降り直されます。 <?php $colors1 = array('赤', '緑', '青'); $colors2 = array('シアン', 'マゼンタ', '黄'); //配列を結合 $colors = array_merge($colors1, $colors2); //結合した配列を出力（preタグで改行させる） print_r('<pre>'); print_r($colors); print_r('</pre>'); ?> ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 $colors1 = array('赤', '緑', '青'); $colors1に3つの要素がある配列を代入しています。配列 $colors1の中身は以下のように0から2のキーがあります。 Array ( [0] => 赤 [1] => 緑 [2] => 青 ) ※配列を作成するときに、値だけ指定すると自動的にゼロから始まる添字がついてキーが作成されます。配列の作成について詳しくは解説記事「PHPの配列の基本を現役エンジニアが解説【初心者向け】」をご覧ください。 $colors2 = array('シアン', 'マゼンタ', '黄'); $colors2にも3つの要素がある配列を代入しており、中身は以下の状態です。 Array ( [0] => シアン [1] => マゼンタ

PHP

まずはここから！HTMLの書き方【初心者向け】現役デザイナーが解説

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次dfnで用語を説明するには（用語定義について）dfn要素とはdfn要素を使って用語を定義してみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLの書き方について詳しく説明していくね！大石ゆかりお願いします！【動画でも解説しています。クリックで見る！】 HTMLタグの書き方 HTMLはWebページに表示したい情報に対し、マークアップするための文章構成を表現する言葉です。たとえば、タイトルや見出し、本文といった区切りをHTMLでは記述できます。 HTMLはタグ＜＞で囲ったまとまりで、文章構成を表現することが可能です。タグの中には、どのような種類の文章なのかを示す要素名を記述しましょう。題名であれば<title>、見出しであれば<h1>、段落であれば<p>などです。 <title> のように要素名から始まるタグは開始タグと呼ばれます。 </title> のように、スラッシュ要素名で始まるタグは終了タグを意味し、要素の記述終了を示すものです。開始タグと終了タグで囲むことで、開始と終了を表現します。開始タグから終了タグまでのひとまとまりを要素と呼びます。図の<title>要素はWebページの題名を示すタグであり、この場合、Webページの題名は「タイトル」になります。要素とは HTML要素には、現在100を超える種類があります。 Webページで表現したい内容によって適切な要素を選び、タグで囲わなければなりません。代表的なものをいくつかみていきましょう。 <p> – 段落 paragraph（パラグラフ、段落）の略です。改行のない文章のひとかたまりを示すために使用します。文章を改行したいときは、改行のタイミングごとに複数のp要素を作ることで改行が可能です。 <h1>要素 headline（ヘッドライン、見出し）の略です。以下のように見出しの大小を表現するために使用します。大見出しはh2 中見出しはh3 小見出しはh4 <a>要素 anchor link （アンカーリンク、リンクの起点）の略です。他のHTMLなどへのリンクを表現するために使用します。青文字でアンダーラインのあるリンクの見た目になります。 <div>要素 division （ディビジョン、仕切り）の略です。四角い枠を作って、様々な要素をひとまとめにします。 <img>要素 image（画像）のことです。画像ファイルを指定し、画像を埋め込みます。 image要素を始めとするいくつかの要素は、開始タグのみで動作し、終了タグは必要ありません。 <meta>要素 meta（大局的な情報）のことです。 Webページの全体的な設定をします。文字の種類や検索エンジンの検索結果に表示される文章など、様々な項目があります。 [PR] Webデザインで副業する方法とは属性と値各要素の細かい動きや働きを設定するための付属情報が属性です。何の設定かを示すものが属性名、どう設定するかを属性値といいます。開始タグの＜＞の中、要素名の後にスペースを空けて、属性名=”属性値” の形で記述します。上記はmeta要素と呼ばれるWebページ全体の設定をするタグです。 charset （キャラクターセット= 文字の種類）をUTF-8という種類の文字に設定しています。この要素ではこの属性が必要といったように、要素と属性はセットのものが多い傾向です。たとえば、以下のように記述したうえでTechAcademyという文字をクリックするとtechacademy.jpに飛ぶリンクになります。 <a href="https://techacademy.jp/">TechAcademy</a> <a>要素のリンク先URLを、href (ハイパーテキストリファレンス= HTMLの参照先)という属性に設定しています。以下の記述は、<img>要素で表示するファイルをsrc（ソース = 情報の源泉）という属性に設定しているものです。 <img src="/image.png"> 田島悠介要素と属性、ぜひ組み合わせて理解してくださいね！大石ゆかりタグは全部覚えなければダメなんですか？田島悠介要素は覚える必要はありません。文法はHTMLを書きながら体で覚えましょう。各要素は、辞書のようなサイトや本で、調べながら読み書きできれば問題ありません。常に調べながら書いていますよ。大石ゆかり今回のタグは、後で覚えてもいいんですね？田島悠介技術は常に移り変わるので、すぐに古くなってしまうためですね。暗記するよりも、調べ方をマスターして、常に最新の技術を探るのがおすすめです。大石ゆかり調べるときはテックアカデミーの記事を参考にしますね！ HTMLを書いてみようこれまでの書き方を踏まえて、実際にコードを書いてみます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの書き方</title> </head> <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> </html> 以下ではサンプルコードを解説していきます。 <!DOCTYPE html>はHTMLを示すもの文頭にある<!DOCTYPE html>は、文章がHTMLであることを示しています。この記述がなければ、WebブラウザがWebページとして表示できないため必要です。 HTMLの種類によっていくつか書き方のバリエーションはあるものの、今は<!DOCTYPE html>が基本です。要素の階層構造要素は、開始タグと終了タグの間に、テキストと他の要素を含めることができます。以下の例では<body>要素内に<h1>要素と<p>要素を含むものです。 <body> <h1>HTMLの書き方</h1> <p>はじめてのHTMLを作りました</p> </body> また、以下のように、要素の中に要素を入れる段階構造を入れ子といいます。 HTMLは、様々な要素を入れ子にしていくことでWebページを構成しています。 <head>と<body> <html>の中身は大きく

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでdfn要素を使って用語を定義する方法を現役エンジニアが解説【初心者向け】

目次

dfnで用語を説明するには（用語定義について）

dfn要素とは

HTML

表示結果