TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】

初心者向けに静的HTMLの共通部分をincludeして使う方法について解説しています。サイト内の各ページで共通する部分をインクルードすることで効率的に編集、管理を行うことができます。JavaScriptなどを使ったいくつかのインクルード方法について見ていきましょう。

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

静的HTMLの共通部分をincludeして使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

静的HTMLの共通部分をincludeして使う方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

共通部分の多いHTML

1つのwebサイト内で同じようなwebページを作る場合には、そのページごとに同じコーディングの部分を記述することになります。通常、HTMLのページで似たような 複数のページを作成する場合にはヘッダーやフッターなどの共通の部分をあえて作り、同じwebサイト内にいることをユーザーに認識してもらえるような構造に作成をしていきます。
同じようなwebページのコーディングは最初に作ったページのコピペでも良いですが、繰り返して使うコードとして1つのファイルに作成しておくと汎用性があり、今後の編集や管理などもしやすくなります。

 

includeの活用方法

includeする、と言いますが、汎用性があるように作成したコードをincludeすることで一つのプログラミングファイルに共通部分のみを記述したコードを取り込んで1つのファイルとして認識をさせるようにすることが出来ます。これにより、ヘッダーなどを統一させたいサイトは全く同じweb表記をさせることが出来るようになります。
また、全てのページで使用しているヘッダーなどを一斉に変更した場合には、共通部分をincludeしていることで修正をしやすくなります。
実務的にはヘッダー、フッター、サイドバーなどが共通の部分として各ページに共通して使用されることが多いです。
それぞれヘッダーファイル、フッターファイル、サイドバーファイルなどを作成し、適宜のページでこれらのファイルをincludeすることで共通部分のコーディングを何度も記述をしなくて済むようになります。

 

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

様々なinclude方法

includeの方法としては大きく分けて3つあります。1つ目はJavaScriptを使う方法です。JavaScriptのファイル名をheader.jsファイルなどとしてヘッダー部分だけを記述したファイルを作成し、それぞれフッター、サイドバーなどのJSファイルも作成し、HTMLの適宜の場所でJSファイルの読み込みをすることで、共通部分を読み込むことができます。
2つ目としてはSSIと呼ばれるサーバーサイドでの読み込みを行う方法です。読み込ませたいhtmlファイルを自分の使用しているレンタルサーバーなどのFTPサーバにアップロードして読み込ませる方法となります。
3つ目としてはPHPやRubyなどのスクリプト言語を用いて表示する方法です。これらのプログラミング言語はその言語自体が他のファイルなどで呼び出す前提で記述をするためインクルードしやすいですが、一旦HTMLをそれぞれの言語に書き換えてからファイルを読み込ませる必要があります。
これらの他にもWordPressやDreamweaverなどではソフトの仕様としてインクルードがされた記述によって作成されています。これらをうまく活用することで管理を簡単にすることが出来るようになります。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

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

HTMLに慣れる上で欠かせないタグをまとめて紹介しています。 どれも頻出のタグで、最低限覚えておきたいものを選んでいるので、これからHTMLを覚えようと思...
HTML

HTMLで略語を表現する方法 - abbr【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの略語・名前の特記・住所表現 について解説します...
HTML

HTMLでinput要素の入力位置がずれる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLでinput要素の入力位置がずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

HTMLをブラウザで表示するXAMPPの使い方を現役エンジニアが解説【初心者向け】

HTMLをブラウザで表示するXAMPPの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

いざという時に便利！HTMLで特殊文字を扱う方法【初心者向け】

HTMLで特殊文字を扱う方法について解説しています。コードをサイト上に表示させるために必要な知識になるので、いざという時に便利でしょう。 HTMLについて...
HTML

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向け...
HTML

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

JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   JavaScriptによるファイルの読み込み Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。 例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。 本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。   実際にファイルを読み込んでみよう ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。   1．input要素をHTMLに記述する ファイルを読み込むには、まずHTMLに要素を追加する必要があります。 追加する要素はinput要素で、type属性に”file”を指定します。 また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。 <input id="upload-file" type="file">   ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。 「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。   2．input要素をJavaScript側で取得する 1で指定したid属性の値によって、input要素を取得します。 idによる要素の取得には、document.getElementByIdを用います。 const input = document.getElementById('upload-file');   3．ファイルの読み込みを検知する ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。 ファイルのアップロードは、changeというイベント名で取得できます。 changeイベントを取得するには、addEventListenerを用いて以下のように書きます。 input.addEventListener('change', (e) => { console.log('ファイルが検知された！'); }); 1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。 コールバック関数の関数の引数として、 e という変数が指定されていますね。 引数 e は、ファイルの情報を取得するための重要な引数です。 eについて、次の項目で詳しく説明します。   4．読み込まれたファイルを取得する 3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。 アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。 input.addEventListener('change', (e) => { console.log(e.target.files[0]); }); コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。 そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。 アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。 ※複数ファイルのアップロードについては本記事の最後に紹介します。   一連の処理を行ってみよう それでは、解説した1〜4の処理を実際に行ってみましょう。 完成形のコードは以下の通りです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input id="upload-file" type="file"> <script> //JavaScriptの記述
JavaScript

