プログラミング入門ナビ by Proglus（プログラス）

プログラミング学習初心者のための情報メディア

本ページにプロモーションが含まれる場合があります

You are here: Home / Archives for プログラミング入門ナビ編集部

プログラミング入門ナビ編集部

Windows10で隠しファイルと隠しフォルダを表示する方法

By

Windows10で隠しファイル及び隠しフォルダを表示する方法について、プログラミング初心者向けに説明いたします。

隠しファイル、隠しフォルダとは

Windowsの初期設定では、ユーザーから見えないように設定されている、ファイルやフォルダがあります。
これを、隠しファイル、隠しフォルダと呼びます。
システムに関わる重要なファイルやフォルダを、一般ユーザーが間違って消したり、編集してしまわないようにするための設定です。

なぜ、隠しファイルと隠しフォルダを表示するの？

ソフトウェアの開発を上で、隠しファイルやフォルダを編集する必要がある場合があるためです。

例えば、データベースシステムのMySQLの設定ファイルは、下記のファイルパスに配置されていますが、

C:\ProgramData\MySQL\MySQL Server 5.7\my.ini

ProgramDataフォルダは隠しファイルとなっているため、初期設定ではエクスプローラーに表示されません。
これでは、MySQL設定ファイルmy.iniを編集することができません。

関連記事

オンライン講座「はじめてのSQL・データ分析入門」リリースのお知らせ

設定方法

Windows10で隠しファイル（と隠しフォルダ）を、表示する用に設定する手順を説明します。

「エクスプローラー」を開く

「表示」タブをクリック

「隠しファイル」にチェックを入れる

チェックボックス「隠しファイル」にチェックを入れます。
これで、隠しファイル、隠しフォルダがエクスプロラーで表示されるようになりました。

隠しファイル表示OFF

隠しファイル表示ON

矢印で示したフォルダが、隠しファイル（フォルダ）です。
アイコンが少し薄く表示されています。

注意事項

隠しファイルや隠しフォルダになっているファイルは、重要なファイルであることが多いです。
削除や編集を行う時は、十分注意して操作しましょう。

おわりに

この記事では、Windows10で隠しファイル及び隠しフォルダを表示する方法について説明しました。

「Webエンジニア入門総合コース」では、この記事で説明したCSSの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって説明しています。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

関連リンク

Webエンジニア入門総合コース

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

CSSの基礎についてプログラミング初心者のみんなが知りたいこと

By

CSSとはなにかと、CSSの基本的なことについて、プログラミング初心者に向けて説明します。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

CSSとは

CSS(シーエスエス)とはCascading Style Sheetsの略です。
文字の色やサイズ、レイアウトなどを指定できます。
HTMLで書かれた構造化された文章のスタイルを指定するための言語です。

HTMLとCSSの役割分担

HTMLは文章構造、CSSは見た目 と役割分担をして、実装を行なっていきます。

CSSの歴史

CSSの歴史はこのようになっています。

  • 1996年 CSS1
  • 1998年 CSS2
  • 2007年頃〜 CSSが普及し出す
  • 2011年 CSS2.1
  • 2011年 CSS3 （現在はほぼCSS3が利用されている）

1996年から存在するのですが、CSSが普及し出したのは、2007頃からになります。

理由は、当時シェアが高かったブラウザのInternet Expoloerですが、CSSに対応したのは2007年にでたInternet Expoloer7からです。

CSS普及以前のレイアウト方法

余談ですが、CSSが普及するまでは、HTMLのtableタグを駆使してレイアウトを行なっていました。

しかしながら、現在は、HTMLは文章構造、CSSは見た目と分けるのが常識になっていて、
HTMLの昨日を使ってレイアウトを行うのは、原則としては、やってはいけないこととされているので覚えておいておきましょう。

レイアウトにHTMLのtableを使うデメリット

複雑なレイアウトだと実装困難
メンテナンスしにくい
SEO(検索エンジンへの最適化)に弱い

CSSの下位互換性について

この記事では、CSS3について説明します。

ただし、CSSソースが、CSS1なのかCSS2なのか、CSS2.1なのかを意識することはあまりない。

