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

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

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

You are here: Home / Archives for HTML

HTML

HTML/CSS/JavaScriptの開発環境構築入門

By

HTML/CSS/JavaScriptの開発環境について、プログラミング入門者向けに説明いたします。

この記事は、オンライン講座「Web開発入門完全攻略コース」のサポート記事です。

プログラミング入門。HTML/CSS/JavaScriptの開発環境

下記の無料で使えるソフトウェアを使って開発が行えます。
macOS, Windowsのどちらでもりようできます。

  • Webブラウザ（Google Chrome）
  • テキストエディタ（Atom）

Webブラウザ（Google Chrome）

Google が提供するWebブラウザです。
最新の技術が取り込まれています
開発者向けの機能が充実しています。

FirefoxやSafariでもおそらく大丈夫ですが、特別にこだわりの無い方はGoogle Chromeを使うのが、本質的ではないトラブルに遭遇する可能性が低くなるという観点でおすすめします。

インストール方法

今お使いのブラウザで、Google Choromeの公式サイトを開きます。

「Chromeをダウンロード」ボタンをクリックして、インストールファイルをダウンロード。
インストールファイルをダブルクリックして開いてインストールを進めます。

テキストエディタ（Atom）

Atom（アトム）は、ソースコード管理サービスなどソフトウェア開発のプラットフォームを手がけるGitHubが開発したオープンソースのテキストエディタです。
Webエンジニアを中心に人気があります。
プログラムなどを書く時に利用します。
もし、普段から使い慣れているテキストエディタがある方は、それを使うのもよいでしょう。

インストール方法

Webブラウザで、Atomの公式サイトを開きます。

「Download」ボタンをクリックして、インストールファイルをダウンロード。
インストールファイルをダブルクリックして開いてインストールをすすめます。

動画で学習する

おわりに

HTML/CSS/JavaScriptの開発環境について、プログラミング入門者向けに説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

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

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

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

今すぐ詳細を確認する

実践:Webサイトのコーディング – Web開発入門完全攻略コース

By

Web開発入門完全攻略コースのセクション「実践Webサイトのコーディング」について説明いたします

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

動画で学習する

概要

このセクションではここまで学習してきた HTML と CSSL の基礎をベースと
してWebサイトのコーディングの実践を行っていきます

完成品を確認

実際に完成品を見てください

01 完成形

CSS Cafeという名前の架空の Web サイトのトップページを制作します
基礎を理解しやすいようにシンプルなものとなりますが実際のウェブサイトの制作に
つながるエッセンスがいろいろ詰まっています

グローバルナビゲーション

見ていくと　ヘッダーエリアがあってこのようなグローバルナビゲーションを画像を使わずにCSSで作成します

2カラム

その下にメインのイメージです

この部分はメインエリアとサイドエリアの2カラムになっています

見出しで使っているこの装飾も CSS で作る方法を学習します
このサイドエリアにはバナーが入る想定です

ダミー画像

今はダミーの画像を入れています
このタミーの画像も自分で画像ファイルを作って入れているわけではなくて

url とサイズを記入するだけでダミーの画像を簡単に表示できる
無償で使える便利なサービスを紹介します

フッター

フッターエリアは　このフッターのナビゲーション
そして著作権表示です

コーディング資料

コーディングの仕様です

HTML5, CSS3
文字コード：UTF-8
動作環境は mac また windows の google chrome 最新
版とします

おわりに

オンラインプログラミング学習講座「Web開発入門完全攻略コース」のセクション「実践Webサイトのコーディング」について説明しました。

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

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

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

今すぐ詳細を確認する

CSSによるフォントの指定について初心者が知りたいことを説明します

By

CSSによるフォントの操作について、プログラミング入門者向けに説明いたします。

プログラミング入門

この記事は、HTMLやCSSなどが動画で学べる、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

CSSによるフォントの操作

CSSを使ってフォンのスタイルを設定することができます。

構文

セレクタ { 
  font-family: フォント名 or フォントファミリー;
}

フォント名

フォント名の例

  • メイリオ
  • Hiragino Kaku Gothic ProN

フォント名で指定する場合の問題点

  • PCやスマホなどに入っているフォントはそれぞれ異なる。
  • デザイナーやエンジニアが意図しないフォントが表示される可能性がある。

例えば、macOSであれば、
インストールされているフォントの種類は、Font Bookを使って確認ができます。

MacOS font book

フォントファミリー

フォントファミリーとは、フォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものです。

入っているフォントは端末それぞれで異なる問題を解決するために、フォントファミリーを使った指定も併用します。
良く使う、フォントファミリーとして、セリフと、サンセリフ、があります。

  • serif・・・明朝体
  • sans-serif ・・・ゴシック体

font-familyの事例

font-familyプロパティには、複数のフォント名または、フォントファミリーを指定できます。
カンマ区切りで、複数していします。

具体例

具体例で見てみましょう。

特に決まりがあるわけでは無いのですが、日本のサイトでは、
Windows向けのフォト名の指定 + Mac向けのフォント名の指定 + フォントファミリーの指定 とすることがあります。

複数のフォント、フォントファミリーをカンマ区切りで記述します。

左に書かれたフォントから優先して利用されます。

font-family: , "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

“Hiragino Kaku Gothic ProN”は、Macに入っているフォント、

メイリオは、Windowsに入っています。環境によっては。Macに入っていることもあります。
sans-serif;はフォントファミリーでゴシック体の指定です。Hiragino Kaku Gothic ProNも、メイリオも入っていない場合、端末にあるゴシック体が使われます。開発者・デザイナーは、どのフォントが使われるかは、わかりません。

Macの場合は、Hiragino Kaku Gothic ProNがつかわれて、
Windowsの場合は、メイリオが使われて、
例えば、Linux で見た場合などは、sans-serif;の指定が使われて、端末にある、何かしらのゴシック体が使われることになります。

補足

欧文フォントでは日本語を表示できない。

欧文（英語など）を表示できる「欧文フォント」と
欧文（英語など）と日本語を表示できる「日本語フォント」があります。

英語フォントの例

  • Arial
  • Helvetica

日本語フォントの例

  • “メイリオ”
  • “ヒラギノ角ゴ Pro W3”

フォント名に半角スペースの入るフォントは「”」で囲う

フォント名に半角スペースの入るフォントは「”（ダブルクォーテーション）」または、「’（シングルクォート）」で囲います。

  • “Hiragino Kaku Gothic Pro”
  • “ヒラギノ角ゴ Pro W3”
  • “MS PGothic”

普段使用しているサービスのフォント指定を研究してみる。

フォントの指定方法は、決まりがあるわけはありません。
プロジェクトごとに決定する必要があります。
フォント指定は、時代によっても流行りがあるので、普段つかっているWebサイトのCSSがどうなっているか、研究してみると勉強になりますよ。

Chromeに付属しているWeb Developpert Toolなどで確認するのが便利です。

おわりに

この記事では、CSSによるフォントの操作について、プログラミング入門者向けに説明しました。

CSSの入門については、関連記事を参照してください：
CSSの基礎についてプログラミング初心者のみんなが知りたいこと

オンライン講座「Webエンジニア入門総合コース」では、この記事で説明したCSSの基礎はもちろんのこと、プログラミミング初心者向けに、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分を公開していますので、ぜひご覧ください！

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

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

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

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

今すぐ詳細を確認する