TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 検索結果に表示！HTMLでmetaタグを使う方法【初心者向け】
オーダーメイドコース
icon
icon
HTML

検索結果に表示！HTMLでmetaタグを使う方法【初心者向け】

初心者向けにHTMLでmetaタグを使う方法について解説しています。titleやdescription、keywordなどページの表面上には出ませんが、SEO対策においても重要なタグなので、しっかりと書き方を理解しておきましょう。

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

HTMLでmetaタグを使う方法について解説しています。

Webページを作る上では目に見えない部分ですが、どのサイトでも設定されているものなので、書き方を覚えておきましょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

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

 

metaタグとは

metaタグは、そのサイトに関する様々な情報を指定するためのタグです。

WebサイトのSEO対策をする上でも重要なタグになるので、Web担当者の方などはプログラムを書く仕事でなくても知っておいて損はないでしょう。

以下は、本サイトTechAcademyマガジンの検索結果に表示されるタイトルとディスクリプションですが、後に紹介するmetaタグなどで設定されています。

 

metaの書き方

metaタグはheadタグの間に記述します。例外もありますが、基本的には次のように記述します。

<meta name="メタデータ名" content="メタデータ" />

metaタグでよく使うものの一例を紹介します。

 

charset

charsetは、文字コードを指定する時に使用します。

<meta charset="utf-8" />

 

description

descriptionは、そのサイトの内容の要約を記述します。

<meta name="description" content="このサイトはHTMLについて紹介しているとてもいいサイトです。" />

 

keywords

keywordsは、そのサイトがどのようなサイトかをキーワードで指し示すのに使います。複数指定する場合は、コンマで区切ります。

<meta name="keywords" content="HTML,CSS,Javascript,プログラミング" />

 

author

authorは、そのサイトの作成者の名前を記述します。
<meta name="author" content="ジョン" />

 

content-language

content-languageは、そのサイトがどの言語で書かれているかを記載します。

<meta http-equiv="content-language" content="ja" />

 

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

実際に書いてみよう

それでは実際に書いてみましょう。「meta.html」というファイルを作成して、以下を記述します。

meta.html
--------------------------------------------------------
<html>
  <head>
    <title>わたしのホームページ</title>
    <meta charset="utf-8" />
    <meta name="description" content="このサイトはHTMLについて紹介しているとてもいいサイトです。" />
    <meta name="keywords" content="HTML,CSS,Javascript,プログラミング" />
    <meta name="author" content="ジョン" />
    <meta http-equiv="content-language" content="ja" /> 
  </head>
  <body>
    <h1>私のホームページへようこそ</h1>
  </body>
</html>
--------------------------------------------------------

ブラウザで開いてみます。

metaタグの情報は表示されませんが、検索エンジンなどで解析するときにはきちんと読まれます。

 

まとめ

metaタグはSEO対策には必ず使われます。どのような情報が格納できるかを知っておくことと良いでしょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

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

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。

記事を検索

関連するキーワード

関連する記事

HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】

HTML5のvideoタグで動画のストリーミング配信の仕方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説し...
HTML

Herokuを使ってHTMLのwebサイトを公開する方法を現役エンジニアが解説【初心者向け】

Herokuを使ってHTMLのwebサイトを公開する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

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

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

HTMLのbr要素を現役デザイナーが解説【初心者向け】

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

HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】

HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

HTMLで404errorが起こる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLで404 errorが起こる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

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