CSSには下位互換性があり、過去の記述方法をしても、動作する.
言い換えると、バージョンが上がるにつれて、機能が追加されてきている。

CSSの標準的なルール

CSSの標準的なルールを学習します。

この、セレクター、プロパティ、値、
どこの、何を、どうする、が

基本のルールとな流ので、覚えておきましょう。

はじめてのCSS

はじめてのCSSを書いてみましょう。

下準備

まず、下準備をします。
Atomなどのテキストエディタを開いてください。
たとえば、デスクトップに設置した、webフォルダに配下に、css_basic というフォルダを作って、その中に、ファイルを作って学習していきましょう。

css_basic フォルダの中に、first.html というhtmlを作ってください。
下記のHTMLを記述して、ブラウザで表示しましょう。

See the Pen
first.html by learnwithnakamura (@learnwithnakamura) on CodePen.

CSSの記述

次にCSSをかいていきます。
CSSを書ける場所は、3箇所あるのですが、順番にみていきましょう。
まず、インライン記述する方法をやってみましょう。

インライン

スタイルをあてたい要素の、開始タグの中にstyle属性を作成して、その中にCSSを書きます。

See the Pen CSS inline by learnwithnakamura (@learnwithnakamura) on CodePen.

#FF0000;というのは、色をRGB値で指定していて、FF0000というのは、赤い色をさします。

ただ、このインラインで書く書き方は、知っておいたほうが良いのですが、一時的にテストする以外は原則使いませんので注意してください。

内部参照

次に、「内部参照」と行って、HTMLファイルの中に書く方法です。

See the Pen css 内部参照 by learnwithnakamura (@learnwithnakamura) on CodePen.

文字色が赤くなっていることが確認できます。
ちなみに、

