HTML

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLをリンクして新しいウィンドウで開く方法について解説しています。基本のリンクの書き方と別ウィンドウで開くときのそれぞれの書き方、新規ウィンドウを使う場合に適切な場面について見ていきましょう。

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

HTMLをリンクして新しいウィンドウで開く方法について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方の記事を読むとさらに理解が深まるでしょう。

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

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

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

HTMLをリンクして新しいウィンドウで開く方法について詳しく説明していくね！

お願いします！

リンクタグとは

リンクタグは、ブラウザの画面を閲覧中のHTML文書(Webサイト)から他のHTML文書に移動させるものです。ブラウザで閲覧中の画面の内容が変更されることから、「ページ(画面)遷移」とも呼ばれています。

そして、「ページ遷移」を実現するための代表的な手法として、「リンクタグ」(aタグ)があります。そして、aタグとタグに付随する属性(href)を記述し実装します。以下がリンクタグを用いるコードの例となります。

HTML

<a href="https://techacademy.jp">テックアカデミー</a>

テックアカデミー

属性の使い方と新しいウィンドウで開く方法

aタグに付随する属性は、約10種類以上もあるものの、おもに使用するのは2種類のみです。「リンクタグ」の説明でもふれたhref属性、その「ページ遷移」を実現するための対象を定めるtarget属性です。この他の属性は、ブラウザの種類によっては、挙動として不安定な動作があるため、細かく知らなくても問題ありません。

以下のコードは新しいウィンドウを開くためのコードの例となります。

HTML

<a href="https://techacademy.jp">テックアカデミー｜同一の画面</a>

<a href="https://techacademy.jp" target="_blank">テックアカデミー｜新しいウィンドウ(タブ)</a>

テックアカデミー｜同一の画面
 テックアカデミー｜新しいウィンドウ(タブ)

同一の画面の方は新規のタブを開くことなく、そのままリンク先に移動します。

対して、新しいウィンドウ(タブ)の方はtarget属性の値として_blankを設定しているため、href属性の値として指定されたURL(リンク先)がブラウザの新しいタブで表示されます。

また、余談として、新しいタブが作られる場合に、タブの機能がなかった古いブラウザでは、リンク先が文字どおり「新しいウィンドウ」と表示されていました。

[PR] Webデザインで副業する学習方法を動画で公開中

新しいウィンドウで開く場面

同じドメインのWebサイトから、他のドメインのWebサイトを表示させる場合では、「新しいウィンドウ（タブ）」が活用されています。また、閲覧中のWebサイトからユーザーを離脱させたくないなどの理由がある場合は、「新しいウィンドウ（タブ）」で表示させる方法がよく選ばれています。

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

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

HTMLをリンクして新しいウィンドウで開く方法がよくわかりました！

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

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

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

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

HTMLで画像の画質が荒くなる原因と対処法を現役デザイナーが解説【初心者向け】

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

HTML

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

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

HTML

【入門向け！】独学に最適なHTMLを学べる学習サイト20選

Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web関連の学習に当たってまず必要な...

HTML

HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

HTMLのfieldset要素で使える属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

HTMLの特殊文字で表示できる星について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、H...

HTML

HTMLでタブ文字を入れる方法を現役デザイナーが解説【初心者向け】

HTMLでタブ文字を入れる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 HTMLでタブ文字を...

HTML

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

HTMLのリンクで別ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

