HTML

HTMLでcode要素を使ってソースコードを表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLでcode要素を使ってソースコードを表示する方法について解説しています。プログラミングのコードであることを示すときにcodeタグを使用します。preタグの使い方とも合わせて覚えておきましょう。

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

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

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

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

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

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

code要素を使ってソースコードを表示する方法について詳しく説明していくね！

お願いします！

code要素とは

HTML文書にて、プログラムのソースコードを表示するためのタグです。また、明示的にソースコードの掲載であることにも繋がります。ソースコードにインデントなども記述してから可読性を向上させている場合は、codeタグをpreタグの内部に含めてから記述します。

なお、外部ファイルとしてソースコードを読み込むためのタグではないことに留意してください。また、HTML4.01からHTML5でも用途や仕様に変更はありません。

活用場面

プログラム言語やAPI（Application Programming Interface：アプリケーション・プログラミング・インターフェース）のリファレンスにて活用されることが期待できます。そして、ソースコードを管理するためのシステムにも相性が良いと考えられます。また、単純に、ソースコードをサンプルとして提示するために使用できます。

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

code要素を使ってみよう

codeタグのみを使用した場合と、codeタグが含まれたpreタグも使用した場合の2種類のサンプルコードとともに各々を説明します。目的や用途によって、どちらか一方の記述に分けられますが、codeタグが含まれたpreタグも使用した場合の方が可読性があります。

特に理由がない場合は、後者の方法を使用することをお勧めします。

codeタグのみを使用した場合

See the Pen
2020-02-11-sample03 by YOHEI INAI (@yohei_inai)
on CodePen.

改行が表示されず、1行のソースコードとして表示されてしまいますので、読みづらいソースコードになってしまいます。行末記号を1回だけ記述された1行のソースコードやターミナルのコマンドなどの表示には適していますが、複数行におよぶソースコードの表示には適していません。

codeタグが含まれたpreタグも使用した場合

See the Pen
2020-02-11-sample04 by YOHEI INAI (@yohei_inai)
on CodePen.

preタグにcodeタグが含まれた場合、改行やインデントも表示されて、可読性のあるソースコードが表示されます。原文どおりに表示されますが、改行やインデントが自動的に付与されるわけではありません。あらかじめ、ソースコードに改行やインデントも記述しておく必要があります。

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

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

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

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

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

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

HTMLとCSSだけでポップアップ表示を作成する方法を現役デザイナーが解説【初心者向け】

HTMLとCSSだけでポップアップ表示を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLタグで文字色を自由に指定する方法を現役エンジニアが解説【初心者向け】

HTMLタグで文字色を自由に指定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そも...

HTML

Expressを使ってHTMLを表示する方法を現役エンジニアが解説【初心者向け】

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

HTML

HTMLをスマホ対応にする方法を現役デザイナーが解説【初心者向け】

HTMLをスマホ対応にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HT...

HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方ボタンを作るためにbutto...

HTML

自分でも作ってみたくなる！HTML5でできているゲーム10選

HTML5を使えば簡単にゲームを作ったり、やったりと楽しむことができます。その中でHTML5に興味をもってもらえるようなゲームを10個紹介していきたいと...

HTML

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

Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説