<style>
      P { color : #FF0000; }
</style>

このように、一行で描いても、動作としては同じですので覚えておきましょう。ただし、基本的には、数行に分けて書いた方が、読みやすいと思います。

ファイルをセーブしてWebページリロードします。
文字色が赤くなっていることが確認できます。

この内部参照の書き方も、知っておいたほうが良いのですが、とりあえず勉強のために動作させてみたいとか、一時的にテストしたいというとき、以外は原則使いませんので注意してください。

外部参照

最後に、一番推奨されるCSSの組み込み方である、「外部参照」という方法です。
これは、CSSを書くだけのファイルを作りそこに、CSSを記載します、。
そしてそのCSSファイルを、htmlからlinkタグを使って読み込む方法です。

css_basicフォルダにstylesheetsというフォルダを作りましょう。

にstylesheetsフォルダ内に、first.css というファイルを作ります。
ここに、cssを記載していきます。

そして、html側に戻って、headタグ内に、linkタグを設置して、cssファイルを読み込みます。

See the Pen CSS 外部参照 by learnwithnakamura (@learnwithnakamura) on CodePen.

rel はrelationの略で、関係という意味です。
これで、このHTMLに対するstyleシートは、first.cssです。という指定になります。

CSSを外部ファイルかすることのメリットとしては、
複数のページ間でスタイルの使い回しができる点です。
例えば、サイトのテーマカラーを変更する必要が出てきたときも、一箇所変更するだけで、サイト全体の設定が変わります。

補足としては、例えばとtopページだけ、一部スタイルを変えたいときは、どうするかです。
HTMLから複数のCSSファイルを読み込むことができるので

共通のCSSを用意して、特定ページだけ、特別に用意したCSSも提供するというのをよくやるので、ここでは、そういうこともやるのだ程度に覚えておいてください。

CSSの組み込み方による優先順位

CSSの組み込み方による、優先順位について説明します。

同じ内容の指定をした場合、優先順位としては、
インライン > 内部参照, 外部参照
と覚えておくと良いでしょう。

ただしこの優先順位については、覚えておいたほうが良いルールではあるのですが、不具合の温床になるので、基本的には、外部参照、つまり、外部ファイルにCSSを記載する方法に統一するのが望ましいです。

CSSのコメント

コメントはHTMLの記事でも学習しましたが、
ファイルには書いてあるけれども、ブラウザで表示する時には、無効になるものです。

HTMLのときとは書き方が違うので注意しましょう。

/* コメントしたい文字列 */

というように、記号で囲います。
何かしらのC言語系のプログラミング言語を学習したことがある方には、馴染みがあるかもしれません。

複数行になってもOKです。

h1 {
  /*color: red;
    padding-top: 1px; */
}

colr redのスタイルと、padding-topのスタイルが無効になります。

テキストエディタAtomのショートカットはhtmlのときと同様に、
macの方は、commandキー + /キー . windowsの方はcontrolキー + /キー で、コメントのON/OFFができます。

色の指定 color

CSSのプロパティ colorについて、学習していきましょう。
colorは、名前の通り色を指定するプロパティです。

色指定の方法

色指定をする方法として、

RGB値で指定する方法

一般的なのは、RGB値で指定する方法です

RGB値というのは、色の表現法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の三つの原色を混ぜて幅広い色を再現。

いわゆる、光の三原色のことで、学校で習った方もいると思います。

一番左の2桁がRed、次の2二桁がGreen, 次の3桁がBlueを指定指定しています。値は、それぞれ00からのFFの、10進数でいうと0から255の間の相対値で指定することができます。言い換えると、RGBをそれぞれ8bitで指定します。

赤を指定する場合、
  • 16進数・・・#FF0000
  • 16進数(RGBそれぞれがゾロ目の場合3桁で省略できる)・・・#F00
  • 10進数・・・rgb(255, 0, 0)
  • %で指定・・・rgb(100%, 0% , 0% )
16進数とは

16進数を忘れていたり、学習していなかったりしても大丈夫です。補足します。

10進数と16進数の関係です。

16進数の場合は、9まで進んだ後に、10にならずに、ABCDEFまで行って、10（イチ ゼロ）になります。

10進数 16進数
0 0
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F
16 10

RGBについてさらに詳しく知りたい方は、wikipediaに詳しくのっているので、参照してみてください。

カラー名で指定する方法

例えば、赤であれば redとなります。

他にどんな名前があるかは、MDNに掲載されているので参照してみてください。

色、キーワード、RGB、16進数値が載っています。
CSSのバージョンによって、指定できる色名が増えていったということも、頭の片隅に入れておきましょう。

例

h1要素の色を赤にします。
いろいろな記述方法で指定してみます。

See the Pen OvYjEX by learnwithnakamura (@learnwithnakamura) on CodePen.

背景とボーダー

要素の背景色を設定する

background-color プロパティを使います。

要素の枠線の色を指定する

border-color プロパティを使います。

ボーダーの種類

border-style プロパティを使います。

none・・・ボーダーなし
solid・・・一本の直線
dotted・・・点線
など

例

See the Pen CSS 背景とボーダー by learnwithnakamura (@learnwithnakamura) on CodePen.

セレクター

セレクターの種類

セレクターとは、スタイルをどこに対して当てるかを指定するものです
セレクターには次のものがあります。

  • エレメント（要素）セレクター
  • IDセレクター
  • クラスセレクター

一つずつ見ていきます。

エレメント（要素）セレクター

実例：

h1 {
  color : #FF0000;
}

IDセレクター

「html」

<p id="hello">こんにちは</p>

「CSS」

#hello {
     color: # blue;
}

クラスセレクター

「html」

<p class="hello">こんにちは</p>

「CSS」

.hello {
     color: # blue;
}

おわりに

この記事では、文字の色やサイズ、レイアウトなどを指定できる、HTMLで書かれた構造化された文章のスタイルを指定するための言語CSSについて説明しました。

「Webエンジニア入門総合コース」では、この記事で説明したCSSの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって説明しています。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

関連リンク

Webエンジニア入門総合コース

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Windows10で32bit版か64bit版かを確認したい

By

Windows10で、使用しているパソコンが32bit版または64bit版のどちらであるか確認する方法について説明します。

Windows環境で、プログラミングの学習を初めると、開発に必要なソフトウェアをインストールする時に、32bitまたは64bitのどちからをお使いの環境に合わせてダウンロードしてください、といったときがでてくると思います。

