【授業】Webスクール学習の流れ～解説編その１～
はじめに
こんばんは！！ゆかりんと申します( ´艸｀)
さて前回の記事は専門用語を使ってしまい、分かりにくい内容となっていました。という事で今回は、具体的な意味を分かりやすく解説してみたいと思います。※ネットの情報も一部使わせて頂いてます。
目次
- はじめに
- Dw（ドリームウィーバー）とは？
- FTP接続とは？
- 「Adobe Creative Cloud」とは？
- 日本語にすると分かりやすい用語たち
- HTML、CSSの具体的な意味合いについて
- margin（マージン）とpadding（パディング）について
- class（クラス）、div（ディブ）の違いについて
- CSSにコメントを残そう！
- さいごに
Dw（ドリームウィーバー）とは？
Adobeが作った、ソフトウェア。ホームページ制作の為のソフトです。このソフトを使う事で、ホームページ制作が格段に作りやすくなります。（ここではフォトショップ、イラストレーターの説明を省きます）
Adobe Dreamweaver（アドビ ドリームウィーバー）とは | m-School
FTP接続とは？
FTPとは、File Transfer Protocol（ファイル・トランスファー・プロトコル）の略で、日本語に訳すと「ファイル転送プロトコル」となります。わかりやすく言うと、自分の目の前にあるマシンから遠く離れた場所にあるマシンにファイルを送り込んだり、その逆に遠く離れた場所にあるマシンからファイルをコピーするための仕組みです。
要約するとホームページ制作の為に使うファイルなどを、マシン(パソコン)同士を自由に転送出来る仕組み。言わば、パイプライン的な役割の事です。
「Adobe Creative Cloud」とは？
Dw、Ps、Aiなどホームページ制作に使えるソフトウェアを常に最新の状態で使うことの出来るサービスの総称です。（月間契約及び年間契約での利用可）
Adobe Creative Cloud - Wikipedia
日本語にすると分かりやすい用語たち
color（ｶﾗｰ）→→→→→→→→→→→→→文字の色
font-size（ﾌｫﾝﾄ・ｻｲｽﾞ）→→→→→→→文字の大きさ
font-family（ﾌｫﾝﾄ・ﾌｧﾐﾘｰ）→→→→→フォントの種類
background-color（ﾊﾞｯｸｸﾞﾗｳﾝﾄﾞ・ｶﾗｰ）→→→背景の色
padding（ﾊﾟﾃﾞｨﾝｸﾞ）→→→→→→→→→→内側の余白
margin（ﾏｰｼﾞﾝ）→→→→→→→→→→→→外側の余白
border（ﾎﾞｰﾀﾞｰ）→→→→→→→→→→→→→枠線
ブログの中では「タイトル下のボタン」をぽちっとするだけで、これらが反映されると思います。これをプログラムでコーディングしていくと、このような用語を使うようになります。例えばHTML上、はたまたCSS上で使用。
記事を書いている時に、HTML編集の所を見てみると「マークアップ言語」が出てくるので試しに見て下さい。「あ～ここはこうなっているんだぁ」というのがプログラム上ではどうなっているのかが明確になります。
HTML、CSSの具体的な意味合いについて
そもそも「HTML」って何？「CSS」って何？っていう所からなんですが、正直私もつい最近まで「何だろう？ソフトの名前かしら？」なんて思っていました（笑）
★HTMLとは、Hypre Text Markup Languageの略語です。業界では「マークアップ」すると使われている。
★CSSとは、Cascading Style Sheetsの略語です。「スタイルシート」と呼ばれている事が多い
私が以前、ネットの情報を頼りに意味を理解していた事があります。その例えが分かりやすかったので、紹介しますね。
ホームページやブログを家で例えるならば、設計図が「HTML」で、リフォームが「CSS」。HTMLで骨組みを作り、そのHTMLに沿ってCSSでページ内をリフォームしていく具合です。そう考えると、ちょっとだけ分かりやすくなりませんか？（ここの壁の色はこうしよう！とか。）
margin（マージン）とpadding（パディング）について
マージンが、文章を囲っている枠線を境に外側の余白。パディングがその枠線の内側の余白です。これは図にすると分かりやすいです。
ちなみにこの図の<h1>というのは、はてなでいう所の「ブログのタイトル」。<p>は、記事内の「段落」です。タグというのは、<h1>とか<p>の総称を「タグ」と呼びます。
こちらのサイトから引用させて頂きました。↓↓↓
こちらのサイトではFC2ブログでのカスタマイズで役に立つ情報が中心ですが、考え方などはとても参考になるものばかりでした。とっても分かりやすいのだっ！！
class（クラス）、div（ディブ）の違いについて
クラスは単体、ディブは複数をまとめるもの。言わば空箱のような物です。その空箱をいくつも作っておけば、その種類別に文字色を変えてみたり、フォントを変えてみたりが自由自在にできます。クラスは学校のクラスを例えにすると分かりやすいです。
例：AのBOXは全て赤文字にしよう。Bの箱の背景色は黄色にしよう。と、その都度指定する範囲を決められるのです。（←こんな具合に）
万能タグdivタグは「class属性」で使いこなそう--人気ホームページが作れる簡単作成講座
CSSにコメントを残そう！
カスタマイズをしていると、CSSが訳の分からない事になってきませんか？「これって、何のカスタマイズしたんだっけ？」みたいな。そんな時に活躍するのが、この記号 /**/ これを文字の外側に入れると自分のメモが残せます。
例：/*ここのクラスは内側の余白を10pxにします*/
↑↑↑こんな具合に。メモを残せば、どこをどうしたのかが一目瞭然です！なるべく残しておいた方が良いでしょう。
さいごに
いかがでしたか？こんな具合に授業内容が進んで行っています！！（と、言っても言語の勉強はほとんどしていませんけどね）こうしてブログに書いていくと、自分がどれだけ理解出来ているか？というのが目に見えて分かるので、自分の勉強にもなりました。
次回は、「ブログとホームページの違いについて」書いてみたいと思います。これは自分が単純に違いについて、疑問を抱いていたから。書いてみようかと
こちらのサイトも役に立つよん♪参考にしてみてね^^ ↓↓↓
それでは、また会う日まで〜ヽ(・∀・)ﾉばいちゃ
