green

Lotusnut >> Soft >> Html ＆ Css

このサイトの目的

今の時代　Htmlの解説を扱うサイトは数多くあります。ここで同じように詳細な解説のサイトを立ち上げたとしても自分にはそこまでの技術は持ち合わせていません。
ここではHTMLをHP（ホームページ）作成ソフトの代表格「ホームページビルダー」などを使わずにメモ帳などのテキストエディターでHTMLを作る基本的な方法を、これからサイトを立ち上げたいと考えている初心者の方々に提供したいと考えています。
と言っても自分自身は、あのホームページビルダーで今時のサイトをつくるのは逆に苦手で、昔からフリーのメモ帳片手にフリーなサイト転送ソフトを使ってHPを立ち上げました。簡単な基本さえ知ればお高いお金を出さずともフリーソフトで、ホームページが持てますよ。というコンセプトで説明したいとおもっています。ので『そんなめんどくさい事は・・・』とは言わず簡素な方法でサイトを立ち上げる面白さに気づいてくれたら私の役割は終わりです。

メニュー

  1. ■　Html作成はソフト派？メモ派？
  2. ■　HTMLのテンプレートを作っておく
  3. ■　基本的なタグを使ってみよう！
  4. ■　CSSを使ってみよう！
  5. ■　CSSでデザインする
  6. ■　無料で使える役に立つアイテム

■　Html作成はソフト派？メモ派？

最初に目的の項で説明しちゃってますが、自分のホームページを作るとしたら・・・仕組みは考えないで高度なサイトを作ることができる「専用ソフトで作る派？」それともHTMLを理解し、表現やデザイン動作がどのようなソースコードで書かれているか知りながらテキストエディターで作成する自作派？どちらですか？私は昔からどんなに拙いデザインのサイトだとしても自分でコード（ホームページを世界共通で理解できる言語＝HTML）を書いて自己満足する派でした。まあホームページビルダー等（ワード感覚で作れてしまう）を利用して作成しては面白くない。と言うのではなく、ソフトを使って作成しても同時にどのようなコードが書かれているか理解しながら（殆どの専用ソフトはこの機能がついている）時には、ソフトが勝手に作ったものだけではなく、コードを編集してみたりとか、自分で手を加えることが出来たらこんな楽しいことはないと感じています。さあ！みなさんも騙されたと思って、手書きHTMLはじめませんか？

能書きはひとまず置いといて、まず自分がHTMLソースを書くのに役立つテンプレートを紹介します。(これも数ある解説サイトに行けば、いくらでも入手できます。)　私はテンプレートのソースについては解説しません。まずは見てください。


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" type="text/css" href="../menu.css">
    <title>lotusnut.net -自由な空間-</title>
    <script language="JavaScript" src="../main.js" type="text/JavaScript">
    </script>
    </head>
    <body>
     　　この中に表示したい内容（タグ）を作成していく。
    　　タグとは　< と > に囲まれた世界共通の言葉：例えば　<p> は pタグという。
    　　大文字でも良いが、小文字の方が格好いい。
    　　ほとんどのタグは、<p>で始まったら</p>で終わる（後ろはスラッシュ付き）
    </body>
    </html>

テンプレートは自分で中に書かれているタグの意味をよーく解説しているサイトで調べて研究して自分なりのオリジナルテンプレートを作成しておきます。なんでも良いんです。適当です。要は<body>から</body>の中にいろんなタグを作っていけば良いだけなのです。（適当！）次のメニューでは基本的なタグを簡単に紹介します。基本は自分で調べて好きなようにデザインできるように工夫する事です。

ページＴＯＰへ

基本的なタグを使ってみよう！