HTMLのリンクで別ウィンドウを開く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。目次別ウィンドウとは HTMLのリンクで別ウィンドウを開く方法実際に書いてみよう本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介リンクで別ウィンドウを開く方法について詳しく説明していくね！大石ゆかりお願いします！別ウィンドウとはブラウザは複数のウィンドウを立ち上げることが可能で、別ウィンドウとは、現在Webサイトを開いているウィンドウとは別のウィンドウのことを指します。通常のリンクでは、同じウインドウ内でページを移動します。 [PR] Webデザインで副業する学習方法を動画で公開中HTMLのリンクで別ウィンドウを開く方法 HTMLでは、別ウィンドウを立ち上げることができません。代替案として、同じウィンドウの別タブでページを開くことができます。外部リンク（現在閲覧しているWebサイトとは別のサイトを参照する）の場合や、お問い合わせなどの入力フォームで、「プライバシーポリシー」のページを表示する際など、現在のページをキープしながら別のページを見せたいときに、別タブで開く方法が用いられていることが多いです。どうしても別タブではなく、別ウィンドウでWebサイトを開きたい場合には、JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】の記事を参考にしてください。別タブ（GoogleChrome）別ウィンドウ（GoogleChrome）別タブでページを開きたい場合にも、通常のリンクと同様に<a>タグを使用します。 TechAcademyマガジンのトップページに移動するリンクを配置したい場合、HTMLは以下のように書きます。 <a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a> 別タブでページを開く場合には、<a> タグに target=”_blank” を追加して、以下のように書きます。 <a href="https://techacademy.jp/magazine/" target="_blank">TechAcademyMagazine</a> ただし、別タブで外部ページを開く場合には注意が必要です。別タブで開いたWebサイト上に悪意のあるプログラムが書かれていた場合に、元のタブのWebサイトにアクセスされて別の悪意のあるWebサイトに移動されてしまう可能性があります。これを回避するための方法として、target=”_blank”を使用する際には<a>タグにさらに、rel=”noopener” または rel=”noreferrer” を追加し、以下のように書くとよいです。 <a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener">TechAcademyMagazine</a> <a href="https://techacademy.jp/magazine/" target="_blank" rel="norefferrer">TechAcademyMagazine</a> こうすることで、別タブで開いたWebサイトに万が一、悪意のあるプログラムが書かれていても安心です。 rel="noopener" や rel="noreferrer" はあってもなくても動作に変わりはありません。 IE11では rel="noopener"が非対応（2021/2/10）ですので、rel="noopener noreferrer" としておくとよいでしょう。参考：https://web.dev/external-anchors-use-rel-noopener/ 実際に書いてみようテックアカデミーマガジンのWebサイトをそのままのタブで開くリンクと、別タブで開くリンクを書いてみます。通常のリンク（同じタブでページを移動） <a href="https://techacademy.jp/magazine/">TechAcademyMagazine</a> 実際のリンク > TechAcademyMagazine 別タブで開くリンク <a href="https://techacademy.jp/magazine/" target="_blank" rel="noopener noreferrer">TechAcademyMagazine（別タブで開きます）</a> 実際のリンク > TechAcademyMagazine 執筆してくれたメンターメンター稲員さんフリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。おうち大好きマンです。大石ゆかり内容わかりやすくて良かったです！田島悠介ゆかりちゃんもわからないことがあったら質問してね！大石ゆかりわかりました。ありがとうございます！ HTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

JavaScriptで新規ウィンドウを開く方法を現役エンジニアが解説【初心者向け】