Visual Studio Code（VSCode）について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。Visual Studio Codeとはエディタのひとつです。機能性や拡張性や開発者コミュニティなどが優れており、使いこなせるようになると実装したい機能を手早くプログラムできるようになりましょう。今回の記事では概要から実際のダウンロード方法まで解説していきます。なお本記事は、TechAcademyのオンラインブートキャンプの内容をもとにしています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、プログラミングに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio Codeについて詳しく説明していくね！大石ゆかりお願いします！目次 Visual Studio Codeとは Visual Studio Codeの特徴 Visual Studio Codeを使うメリット/デメリット Visual Studio Codeの使い方 Visual Studio Codeの料金 Visual Studio Codeの評判 Visual Studio Codeを使うべき人まとめ Visual Studio Codeとは Visual Studio Codeとは、プログラミングを行う時は「エディタ」と呼ばれるソフトウェアのひとつです。エディタとは言わば高機能なメモ帳のようなものです。エディタには多くの種類がありますが、その中でも現在エンジニアの間で最も多く利用されていると言われているのが「Visual Studio Code（ビジュアル・スタジオ・コード）」です。エンジニアの間では略して「VSCode（ブイエスコード）」と呼ばれています。 Visual Studio Codeは単にエディタというだけではなく、プログラミングやシステム開発に関する様々な作業を効率的に行える機能が数多く用意されています。プログラミングを開発するソフトウェア群を「開発環境」と呼びます。 Visual Studio Codeは数多くのプログラミング言語で使用されている主要な開発環境の1つと言えます。 [PR] Webデザインで副業する方法とはVisual Studio Codeの特徴 Visual Studio Codeはマイクロソフト社が開発しているエディタであり以下のような特徴があります。オープンソース誰でも無償で利用できます。 Visual Studio Codeのソースコード自体もGitHubというWebサイトで誰でも閲覧可能な状態で管理されています。多くのオペレーティングシステム（OS）に対応 WindowsやMac、Linuxなど、多くのオペレーティングシステムに対応しています。多くの言語に対応メニューなどの表記を様々な言語に切り替えることが可能です。英語や日本語だけでなく、中国語やフランス語、ドイツ語など多くの言語に対応しています。拡張機能「拡張機能」と呼ばれる仕組みで機能を追加することが出来ます。拡張機能は数多く提供されており、プログラミングの目的に合った拡張機能を組み合わせることで最適な開発環境を構築することができます。その他ソースコードの入力補助（コード補完）や見た目を変えるテーマ、キーボード入力の変更など、多くの機能が提供されています。なお、Visual Studio Codeと名前は似ていますが全く別の製品としてVisual Studioがあります。 Visual StudioはWebやWindowsアプリーケーションなどを構築する統合開発環境です。エディタ機能に加えてシステム開発プロジェクトの管理やアプリの試験、解析などを行う機能が組み込まれています。用途が異なりますので間違えないように注意しましょう。 Visual Studio Codeを使うメリット/デメリット Visual Studio Codeを使うメリット/デメリットについて解説していきます。メリットは開発効率の向上上記のようにVisual Studio Codeは非常に自由度と拡張性が高いエディタであるため、慣れてくるととても作業効率が上がることを実感できます。現在最も多く利用されているエディタだけあり、システム開発で使用されるバージョン管理やUI設計などのソフトウェアとの連携、クラウド環境との接続などをVisual Studio Code上で行うことが出来ます。利用者が多いため、使用方法などについて多くの情報を得られることもメリットの1つです。デメリットは機能を使いこなせない逆にデメリットとして、あまりにも機能が豊富すぎるため、最初はメニュー構成や設定、拡張機能の導入などに戸惑うことも多いと思われます。これらについてはインターネット上で多くの導入事例が提供されているため、自分の目的に合った開発環境を構築する情報を収集すると良いでしょう。また、インターネットから切り離された環境の場合、拡張機能のインストールなどを手動で行う必要があり、やや運用が面倒に感じられるかもしれません。ただ一度開発環境を構築してしまえば常時インターネット接続は必須ではないため、そのような環境でも十分に運用に耐えられることでしょう。 Visual Studio Codeの使い方それでは具体的にVisual Studio Codeの使い方をご説明しましょう。ダウンロード手順 Visual Studio

