読者です 読者をやめる 読者になる 読者になる

LOVE & PEACE!!!

ハッピーをお届けするライフマガジン

【授業】Webスクール学習の流れ~解説編その1~

スクール テクノロジー

 

f:id:love-musicflavor0928:20151104183133p:plain

 

はじめに

こんばんは!!ゆかりんと申します( ´艸`)

 さて前回の記事は専門用語を使ってしまい、分かりにくい内容となっていました。という事で今回は、具体的な意味を分かりやすく解説してみたいと思います。※ネットの情報も一部使わせて頂いてます。

 

www.love-wd-yuka.com

目次

Dw(ドリームウィーバー)とは?

Adobeが作った、ソフトウェア。ホームページ制作の為のソフトです。このソフトを使う事で、ホームページ制作が格段に作りやすくなります。(ここではフォトショップ、イラストレーターの説明を省きます)

Adobe Dreamweaver(アドビ ドリームウィーバー)とは | m-School

FTP接続とは?

FTPとは、File Transfer Protocol(ファイル・トランスファー・プロトコル)の略で、日本語に訳すと「ファイル転送プロトコル」となります。わかりやすく言うと、自分の目の前にあるマシンから遠く離れた場所にあるマシンにファイルを送り込んだり、その逆に遠く離れた場所にあるマシンからファイルをコピーするための仕組みです。

 要約するとホームページ制作の為に使うファイルなどを、マシン(パソコン)同士を自由に転送出来る仕組み。言わば、パイプライン的な役割の事です。

初心者のためのFTP入門

「Adobe Creative Cloud」とは?

 Dw、Ps、Aiなどホームページ制作に使えるソフトウェアを常に最新の状態で使うことの出来るサービスの総称です。(月間契約及び年間契約での利用可)

Adobe Creative Cloud - Wikipedia

日本語にすると分かりやすい用語たち

color(カラー)→→→→→→→→→→→→→文字の色

font-size(フォント・サイズ)→→→→→→→文字の大きさ

font-family(フォント・ファミリー)→→→→→フォントの種類

background-color(バックグラウンド・カラー)→→→背景の色

padding(パディング)→→→→→→→→→→内側の余白

margin(マージン)→→→→→→→→→→→→外側の余白

border(ボーダー)→→→→→→→→→→→→→枠線

 ブログの中では「タイトル下のボタン」をぽちっとするだけで、これらが反映されると思います。これをプログラムでコーディングしていくと、このような用語を使うようになります。例えばHTML上、はたまたCSS上で使用。

 記事を書いている時に、HTML編集の所を見てみると「マークアップ言語」が出てくるので試しに見て下さい。「あ~ここはこうなっているんだぁ」というのがプログラム上ではどうなっているのかが明確になります。

f:id:love-musicflavor0928:20151104233727p:plain

HTML、CSSの具体的な意味合いについて

 そもそも「HTML」って何?「CSS」って何?っていう所からなんですが、正直私もつい最近まで「何だろう?ソフトの名前かしら?」なんて思っていました(笑)

★HTMLとは、Hypre Text Markup Languageの略語です。業界では「マークアップ」すると使われている。

★CSSとは、Cascading Style Sheetsの略語です。「スタイルシート」と呼ばれている事が多い

私が以前、ネットの情報を頼りに意味を理解していた事があります。その例えが分かりやすかったので、紹介しますね。

ホームページやブログを家で例えるならば、設計図が「HTML」で、リフォームが「CSS」。HTMLで骨組みを作り、そのHTMLに沿ってCSSでページ内をリフォームしていく具合です。そう考えると、ちょっとだけ分かりやすくなりませんか?(ここの壁の色はこうしよう!とか。)

margin(マージン)とpadding(パディング)について

マージンが、文章を囲っている枠線を境に外側の余白。パディングがその枠線の内側の余白です。これは図にすると分かりやすいです。

 

f:id:love-musicflavor0928:20151104162318g:plain

 

ちなみにこの図の<h1>というのは、はてなでいう所の「ブログのタイトル」。<p>は、記事内の「段落」です。タグというのは、<h1>とか<p>の総称を「タグ」と呼びます。

こちらのサイトから引用させて頂きました。↓↓↓

margin、paddingとは?:CSS入門

こちらのサイトではFC2ブログでのカスタマイズで役に立つ情報が中心ですが、考え方などはとても参考になるものばかりでした。とっても分かりやすいのだっ!!

class(クラス)、div(ディブ)の違いについて

クラスは単体、ディブは複数をまとめるもの。言わば空箱のような物です。その空箱をいくつも作っておけば、その種類別に文字色を変えてみたり、フォントを変えてみたりが自由自在にできます。クラスは学校のクラスを例えにすると分かりやすいです。

例:AのBOXは全て赤文字にしよう。Bの箱の背景色は黄色にしよう。と、その都度指定する範囲を決められるのです。(←こんな具合に)

万能タグdivタグは「class属性」で使いこなそう--人気ホームページが作れる簡単作成講座

CSSにコメントを残そう!

カスタマイズをしていると、CSSが訳の分からない事になってきませんか?「これって、何のカスタマイズしたんだっけ?」みたいな。そんな時に活躍するのが、この記号 /**/ これを文字の外側に入れると自分のメモが残せます。

例:/*ここのクラスは内側の余白を10pxにします*/

f:id:love-musicflavor0928:20151104234100p:plain

↑↑↑こんな具合に。メモを残せば、どこをどうしたのかが一目瞭然です!なるべく残しておいた方が良いでしょう。

さいごに

いかがでしたか?こんな具合に授業内容が進んで行っています!!(と、言っても言語の勉強はほとんどしていませんけどね)こうしてブログに書いていくと、自分がどれだけ理解出来ているか?というのが目に見えて分かるので、自分の勉強にもなりました。

次回は、「ブログとホームページの違いについて」書いてみたいと思います。これは自分が単純に違いについて、疑問を抱いていたから。書いてみようかと

こちらのサイトも役に立つよん♪参考にしてみてね^^ ↓↓↓

taneppa.net

それでは、また会う日まで〜ヽ(・∀・)ノばいちゃ