最近のPCであれば大抵64bit版ですが、わからない場合は念のため一度確認しておきましょう。

Windows10で、32bit版か64bit版かを確認する方法について説明いたします。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

システム設定を開く

スタートメニューをクリック
設定アイコンをクリック

「Windowsの設定」画面


「Windowsの設定」画面で、「システム」をクリックします。

バージョン情報をクリック


「システム」画面で、「バージョン情報」をクリックします。

32bitか64bitかを確認


デバイス仕様のシステムの種類欄に、記載があります。
この例では、64-bitと記載があるので、64bit版であることが確認できました。

x86とx64について

補足となりますが、
32bitは “x86″、64bitは”x64″と呼ばれることもあるので覚えておきましょう。

おわりに

この記事では、Windows10で、使用しているパソコンが32bit版または64bit版のどちらであるか確認する方法について説明しました。

「Webエンジニア入門総合コース」では、HTMLの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

関連リンク

Webエンジニア入門総合コース

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLとは？プログラミング初心者のみんなが知りたい基本的なこと

By

HTMLとはなにかと、HTMLの基本的なことについて、プログラミング初心者に向けて説明します。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

HTMLとは

HTML （エイチ・ティー・エム・エル / HyperText Markup Language）は、Webページの内容を記述するためのマークアップ言語と呼ばれるです。

マークアップとは

コンテンツのはじめと終わりに「タグ」と呼ばれる印をつけて、意味付けをしていくことです。

例

<h1>見出し</h1>

HTMLの歴史

1989年 スイス・ジュネーブにあるCERN(欧州原子核研究機構) ティム・バーナーズ・リー博士によって開発されました。

研究の情報や進行状況を共有するという課題の解決のために作られた。

1991年 世界で初めてのWebサイトがティム・バーナーズ・リー博士によって公開

復刻版ですが、世界で初めてのWebサイトを見ることができます。

主要なHTMLのバージョン

主なHTMLのバージョンは下記になります。

  • 1999年 W3C勧告 HTML 4.01
  • 2000年 W3C勧告 XHTML 1.0
  • 2014年 W3C勧告 HTML 5
  • 2016年 W3C勧告 HTML 5.1 (HTML5のマイナーアップデート)

HTML 4.01 やXHTML 1.0 が、10年以上使われていたのですが、今は、新規のプロジェクトに関しては、HTML5一択の状況です。HTML5.1など新しいバージョンも徐々に利用が進ものと考えられます。

補足として用語の解説をいくつかします。

HTML5

フォームに使える部品や、スマートフォン向けの機能など大幅にアップグレード。
ビデオをページに埋め込むことも可能になりました。
HTML5はHTML4の良い部分を残しつつ、新しいニーズにあった機能を追加しています。

W3C（ダブリュー・スリー・シー）

World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。

HTMLの基本構文

HTMLの基本構文

開始タグ、終了タグで挟む形で、コンテンツがあります。
開始タグ+内容+終了タグ を要素と言います。

これがHTMLを学ぶ上で、一番重要なルールになるので、必ず覚えておきましょう。

タグで何かしらのコンテンツを挟む形になります。

終了タグには、スラッシュがつくところも、重要です。

具体例

具体例は、このようになります。

HTMLの基本構文 具体例

HTML文章の基本構造

HTML文章の基本構造 1

HTMLの文章の基本的な構造は、
まず、html要素が始まる前の文章の先頭にDOCTYPE宣言と呼ばれる
使用するHTMLの種類を宣言を行います。

続いて、html要素を記述します。

HTML要素はHTML文章の最上位要素です。

html要素の中には、 head要素と、body要素を記述します。

次にhead要素を記述します。

head要素には、文章タイトル、文字コード、キーワード、説明文、関連ファイルなどの文章の基本情報を記述します。
head要素に記述されたものは、ブラウザには表示されません。

次に、body要素を記述します。
Body要素は、コンテンツを記述する部分です。
ここに記述した内容が、ブラウザの画面に表示されます。利用するユーザーから見える部分です。

HTML文章の基本構造 2

具体例

最小構成のHTML文章（Webページ）の、コードは下記のようになります。
見出し文字列「はじめてのHTML見出し」を表示するだけです。