JavaScriptで新規ウィンドウを開く方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptで新規ウィンドウを開く方法について詳しく説明していくね！大石ゆかりお願いします！新規ウィンドウのしくみ新規ウィンドウは、指定されたURLのリソースを別のタブや別のウィンドウに読み込むことで開かれます。 JavaScriptで新規ウィンドウを開く場合は、URLを引数に渡すことでそのURLのリソースを、新しいウィンドウに読み込んで表示するということが行われます。 JavaScriptで新規ウィンドウを開く方法 JavaScriptで新規ウィンドウを開く場合は、window.open()を使用することが可能です。window.open()は以下のように使用します。 window(url,ウィンドウの名前,オプション) 第1引数のurlには、新規ウィンドウに読み込ませるurlを指定します。第2引数には、ウィンドウの名前を指定します。任意の名前を指定できます。第3引数では、ウィンドウの大きさや出現する位置といったオプションを指定します。以上が使い方です。 [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみようそれでは実際にwindow.openを使用して、google.comを開いてみましょう。第1引数には、googleのトップであるhttps://www.google.comを指定します。また今回はウィンドウの大きさも指定してみます。高さ300幅300のウィンドウを作成します。 var mywindow = window.open("https://www.google.com","mywindow","width=300,height=300") またcloseメソッドを呼び出すことでウィンドウを閉じることもできます。 mywindow.close() 以上で解説を終わります。筆者プロフィールメンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

HTMLでアンカータグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLのアンカータグについて解説します。アンカータグが使えるようになると、Webページにリンクが張れるようになるのでぜひ参考にしてください。目次アンカータグと属性アンカータグの使い方まとめ【動画の解説はこちら！】田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介アンカータグを使う方法について詳しく説明していくね！大石ゆかりお願いします！アンカータグと属性今回はリンクの張り方について学んでみましょう。 Web上ではリンクをクリックすれば、簡単に見たいWebページにアクセスすることができます。このリンクをWebページに張るには、アンカー<a>タグを使います。アンカータグとは、Webページにリンクを張り、そのページとリンク先のページを繋ぐタグです。また、HTML要素として識別するためにアンカータグは属性を付与できます。一般的に利用されるアンカータグの属性は以下の2つです。 href属性 Hypertext Reference id属性それぞれの属性の内容と記述方法を解説します。 href属性 Hypertext Reference href属性は、リンクの飛び先がどこであるのかを伝えます。以下のようにhref属性を利用して、任意のURLを記載できます。 <a href="https://techacademy.jp/"></a> id属性要素にID名をつけて、特定部分を識別します。 id属性は、同一ページ内にリンク先を作成できます。以下のようにid属性を利用して、文書内の別場所に移動できます。 <p id=”index”></p> <p>タグなどに対してid属性（index）を付与し、特定できます。大石ゆかり aタグで色んなサイトにリンクを張ることが出来るんですね♪ 田島悠介そうだね。自分のサイト内の別のページへもリンクを張れるよ。大石ゆかり id属性って特定部分を指定するって何ですか？田島悠介ページが長い時に、クリックで特定の箇所に素早く移動させることが出来るんだよ。今から説明するね。 [PR] Webデザインで副業する学習方法を動画で公開中アンカータグの使い方基礎がわかったら、実際に使ってみましょう。タグに属性をつけ加えるときには半角スペースを使います。 <a (半角スペース)href="好きなサイトのURL">サイトのページ名</a> 実際のURLで書いてみます。 <a href="https://techacademy.jp/">テックアカデミー</a> ブラウザ表示結果は以下のとおりです。ここで、ページのリンクをクリックしてみましょう。 href属性で指定したURLにアクセスできましたね。また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。先ほどのhref属性を「#index」に変えます。このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。「#indexの場所へ移動」をクリックすると、id属性で指定したリンク先（index）へ飛びました。まとめ今回はHTMLでアンカータグを使う方法をご紹介しました。 href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書をハイパーテキストといいます。 HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書（ハイパーテキスト）をつくる言語です。 Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点がHTMLの大きな特徴です。次から次へと移動しながら得たい情報を自由に得られるハイパーリンク機能により、インターネットはまたたく間に世界中に広がっていきました。あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。 <a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。ぜひ覚えておきましょう。さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。執筆してくれたメンターメンターSSさん文系・未経験でIT企業に就職して、9年目。環境構築から開発・設計・テストまで何でも屋さんをやっていました。テックアカデミーではJavaコースを担当しています。大石ゆかり techacademy.jpにリンクを張ることが出来ました！でも、今見ていたタブ？ページが上書きされちゃった。田島悠介新しいタブ、新しいウィンドウで表示する場合はtarget属性に_blankを指定してあげるんだ。大石ゆかり今度は、新しいタブに表示されました♪ 田島悠介自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。 TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

HTML

今さら聞けない！コマンドプロンプトの使い方【初心者向け】

初心者向けに、Windowsの「コマンドプロンプト」の使い方を紹介した記事です。コマンドプロンプトは、WindowsのPCがあれば誰でも使うことができますが、通常は利用することはほとんどありません。ただし高度な設定をする場合や、Windowsでプログラミングをおこなう場合には利用する必要があります。そのため、プログラミングを勉強する前に基本的な使い方を覚えておくと良いでしょう。なお、Macで使えるターミナルとほぼ同じものです。また本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。なお、今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次本記事は、下記の流れで説明します。主要コマンドも紹介しているので、記事を読んだらすぐに使ってみてください。コマンドプロンプトとはコマンドプロンプトの使い方コマンドプロンプトの主要10コマンドコマンドプロンプトとはコマンドプロンプトとは、コマンドと呼ばれる命令文を用いてWindowsの操作や設定をおこなうためのツールです。真っ黒の画面を見たことがあるかもしれません。コマンドプロンプト上では、マウスやトラックパッドを用いて操作するのではなく、キーボードで「コマンド」と呼ばれる命令を入力することによって操作します。この記事では、コマンドプロンプトの基本的な使い方や、よく利用されるコマンドについてまとめています。 [PR] Webデザインで副業する学習方法を動画で公開中コマンドプロンプトの使い方コマンドプロンプトはスタートメニューから開くことができます。スタートメニューの検索で「cmd.exe」と入力してみてください。ここで表示されるのがコマンドプロンプトです。次にウィンドウを大きくしたり、色を変更していく流れを紹介していきます。左上のアイコンをクリックするとプロパティが表示されます。そこからフォントタブを選択し、文字サイズを選択することができます。自分が使いやすい大きさにするといいでしょう。オプションコマンドプロンプトのプロパティを開いた状態で、最初に表示されるのがオプションです。オプションでは、カーソルのサイズ、コマンドの履歴、編集オプションの設定が可能です。カーソルのサイズカーソルのサイズでは、コマンドプロンプト上で表示されているカーソル自体の大きさを、大中小から選択することが可能です。コマンドの履歴コマンドの履歴ではバッファーサイズとバッファー数と重複する古い履歴を破棄する設定が可能です。バッファーサイズでは履歴をどれくらい保存するか設定できます。たくさん保存自体場合は数字を増やします。バッファー数はプロセスごとの保存数を設定できます。通常利用の場合変更不要です。重複する古い履歴を破棄する設定を有効にすると無駄な履歴がなくなります。編集オプション編集オプションは基本的に全てチェックした状態で所為です。簡易編集モードでは、コピー・アンド・ペーストが利用できます。挿入モードでは、コマンドの挿入が可能になります。 Ctrlを有効にすると、Ctrlキーを利用可能になります。テキストの選択行の折り返し選択を有効にするでは、1行を折り返して表示することができます。テキスト選択キーを拡張することで、一般的なショートカットキーを利用することができます。現在のコードページ現在のコードページでは文字コードが表示されています。従来のコンソールを使う従来のコンソールを使うを有効化すると、再起動することで以前のバージョンのコマンドプロンプトを利用できます。コンソールの新機能の詳細コンソールの新機能の詳細では、マイクロソフトのWebページに遷移してコンソールの新機能を知ることができます。フォントウィンドウの大きさも同様にフォントタブでサイズを選択することで、自由に変更することができます。サイズサイズでは文字サイズを変更できます。フォントフォントでは文字フォントを変更できます。選択したフォント選択したフォントでは実際に選択したフォントがどのように表示されるか見ることができます。レイアウト「レイアウト」のタブを選択すると、画面バッファーのサイズやウィンドウのサイズ、ウィンドウの位置を変えることができます。画面バッファーのサイズ画面バッファーのサイズでは、画面全体としてのサイズを指定できます。ウィンドウのサイズウィンドウのサイズでは、ウィンドウのサイズ自体を指定できます。ウィンドウの位置ウィンドウの位置では、コマンドプロンプト起動時のウィンドウの位置を指定できます。画面の色「画面の色」のタブを選択すると、ウィンドウの色を自分が見やすいように変えることができます。画面の文字では、最終的にどのような文字や背景や色を利用するかを設定することが可能です。色に関してはRGBの値を指定することで様々な色を指定することが可能です。画面の色以外に、ポップアップする表示の文字と背景色も変更することが可能です。また、不透明度を変更することで、コマンドプロンプトの後ろに別のウィンドウがある場合、後ろのウィンドウを透けて見せるかどうかを設定する事が可能です。不透明度が100%の場合は、後ろの別のウィンドウは全く見えません。不透明度30％にすることで、後ろのウィンドウをより透けて見えやすくすることができます。不透明度が30％より小さい値が無いのは、不透明度の値が小さすぎるとコマンドプロンプト自体が透明になり見えなくなるためです。閉じる時にはコマンドプロンプトの左上にあるアイコンをクリックして終了を選択したり、右上にあるバツ印をクリックして閉じます。基本的な使い方はこれだけです。コマンドプロンプトの主要10コマンド基本的な使い方がわかったところで、コマンドプロンプトでよく使うコマンドを10つ紹介します。どれも基本的なコマンドですので、覚えておきましょう。 cd 現在表示されているディレクトリ（カレントディレクトリ）を表示することができます。コマンドを打ち実行するだけで確認できます。また、「cd パス」を入力するとカレントディレクトリを変更することができます。この際、指定するパスは、現在のカレントディレクトリを基準として指定する必要があります。 dir dirと入力するだけで、カレントディレクトリにあるファイルやフォルダーの一覧が表示されます。また、「dir パス」とすることで、指定したパスに含まれるファイルなどを表示することも可能です。 tree dirと似ていますが、ディレクトリ構造をグラフィカルなツリーで表示することができます。 type テキストファイルの内容を確認するコマンドです。「type ファイル名」とすると、ファイルの内容が出力されます。 ren ファイル名を変更する際に利用します。「ren 対象のファイル名新しいファイル名」とすることで変更可能です。 move 大きく分けて2つの利用目的があるコマンドです。 1つは、ファイルを移動する時に利用します。「move 移動するファイル名移動先パス」とすることで、移動します。 2つ目は、ディレクトリ名を変更する時に利用します。「move 変更前ディレクトリ名変更後ディレクトリ名」とすることで変更可能です。 copy ファイルをコピーする時に利用します。「copy コピー元コピー先」とすることでコピー可能です。 del ファイルやフォルダを削除する時に利用します。「del ファイル名」とするとファイルが削除されます。 help コマンドの使い方を調べることができます。「help コマンド名」とすることで、そのコマンドの使い方が表示されます。 cls 画面を消去するのに使用します。clsと入力することで、コマンドプロンプトの画面に表示されていた内容が消えます。今回の記事は以上です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。紹介したコマンドはぜひ自分で試してみてください。 [お知らせ]TechAcademyでは初心者でもエンジニアになれるオンラインブートキャンプを開催しています。これからプログラミングを学びたい、エンジニアとして活躍したいという方はぜひご覧ください！また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。

プログラミング

WordPressでウィジェットを編集する方法【初心者向け】

WordPress初心者向けに、基本操作を解説する記事です。今回は「ウィジェット」の作成・編集を扱います。なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！ウィジェットってなんですか？田島悠介ウィジェットっていうのはね、サイト上に設置するパーツのことだよ。ウィジェットとはウィジェットとは、WordPressのサイトやブログで、固定の位置に特定の機能を表示するパーツのようなものです。例えば、こんなことができます。サイドバーにカレンダーを表示したい複数のリンク集を、好きな順番で表示したいアーカイブを表示させたいブログのツールを使ったことがある人であれば、イメージがつくと思いますが「ブログパーツ」と考え方は似ています。それでは、実際にウィジェットを編集していきましょう。大石ゆかりウィジェットについてはわかったんですけど、どうやって設置するんですか？田島悠介とても簡単に設置できるから、実際に設置してみようね。ウィジェットの管理画面ウィジェットを編集するには、管理画面から設定を行う必要があります。 WordPressの管理画面から管理画面>外観>ウィジェットで開いてみましょう。ウィジェットの管理画面はこのようになっています WordPressのテーマによって表示が異なりますが、画像ではTwenty Fourteen を使用しています。 [PR] Webデザインで副業する学習方法を動画で公開中ウィジェット管理画面の見方ウィジェットの管理画面には、2つの表示があります。利用できるウィジェット（画面中央）ウィジェットの表示箇所（画面右側）上記画面のように設定していると、実際のサイト上では、サイドバーに【検索】【最近の投稿】【アーカイブ】【カテゴリー】の順番で表示されることになります。このように、サイドバーやフッターをカスタマイズしたいときは、追加したいウィジェットを希望のエリアに追加すればいいのです。ウィジェットの追加/削除管理画面の見方がわかったら、実際にウィジェットを編集してみましょう。ウィジェットの追加はとても簡単です。追加したいウィジェットを、希望のエリアまでドロップするだけです。例として、サイドバーの一番上に自己紹介を載せてみます。まず、「テキストウィジェット」をメインサイドバーに追加しました。次に、テキストの内容を編集します。編集が完了したら、【保存】ボタンを押して反映させます。これだけで、サイト上に反映されました。ウィジェットを削除したい場合は、この逆で、メインサイドバーなどのエリアから、利用できるウィジェットエリアにドラッグ＆ドロップで戻せばOKです。今回はテキストのウィジェットを紹介しましがた、カスタムリンクや、カレンダーなど、用途に合わせた様々なウィジェットが用意されています。他にカスタマイズ方法として、WordPressのカスタムフィールドの編集方法の記事もあります。ぜひ、活用してオリジナルなサイトを作ってみてください。大石ゆかり簡単に色々な機能を設置できて便利ですね♪ 田島悠介そうだね。Twitterのツイートとかも設置できたりするから、色々試してみると良いよ♪ 大石ゆかりはい♪ [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

WordPress

特定の場所に移動したい！HTMLでジャンプする方法【初心者向け】

今回はHTMLでジャンプする方法を説明していきます。 HTMLでジャンプするというのは、今見ているページから別の情報が掲載されているページに移動するという意味です。リンクが指定されている部分をクリックすることで、別のページに移動させる必要があるときに利用します。実務でもホームページを制作するWeb制作では、正しいページに正しいリンクを設定することが求められるため、ぜひ一緒に勉強しましょう。目次他ページにジャンプする方法同一ページの特定の場所にジャンプする方法実際に書いてみよう aタグ以外でページ移動をする方法 aタグを利用してボタンのような表示にする他のページにジャンプする方法他のページにジャンプするにはリンクを貼る必要があります。リンクの貼り方は以下の通りです。 <a href="#">ここをクリックすると飛びます。</a> 上記のような記述で他のページへのジャンプが可能です。「#」の部分に飛ぶ先のページを記述します。そのようにすることでジャンプを実現できます。大石ゆかり aタグ(アンカータグ)によって、別のページに移動できるんですね～。田島悠介そうだよ。自分のサイトの違うページや外部のサイトへ移動できるんだよ。また、そのページの特定の位置にも移動できるんだ。大石ゆかり同じページの中でも移動できるんですか？田島悠介できるよ。では、実際に見てみよう！ [PR] Webデザインで副業する学習方法を動画で公開中同一ページの特定の場所にジャンプする方法同一ページにジャンプする先を「アンカー」と言います。アンカーの貼り方ですが、以下のようにします。コード <a href="#index">テックアカデミー</a> <a id="index">ここはindexというidがついた場所です</a> 解説 <a href=”#index”>テックアカデミー</a>をクリックすると、<a id=”index”>ここはindexというidがついた場所です</a>の場所にジャンプします。アンカー元を「#アンカー名」で設定し、アンカー先を「アンカー名」を設定しましょう。大石ゆかり hrefは飛び先のURLですよね？ #(シャープ)がついていてlinkって名前が書いてあるだけですね。田島悠介ほとんど全てのタグにid属性をつけることができるんだ。そのidにつけた値を指しているんだよ。大石ゆかり同じページ内で移動しなきゃいけないなんて、どんな時ですか？田島悠介内容が長いとページの長さも長くなるので、そういう時にページ内ジャンプがあると便利かな。実際に書いてみよう実際に書いてみてWebブラウザーで見てください。今回は異なるページへのリンクがあるので、HTMLは2つ作成します。 HTML -sample.html- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <h1>別pageジャンプ</h1> <p> <a href="sample2.html">sample2へ</a> </p> <h1>page内ジャンプ</h1> <p>

HTML