「ホームページ担当になったんですが、全くやったことがなくてわかりません。1からサポートしていただけませんか？」
ICT支援員の仕事の一つにホームページ更新のサポートがあるのですが、先生方からこのようなお悩みをお聞きします。
その時に、「用語がよくわからなくて」「用語は知っているけれど仕組みがよくわからない」という相談も受けました。
まずホームページ担当になると目にするかもしれない関連用語「HTML・CSS、FTP、CMS」について説明します。
HTMLとは？
「Hyper Text（ハイパーテキスト）」複数の文章を相互に関連づける仕組み
「Make up（マークアップ）」形作る
「Language（ランゲージ）」言語
Webページ（ホームページ）はこの言語で書かれています。
「Hyper Text」を一番イメージしやすいのは、「リンク」でしょう。下線がついている場所を、クリック・タップすると、別のページに移動する仕組みです。文章の他にも画像や図表、音声、動画、3Dグラフィックなどもリンクできるので、電子文書には欠かせないものになっています。
そして「HTML」はマークアップ言語でもあります。
このページをご覧になっている方は目立たせたい部分は太字になっていることにお気づきかと思います。
例えば太字の場合＜b＞「Hyper Text（ハイパーテキスト）」＜/b＞と記述されるのですが、<>が太字にするという命令（タグ）がここから始まり、</>で閉じると、命令が実行され、太字になるという仕組みです。
CSSとは？
「Cascading（カスケーティング）」連続、連鎖
「Style（スタイル）」様式 文体
「Sheets（シート）」
複数の箇所を一括で装飾できる仕組みです。
2000年代半ばまでホームページは先ほどに上げたHTML言語だけで作るのが主流でした。しかしそれだと見た目は良くても裏では先ほど取り上げた命令（タグ）で溢れてしまうという状態が生じていました。修正したい箇所があったら命令（タグ）をひとつひとつ修正しなくてはならず、まとめて一挙に修正ができないのでメンテナンスがとても大変でした。
このページをご覧になっている方は、タイトルと副見出しの部分が文字の大きさや形式が異なっているのにお気づきでしょうか？
例えば「HTMLとは？」という部分はかなり目立つ部分ですが、この部分は<h2>HTMLとは？</h2>と記述しています。
しかし他にも「CSSとは？」「FTPとは？」「CMSとは？」という部分があります。この部分を「HTMLとは？」と同じ書体で目立たせたいという場合はどうしたら良いでしょうか？
h2という部分は複数の命令をセットにしたものと考えていただければいいかと思います。文字を大きく、太く、下線を引くなどのセットということです。
そのセットを使って同じ書体で目立たせることができます。
例）<h2>「CSSとは？」</h2>
先ほどHTMLは＜＞＜／＞の中に文字を書けばその部分に命令が適用されると説明しました。
＜h2＞＜/h2＞の間に文字を書けば、他の部分にも同じ「h2」のセットが適用されるというわけです。
作成途中でh2の書体やデザインを変えたいということも発生します。その時はh2のCSSの部分を書き換えれば、他のh2のセットの部分も自動的に変わるという仕組みになっています。
HTMLとCSSを学びたい
上の2つについて学びたいという場合、本を買うのも良いですが、実際に入力しながら学べる無料のプログラミング学習アプリ「Progate」がおすすめです。
1からわかりやすく説明されていますし、自分が入力したものが、ネット上でどう表示されるのかすぐに見られます。入力間違いは直すまで先に進めません。確実なスキルアップができるようになっているアプリです。
FTPとは？
「File （ファイル）」
「Transfer（トランスファー） 」動かす、移す、移動させる
「Protocol（プロトコル）」協定 （データ通信の）手順
作ったホームページをサーバー上に移動させる、またはサーバー上から手元のコンピューターなどに移動させる仕組みのことです。
ここで「Transfer」という言葉に注目して見ましょう。
これは「動かす」「移動させる」という意味がありますが、ホームページを更新する場合、どこからどこへ移動させるのでしょうか？
それは作成・更新したホームページのデータを、作業・保存したコンピューターから、ネットを使ってサーバー（情報やデーターを提供するコンピューター）に情報を移動させます。そのことをアップロードと言います。
逆にネット上のサーバーから自分のコンピューターにホームページの情報を移動させることがあります。この際はダウンロードと言います。
CMSとは？
「Contents（コンテンツ）」中身 内容
「Management（マネージメント）」 管理、経営、操縦
「System（システム）」組織、構造、系統
読んでいただいているこのページはCMS（Word press）を使っています。
イメージしやすいのはアメーバーブログ、はてなブログなどでしょう。これらは広い意味ではCMSにあたります。
HTMLやCSSについて詳しくない人も情報を発信したいという点でハードルを下げてくれるシステム、これがCMSです。
HTMLと CSSのセットが入っていますし、FTPソフトを使って更新したホームページをサーバーにアップロードしなくても良くなりました。このおかげで、HTMLや CSSの知識がない人も、ログインをすれば気軽に情報を発信することができるようになりました。
しかし学校の情報をアメーバーブログ、はてなブログなどにアップすることはないかと思います。それは学校以外のブログが混在している上に、広告などが表記されるからです。
今はかなりの数で学校・地方自治体がオーダーメイドのCMSを提供するようになりました。
もし「学校のホームページはCMSで作成します」と言われたら、HTMLやCSSの知識がなくてもホームページをアップできるシステムを使っているんだなと思ってください。
次は「学校のホームページ担当になった！担当はつらいよ お悩み編」です。