<h2>はじめてのHTML見出し</h2>

Webブラウザで表示

Webブラウザ Google Chromeで表示すると、この用に表示されます。

HTMLに関するドキュメント

HTMLに関するドキュメントを参照したい時は、
Mozilla Foundationが運営している、MDN(エムディーエヌ・Mozilla Developer Center)が、便利です。

HTML、CSS、API を含むオープンウェブ技術に関する情報が掲載されています。

若干初心者には取っ付きにくいのですが、網羅性と正確性が高く、実務でも利用機会があります。

必要に応じて参照するとよいでしょう。

HTMLのコメント

コメントとは

htmlファイルには書いあるが、ブラウザで表示されなくする
注意書きと書いたり、一時的に無効にしたい時に使用します。

コメントアウトとは

文書（の一部）をコメントにすることをコメントアウトという

コメントの使い方

<!-- この文字列は表示されません。 -->

このようにコメントにしたい文字列を記号で囲います。

コメントの注意点

コメントは入れ子にしないでください。
言いかえると、コメントの中にコメントはかけません。

テキストエディタAtomでのショートカット

Atomでコメントを簡単なに、ON/OFFできるショートカットについてです。
Macの方は、commandキー + スラッシュキー、
Windowsの方はコントロールキー + スラッシュキーです。
ON/OFFが簡単にできるので、便利です。

基本的なタグ

HTMLの基本的な要素 (タグ)は、MDNに記載があります。
mdn htmle element reference

100個くらいあるが、よく使うのは、10-15個。
全部覚えなくても良いです。
必要になったら、MDNなどで、調べてください。

見出し要素 h1〜h6

h1は、見出し要素と言います。文書中の見出しを示す為の要素です。
見出し要素は、6段階、h1〜h6までがあります。
h1が最上位で h​6が最も低いレベルです。

<h1>見出し h1</h1>
<h2>見出し h2</h2>
<h3>見出し h3</h3>
<h4>見出し h4</h4>
<h5>見出し h5</h5>
<h6>見出し h6</h6>

Webブラウザで表示

このように、スタイルを当てていない状態だと、hの数字が小さいほど、重要な見出しとして、文字サイズが大きくなることがわかります。

タイトル要素 title

文章（Webページ）のタイトルをつけることができる要素です。

例えば、head内のtitleタグに、次のように記述します。

例

<head>
  <title>はじめてのタイトル</title>
</head>
Webブラウザで表示

重要なテキストを表すstrong要素

重要なテキストは、strong要素で囲います

例

はじめての<strong>HTML</strong>入門
Webブラウザで表示

strong要素で囲ったところが、太文字で強調して表示されます。

リスト要素

リストの種類

  • リスト 順序なし
  • リスト 順序あり

順序なしのリスト

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>

ulタグで囲った中に、箇条書きしたい項目をliタグで並べます。
liタグは、listの略です。

ul は、Unordered List（アンオーダード）の略で、順序のないリストを記述する時に、使います。

順序ありのリスト

ulタグを、olタグに書き換えましょう

<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

olは、Ordered Listの略で、順序のあるリストを記述する時に使います。

リストのネスト

ネストは入れ子構造とも言います。
例えば、りんごの下に、りんごの品種をリスト表示したいと思います。

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>ぶどう</li>
</ul>
<ol>
  <li>りんご
    <ul>
      <li>ふじ</li>
      <li>つがる</li>
      <li>王林</li>
    </ul>
  <li>みかん</li>
  <li>ぶどう</li>
</ol>

Webブラウザで表示した例