大学入試でプログラミング出題！再編成された大学入学共通テストとは

令和7年より大学入学共通テストが再編成され、プログラミングを含む「情報」科目が新設されます。 つまり令和7年以降に大学受験を控える子どもたちは、受験勉強としてプログラミングを学習する必要が出てきます。 本記事では、この度再編成された大学入学共通テストの内容や新設される「情報」のサンプル問題を紹介しています。 対象年以降に大学受験を控える高校生や親御さんにぜび、ご一読いただきたい記事です。 目次 大学入学共通テスト再編成で「情報」が新設 「情報」新設に至った背景 プログラミングを含む「情報」のサンプル問題を公開 大学入学共通テスト「情報」対策ならテックアカデミージュニア 大学で本格的にプログラミングを学ぶなら しっかり対策して大学入試に備えよう！ 大学入学共通テスト再編成で「情報」が新設 大学入試センターは2021年3月24日の発表で、令和7年度（2025年1月）から刷新される大学共通入学テストでの新科目としてプログラミングを含む「情報」を出題すると発表しました。 新学習指導要領に対応し，令和４年４月から高等学校等において実施される教科に関し，令和７年度大学入学共通テストからは，普通科，専門学科及び総合学科に共通する各教科のうち，国語，地理歴史，公民，数学，理科，外国語及び情報の７教科を出題の対象とし，それぞれの教科の必履修科目及び選択科目の中から出題する。大学入試センター「平成 30 年告示高等学校学習指導要領に対応した 令和７年度大学入学共通テストからの出題教科・科目について」より 出題科目は「情報」の1科目で「情報Ⅰ」の内容が出題範囲となり、情報で一つの試験時間帯となる見込みです。 今後は2021年3月24日に大学入試センターから公表された方針を踏まえ、文部科学省において高校や大学関係者等の協議が行われ最終決定する流れとなっています。 [PR] Webデザインで副業する方法とは「情報」新設に至った背景 高等学校の新学習指導要領では「情報Ⅰ」「情報Ⅱ」の2科目が設定され、そのうち「情報 Ⅰ」が必履修科目とされています。 この平成30年3月に告示された高等学校学習指導要領に対応するために、大学入試センターは令和7年度大学入学共通テストの出題教科・科目の再編案として、令和4年度から必履修科目となる「情報I」に伴う「情報」教科を新たに追加し、6教科30科目から7教科21科目へと変更するという一定の結論を出しました。 また、政府が掲げる未来投資戦略2018で次のように述べられていることから必履修科目「情報Ⅰ」の内容を『情報』として出題するに至ったとしています。 「義務教育終了段階での高い理数能力を、文系・理系を 問わず、大学入学以降も伸ばしていけるよう、大学入学共通テストにおいて、国語、数学、 英語のような基礎的な科目として必履修科目『情報I』（コンピューターの仕組み、プログラミング等）を追加する」未来投資戦略 2018 ―「Society5.0」「データ駆動型社会」への変革― （平成30年6月15日 閣議決定）」より CBT試験の検討 「情報」はパソコンやタブレットを使って実施すべきだとの意見があり、CBT（Computer-based Testing：コンピュータ等で実施する試験）が検討されましたが、令和7年度大学入学共通テストでは今まで通り、PBT（Paper-based Testing：紙で実施する試験）で行うことに決定しました。 CBT試験について引き続き調査研究が進められことになりますが、全国的に均質で質の高い受験環境（パソコン、ネットワーク等）の確保やトラブルが生じた場合の対応、新しい試験のあり方に対する社会全体の理解など、細やかな検討が必要となりそうです。 プログラミングを含む「情報」のサンプル問題を公開 大学入試センターより、令和7年より新設が検討されている「情報」のサンプル問題が公開されました。 これは具体的なイメージを共有するために作成・公表されたもので、現段階では試験時間等は考慮されていないため、令和7年度大学入学共通テストから「情報」が出題される際に適切な分量と難易度のもとで問題セットが作成されることになります。 また、「情報Ⅰ」の一部を出題範囲として作成しているため、「情報 Ⅰ」全ての内容を網羅しているものではありません。「情報Ⅰ」の教科書の検定中に作成した問題のため、今回紹介するサンプル問題は教科書と照合したものではないことをご了承ください。 それではこの度公開されたサンプル問題をもとに「情報」の出題傾向をみていきましょう。 本記事では大問ごとに一部の問題を抜粋して紹介しています。 「情報」サンプル問題 第１問 情報のサンプル問題、大問1では情報に関する知識が問われています。 問１はインターネットについての問題です。 この問題ア・イを解くには「回路交換方式」や「パケット」が鍵となりそうです。 ウを解くには「情報格差」、エを解くには「クラウド」について理解している必要があります。 ▶︎正解はこちら 「情報」サンプル問題 第２問 情報のサンプル問題、大問2ではプログラミングについて問われています。 第２問は比例代表区の選挙におけるドント方式のプログラミングについての問題です。 プログラミング問題は、はじめの問題の意図を読み取れないと、全問不正解となることも考えられるため、ソースコードの意図を読み取れるようにはじめの問題から丁寧に取り組む必要があります。 ▶︎正解はこちら 「情報」サンプル問題 第３問 情報のサンプル問題、大問3ではデータ分析の手法が問われています。 第２問を解くにはいくつもの複雑な表を組み合わせて、意図を読み取る必要があります。 加えて、「数学Ⅰ」の知識が必要となる問題もあります。 ▶︎正解はこちら 大学入学共通テストの情報対策なら「テックアカデミージュニア」 全国に教室を展開するテックアカデミー ジュニアにて新たに中高生を対象とした「大学入学共通テスト情報対策コース」の提供を開始します！ 先ほども述べたように大学入試センターは、令和7年度（2025年1月）から刷新される大学共通入学テストでの新教科としてプログラミングを含む「情報」を出題すると発表しています。 この発表を受けて、テックアカデミージュニアでは情報対策コースを開講することになりました。 現在、2021年の夏をめどに「大学入学共通テスト情報対策コース」を学習塾などの教育事業者向けに提供するための準備を進めています。 テックアカデミージュニアでは、これから大学入学共通テストを受験する中学生・高校生たち生徒がプログラミングや、 データサイエンスに必要な統計処理などの情報リテラシーを深めるための機会を提供したいと考え、本コースを新たにリリースすることにいたしました。 テックアカデミージュニアとは テックアカデミージュニアは、全国の学習塾・教育者を対象にした小中高校生向け実践的プログラミングサービスです。 通いのオフライン教室の他に、カリキュラムとアクティブラーニングのハイブリット学習で子どもたちの学びを最大化する、オンライン教室も展開。自宅にいながら効率的にプログラミング学習が可能です。 独自で開発した学習システムは、基礎から実践までステップアップ式のカリキュラムとなっており、生徒が1つの画面で迷うことなく学習を進めることができます。 現在、自宅にいながら2時間でプログラミングの楽しさについて知ることができるプログラミング学習体験を実施していますので、気になる方はぜひお試しください。  ▶︎自宅で無料体験学習を受けてみる ▶︎テックアカデミージュニアについて詳しく知りたい テックアカデミージュニア「今後の展望」 テックアカデミージュニアでは小学1年生〜高校3年生までの「K-12」に対して、一貫したプログ ラミングの教育機会を提供することが可能です。 今後は、プログラミングだけではなく、データサイエンスやアルゴリズムなどといった計算の理論や情報の処理を含むコンピューターサイエンスの領域まで広げ、これからの社会に求められる「テクノロジーで問題解決できる人材」の育成を目指します。 そのためには、全国の教育機関による「学ぶ場」と「先生」の存在が必要不可欠です。 今後も子ども達にとって良い教育とは何か模索しながら、全国の教育事業者と連携し、一人でも多くの子ども達にプログラミングの学習機会をお届けます。 大学で本格的にプログラミングを学ぶなら 大学へ進学してもっと本格的かつ実践的なプログラミングを学びたい方は専門的に学べる学部・学科がある大学を選びましょう。 いざ進学したときに自分が思い描いていたイメージと違う、とならないように、大学を選ぶポイントを紹介します。 ①大学選択の条件を書き出し優先度を決める プログラミングを学ぶ上でどのような大学で学んでいくのかを事前に考えておくことは非常に重要です。 進学する前に大学選択の条件を書き出して優先度を決めることで、自分が進む道が見えてきます。 アクセス 学費 就職率 偏差値 国家試験合格率 授業カリキュラム 上記の項目で優先度が高いものから書き出していき、それに該当する大学を選ぶことで進学したときのズレを解消しやすくなります。 まずは事前にしっかりと優先度を見つめ直すためにも書き出してみましょう。 ②将来像を明確にしておく 大学を選ぶ上で最も重要なポイントが将来像を明確にしておく、ということです。 現時点で将来像と言われてもなかなかイメージしづらいかもしれませんが、プログラミング系の学部は大学の学びがそのまま職に繋がります。 就職した後にプログラマーでも別の分野をするとなると一から学び直す必要があるということもあり得ますので未来を見据えた選び方をしなければなりません。 どの学部を選ぶかで人生が大きく変わる可能性があるので、事前に将来像を明確にしておくことが非常に重要です。 ▶︎プログラミングが学べる大学について知りたい！ この関連記事ではプログラミングが学べる大学を一覧で紹介していますので、ぜひ参考にしてください。 しっかり対策をして大学入試に備えよう！ いかがでしたか？ 本記事では大学入学共通テスト再編成の内容や新設される「情報」のサンプル問題について、さらにはプログラミングが学べる大学の選び方などを紹介していきました。 令和7年より大学入学共通テストで「情報」が新設され、試験内容が今までとはガラッと変わります。 「情報」は高等学校の授業で必修化されたばかりなので、大学受験を見据えて早いうちから対策をしておきましょう！ 何からしたらいいのか…と学習方法に迷われたら、ぜひテックアカデミージュニアの「大学入学共通テスト情報対策コース」をご利用ください。 この記事を通して、プログラミングを学習する意義が伝わっていたら幸いです。 ▶︎小中高で導入したプログラミング教育について詳しく知りたい
高校生プログラミング

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。 今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！ 大石ゆかり お願いします！   CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。 外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法   1.外部CSSファイルを読み込む方法 外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。 事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。   また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。 以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。 上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。   また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css">   2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。 まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style>   用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color
HTML