プログラミング

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次code要素とは活用場面code要素を使ってみよう監修してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHub は、Git を使用したソフトウェア開発とバージョン管理のための人気のあるプラットフォームおよびクラウドベースのサービスです。コードを効率的に保存、管理、共同作業するために必要なツールを開発者に提供します。ユーザーフレンドリーなインターフェースと豊富な機能を備えた GitHub は、世界中の開発者にとって不可欠なツールとなっています。 GitHub はテクノロジー業界では有名な名前かもしれませんが、ライブカジノへのユニークなアプローチを持つオンラインカジノ市場も多くの日本人プレイヤーに人気を集めています。その一例が、プレイヤーに没入型でインタラクティブなゲーム体験を提供する日本の市場志向のオンラインカジノ、ライブカジノハウスです。オンラインカジノブランドレビュー関連ページで調べる通り、ライブカジノハウスは、日本の文化と技術の要素を取り入れることで、ライブカジノの伝統的なコンセプトを次のレベルに引き上げます。伝統的な日本の衣装を着たライブディーラーから高度なバーチャルリアリティテクノロジーまで、ライブカジノハウスはプレイヤーにユニークなゲーム体験を提供します。イノベーションと顧客満足に重点を置いているライブカジノハウスは、日本市場で大きな支持を得ています。その成功は、日本のオンラインカジノ業界の可能性を浮き彫りにし、多様な興味や好みに応えるために継続的に進化している様子を示しています。より多くの日本のプレーヤーがエンターテインメントのニーズのためにオンラインカジノに目を向けるにつれて, ライブカジノハウスや他の日本の市場志向のオンラインカジノが、伝統的なカジノ体験の限界を押し広げ続ける様子を見るのはエキサイティングです。 GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] Webデザインで副業する方法とはGitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。 GitHubの使い方それでは使い方を覚えていきましょう。基本的なGitの作業は下記のような流れとなるので、GitHubを使って順番に紹介します。なお、「1」の作成は初回のみ行い、「2」から「5」を繰り返します。基本的に小さい作業の単位でコミットを行い、ある程度作業がひと段落した時にプッシュをするのが一般的です。コミットの作業がわかりやすいように、コミットメッセージを残しておくと、ログを追っていく時に役立ちますので覚えておきましょう。 Githubでリポジトリを作成（git init）ファイルの作成、編集を行うファイルの作成/変更/削除をgitのインデックスに追加する（git add）変更結果をローカルリポジトリにコミットする（git commit）ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる（git push） GitHubでリポジトリを作成（git init）まずはリポジトリを作成します。 GitHubにログインした状態で以下にアクセスします。 https://github.com/new 次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。また、リポジトリの種類を「Public」か「Private」を選択します。ソースコードを公開したくない場合は「Private」を選択すると良いでしょう。最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。 .gitignoreやlicenseについては後で追加や変更ができるので、Noneを選択します。必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。ファイルの作成、編集を行うはじめに、ローカルのPC上にローカルリポジトリを作成します。今回は「awesome」というディレクトリを作成することにします。以下の操作はWindowsであればPowerShell、Macであればターミナルで行います。コマンドは1行ずつ、最後にEnterキーを押して入力しましょう。 mkdir awesome cd awesome git init 「mkdir」は新しくディレクトリを作成するコマンドで、「cd」はディレクトリを移動するコマンドです。 awesomeというディレクトリを作成し、そのディレクトリに移動してから作業が始まります。そして、この「git init」コマンドはGitリポジトリを新たに作成するコマンドです。バージョン管理を行っていない既存のプロジェクトをGitリポジトリに変換する場合や、空の新規リポジトリを作成して初期化する場合に使用します。 git initコマンドを実行するとカレントディレクトリをGitリポジトリに変換します。次に、テキストエディタなどで以下のHTMLファイルを作り、先ほどのawesomeフォルダに「hello.html」という名前で保存しましょう。現在の状態を確認しましょう。 git status 結果は以下のようになります。 hello.htmlが「Untracked files」、つまりインデックスに登録されていないファイルとして表示されています。 On branch master Untracked files: (use "git add <file>..." to include in what will be committed) hello.html ファイルの作成/変更/削除をgitのインデックスに追加する（git

Git