divとspan

  • div (divisionの略）
  • span

vは、span どちらも、 任意の範囲をグループ化するのに使います
タグ自身は意味を持たない
スタイル(CSS)を当てるときに使います。

div, spanの違い

displayというCSSのプロパティの値の違い
div→display: block
span→display: inline

まだ、CSSを学習していないので、さわりだけ簡単に説明します。

幅と高さを指定できるかどうか
div できる、span はできない。

前後に改行が入るかどうか
div 入る spanは、入らない。

注意点

spanの中にdivは入れない。
これはいいのですが、

<div>私はWebエンジニアを目指しています。</div>

これは基本やらないです。

私は
<div>Webエンジニア</div>
を目指しています。

もう少しきちんと説明すると、
inlineの要素（spanなど）の中には、blockの要素（divなど）は入れません。

ブロック要素、インライン要素に何があるか詳しく知りたい方は、MDN参照してください。
– ブロックレベル要素 | MDN
– インライン要素 – MDN

属性 attribute

属性とは

タグに何かしらの設定をできるもの（オプションをつけられる）

基本構文

基本構文 属性

開始タグの中には、属性名と属性値があります。
属性名と属性値を合わせて、属性と言います。英語でいうと、attributeです。

属性の種類

MDNのHTML attribute reference に乗っているので、リファレンスとしてつかえます。

ただし、これの８割型使われないので、全部覚えなくても大丈夫です。

imgタグを例として説明

画像を表示するする時にタグです。

イメージタグにはsrc属性があり、画像のパスを指定します。

<img title="imgタグ.jpeg" src="https://programmingnavi.com/wp-content/uploads/2018/04/imgタグ.jpeg" alt="Imgタグ" width="599" height="337" border="0" />

※ htmlファイルと同じフォルダに、画像を置いた時の例。

リンク a要素

a要素は、リンクを貼る時に使います。

例

<a href="https://programmingnavi.com">プログラミング入門ナビ</a>
例)プログラミング入門ナビのトップページへのリンク

プログラミング入門ナビ

リンク先の種類

リンク先の種類には次のものがあります。

  • 別サーバーにある外部Webページ
  • サイト内部リンク
  • ページ内リンク

補足 : 使える文字列

フォルダ名とか、ファイル名は、英数字とハイフン、アンダースコアくらいの範囲を使ってください。
フォルダ名、ファイル名に日本語がまじっていても、動くかもしれませんが、トラブルのもとなので実務上は使いません。

おわりに

この記事では、HTMLとはなにかについてプログラミング初心者向けに説明しました。

「Webエンジニア入門総合コース」では、HTMLの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。

264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

関連リンク

Webエンジニア入門総合コース

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTMLでname属性を使ってフォームのフィールドに名前をつける方法

By

はじめに

HTMLのname属性を使って要素に名前をつける方法について、プログラミング初心者の方に向けて説明いたします。

この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。

name属性とは

次のHTMLの要素に対して、name属性をつかって要素の名前をつけることができます。

  • <button></button>

  • <form>

  • <fieldset>

  • <iframe>

  • <input />

  • <keygen>

  • <object>

  • <output>

  • <select>

  • <textarea>

  • <map>

  • <meta>

  • <param>

1番利用頻度が多いのはフォームName属性は、送信されたフォームでサーバがフィールドを識別するために1番よく使われます。
例ログインフォーム。「ユーザーネーム」入力欄、「パスワード」入力欄、「ログイン」ボタンがあります。

<form action="#" method="post">
  <input type="text" name="username" placeholder="ユーザーネーム">
  <input type="password" name="password" placeholder="パスワード">
  <input type="submit" value="ログイン">
</form>

ブラウザからフォームのデータがサーバへ送信された時、サーバサイドのプログラムは、- name属性がusernameだから、ユーザーネームとして処理しよう- name属性がpasswordだから、パスワードとして処理しようということができるようになります。

おわりに

この記事では、HTMLのname属性について学習しました。
「Webエンジニア入門総合コース」では、データベースの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。

Web開発に必要なプログラミングスキルを1つのコースで沢山学べてお得です。264レクチャー・18時間の大型コースとなっています。

内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！

ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！ウェブ開発入門完全攻略コース - HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！中村 祐太 Yuta Nakamura, Proglus （プログラス）Ruby on Rails7/MySQL/Bootstrap/AWS Cloud9/Git/GitHub等ウェブ開発に必要な様々なスキルを沢山学ぼう！カフェのウェブサイト、フォトギャラリー、ポートフォリオサイト、タスク管理アプリ等に挑戦！ 4.4 (7383 ratings)462 lectures, 28 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する