HTMLでlinkタグとscriptタグを使ってファイルを読み込む方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、linkタグとscriptタグを使ってファイルを読み込む方法について解説します。 linkタグとscriptタグは、リッチなサイトを作りたいときに必要になるタグなので、ぜひ参考にしてください。   目次 linkタグとscriptタグ linkタグの使い方 scriptタグ   【動画での解説はこちら！】   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 linkタグとscriptタグを使ってファイルを読み込む方法について詳しく説明していくね！ 大石ゆかり お願いします！   linkタグとscriptタグ Webサイトは、htmlとcssで書かれた多くのページによって構成されています。 また、より動きのあるサイトを作るには、それに加えてJavaScriptというプログラミング言語を使ってページを作ります。   一つのプログラムファイルにhtml・css・JavaScriptを記述するのは不可能ではありません。 しかし、プログラムファイルのコードが長くなり、どこに何が書かれているかがわかりづらくなってしまいます。 つまり、プログラムファイルに対するコードの可読性が失われるため、一つのプログラムファイルに記述するのはおすすめできません。   さらに、htmlはページの文書構造をつくり、cssはページを装飾し、JavaScriptはページに動きを付け加えるといったそれぞれの異なる役割を持ちます。 多くのページでサイトが構成される場合、htmlとcssを分割すれば、cssの特定箇所を修正するだけでサイトページを変更できます。 例）サイトのイメージカラーを変えたとき、CSSのカラーを一括すると、サイトの全ページのイメージカラーを変更できる こうした理由からWeb製作の現場では、html・css・JavaScriptのファイルはそれぞれ別ファイルに分けて作ることが一般的です。   その別々に編集したファイルを紐付けて、一つのページとしてまとめるためにlinkタグとscriptタグがあります。   linkタグ linkタグは、他のファイルをリンクしてhtmlファイルに読み込ませます。 rel属性（relationの略）でそのファイルがどんな文書であるかを指定します。 （※スタイルシート(stylesheet)やファビコン(favicon)など） scriptタグ scriptタグは、JavaScriptを読み込むときに使います。   [PR] Webデザインで副業する方法とはlinkタグの使い方 ここからは具体的な使い方について例をみていきます。 まず、htmlファイルとcssファイルの2種類を用意します。 htmlファイルには<body>の部分に<h1>タグで「linkタグの使い方を学ぼう」と入力してみます。 cssのファイルには下記のように記述してみましょう。 ※「font-size: 60px;」は<h1>で書かれた文字のサイズが60px、「color: red;」は<h1>で書かれた文字色が赤 という意味です。 h1  { font-size: 60px;  color: red; } htmlファイルをブラウザで読み込んでみると、<h1>で囲んだ文字が表示されました。 htmlファイルとcssファイルが繋がっていないため、この状態ではまだcssファイルで指定した文字の大きさや色は適用されません。   そこでlinkタグを使って、cssで書いた内容をhtmlファイルに繋げましょう。 rel属性でリンクタイプを指定し、type属性によってどのようなテキストであるか、またhref属性でリンク先のURLを指定します。 linkタグは<head>タグ内に記述しましょう。 <link rel="stylesheet" type="text/css" href="style.css"> すると、<link>タグで指定したファイル（”style.css”）が読み込まれ、文字の大きさと色が変わりました！   続いて、ファビコンの例も見てみましょう。 ファビコンとはブックマーク登録やタブに表示されるときに出てくるアイコンです。   実際のWebサイトでは下のように設定されています。   スタイルシートやファビコンを別ファイルから読み込む際にはlinkタグを使うということを覚えておきましょう。   大石ゆかり CSSは外部ファイルとして読み込んだほうがいいんですか？ 田島悠介 たくさんのページで共通して使う場合は、もちろんHTMLと分けたほうがソースコードも見やすくなるからね。 大石ゆかり タグに直接CSSを適用したら、どちらが優先されるんでしたっけ？ 田島悠介 タグに直接適用したCSSの方が優先されるよ。 大石ゆかり OK！linkタグ覚えました！   scriptタグ 続いてscriptタグです。 Webページには2種類のページがあります。 １つ目は、html・cssだけで書かれた文書のようなページ（静的なページといいます）です。 2つ目は、ドロップダウンメニューやスライドショーなどといったユーザーがアクションを起こすと、それに伴って何か変化が起こる動的なページです。 動的なページには、JavaScriptなどのプログラム言語が使われており、演算機能やループ処理など様々な機能が利用できます。 このJavaScriptを記述する際に利用するタグが、scriptタグです。   scriptタグを使ってhtmlファイル内にJavaScriptを書いてみましょう。 <script type="text/javascript">（JavaScriptのコード）</script> ここでは、JavaScriptで「『JavaScriptでループ処理』という文を1から100までループさせる」というコードを書いてみます。 <script type=”text/javascript”>と</script>の間に書かれている「var i;」から「<BR>”);」までの部分がJavaScriptです。 JavaScriptのループ処理がわからない場合は、JavaScriptでfor文を使ってループ処理する方法をご覧ください。 このhtmlファイルを読み込むと、ブラウザ上で<script>タグ内で書いた処理が実行されました。   今度は、別ファイルで記述したJavaScriptを<script>タグでリンクさせて、htmlファイルに読み込ませてみましょう。 htmlのファイルとjavascriptのファイルを2つ用意して、実行したいJavaScriptのコードをjavascriptのファイルに記述します。（保存する際には「.js」という拡張子を使いましょう） type属性によってどのような種類のテキストなのかを指定し、src属性によって外部ファイル（ここでは”javascript.js”）を読み込みます。 「.js」という拡張子の付いたファイルにコードを書く場合は、開始タグと終了タグの間には何も記述しません。 <script type="text/javascript" src="javascript.js"></script> htmlファイルをブラウザ上で表示させると、src属性で指定した”javascript.js”が読み込まれ、先ほどと同じようにJavaScriptの処理が実行されました。   このように別々のファイルで書かれた内容も、<link>タグや<script>タグを使ってファイル同士を自在に紐付けることができます。 <link>タグも<script>タグも属性を付け加えることで、紐付けたいファイルの種類や場所はどこなのかといった情報を指定します。 外部ファイルを組み込んでリッチなサイトを作りたいときに必要になってきますので、ぜひ覚えておきましょう。   今回はlinkタグとscriptタグを使ってファイルを読み込む方法についてご紹介しました。 HTMLの基礎をさらに学びたい場合は、HTMLでラジオボタンとチェックボックスを表示する方法み合わせてご覧ください。   執筆してくれたメンター メンターSSさん 文系・未経験でIT企業に就職して、9年目。 環境構築から開発・設計・テストまで何でも屋さんをやっていました。 テックアカデミーではJavaコースを担当しています。   大石ゆかり HTMLは文書構造、CSSはデザイン・装飾。JavaScriptは何でしたっけ？ 田島悠介 JavaScriptはブラウザ上で動作する、HTMLファイルの中に書けるプログラミング言語で、Webサイトと親和性が高いんだよ。 大石ゆかり プログラミング言語って何だか難しそう。 田島悠介 コツをつかめば簡単だよ。習い事と同じで、教わればあっと言う間に出来るようになるよ。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
HTML