ワープロソフト（Wordなど）で使うような基本的ツールをタグで紹介します。自分で用意したテンプレートの<body>から</body>に注目してください。


    <p>最初に示したpタグ・・・pタグに囲まれた文字はホームページ上でどのように表示されるか確認してみよう。</p>
    といきなり初心者の方に言ってもハードルが高すぎますか？まずインターネットに自分のホームページを作れる場所を確保してください。
    インターネットが見れるなら、どこかとプロパイダと契約されていると思うので、そこに無料のHPが使えるならそこを利用する。もしくは検索して「無料のホームページ」を確保する。サイトがきまったら、無料転送ソフト（windows定番「FFFTP」やmac定番「FileZilla」等 ）をインストールしてアップロードの準備をします。


    <a>検索の定番「Yahoo!」</a>aタグ・・・aタグはホームページのユニークであり代表的な仕組みである別のページや他人のページに飛べる役割を持つタグです。
    ただし、タグをつけただけでは、実際にYahoo!へは飛びません。
    <a href="https://www.yahoo.co.jp">検索の定番「Yahoo!」</a>の様に　href="ダブルコーテーション内にアドレスを記入します”
    ページ内のジャンプも　aタグを使います。このページ内の「メニュー」から下段にジャンプする動作や「ページＴＯＰへ」へのジャンプがそれです。
    「メニュー」からのジャンプは、<a href="#01">などと　#をつけて適当な番号などを使用します。受け側は　<p id="01">ここが受け側</a>　の様にタグに　id="01"　と該当番号等をつけて対応します。


    tableタグは、基本３つのタグで構成されます。
    <table>
    　　<tr>
    　　　　<td>ここに文字が入ります</td>
    　　</tr>
    </table>
    tableタグは、Wordでいうところの表に当たります。一太郎だと罫線でしょうか。例えば2列3行の表を思い浮かべてください。
    <table>
    　　<tr>
    　　　　<td>1列1行目</td>
    　　　　<td>2行目</td>
    　　　　<td>3行目</td>
    　　</tr>
    　　<tr>
    　　　　<td>2列1行目</td>
    　　　　<td>2行目</td>
    　　　　<td>3行目</td>
    　　</tr>
    </table>
    のようなタグ構成になります。（trタグは表の列（横）、tdタグは表の行（縦））trタグと同列でヘッダー用に<th></th>　thタグというものも使えます。

どんなタグがどんな役割を持つか、専門書を買わずともいくらでも調べ様がありますので、ワープロソフトを使う人は、Word等でデザインを作ってみて同じようなレイアウトをタグで作ってみたりすると、結構わかりやすいかもしれません。
ぜひ、タグを使うことでプログラミング的な快感を覚えるかもしれません。のでやってみませんか？Tryです。

ページＴＯＰへ

CSSを使ってみよう！

CSSとは、ファイルの形式でこれもテキストファイルです。特別なものを用意しなくてもできます。簡単に言うとホームページのデザインの役割を持つファイルで、Html（本体）とは別にCSSファイルとして作成します。
文字の色やフォントや線の太さ色、インデントの量・行間の量、背景色等をタグごとに指定します。デザインはHtmlのタグの中で指定してもできるのですが、別ファイルにすることでのアドバンテージは、ホームページ内のいろいろなページのデザインが統一される（自分色のサイトができる）ということです。
背景色はどのページに行っても水色（色でなくてもjpg等で用意したイメージでも）とか、<p>タグのフォントはああしてそれで何色にして、インデントを少し行間は1.5pxに仕様とか、自分色に染めるのにはいくらでも方法があります。
次に　main.css　など適当なファイル名で、サイトのrootに設定してみましょう。メモ帳やフリーソフトのテキストエディター等で作成してください。


    /******************************************************************/
    /* main.css /* で囲まれた箇所はコメントです 　　　　　　　　　　*/
    /******************************************************************/

    /*　pタグをデザインする　*/
    p{　　　　　　　　　　　　　　　　　　　　　/*　p｛｝で囲まれたものが実行される　*/
    　　text-indent: 1em;　　　　　　　　　　　/*　em（エム）は相対的な単位　1文字分の余白　*/
    　　color: #66CC99;　　　　　　　　　　　　/*　基本色　*/
    　　/*　フォントファミリーは環境に依存するフォントを表示したい順に指定する　*/
    　　font-family: 'Trebuchet MS', 'MS UI Gothic';
    　　font-size: 12px;　　　　　　　　　　　/*　基本の文字の大きさ　*/
    　　margin-bottom: 0.8em;　　　　　　　　　/*　pタグの下側との距離 0.8文字分空ける　*/
    }

    /*　aタグ（リンク）のデザイン　*/
    a{
    　　text-decoration: none;　　　　　　　　　/*　下線を付けない　*/
    　　color:#6699FF;　　　　　　　　　　　　　　/*　色の指定でクリック後の色の変化を無しにする　*/
    }

    a img{
    　　border-style:none;　　　　　　　　　　　/*　画像をリンクの対象にした場合枠線を無しにする　*/
    }

    /*マウスオーバーの際の色*/
    a:hover{
    　　color: #FF6666;
    }

    以上のようにpタグ（テキスト）やaタグ（リンク）1つとっても動作によるデザインがきりなく存在しますので、自分の好みと相談するのがベストです。
    CSSがどのようにHTMLに影響するのか？とりあえず　何もしない状態のpタグとpタグをデザインしたCSSをHTMLがわから読み込んでその変化を体験してみてください。 最初のテンプレートのところでも記述した<link rel="stylesheet" type="text/css" href="../menu.css">参考にCSSファイルをサーバーにアップして色々試してください。
    ※　なお、linkタグ中の　ファイルの指定場所 href="../main.css" はmain.cssの位置が作成したHTMLファイルの1つ上層部にあるという意味です。同じフォルダーなら href="./main.css"となります。