HTMLでコードを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLでコードを表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次code要素とは活用場面code要素を使ってみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLでコードを表示する方法について詳しく説明していくね！大石ゆかりお願いします！ HTMLでコードを表示する方法 <code>~</code>で囲む codeタグは、プログラミングのソースコードやコンピューター用語を表示するタグです。タグで囲まれた部分がコードであるということを意味します。ソースコードをそのまま書いてもいいですが、それだと読む側にとってはわかりにくいですよね。以下のように文章中のコードをcodeタグで囲むことで、囲んだ部分の文字が変わり、コードであるということを明示できます。 If you try to execute the <code>drive()</code> function on the <code>vehicle</code> object, it goes on. 大石ゆかりコードの説明なんて、IT系のサイトじゃないと使わなさそうですね～。田島悠介そうだね。普通のサイトではあまり使わないタグかもしれないね。大石ゆかり複数行のコードの場合もcodeタグを使うんですか？田島悠介複数行のコードの場合は、preタグを使うことが多いよ。 preタグは、HTMLで入力したとおりに表示させることができるんだ。今から文章を改行する方法と、preタグについてもそれぞれ説明するね。文章の途中で改行する方法改行したい部分に を書くエディタなどでHTMLに文章を入力する際、ただEnterキーを押すだけではブラウザの表示は改行されず、ひと続きの長い文章になってしまいます。そのため、文章を改行したい部分にはbrタグを書く必要があります。なお、brタグは閉じタグを持たないタグのため、開始タグ単独で使うことができます。以下のように文章中の改行したい位置にbrタグを書きましょう。 brタグを使って改行を入れることにより、長い文章も読みやすくなります。 改行したい部分にbrタグを入れてみましょう brタグを書いた箇所が改行されました。 [PR] Webデザインで副業する方法とは入力したとおりに表示させる方法 <pre>~</pre>で囲む複数行のコードをエディタで入力したとおりに表示させたい場合があります。そんな時は、preタグで囲むことでエディタで入力したとおりにブラウザで表示されます。つまり、改行・インデント（字下げ）・半角スペースなどがそのまま表示されます。以下は表示例です。 preタグで囲まれた部分は、改行やインデント（字下げ）がそのまま表示されています。プログラムコードをそのまま表示させたいときにpreタグを使うと、長いプログラミングコードでもすっきりと書くことができます。大石ゆかりあれ？preタグの中にHTMLタグを書いたんですが、何も表示されないんですけど・・・。田島悠介 preタグでも「< 」や「 > 」や「 & 」は特殊文字として認識されるから、それぞれ「<」「>」「&」のように置き換えて書く必要があるよ。大石ゆかりそうなんですか～。てっきり、そのまま表示されるとばかり思ってました。田島悠介後、preタグはソースコード以外にも、アスキーアートのような文字で絵や地図を表現したりする場合にも使われるんだよ。まとめ今回はHTMLでコードを表示する方法をご紹介しました。プログラミングコードは英単語を基にして開発されたものなので、英文中にコードが混ざっているとパッと見ではわかりづらかったりします。文章中のコードはcodeタグを、複数行にわたるコードの場合はpreタグを使うことにより、言葉としての文字とプログラミングコードとしての文字をわかりやすく区別することができるでしょう。さらにHTMLを学びたい場合は、HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。 HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

JavaでExit Codeを操作する方法を現役エンジニアが解説【初心者向け】