これだけは覚えておきたい！基本的なUNIXコマンド20【初心者向け】

今回は、プログラミング初心者でも覚えておきたいUNIXコマンドを紹介します。 プログラミングを学んでWeb開発する際に、WebサーバのOSとしてLinuxやUNIX系を利用することがあります。 そのため、Web開発をするためにUNIXコマンドの知識が必要です。 Amazonが運営するAWSといったサービスやCloud9といったサービスでも、UbuntuやLinuxが利用されています。 そのため、特定のOSで利用可能なコマンドです。 また、Macのターミナルを扱う時も使用しますので、覚えておくと便利です。 WindowsでUNIXコマンドを利用できるので、コマンド操作に慣れることは実務においても技術的なレベルが上がります。 そこでこの記事では、プログラミング初心者でも覚えておきたいUNIXコマンドを初心者向けに紹介します。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター    UNIXコマンドとは UNIXコマンドとは、LinuxやUNIX系OSのWeb開発で利用するコマンドです。 ウィンドウやボタン、アイコンといった視覚的なオブジェクトをマウスで操作するインターフェイスをGUI（Graphical User Interface）と呼びます。 一方、文字入力によってコンピュータに命令を与えて操作するインターフェイスをCLI（Command Line Interface）、あるいはCUI（Character User Interface）と呼びます。 「コマンド」とはコンピュータに指示する命令であり、CLI上で用いるプログラム／アプリケーションのことを指します。 UNIXに由来するコマンドを「UNIXコマンド」と呼称します。 現在ではGUIがコンピュータを操作する手法として主流ですが、ある操作の結果を別の操作に用いたり、自動的に複数の操作を行ったりする場合など、CLIの方が適している作業が多く存在します。   Windows10でUNIXコマンドを利用する方法 2021年3月現在の最新バージョンのWindows10では、WSL（Windows Subsystem for Linux）を有効化することでUNIXコマンドを利用できます。 コントロールパネル プログラム プログラムと機能 Windowsの機能の有効化または無効化 上記の順に選択をして、「Linux用 Windows サブシステム」をチェックしてください。 コントロールパネルを開いてプログラムを選択する画面 プログラムを選択してWindowsの機能の有効化または無効化を選択する画面 Linux用Windowsサブシステムを選択してOKを押してください。   Microsoft StoreでUbuntuをインストール Microsoft StoreをWindowsで起動します。 Ubuntuを検索して出てきた表示の入手をクリックしてUbuntuをインストールします。   インストールにはしばらく時間が必要です。   インストールが完了したら起動ボタンを押してください。   Windows上で初期設定を行うための起動が始まります。 初回のみ起動時間が必要です。   ユーザー名とパスワードを設定すると完了です。 パスワードは設定用と入力用に同じものを2回入力する必要があります。   設定が完了したら、UNIXコマンドの入力が可能になります。     [PR] Webデザインで副業する方法とは覚えておきたいUNIXコマンド20 ここからは主要なUNIXコマンド20選を紹介します。 いずれもMacのターミナルで入力した例を画像で表示しているので、ぜひ自分のPCでも試してみてください。   ディレクトリとファイルの確認、移動に使うコマンド   pwd 現在の作業ディレクトリの絶対パスを表示します。 なお絶対パスとは、最上位階層から目的のファイルやフォルダまでの道筋を省略なく記述する方式のことです。 一方の相対パスは、起点となる現在位置から目的のファイルやフォルダまでの道筋を記述する方式です。 入力例： pwd 現在どのディレクトリにいるのかを確認するときに使います。 cd 作業ディレクトリを変更するコマンドです（ディレクトリを移動します）。 入力例： cd (ディレクトリ名) cdだけで実行するとホームディレクトリへ移動します。 「cd -」とすると、直前にいたディレクトリへ移動します。「cd ..」とすると親ディレクトリへ移動します。 ls ディレクトリの内容をリスト表示するコマンドです。 入力例： ls (ディレクトリ名) lsだけで実行すると、現在のディレクトリに含まれるファイル名をリスト表示します。 ディレクトリを指定すると、そのディレクトリに含まれるファイル名をリスト表示します。 また、「ls -l」でパーミッションや所有者などの関連情報を付加して表示、「ls -a」で隠しファイル・隠しフォルダを含めて表示することが可能です。 ディレクトリとファイルの操作で使うコマンド cp ファイルをコピーするコマンドです。 入力例： cp (ファイルA) (ファイルB) この場合ファイルAをファイルBにコピーします。 また「-f」オプションをつけた場合、コピー先に同名のファイルがあった場合上書きされます。 「-i」オプションをつけた場合は上書きするかどうかをファイルごとに確認します。 なおディレクトリを内容ごと（再帰的に）コピーするときは、「-R」オプションをつけます。 mv ファイルの移動およびリネームを行うコマンドです。 入力例： mv (ファイルA) (ディレクトリB) mv (ファイルA) (ファイルB) 1つめの例では、ファイルAをディレクトリBに移動します。 2つめの例では、ファイルAからファイルBに名前を変えることができます。   cpコマンドと同じように、「-f」オプションをつけた場合、移動先に同名のファイルがあった場合は上書きされます。 「-i」オプションをつけた場合は、上書きするかどうかを確認します。 rm ファイルを削除するコマンドです。 入力例： rm (ファイル名) ディレクトリを削除する場合は「-d」オプションを指定しますが、削除できるのは空のディレクトリだけです。 ディレクトリに内容物がある場合は「-r」オプションを指定することで、中に入っているファイルを含めてディレクトリを削除します。   ゴミ箱へ入れるのではなく、即座に削除されることに注意してください。 mkdir ディレクトリを作成するコマンドです。 入力例： mkdir (ディレクトリ名) 通常、指定したパスの途中のディレクトリが存在しない場合はエラーになります。 「-p」オプションをつけると、途中のディレクトリが存在しない場合、それらを含めてディレクトリを作成することが可能です。 touch ファイルの変更日を更新するコマンドです。 入力例： touch (ファイル名) 「touch file1.txt」とすると、「file1.txt」の変更日時が更新されます。 存在しないファイル名を指定した場合、その名前で空のファイルが作成されます。 ln リンクを作成するコマンドです。 入力例： ln -s (ファイル名) (リンク名) 「-s」オプションを付けることで、シンボリックリンクを作成します。 シンボリックリンクは、ディレクトリやファイルのショートカットとして用いられます。 chmod ファイルのパーミッション（所有権）を変更します。 入力例： chmod 750 (ファイル名) この入力例は、ファイル所有者にすべての権限を与え、グループに読み込みと実行権、その他のユーザーは権限なしにするコマンドです。 パーミッションは「mode」引数に8進数字あるいは記号で指定します。 上記の入力例は8進数字の指定です。   8進数字指定する場合は、3桁の値で指定します。 1桁目が「ファイル所有者」のアクセス権、2桁目が「グループ」のアクセス権、3桁目が「その他のユーザー」のアクセス権です。 各桁の値は、読み込み権を表す4と、書き込み権を表す2と、実行権を表す1の和を指定します。 例えば、読み込み権と実行権のみを与える場合には、4と1の和である「5」を指定します。 それぞれの権限の組み合わせと値は、下記の表をご覧ください。 アクセス権 値 0 権限なし 1 実行権 2 書き込み権 3 書き込み権と実行権 4 読み込み権 5 読み込み権と実行権 6 読み込み権と書き込み権 7 すべての権限   また、記号で指定する場合は、以下の記号を組み合わせてパーミッションを指定します。 chmod a+w (ファイル名) この入力例の場合、すべてのユーザーに書き込み権限を付加します。 記号 誰に a すべてのユーザ u 所有者 g グループ o 他のユーザ   記号 付加・除去 + 付加 – 除去 = 全クリア   記号 権限の種類 r 読み w 書き x 実行 chown ファイル・ディレクトリの所有者とグループを変更します。 入力例： chown (ユーザー名) (ファイル名) この例では、指定したファイルの所有者を指定したユーザーに変更します。 なお、ファイルの所有者とグループはファイルのパーミッション範囲に関係してきます（あるユーザーのみアクセス可能など）。 所有者の変更はスーパーユーザーのみ可能です。 chgrp ファイルのグループを変更します。 入力例： chgrp (グループ名) (ファイル名) この例では、指定したファイルの所属グループを変更します。 chownと同じく、グループはファイルのパーミッション範囲に関係してきます（あるグループに属しているユーザーのみアクセス可能など）。   ファイル内容の表示、閲覧するときに使うコマンド cat ファイルの内容を結合し、表示するコマンドです。 入力例： cat (ファイルA) (ファイルB) 複数ファイルの内容を結合して表示します。 ファイルを1つだけ指定して、単にその内容を表示する場合にも使用可能です。 less ファイルの内容をスクロール可能な状態で表示するコマンドです。 入力例： less (ファイル名) ファイル内容を一画面しか見ることができない（スクロールできない）catコマンドとは異なり、スクロール可能な状態で表示するコマンドです。 qを入力すると表示が終了します。   ファイルの検索で使うコマンド find ファイルを検索するコマンドです。 入力例： find (ディレクトリ名) find (ディレクトリ名) -name (文字列) 1つめの入力例では、ディレクトリ内にあるファイルを表示します。 -nameを付けることで、ディレクトリ内にある文字列を指定して検索できます。 また「find . -ctime -1h」とすると、現在のディレクトリ以下で1時間以内に変更のあったファイルを検索します。 grep 指定パターンの文字列を検索するコマンドです。 入力例： grep (検索文字列) (ファイル名) 例えばgrep ba
プログラミング