最初のステップ！HTMLで覚えておきたい頻出タグ15選【初心者向け】現役エンジニアが紹介

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。 どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思っている方は最初に覚えておきましょう。 実際に書きながら進めていくと理解しやすいです。 目次 HTMLとは HTMLの基本構造に関するタグ サイトコンテンツの作成でよく使うHTMLタグ   HTMLとは HTMLは、Hyper Text Markup Languageの頭文字を集めたもので、Webサイトの構造を形成するために使用される言語です。 HTMLではタグと呼ばれるマークアップのための目印を使用し、<●●>(開始タグ)～</●●>(終了タグ)という形を作り、その間に命令を書き実行します。 (終了タグは省略できるものや、書かないものも存在します)ここではサイト作成において必ず使用するタグや、よく使われるタグについて紹介します。   [PR] Webデザインで副業する方法とはHTMLの基本構造に関するタグ HTMLの基本的な構造は、以下の通りです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <header></header> <main></main> <footer></footer> </body> </html> それでは、ひとつずつ分解して見ていきましょう！   <html> HTML文書であることを示すタグで、(DOCTYPE宣言※のあとの)最初に<html>、最後に</html>と記述します。 すべてのHTMLタグは、この<html></html>の中に記述していきます。 ※DOCTYPE宣言は、その文書がHTMLですよということを表すおまじないのようなキーワードです。   <head> 文書全体の基本的な情報、ヘッダ情報を定義します。 このタグに記述した内容はページには表示されませんが、ブラウザや検索エンジンがその内容を読み取り、そのWebサイトの状態を判定するため、内容はしっかり吟味する必要があります。   <title> このタグはheadタグ内に記述します。 ブラウザのタブで表記される名前、ブックマークされた際に表示される名前になります。 <title>●●通販の△△</title>   <meta> このタグはheadタグ内に記述します。 Webサイトのメタ情報を設定するタグです。 メタ情報とは、検索エンジンやブラウザに伝える情報全般のことで、様々な種類があります。 以下はその中でもよく用いるメタ情報の記述です。 <!-- 文字コードをUTF8に指定する --> <meta charset="utf-8"> <!-- Webサイトの説明を検索エンジンに伝える --> <meta name="description" content="サイトの説明文"> <!-- サイトの表示領域を、閲覧するデバイスの幅に合わせる --> <meta name="viewport" content="width=device-width, initial-scale=1">   <link> このタグはheadタグ内に記述します。 指定した文書を参照するタグです。 外部スタイルシート（CSS）を適用する場合などはこれを使用します。 <!-- style.cssという外部スタイルシートを読み込む--> <link rel="stylesheet" href="style.css" type="text/css">   <body> Webサイトに実際に表示されるコンテンツすべてを囲むタグです。   <header> HTML5※から追加されたタグで、ヘッダー(Webサイトの先頭)部分に使用します(ヘッダー情報を扱う<head>タグとは別のものです)。 主にサイトのタイトルや、ナビゲーション（ヘッダーメニュー）などが入ります。 ※HTML5とは？ HTML5はHTMLの仕様のひとつで、2014年に有効化しました。 それまでのHTML4と比べて全体的に機能が拡充されており、よりリッチなWebサイトの開発がしやすい仕組みになっています。 本記事執筆時点（2021年）では、HTMLといえばこのHTML5のことを指すことが多くなっています。   <footer> HTML5から追加されたタグで、フッター(Webサイトの一番下)部分に使用します。 サイトに関する情報、著作権に関する注記、連絡先などが入ります。   サイトコンテンツの作成でよく使うHTMLタグ 次は、bodyタグの中でコンテンツの作成に使用する頻出タグの紹介です。   <p> 文章を作成する際に最もよく使うタグです。 正確には「段落（paragraph）」を表しており、別々のpタグで囲んだ文章は別の段落とみなされます。 例えば以下の場合、2つの<p>～</p>によって2つの段落に分けられています。 <p>この文は段落その1です。</p> <p>この文は段落その2です。</p>   <h1～h6> 各見出しを設定する際に使用します。 h1タグの内容がそのページで最も重要なキーワードとみなされ、ついでh2, h3と重要度が続きます。 文字の大きさだけを表すタグではなく、検索エンジンにより正しい情報を伝えるためのタグなので、内容には常に注意しましょう。 <h1>h1の見出し</h1> <h2>h2の見出し</h2> <h3>h3の見出し</h3> <h4>h4の見出し</h4> <h5>h5の見出し</h5> <h6>h6の見出し</h6>   <img> 画像を貼り付ける際に使用するタグです。 配置や大きさの設定はCSSで行うことができます。 <img src="img_1.png">   <a> 他のページへのリンクを貼ったり、指定したメールアドレスへの送信を行う際に使用します。 開始タグでリンクしたい内容を属性で指定し、タグ内にはリンクを貼りたいテキストや画像を入れます。 <a href="https://example.com/">リンク</a> リンクを別のブラウザタブで開きたい場合、以下のようにtarget=”_blank”という属性を追加します。 <a href="https://example.com/" target="_blank">リンク</a>   <ol>・<ul>・<li> リストを作成する際に使用する3種類のタグです。 olとliのセット、もしくはulとliのセットで用います。 <ol> リストを作成するタグです。 ordered listの略で、「1,2,3～」「a,b,c～」といった順番のあるリストを作成します。 <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> <ul> unordered listの略で、順番がないリストを作成します。 <li> list itemの略で<ol>〜</ol>あるいは<ul>〜</ul>内に記述します。 それらのリストの各項目を作成するときに使用します。 コード例は、上記olタグとulタグのサンプルコードを参照してください。   <table>・<tr>・<td>・<th> テーブル(表)を作成する際に使用されます。 <table> 表の開始を示すタグです。 内部に<tr>・<td>・<th>が入ります。 デフォルトでは枠線は表示されず、border属性に”1″を指定することで表示されるようになります。 色や大きさなどの設定はCSSで行います。 <tr> table rowの略で、テーブルの行に使用します。 このタグを使用した分だけ行が追加されます。 画像では全部で3つの行が作成されています。 <td> table dataの略で、テーブルのセルに使用します。 画像内の「内容」の部分にあたります。 <th> table
HTML

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