ページＴＯＰへ

CSSでデザインする


    拙いCSSの例を挙げてみました。デザインは本当に自分自身が良く表れる（好み）物なので、自分の性格を知るにも良い経験かもしれません。
    /******************************************************************/
    /* main.css /* で囲まれた箇所はコメントです 　　　　　　　　　　*/
    /******************************************************************/

    /*HTML全体*/
    body{
    　　font-family: Arial,sans-serif;
    　　color:#666600;
    　　line-height: 1.166;
    }

    /*相対単位　1文字分*/
    p{
    　　text-indent: 1em;
    }

    /*仕切り線*/
    hr{
    　　color: #66CC99; background-color: #66CC99;
    　　border-style: none; height: 2px;
    　　margin-bottom: 0.8em;
    }

    /*リンク線無し*/
    a{
    　　text-decoration: none;
    　　color:#6699FF;
    }

    /*マウスオーバーの際の色*/
    　　a:hover{
    　　color: #FF6666;
    }

    /*範囲枠の幅・枠の下側からの距離*/
    div{
    　　width: 660px;
    　　padding-bottom: 2em;
    }

    /*汎用的なタグのフォントと統一*/
    span{
    　　font-family: 'Trebuchet MS', 'MS UI Gothic';
    }

    /*汎用的なタグにタイトルに特有なCLASS属性をつける*/
    span.title{
    　　color: #009933;
    　　font-size: 12px;
    }

    /*イメージをリンクの対象した時の動作の変化をしない*/
    a img{
    　　border-style:none;
    }

    /* h1等のタグのデザインの指定*/
    h1{
    　　font-family: 'Vonness Medium',Arial,sans-serif;
    　　font-size: 120%;
    　　color: #334d55;
    　　margin: 0px;
    　　padding: 0px;
    }

    h2{ 　　font-family: Arial,sans-serif;
    　　font-size: 114%;
    　　color: #006699;
    　　margin: 0px;
    　　padding: 0px;
    }

    /*箇条書きタグのデザイン*/
    ul{
    　　list-style-type: square;
    　　text-align: left;
    }

    li{
    　　padding-bottom: 1.2em;
    }

    /*基本的な表の線指定*/
    table{
    　　border-collapse: collapse;
    }

    /*表内のpタグのフォントなど*/
    table p{
    　　font-family: Arial,sans-serif;
    　　font-size: 90%;
    　　color: #008080;
    }

ページＴＯＰへ

無料で使える役に立つアイテム


    前述しましたが、サイトの準備が終わったら、ホームページソフトの用意です。
    テキストエディタとして、無料で使える（「テキストエディタ・フリーソフト」で検索すれば結構おすすめ等が出てくる）物を推薦します。お金をかけて買っても良いのですがタグを打つのに必要ありません。
    自分が今使っているのは、WindowsではMicroSoftの無料エディター「Visual Studio Code」で、Macでは「CotEditor」です。Mac版の「Visual Studio Code」もあるみたいですが、昔から「CotEditor」なので、そのまま使っています。
    「Visual Studio Code」は、MicroSoftが提供しているのでとても安心感はありますよね。<p>と打つと自動的に</p>と打ってくれたり、コメントなどの色替えにしてや、タグの間隔等　まさにプログラムコードを打つために機能が充実しています。
    また転送ソフトは、Windowsの定番中の定番。老舗中の老舗「FFFTP」です。Macでは「FileZilla」です。両者ともとても安定して使いやすいソフトです。

    1. MicroSoft 「Visual Studio Code」
    2. Mac版　AppleStoreより「CotEditor」
    3. Windows版　窓の杜より「FFFTP」
    4. Mac版「FileZilla」

    「FFFTP」以外はWindows版もMac版も用意されていますので、両方の環境で使う人は、どちらか一つに統一する方が良いかもしれません。

ページＴＯＰへ