今さら聞けない！HTMLとは【初心者向け】

この記事は、Webページの仕組みである「HTML」とは何かを説明します。 名前は聞いたことがあるけど、HTMLって何なんだろう Web制作って、いったい何を作っているんだろう Webページは、どういう仕組みで動いているんだろう こんな疑問を持っている方は、ぜひこの記事を読んでみてください。 どういう仕組みでWebページができているのか理解できますよ。 本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。 目次共通部分の多いHTMLincludeの活用方法様々なinclude方法監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLとは何かについて詳しく説明していくね！ 大石ゆかり お願いします！   【動画でも解説しています。クリックで見る！】 HTMLとは HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）の略。 簡単にいうと、コンピュータが理解できる、マークアップをするための言葉です。 マークアップとは、もともと雑誌や新聞の編集用語で、文章構成の指示のことを指します。 「この文章はタイトルです」「この3つの文章が1セットで記事です」というような、注釈のようなものですね。 Web制作では、ホームページ上に表示をしたい文章や写真などの情報に対し、HTMLという言葉で、コンピュータに文章構成を指示することから始まります。   例えば、このような情報をホームページにしたいと思います。 ニュース 孫が生まれて、ついにおじいちゃんになりました。   この情報に対して、日本語で文章構成を指示してみます。 <ここから見出し>ニュース<ここまで見出し> <ここから本文>孫が生まれて、ついにおじいちゃんになりました。<ここまで本文>   これを、HTMLを使ってマークアップすると、このようになります。 <h1>ニュース</h1> <p>孫が生まれて、ついにおじいちゃんになりました。</p>   HTMLという言葉を使うと、<h1>～</h1>で囲まれているのが見出し、<p>～</p>で囲まれているのが本文、という文章構成を、コンピュータが理解できるんです。 このHTMLを表示するときは、<h1>や<p>は見えませんが、<h1>に囲まれている見出しは大きい文字に、<p>に囲まれている本文は小さめの文字になります。 ホームページを作る際、まずはHTMLを使って文章構成の指示を出すことで、ホームページに表示したい情報を形作っていくんですね。   Webページの裏側を見る 普段から私たちがブラウザで見ているWebも、裏側はHTMLでできています。 実際に見てみましょう、HTMLがどんな言葉なのか、より分かってくると思います。   たとえば、テックアカデミーのWebページも、裏側はHTMLです。   Webページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。   すると、英単語と記号が組み合わさった文章が出てきます。 これが、Webページの裏側にある、HTMLで記述された文章。 ChromeやSafariといったWebブラウザがこのHTML文章を読み、Webページをどのように表示するか判断しているのです。   HTMLのような言葉を使って、英単語や記号を組み合わせて書いた、コンピュータが読める文章を、「コード」や「ソースコード」と言います。   Webページは、どのようなWebページにするか、HTMLなどのコードを書いて指示を出して作っていきます。 どのようなWebページでも、裏側のソースコードを表示することができますので、ぜひ試してみてくださいね。   [PR] Webデザインで副業する方法とはHyper Text Link（ハイパーテキストリンク） HTMLがハイパーテキスト・マークアップ・ランゲージの略、ではハイパーテキストって何でしょう？ ハイパーテキストとは、ハイパーな文章、つまり文章を超えた文章のことです・・・といってもよくわかりませんよね。   インターネットが生まれる前、コンピュータは、学者が論文など、文章を共有するために使われていたのです。 そんな中、この共有された多数の文章が、お互いに関連付けられてリンクすることで、情報が無数に広がる。 「文章がリンクする」ことで、文章を超えるという仕組み、Hyper Text Link（ハイパーテキストリンク）を考えだしました。   ハイパーテキストリンクでできたつながりは、蜘蛛の巣のように複雑に広がっていくので、Web（蜘蛛の巣）と呼びます。 Webを世界中につなげよう、というプロジェクトが、WWWやW3と示されている、ワールドワイドウェブ（World Wide Web）です。 今でもURLの先頭にhtpps://www.xxxxx.com のように、wwwをつけていることもありますよね。   HTMLは、ハイパーテキストリンクを実現するための、文章同士のリンクをマークアップすることができる言葉として生まれ、ワールドワイドウェブとともに育ちました。 いまや世界中がWebでつながり、どこにいても瞬時に様々なWebページを見ることができます。 Webの根源となっている考え方がハイパーテキストリンクで、Webを実現する言葉がHTMLなのです。   ハイパーテキストリンクの例【矢印の部分をクリックすると別のページへ移動する】   HTMLのコード【上記ページの裏側（ユーザーには見えない部分）の構造】     HTMLの種類 HTMLには「HTML4」「XHTML」「HTML5」など、バージョンや亜種があり、それぞれ文法や表現できることが少し違いますので注意しましょう。 現在は、HTMLのバージョン5である、「HTML5」が一番よく使われています。     大石ゆかり ソースコード、ハイパーテキストリンク、マークアップ・・・。HTMLってこんなに難しいんですか？ 田島悠介 HTML自体は、Web上の文書みたいなもので、書籍や雑誌と同じだよ。 大石ゆかり なるほど！じゃあ、書籍で言えばソースコードやリンクやマークアップは何に当たるんですか？ 田島悠介 リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。   HTMLファイルの作り方 最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）   以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。 ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。   リンクを表示する リンクを作成した場所へページが移動しました。 リンクを作成するには<a>タグを使用します。 <a>タグの書き方 <a href="リンク先へのパス">リンクを貼るテキストや画像</a> hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(現在の位置を基準としたもの)を入力します。 最後に必ず終了タグ</a>を入力します。   使用例 実際に<a>タグを使用してテキストにリンクを貼ります。 今回は以下のURLを使って、「Coolors」というサイトへのリンクをつなげてみます。 https://coolors.co/ コード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body>
HTML

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

副業したい方

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

はじめての副業コース

転職したい方

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

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

スキルアップしたい方

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

Pythonコース

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

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML 静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】