JavaでExit Codeを操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Javaについてそもそもよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まるでしょう。なお本記事は、TechAcademyのオンラインブートキャンプ、Java講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Exit Codeを操作する方法について詳しく説明していくね！大石ゆかりお願いします！目次 Exit Codeとは Exit Codeを操作する方法実際に書いてみようまとめ Exit Codeとは Exit Codeとは終了コードのことです。例えば、shellなどからJavaのバッチプログラムを呼び出す際に、shellなどにJavaの処理がどのようになされたのかを伝える役割があります。通常Exit Codeが0で渡った時には通常終了を意味し、0以外のExit Codeが渡った時には何かしらのエラーなどの異常終了を意味します。 [PR] Webデザインで副業する方法とはExit Codeを操作する方法 Exit Codeを操作する方法としてSystem.exitメソッドを使う方法をみていきましょう。 System.exitメソッドは以下のように使用します。 System.exit(Exit Code); System.exitメソッドの引数にその終了を意味したいExit Codeを設定することでShellなどにそのExit Codeを渡すことが可能です。またSystem.exitメソッドを実行すると、処理の途中であっても実行されたら即Javaプログラムは終了します。同じく終了時に使うreturnはfinallyブロックの処理を実施して終了し、System.exitメソッドはfinallyブロックの処理も実行せずに終わるという点で違いがあります。実際に書いてみよう実際にSystem.exitメソッドを使ってExit Codeを操作してみましょうソースコード public class SampleClass { public static void main(String[] args) { try { System.out.println("動作開始"); String str = ""; int num = Integer.parseInt(str); System.out.println(num);

Java

Visual Studio CodeでPythonを実行する方法を現役エンジニアが解説【初心者向け】

Visual Studio CodeでPythonを実行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Visual Studio CodeでPythonを実行する方法について詳しく説明していくね！大石ゆかりお願いします！ Pythonやその他の言語をプログラムしていく上で必須のツールとなるのが、テキストエディタです。今回は数あるエディタの中でも世界で最もよく使われてるエディタであるVisual Studio Codeについて紹介していきます。目次 Visual Studio Codeとは Extensionのインストール Pythonのパス設定の確認 Pythonプログラムを実行してみようまとめ Visual Studio Codeとは Visual Studio Code (以下「VS Code」と呼ぶ）はMicrosoft社が開発したソースコードエディタです。VS CodeはWindows, Linux, macOSにて使用することが可能です。Githubとの連携、コード補完機能、プログラムコードのチェックおよび自動補正機能等の拡張機能（エクステンション）をインストールできます。また、VS Codeは無料でインストール可能で、動作が軽いことでも知られています。そのため、Stack OverflowのDeveloper Survey Result2019では世界で一番人気のあるテキストエディタになっています。 VS Codeのインストールはvisualstudio公式サイトから行うことができます。 [PR] Webデザインで副業する方法とはExtensionのインストール Extensionのインストールも非常に簡単に行うことができます。まずはExtensionのアイコンをクリックしてみましょう。一番左側にあるアイコンの並んでいるバーからExtensionアイコンを選択します。こちらがExtensionのアイコンになります。あとはお好きなツールをインストールするだけです。非常に簡単なのが分かると思います。せっかくなので、PythonのExtensionをインストールしてみましょう。まずは「Python」と検索してみてください。検索結果が表示されましたら、PythonのExtensionを選択してインストールしてみてください。たったこれだけでExtensionのインストールが完了しました。是非様々なExtensionをインストールしてみてください。 Pythonのパス設定の確認 Pythonのパスを設定するためにはSettingから変更可能です。「python.pythonpath」と検索してみてください。こちらからPythonのPathを設定可能です。macの場合ですとデフォルトはPython2になります。そこで最新のPythonをインストールしてそちらにPathを変更してみましょう。「/usr/bin/python3」(Macの場合）と入力またはコピペしてみてください。これでpythonのPathの設定が完了しました。 Pythonプログラムを実行してみよう早速Pythonのプログラムを実行してみましょう。まずは実行したいファイルのあるフォルダーを開きます。ターミナルを通常起動すると、ディレクトリの移動をしなくてはなりませんが、VS Codeでは選択したフォルダーでターミナルが起動するようになっています。次にターミナルから「新しいターミナル」を開きます。ターミナルウインドウが出てきましたら、実行したいファイルを指定します。この時どのディレクトリにいるかを注意してください。新しくフォルダを作成した場合にはそのフォルダへの移動もしくはパスの指定が必要となります。実行するときは普段ターミナルから実行する場合と変わりません。今回はtest.pyを実行してみましょう。試しにtest.pyには以下のコードを入力しておきます。 print('Hello World') それでは実行してみましょう。ターミナルに以下のように入力してみてください。 python3 test.py スクリプトは実行されましたでしょうか？ Hello World と出力されていればOKです。まとめ今回はVS CodeでPythonを実行する方法をみていきました。 VS Codeは非常にパワフルなツールとなっています。是非とも使いこなせるようになって、開発の効率化を計りましょう！！監修してくれたメンターメンターkatoさん学生時代に数値解析のためにプログラミングを始める。現在は企業にて専門職として働くかたわら、プログラムを書き業務効率化を図っている。現在のメイン言語はPython, JavaScript。また、企業内の希望者にPythonのメンターとして基礎から教えている。テックアカデミーではJavaScriptを教える。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でも、Pythonを使った人工知能（AI）や機械学習の基礎を習得できる、オンラインブートキャンプを開催しています。また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

Python

プログラミングに使える！フリーのテキストエディタ15選

プログラミングをこれから勉強する場合、「どのエディタを使ったらいいの？」という疑問を持つかもしれません。そこで、初心者にもおすすめのテキストエディタをピックアップしてみました。また、テキストエディタ以外に統合開発環境も一緒に紹介します。 Windows、Macそれぞれに使えるエディタで、できるだけ日本語に対応したものを選んでいます。紹介するテキストエディタを比較して自分に合ったものを探してみてください。そもそもテキストエディタとは何なのかよく分からないという人でも知っておいて損は無いでしょう。なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。目次テキストエディタとは TeraPad(テラパッド) サクラエディタ Atom Notepad++（ノートパッドプラスプラス） CotEditor mi Sublime Text Brackets 秀丸エディタ Liveweave mou Visual Studio Xcode Eclipse vi(vim) / Emacs Visual S Visual Studio Code テキストエディタとはテキストエディタとは、パソコン上でメモやプログラムを書くことのできるソフトです。基本的には無料のソフトが多く、Windowsでは「メモ帳」、Macでは「テキストエディット」という名前のアプリケーションがデフォルトで入っているかと思います。もちろんそのアプリケーションを使ってプログラミングをしたり、執筆作業をすることもできますが、プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができるのです。外部ツールを取り入れることができたり、画面を分割して複数のファイルを同時に確認することができるなど様々な機能が備わっています。フォントや色なども自分好みに合わせることができるので、プログラミングをする人は専用のテキストエディタをインストールすることをおすすめします。今回紹介するテキストエディタは、利用する人も多く人気のソフトが多いので、まだ使ったことがない人はぜひ選ぶ上での検討材料にしてもらえればと思います。 [PR] Webデザインで副業する方法とは1. TeraPad（テラパッド） Windows用のテキストエディタです。国産のエディタですのでインタフェースが日本語です。シンプルさを特徴としており複雑な設定が必要ありません。ソースコードの色分け機能などが付いており初心者でも安心して使えます。英語のエディタでは分かりにくく、すべて日本語であってほしいという人にはおすすめです。機能面はそこまで充実してるとは言えませんが、使い勝手は良いでしょう。 TeraPadの使い方 2. サクラエディタ Windows用のテキストエディタです。オープンソースでだれでもソースコードを編集できるため、多くの開発者によって機能が追加されてきました。こちらも国産エディタなのでインタフェースは全て日本語です。複数のファイルから同時に検索できるGrep機能や、キーボードマクロの登録などが可能で、豊富なカスタマイズ機能を持っています。サクラエディタの使い方 3. Atom 2014年にGitHubが公開したテキストエディタになります。とにかく便利なプラグインが多く、他のエディタを使っていたエンジニアもAtomに乗り換えた事例をよく耳にします。エディタのインターフェースが非常に見やすく、機能追加も無料でできるので初心者の方でもすぐ使い慣れるでしょう。Windows、Mac OS X、Linuxで利用できるので、誰でも手軽に使えます。特にテキストエディタを使ったことがないという人は、Atomを使うところから始めて見ても良いかもしれませんね。 Atomの使い方 4. Notepad++（ノートパッドプラスプラス）「メモ帳」に替わるエディタを目指して開発されたWindows用のエディタです。開発元は海外ですが、様々な言語に対応しており、日本語でも使うことができます。動作が軽快で、他のエディタよりもデフォルトで多くのプログラミング言語の色付けをサポートしています。 Notepad++の使い方 5. CotEditor（コットエディター） Mac用のテキストエディタです。国産のためインタフェースがすべて日本語で使えます。とてもシンプルで初心者でも使いやすく、様々なプログラミング言語の色付けも行ってくれます。Mac のテキストエディタの中でも人気がある定番エディタとなっています。軽量のアプリなので、PC自体の容量も特に気にせず利用できると思います。 CotEditorの使い方 6. mi（ミ） Mac用のテキストエディタです。国産のためインタフェースが日本語です。自動的に関数の一覧表や、ファイルの一覧表などを作成してくれるプログラマに嬉しい機能が付いています。また、エディタの背景画像を設定できるので見た目にこだわりたい方にもおすすめです。UTF-8といった文字コードも画面の上から簡単に変えることができます。 miの使い方 7. Sublime Text（サブライムテキスト） Windows、Mac、Linux対応のテキストエディタです。インタフェースは英語ですが、日本語の入力は可能です。使い勝手やデザインが良く、最近特に注目されています。シンタックスカラーリングや、ソースコード全体のマップ表示など便利な機能も揃っています。有料ソフトなのですが、現在はバージョン3の評価版が無料で無制限に使えます。気に入ったらそのまま購入することも可能です。エディタはタブの表示で使うこともできます。プラグイン機能も充実しており、使えば使うほど自分用にカスタマイズすることができます。 Sublime Textの使い方【初心者向け】 8. Brackets Bracketsは、Adobeが提供しているエディタで、クイックエディット機能など拡張性に優れており素早くコーディングすることができます。クイックエディット機能の例を紹介すると、HTMLファイル上である要素のCSSを編集したいと思ったらCSSファイルに移らずにその場で編集することができます。HTMLファイル上にCSSを書いていくのではなく、CSSファイルをポップオーバーとして表示され、選択した要素のスタイルのみ編集することができるのです。また、HTML/CSSだけでなくJavaScriptのコードヒントも質が高いので、まだプログラミングを始めたばかりでも詰まらずにコーディングすることができるでしょう。 Brackets 9. 秀丸エディタ Windows用の有料エディタになります。より作業を効率化させる機能が多く搭載されており、例えばマクロ機能やコードの折りたたみ機能など複雑なソースコードでもシンプルに見せることができるでしょう。タグの色分けも細かく行えるので、複数人で開発しても読みやすいコードを書くことができるかと思います。学生は無料で利用できるので、Windowsユーザーは試してみても良いかもしれませんね。秀丸エディタ 10. Liveweave Liveweaveは、HTML5、CSS3、JavaScriptをリアルタイムで確認できるテキストエディタです。自分で編集しながらその場で確認でき、かつ軽量なので、スペックの低いPCでも手軽に利用できるのが特徴です。 HTML/CSS、JavaScriptのみの対応ですが、静的ページを作成する際には便利でしょう。初心者の方は自分の勉強にも役立ててみてください。簡単なソースコードの確認などに向いています。 Liveweave 11. mou マークダウンで書くことができるMac専用のエディタです。記述用とプレビュー用の2画面をリアルタイムで確認することができるので、非常に便利でしょう。 Macユーザーしか利用できないアプリですが、マークダウンで書くことに慣れている人にはおすすめのエディタになるはずです。 mou 12. Visual Studio（ビジュアルスタジオ） Microsoft が提供するWindows用の統合開発環境です。テキストエディタも内部に含んでおり、Windows用のアプリケーションを開発するときや、Xbox 360 用のゲーム、Windows Phone 用のアプリケーションを開発するときなどに使います。多言語に対応しており日本語でも使うことができます。 WindowsやXbox360用のプログラムを開発したい方はこのソフトに慣れておくと良いでしょう。いくつかのエディションがあり、Expressエディションが無料になっています。また、Microsoftはオープンソースの無料IDEである、Visual Studio Codeを公開しています。 Visual StudioとVisual Studio Codeの差は、利用者数全体の割合からすると徐々に縮まってきています。そうはいっても、Visual Studioの方が、ソースコードの管理、バグトラッカー、デプロイメントツール等全部入りとも言える機能を保有しています。そういう意味でも、.Net開発者にとっては、単なるIDEというわけではなく、これ以上無い有益なソリューションと言えます。 Visual Studioの使い方 13. Xcode（エックスコード） Appleが提供するMac用の統合開発環境です。iPhone や iPad、Mac用のアプリ開発に必要な機能がそろっているため、 iPhone アプリを開発したい方は、使い方を覚えて損はないでしょう。もちろん、その他のアプリケーションを開発するためにも使えます。ただし、インタフェースは英語です。 iPhoneアプリ上に地図を表示したい、ボタンを表示したいといった際もソースコードを書く必要はなく、それ用のキットが多く揃っているので、簡単に設置することができます。エラー箇所も指示してくれるので、初心者でもスムーズに開発を進められるはずです。 Xcodeのインストール方法 14. Eclipse（エクリプス） IBMによって開発された、様々な用途に使用できるオープンソースの統合開発環境です。Windows、Mac、Linuxなど多くのOSに対応しています。 Androidアプリを開発するときには、Google が提供するADT Bundleという開発セットの中に入っているEclipseを使うこともあります。Androidアプリを開発したい方はEclipseの操作に慣れておくと良いでしょう。インタフェースは英語ですが日本語化も可能です。大規模なアプリケーションの開発にも向いているので、ファイル構造が複雑になっても操作しやすいでしょう。 Eclipseのインストール方法 15. vi(vim) / Emacs つぎに、viとEmacsを紹介します。こちらは主に CUI 環境で使われるエディタです。Linuxユーザやサーバエンジニアによって広く利用されています。 GUI のエディタに慣れたユーザにとってはキー操作が異なり取っ付きづらい部分もありますが、サーバの設定をしたりLinuxの操作をしたい方は慣れておくと良いでしょう。もちろんプログラミングにも使用できます。 GNU Emacs ※ viは多くのLinuxディストリビューションで最初から使用できます 16.

プログラミング

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLでcode要素を使ってソースコードを表示する方法を現役デザイナーが解説【初心者向け】

code要素とは

活用場面