本記事では、HTMLの具体的な書き方について、初心者向けに現役エンジニアが解説していきます。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次metaタグとはmetaの書き方実際に書いてみようまとめ そもそも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

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

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次metaタグとはmetaの書き方実際に書いてみようまとめ そもそも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

HTMLのhead要素内にmetaタグを記述する理由を現役エンジニアが解説【初心者向け】

HTMLのhead要素内にmetaタグを記述する理由について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 head要素内にmetaタグを記述する理由について詳しく説明していくね！ 大石ゆかり お願いします！   目次 metaタグについて metaタグの記述位置 head要素内にmetaタグを記述する理由   metaタグについて metaタグとは、Webページの基本情報をブラウザや検索エンジン、SNSなどのシステムへ伝えるために設置するタグです。 metaタグを正しく設置し、「このWebページはどんなページか」を検索エンジンが正しく認識しやすくなります。 検索エンジンが正しく認識しやすくなることでユーザーがそのWebページに辿り着きやすくなるでしょう。   metaタグは複数の種類があり、それぞれで様々な情報の設定が可能です。 ディスクリプションと呼ばれるページの説明文 検索エンジンに認識をさせない設定 SNSでシェアされた時向けのタイトル・アイキャッチなどの設定 文字コード ビューポート（レスポンシブのWebページに欠かせないタグ） ※一部です。   [PR] Webデザインで副業する方法とはmetaタグの記述位置 metaタグを記述するのは、基本的にHTMLのhead内に記述しましょう。 <!doctype html> <head> <!-- ここからmeta --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- ここまでmeta -->
HTML

PHPのcURL関数を使って外部サイトの情報を取得する方法【初心者向け】現役エンジニアが解説

ここではPHPで使うcURL関数について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 外部サイトにアクセスしていろいろな情報を取得したいと思った時に便利なのがcURL関数です。 情報を取得するには他にfile_get_contentsという関数もありますが、リクエスト方法をカスタマイズしたい時に便利なのがcURL関数です。 ぜひ使い方をマスターしていきましょう。   目次metaタグとはmetaの書き方実際に書いてみようまとめ   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   cURLとは cURLとは、外部サイトにアクセスしていろいろな情報を取得できる関数です。 cURL関数を使用すると、HTTPリクエストにより外部サイトからHTMLを取得できます。 HTTPリクエストとは、普段safariなどのブラウザでWebサイトをみているときに、内部で行われている動作です。 ブラウザからHTTPリクエストをサーバへ送り、サーバからはHTTPレスポンスが返ってきます。 サーバからのレスポンスの結果、Webサイトが表示されます。 今回紹介するcURL関数は、このHTTPリクエストを扱うことができます。   大石ゆかり 田島メンター！ブラウザやフォームを通さなくても、データを送ったり受信したりできるんですか？ 田島悠介 そうなんだ。実は、ブラウザやフォームもHTTPリクエストを送信したり、受信したりしてるんだよ。 大石ゆかり コードだけでもそれができるんですね。 田島悠介 そうそう。さっそくcURLの書き方を見てみよう！   cURLの書き方 cURLの基本的な流れを説明していきます。 1.curl_init() cURL セッションを初期化 2.curl_setopt() オプションを設定 3.curl_exec() 転送を実行 4.curl_close() セッションを終了   curl_init() curl_init()は、cURLセッションを初期化します。 resource curl_init ([ string $url = NULL ] ) 返り値 curl_init ([ 取得するURL ] ) 返り値は成功すれば、cURLハンドルを返します。 失敗したらFalse、取得するURLで情報の取得先を指定します。   curl_setopt() curl_setopt()は、cURL転送用オプションを設定します。 bool curl_setopt ( resource $ch , int $option , mixed $value ) 返り値 curl_setopt ( cURLハンドル , オプション , 値 ) 返り値 成功でTrue、失敗でFalseを意味します。 cURLハンドルはcurl_init()の返り値を設定します。 オプションには設定するオプション名を指定します。 値はオプションに設定する値を意味します。   curl_exec() curl_exec()は、cURLセッションを実行します。 返り値 curl_exec ( cURLハンドル ) 返り値 成功でTrue、失敗でFalseを意味します。 cURLハンドルはcurl_init()の返り値を設定します。   curl_close() curl_close()は、cURLセッションを終了します。 返り値 curl_close ( cURLハンドル ) 返り値 なし。 cURLハンドルはcurl_init()の返り値を設定します。   大石ゆかり ちょっと難しいですね。 田島悠介 curl_init関数で操作するためのオブジェクトというか、ハンドルを取得して、後は、curl_setoptで設定していく感じかな。 大石ゆかり curl_exec関数で実行、curl_close関数で終了ですか。何か面倒ですね。 田島悠介 とりあえず、実際に代表的なサイトにcURLを使って、簡単にデータを受信してみよう！   [PR] Webデザインで副業する方法とは実際に書いてみよう それでは実際にcURL関数を使用して、PHPのプログラムを書いてみましょう。   cURLをつかって「Techacademy」の情報を取得する 今回は、cURL関数を利用して、https://techacademy.jp/でアクセスできる、テックアカデミーの情報を取得します。 サンプルコード <?php $url = "https://techacademy.jp/";
PHP

