2013年03月01日

ウェブデザインは英語で

英語が使えると、コンピュータのプログラミングやアプリケイションを学ぶことも、かなり容易になります。
というのは、ITテクノロジーはイギリスやアメリカで開発され、洗練されてきたからです。つまり、ディジタル・プロセッシングのプロトコル言語は英語だからです。

私はコンピュータには疎い方ですが、ウェブデザインが趣味です。
ウェブデザインは、HTMLという言語、「ハイパーテクスト マークアップ ラングイジ」という言語の書法=文法を使います。ハイパーテクストとは、インターネットで表記・交信するための「超言語」という意味です。

ウェブデザインの基礎を学んだとき、私は英語が使えるので、普通の日本人よりはずっと楽に学習できました。
ウェブデザインのタグ(プログラムの語法)は英語で記述されます。もちろん、簡略化され記号化されているのですが。
それでも、英語の意味がわかれば、どういう言葉が簡略化=記号化されているかが容易に理解できるからです。
それで、ブログをつくるにしても、ホームページをつくるにしても、英語が理解できると、記号化された英語によるタグ(タグは「荷札」という意味)の記述もいち早く覚えられます。
そして、ウェブデザインをすることで、さらに英語への親近感も深まり、頭のなかに英語の感覚や思考回路を日常的に組み込むことになります。

◆ソース : プログラムの原文記述◆

ためしに、このペイジを出してから、パソコン画面のツールバーの「表示」を広げて「ソース」をクリックしてみてください。ソースとは source で、「素材となる記述プログラムの原文」という意味です。
すると、このブログがどういうプログラミングで設計され、表示されているかを示すタグ群が表示されます。
そのうち、私がタグを使って設計しているのは、全体のせいぜい0.1%くらいしかないことがわかるでしょう。ほとんどは、シーサーの設計で、単にページの内容部分だけ、私が入力・記述しているにすぎません。
それでも、このペイジの見ばえは、完全に私が管理することができます。本分にある広告の表示方法も、一定の約束事の範囲で私がかなり自由に選択しています。

【Ecom英語ネット】日本で最初のSkype英会話学校

◆パラグラフの<p>◆

たとえば、このペイジの本分の行間(行の高さ)は、文字が1に対して隙間が1、文字列2行分で1行を送るように設定してあります。
こういう場合に使うタグが<p>(そのブロックの終わりは</p>というタグ)です。
ただし、この説明では、ブログ記述ソースのタグと分別するために、英語部分も「全角文字」(アキも含めて)で表記しています。だから、HTMLソースでは実際には、タグは半角文字で記述されています。
この p は、英語で「段落」 paragraph を意味し、そのの頭文字の p を使っています。
そして、「行送り=行の高さ」は、<p style=”line-height: 2em; ”>〇〇〇<p>という風に設定します。〇〇〇は日本語の部分です。

このタグ部分は、演算式です。
意味は、《pを設定、そのスタイルは=” ”のなかに設定した通り》ということで、具体的には、《pのスタイルでは、ラインの高さは文字の2倍と設定する》という意味の等式になっています。

◆スタイルシート◆

「=” ~; ”」の表記は、「スタイルシート」というデザイン・プログラムの書法(書き方)の約束事にしたがっています。
つまり、=のあとに ” で囲んで「設定したい属性(プロパティ):[半角アキ] 設定したい値」を入れます。 : セミコロンは、「すなわち~とする」という意味合いです。
そのさい、属性の「ライン-ハイト」の「ライン」は「行」、「ハイト」は「高さ」(文字とアキとの合計の幅)を意味します。
スタイルシートでは、このように「行の高さ」という場合、行 line と height とをハイフン - でつなぎます。

そこで、この段落の背景の色を設定したい場合には、たとえば、 background-color: #ccff66;” を加えて設定します。
; は、「属性の設定が1つ終わった」という意味(完了詞)と、「さらに続けると」という接続詞の意味の両方を持っています。
しかし、これだけでは、段落の□(範囲)部分の境界と文字とが接してしまいます。
そこで、 padding: 12px; を後ろに付け加えます。px は「ピクセル」という画面表示の大きさの単位です。パディングは「詰め物」つまり「内側の余裕」という意味です。

すると、
<p style=” line-height: 2em; background-color: #ccee66; padding :12px; ”> となります。
これで、「段落の外側の境界から12ピクセル内側に段落文字が配置され、行送りは2字文の高さ」に段落を設計する、という意味合いのタグ=プログラムになるのです。

このタグでデザイン(プログラム)した部分が、上の黄緑色の背景のパラグラフです。
<p>のように、段落などの「ひとかたまり」の部品のことをウェブデザインでは「ブロック要素」と呼びます。

IT技術を学習したい人には、英語は最低限度の必要な素養です。

【関連する記事】
posted by 田舎おやじ at 13:08| Comment(0) | TrackBack(0) | 楽しい学び方(遊び) | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。