PythonのRequestsモジュールの使い方【初心者向け】現役エンジニアが解説

PythonのRequestsモジュールの使い方について解説します。 テックアカデミーのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 目次 Requestsモジュールとは requestsモジュールの使い方 実際に書いてみよう まとめ   そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Requestsモジュールの使い方について詳しく説明していくね！ 大石ゆかり お願いします！   Requestsモジュールとは Requestsは、PythonのHTTP通信ライブラリです。 Requestsを使うとWebサイトの情報取得や画像の収集などを簡単に行えます。 Python には標準で urllib というライブラリが存在しますが、 Requests はそれよりもシンプルに、人が直感的に分かりやすいプログラムを記述できます。 Requests ライブラリは、他のライブラリと組み合わせて使用できます。 例えば Beautiful Soup と組み合わせると、Webサイトを解析して必要な情報だけを抜き出すことができます。 また、BytesIO と Pillow と組み合わせて、Webサイト上の画像URLをもとに、画像ファイルを取得することもできます。   [PR] Webデザインで副業する方法とはRequestsモジュールの使い方 まずは Requests ライブラリをインストールしましょう。 パソコンが MacやLinuxならターミナル、Windowsならコマンドプロンプトから以下のコマンドでインストールします。 なお、事前に Python のインストールが必要です。 また、AnacondaからPythonをインストールしている場合には、conda installを使用することが推奨されています。   #requestsをpipからインストール pip install requests   Requests の利用方法は以下の通りです。 requests.request(method, url, オプション)   methodには”get”や”post”などを指定しますが、あらかじめmethodが指定されているメソッドも用意されています。 requests.get(url,オプション) requests.post(url,オプション) requests.put(url,オプション) requests.delete(url,オプション) requests.head(url,オプション) requests.options(url,オプション) urlには情報を収集するWebサイトのURLを指定します。 オプションの指定方法などは、HTTPを通してどの部分の情報を取得するかによって異なります。 例えば get の場合には、情報を取得する相手のサーバからテキストなどのデータを取得します。 詳しくは公式ドキュメントを参考にしてください。   実際に書いてみよう 今回のサンプルプログラムでは、 Requests ライブラリを使用してWebサイトから情報を取得する方法を確認します。 今回はYahooニュースから情報を取得してみます。 # resuests モジュールをインポート import requests # Webサイトの情報を変数rに格納し、そのうちのテキスト部分を出力 r = requests.get("https://news.yahoo.co.jp/") print(r.text)   実行結果は以下のようになります（一部抜粋）。 <!DOCTYPE html> <html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>Yahoo!ニュース</title> <meta name="description" content="Yahoo!ニュースは、新聞・通信社が配信するニュースのほか、映像、雑誌や個人の書き手が執筆する記事など多種多様なニュースを掲載しています。"> <meta name="keywords" content="ニュース,ヤフー,新着"> <meta
Python

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 検索結果に表示！HTMLでmetaタグを使う方法【初心者向け】