講座をちょっとお休みして、自作の曲を聴いてください。
お耳よごしですみません。
♪花火
♪鈍行列車
２年前アップしたのですが、２万回ほど再生されています。
どちらも、自分：作曲、ひろと（相方）：作詞 です。二人でハモってます。
４０歳過ぎてから、駅前で路上したりしたこともありました。。。
前回、PHPについて少し触れましたが、ちょっと分かりづらかったかもしれません。
PHPは、ほとんどのレンタルサーバで動作するので、ちょっとhtmlソースを共通部品として取り込んだり、動的なページを作るのにとても便利です。
PHPの特徴は、htmlの構成を大きく崩すことなく、その隙間にちょっとだけもぐりこませるような書き方が出来るところがいいですね。
言語とは言え、肩ひじ張って憶える必要がなく、出来るところから徐々に加えていくやり方が出来るので、少しづつ向上した結果がページにも少しづつ反映する、そんな進め方が可能です。
例えば、次の様なhtmlソースがあったとします。
<ul>
<li><a href="http://www.google.co.jp">Google</a></li>
<li><a href="http://www.yahoo.co.jp">yahoo!</a></li>
<li><a href="http://www.ameba.jp/">Ameba</a></li>
</ul>
（リストタグを使っていますが、内容は後で調べてください。）
これは、リンクメニューを並べたものです。
これを、複数ページで共通部品化してセットするものとします。
まずは、これを menu01.txt という名前で保存しておきます。
これをPHPでセットしてみます。
講座05のhtmlソースに、PHPの文を加えてみましょう。
<div style="width:800px">
</div>
表示はこんな感じになります。
ここで、<?php はPHPのはじまりです。
また、?> はPHPのおわりです。
この間に、PHPによる文が記述出来ます。
今回は、ただ単に include '・・・' の中に、先ほどのmenu01.txtという外部ファイルを記述しました。
文字通り、インクルード、つまり含ませるという意味ですね。
ですから、この箇所に、外部ファイルmenu01.txtの内容がハメ込まれる訳です。
このメニューが必要なページには、同じようにinclude文を記述しておきます。
そうすれば、メニューが追加・変更になっても、menu01.txtだけを修正すれば、これをincludeした全てのページに修正が反映する訳です。
どうでしょうか。
PHPの文が、htmlの中にひっそりと、「ちょっとおじゃましまぁす。」みたいな感じで入り込んでいますよね。
こんな風に、ほんのちょっとだけPHPで、という様な書き方が出来るんです。
こういう所から入ると、言語らしくもなく、Java-script感覚でPHPを憶えていけるのではないでしょうか。
面白くなってきたら、こっちのもんですからね。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
PHPは、ほとんどのレンタルサーバで動作するので、ちょっとhtmlソースを共通部品として取り込んだり、動的なページを作るのにとても便利です。
PHPの特徴は、htmlの構成を大きく崩すことなく、その隙間にちょっとだけもぐりこませるような書き方が出来るところがいいですね。
言語とは言え、肩ひじ張って憶える必要がなく、出来るところから徐々に加えていくやり方が出来るので、少しづつ向上した結果がページにも少しづつ反映する、そんな進め方が可能です。
例えば、次の様なhtmlソースがあったとします。
<ul>
<li><a href="http://www.google.co.jp">Google</a></li>
<li><a href="http://www.yahoo.co.jp">yahoo!</a></li>
<li><a href="http://www.ameba.jp/">Ameba</a></li>
</ul>
（リストタグを使っていますが、内容は後で調べてください。）
これは、リンクメニューを並べたものです。
これを、複数ページで共通部品化してセットするものとします。
まずは、これを menu01.txt という名前で保存しておきます。
これをPHPでセットしてみます。
講座05のhtmlソースに、PHPの文を加えてみましょう。
<div style="width:800px">
<div style="width:800px; background-color:yellow;">
あ
</div>
あ
</div>
<div style="width:180px; background-color:cyan; float:left;">
<?php include 'menu01.txt' ?>
</div>
<?php include 'menu01.txt' ?>
</div>
<div style="width:620px; background-color:green; float:right;">
う
</div>
う
</div>
<div style="width:800px; background-color:yellow; clear:both;">
え
</div>
え
</div>
</div>
表示はこんな感じになります。
ここで、<?php はPHPのはじまりです。
また、?> はPHPのおわりです。
この間に、PHPによる文が記述出来ます。
今回は、ただ単に include '・・・' の中に、先ほどのmenu01.txtという外部ファイルを記述しました。
文字通り、インクルード、つまり含ませるという意味ですね。
ですから、この箇所に、外部ファイルmenu01.txtの内容がハメ込まれる訳です。
このメニューが必要なページには、同じようにinclude文を記述しておきます。
そうすれば、メニューが追加・変更になっても、menu01.txtだけを修正すれば、これをincludeした全てのページに修正が反映する訳です。
どうでしょうか。
PHPの文が、htmlの中にひっそりと、「ちょっとおじゃましまぁす。」みたいな感じで入り込んでいますよね。
こんな風に、ほんのちょっとだけPHPで、という様な書き方が出来るんです。
こういう所から入ると、言語らしくもなく、Java-script感覚でPHPを憶えていけるのではないでしょうか。
面白くなってきたら、こっちのもんですからね。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
前回、divタグでパーツを作って、それをfloat:leftで詰め込んでいくという話をしました。
その結果がホームページになるという考えです。
たくさんのページを作ると、そこには共通部分が出来てきます。
例えばメニューや、広告や、トップの画像や、ボトムのコピーライトの記述などです。
こういた共通部品は、いちいち新たに作成する人はいませんよね。
コピーしてハメ込むか、何らかの形で共通部品として取り込みます。
それらをメンテナンスすることを考えれば、共通部品は一つにしておくべきですよね。
１箇所修正したら、それを埋め込んでいる部分が全て反映するという具合です。
そういう形にする為に、いくつかの手法がありますが、その一つがPHPという言語を使った処理です。
一番簡単なのが、共通部分を一つのファイルにしておいて、それをincludeという文を使ってハメ込むやり方です。
でも、その共通化された一つのファイルの中にも、共通部分はたくさんあります。
突き詰めていくと、htmlの共通部分はなるべく省きたいと思うようになります。
そう考えていくと、ページとして構成して置いておくのではなく、表示する時に、言語を使ってパーツを並べた方が、一番新鮮なデータを揃える事が出来るという発想になりますよね。
それが「動的配信」の概念です。
動的配信は、よく勘違いされるのですが、特別なものであると思われがちです。
でも、そうではなくて、結果としては静的なhtmlとの違いが分からない普通のhtmlを構成して、閲覧させてくれるものなのです。
ですから、結果として表示されたものは、ソース表示で見ても動的配信されたものだというのが分かりません。
phpで記述したものは、通常.phpという拡張子でないと、phpとしての動きをさせることが出来ませんが、ある定義をすることにより、.htmlという拡張子のファイルにphpのふるまいをさせることが出来るのです。
そうすると、ブラウザからhtmlファイルを閲覧すべくURLにhtmlファイル名を打ち込んだ結果として、phpファイルが動的に構成した結果を閲覧することになるのです。
こういう考えでホームページを作ると、色々な応用が出来るようになります。
例えば、バラバラであるパーツの、並べる順序を、条件を変えて変化させてみるとか。
パーツ単位でコピーして応用する等の事が、これまでの様にテキストエディタで切り貼りするのではなく、システムにしてしまえばワンタッチで楽に実行出来る様になります。
また、
パーツで管理すれば、作成したものをきちんと管理することが出来、応用し易くなります。
動的配信は、様々なメリットをもたらしてくれるのです。
どうですか？動的配信、面白そうだとは思いませんか？
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
その結果がホームページになるという考えです。
たくさんのページを作ると、そこには共通部分が出来てきます。
例えばメニューや、広告や、トップの画像や、ボトムのコピーライトの記述などです。
こういた共通部品は、いちいち新たに作成する人はいませんよね。
コピーしてハメ込むか、何らかの形で共通部品として取り込みます。
それらをメンテナンスすることを考えれば、共通部品は一つにしておくべきですよね。
１箇所修正したら、それを埋め込んでいる部分が全て反映するという具合です。
そういう形にする為に、いくつかの手法がありますが、その一つがPHPという言語を使った処理です。
一番簡単なのが、共通部分を一つのファイルにしておいて、それをincludeという文を使ってハメ込むやり方です。
でも、その共通化された一つのファイルの中にも、共通部分はたくさんあります。
突き詰めていくと、htmlの共通部分はなるべく省きたいと思うようになります。
そう考えていくと、ページとして構成して置いておくのではなく、表示する時に、言語を使ってパーツを並べた方が、一番新鮮なデータを揃える事が出来るという発想になりますよね。
それが「動的配信」の概念です。
動的配信は、よく勘違いされるのですが、特別なものであると思われがちです。
でも、そうではなくて、結果としては静的なhtmlとの違いが分からない普通のhtmlを構成して、閲覧させてくれるものなのです。
ですから、結果として表示されたものは、ソース表示で見ても動的配信されたものだというのが分かりません。
phpで記述したものは、通常.phpという拡張子でないと、phpとしての動きをさせることが出来ませんが、ある定義をすることにより、.htmlという拡張子のファイルにphpのふるまいをさせることが出来るのです。
そうすると、ブラウザからhtmlファイルを閲覧すべくURLにhtmlファイル名を打ち込んだ結果として、phpファイルが動的に構成した結果を閲覧することになるのです。
こういう考えでホームページを作ると、色々な応用が出来るようになります。
例えば、バラバラであるパーツの、並べる順序を、条件を変えて変化させてみるとか。
パーツ単位でコピーして応用する等の事が、これまでの様にテキストエディタで切り貼りするのではなく、システムにしてしまえばワンタッチで楽に実行出来る様になります。
また、
パーツで管理すれば、作成したものをきちんと管理することが出来、応用し易くなります。
動的配信は、様々なメリットをもたらしてくれるのです。
どうですか？動的配信、面白そうだとは思いませんか？
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
前回、コンテンツを書いていく為の「枠」の定義を行いました。
さて、それでは、定義した枠のメインブロック（緑色の枠）内にコンテンツを詰め込んでまいりましょう。
と言いましても、ここにそれぞれの小さなコンテンツ（パーツと呼ぶことにしましょう）を並べる手法も、枠を定義したdivタグを使えばすっきりと行えます。
つまり、ここでも「矩形を並べていく」という考えは変わらないということです。
そういう目で、様々なサイトをご覧になってみてください。
例えばニュースサイト等。
枠線は見えないかもしれませんが、それぞれの目的毎に分類されたコンテンツが、矩形にまとめられて整然と並んでいると思います。
表示されたブラウザで、「ソースを表示する」という機能で、htmlソースを覗いてみてください。
どんな風にdivタグが使われているか、何となく分かると思います。
（Windowsであれば、右クリックで「ページのソース表示」などで表示されます。）
htmlは、その内容が全てオープンにされているので、気に入ったページがあれば、その設計内容を「ソース表示」させて参考にされればいいと思います。（但し、css（スタイルシート）が別ファイルで設置してある場合が多いので、その際にはURLで追う必要があります。）
パーツを並べていく場合には、どの様にレイアウトするかを決めなければなりません。
マンガのコマ割りの様なものです。
その際に、枠間の隙間、枠内での隙間をきちんと設計する必要があります。
そこで必要となるのが、marginとpaddingです。
marginは、枠の外側の隙間で、上下左右それぞれを指定出来ます。
paddingは、枠の内側の隙間で、同じく上下左右それぞれを指定出来ます。
そして、ブロックを決めた時の様に、横幅と縦幅のサイズ指定が出来ます。
この関係を図示します。
一番内側が、枠幅（横幅、縦幅）、それから内側の隙間、線幅、外側の隙間という順番に定義されています。
注意すべき点は、横幅（width）、縦幅（height）は、内側の隙間のさらに内側ということです。
これ、どうしても間違えてしまいます（自分の経験）。
枠線の外側に間違えてしまうんです。
それでは、線幅が3pxで黒、枠幅が100px、枠高さが80px、外側の隙間が20px、内側の隙間が10pxの枠を作りましょう。
border:solid 3px black
width:100px
height:80px
margin:20px
padding:10px
これらをセミコロンで繋げて、style=" "の中に詰め込みます。
左詰め指定(float:left)を加えておきます。
style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left"
これをdivタグに設置します。
<div style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left">
</div>
これを１個のパーツとして、メインブロックの中に、４個設置してみましょう。
こんな表示になります。
全部が左寄りで並んで表示されていきますが、４個目のパーツがブロックに入りきらずに２行目に表示されました。
この様に、float:leftを指定して並べていけば、パーツはきっちりと並んで表示されていくので世話がいりません。
ここでひとつ注意点です。
外側の隙間(margin)を使った場合、隣り合うパーツのmargin同士が相殺される場合とされない場合があります。
場合があるというのは、ブラウザによって違うということです。
どのブラウザがどうという説明はここではしません。
何故かというと、バグが含まれているからです。特にＩＥのバグは中々修正されません。
こういう事があると、さらに面倒くさくなってしまいますよね。
私がそうでした。バグとは何たることか。それでいいのか、と怒ったデザイナーの方がどれだけ多いことか。
バグがあるとは言え、ＩＥのシェアが高いのも事実であります。
それで、ひとつの工夫なのですが、私はmarginを使うのをやめました。
で、どうしたかというと、divを二重にして、paddingを二つ使うというやり方です。
<div style="padding:20px;float:left">
<div style="border:solid 3px black;width:100px;height:80px;padding:10px;">
</div>
</div>
つまり、外側に枠線の無いdivを設置し、そのdivにおけるpaddigが内側のdivのmarginの代わりになる訳です。
こうすれば、外側の隙間が相殺されることがなくなり、ブラウザによる差が解消されます。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
さて、それでは、定義した枠のメインブロック（緑色の枠）内にコンテンツを詰め込んでまいりましょう。
と言いましても、ここにそれぞれの小さなコンテンツ（パーツと呼ぶことにしましょう）を並べる手法も、枠を定義したdivタグを使えばすっきりと行えます。
つまり、ここでも「矩形を並べていく」という考えは変わらないということです。
そういう目で、様々なサイトをご覧になってみてください。
例えばニュースサイト等。
枠線は見えないかもしれませんが、それぞれの目的毎に分類されたコンテンツが、矩形にまとめられて整然と並んでいると思います。
表示されたブラウザで、「ソースを表示する」という機能で、htmlソースを覗いてみてください。
どんな風にdivタグが使われているか、何となく分かると思います。
（Windowsであれば、右クリックで「ページのソース表示」などで表示されます。）
htmlは、その内容が全てオープンにされているので、気に入ったページがあれば、その設計内容を「ソース表示」させて参考にされればいいと思います。（但し、css（スタイルシート）が別ファイルで設置してある場合が多いので、その際にはURLで追う必要があります。）
パーツを並べていく場合には、どの様にレイアウトするかを決めなければなりません。
マンガのコマ割りの様なものです。
その際に、枠間の隙間、枠内での隙間をきちんと設計する必要があります。
そこで必要となるのが、marginとpaddingです。
marginは、枠の外側の隙間で、上下左右それぞれを指定出来ます。
paddingは、枠の内側の隙間で、同じく上下左右それぞれを指定出来ます。
そして、ブロックを決めた時の様に、横幅と縦幅のサイズ指定が出来ます。
この関係を図示します。
一番内側が、枠幅（横幅、縦幅）、それから内側の隙間、線幅、外側の隙間という順番に定義されています。
注意すべき点は、横幅（width）、縦幅（height）は、内側の隙間のさらに内側ということです。
これ、どうしても間違えてしまいます（自分の経験）。
枠線の外側に間違えてしまうんです。
それでは、線幅が3pxで黒、枠幅が100px、枠高さが80px、外側の隙間が20px、内側の隙間が10pxの枠を作りましょう。
border:solid 3px black
width:100px
height:80px
margin:20px
padding:10px
これらをセミコロンで繋げて、style=" "の中に詰め込みます。
左詰め指定(float:left)を加えておきます。
style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left"
これをdivタグに設置します。
<div style="border:solid 3px black;width:100px;height:80px;margin:20px;padding:10px;float:left">
</div>
これを１個のパーツとして、メインブロックの中に、４個設置してみましょう。
こんな表示になります。
全部が左寄りで並んで表示されていきますが、４個目のパーツがブロックに入りきらずに２行目に表示されました。
この様に、float:leftを指定して並べていけば、パーツはきっちりと並んで表示されていくので世話がいりません。
ここでひとつ注意点です。
外側の隙間(margin)を使った場合、隣り合うパーツのmargin同士が相殺される場合とされない場合があります。
場合があるというのは、ブラウザによって違うということです。
どのブラウザがどうという説明はここではしません。
何故かというと、バグが含まれているからです。特にＩＥのバグは中々修正されません。
こういう事があると、さらに面倒くさくなってしまいますよね。
私がそうでした。バグとは何たることか。それでいいのか、と怒ったデザイナーの方がどれだけ多いことか。
バグがあるとは言え、ＩＥのシェアが高いのも事実であります。
それで、ひとつの工夫なのですが、私はmarginを使うのをやめました。
で、どうしたかというと、divを二重にして、paddingを二つ使うというやり方です。
<div style="padding:20px;float:left">
<div style="border:solid 3px black;width:100px;height:80px;padding:10px;">
</div>
</div>
つまり、外側に枠線の無いdivを設置し、そのdivにおけるpaddigが内側のdivのmarginの代わりになる訳です。
こうすれば、外側の隙間が相殺されることがなくなり、ブラウザによる差が解消されます。
今日はここまで！
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
前回述べたように、<div>～</div>の間が、ひとつの矩形になります。
その時に必要になるのが、寸法です。
可変にする方法もありますが、まずは固定で考えましょう。
px（ピクセル）という単位です。
画面は色々ありますが、現在では、携帯型のネットワーク・ノートパソコンでも、横幅が1024pxあります。
ですから、横スクロールしない程度に収めるのであれば、横幅は1000px以内にすればいいですね。
ちなみに、当社のHPや様々な販売頁は、ほとんど横が800pxにして、その中で左に１列サイドバーをとってそれを180pxぐらいにしています。図のようなイメージです。
自分でお好みのパターンやサイズを探っていきましょう。
このそれぞれの枠を、仮に「ブロック」と呼ぶことにしましょう。
それで、それぞれのブロックに、コンテンツをきちんと詰めていけばいい訳です。
では、ここで、その寸法をそれぞれのdivタグに埋め込んでいきましょう。（ちょっと細かくなりますが、我慢してくださいね。）
<div style="width:800px">
</div>
<div>と</div>は必ず対になりますから、一番最初と一番最後のペアが頁全体の枠を表しています。
その中の「あ」という文字が入っている枠が、ヘッダの黄色いブロック。
次の「い」という文字が入っている枠が、左サイドの水色のブロック。
次の「う」という文字が入っている枠が、右側の大きな緑色のメインブロック。
最後に「え」という文字が入っている枠が、一番下の黄色いブロックになります。
大きな枠の中に４つの枠が入れ子になっているのが分かると思います。
そして、それぞれのdivタグの中に、style=という形で、寸法と背景色（バックグラウンドカラー）、そして、floatという属性が書き込まれています。
（スタイルシートの記述は、上部にまとめて記述するか、または別ファイルにするのがメンテし易いと言われておりますが、ここでは理解する為に、それぞれの中に記述する方法をとります。）
floatというのは、つまりは、その枠をどちらに「寄せる」かという意味になります。
leftと指定すれば、左寄せ、rightと指定すれば、右寄せになります。
ここでは、左サイドのブロックを左寄せ、緑色のメインブロックを右寄せして、形を整えています。
そして、最後の黄色いブロックには、clear:both という指定がしてあります。
これは、左右寄せをやめるという意味になります。
この、左寄せ、右寄せ、クリアをきちんと使い分けることにより、変なズレがなくなります。
もし、float:left と float:right をはずしたら、どうなるのでしょうか。
こんな風に、全てが縦に並んでしまうのです。
これがhtmlの既定だからです。縦に並べようとするのが、基本になります。
メインブロックは、きっちり収まる620pxを指定しているので、左寄せでも結果は変わりませんが、幅をそれより狭くしている場合には、メインブロックの左右どちら側に隙間が空くかが違ってきます。
実際に試してみてください。
また、縦幅は寸法を指定していません。
これは、コンテンツの量によって可変になるという事を意味しています。
トップやボトム部などは、幅指定する場合も多いのですが、メインコンテンツについては通常縦幅の指定はせずに、コンテンツの量によって伸び縮みさせるのが一般的ではないでしょうか。
ちなみに、それぞれのブロックを「フレームを切る」という手法で分離する方法がありますが、これは、各フレームが独立した形で認識されてしまう為、推奨されず、最近ではあまり使われなくなった手法になりました。
今日は、ここまで。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
その時に必要になるのが、寸法です。
可変にする方法もありますが、まずは固定で考えましょう。
px（ピクセル）という単位です。
画面は色々ありますが、現在では、携帯型のネットワーク・ノートパソコンでも、横幅が1024pxあります。
ですから、横スクロールしない程度に収めるのであれば、横幅は1000px以内にすればいいですね。
ちなみに、当社のHPや様々な販売頁は、ほとんど横が800pxにして、その中で左に１列サイドバーをとってそれを180pxぐらいにしています。図のようなイメージです。
自分でお好みのパターンやサイズを探っていきましょう。
このそれぞれの枠を、仮に「ブロック」と呼ぶことにしましょう。
それで、それぞれのブロックに、コンテンツをきちんと詰めていけばいい訳です。
では、ここで、その寸法をそれぞれのdivタグに埋め込んでいきましょう。（ちょっと細かくなりますが、我慢してくださいね。）
<div style="width:800px">
<div style="width:800px; background-color:yellow;">
あ
</div>
あ
</div>
<div style="width:180px; background-color:cyan; float:left;">
い
</div>
い
</div>
<div style="width:620px; background-color:green; float:right;">
う
</div>
う
</div>
<div style="width:800px; background-color:yellow; clear:both;">
え
</div>
え
</div>
</div>
<div>と</div>は必ず対になりますから、一番最初と一番最後のペアが頁全体の枠を表しています。
その中の「あ」という文字が入っている枠が、ヘッダの黄色いブロック。
次の「い」という文字が入っている枠が、左サイドの水色のブロック。
次の「う」という文字が入っている枠が、右側の大きな緑色のメインブロック。
最後に「え」という文字が入っている枠が、一番下の黄色いブロックになります。
大きな枠の中に４つの枠が入れ子になっているのが分かると思います。
そして、それぞれのdivタグの中に、style=という形で、寸法と背景色（バックグラウンドカラー）、そして、floatという属性が書き込まれています。
（スタイルシートの記述は、上部にまとめて記述するか、または別ファイルにするのがメンテし易いと言われておりますが、ここでは理解する為に、それぞれの中に記述する方法をとります。）
floatというのは、つまりは、その枠をどちらに「寄せる」かという意味になります。
leftと指定すれば、左寄せ、rightと指定すれば、右寄せになります。
ここでは、左サイドのブロックを左寄せ、緑色のメインブロックを右寄せして、形を整えています。
そして、最後の黄色いブロックには、clear:both という指定がしてあります。
これは、左右寄せをやめるという意味になります。
この、左寄せ、右寄せ、クリアをきちんと使い分けることにより、変なズレがなくなります。
もし、float:left と float:right をはずしたら、どうなるのでしょうか。
こんな風に、全てが縦に並んでしまうのです。
これがhtmlの既定だからです。縦に並べようとするのが、基本になります。
メインブロックは、きっちり収まる620pxを指定しているので、左寄せでも結果は変わりませんが、幅をそれより狭くしている場合には、メインブロックの左右どちら側に隙間が空くかが違ってきます。
実際に試してみてください。
また、縦幅は寸法を指定していません。
これは、コンテンツの量によって可変になるという事を意味しています。
トップやボトム部などは、幅指定する場合も多いのですが、メインコンテンツについては通常縦幅の指定はせずに、コンテンツの量によって伸び縮みさせるのが一般的ではないでしょうか。
ちなみに、それぞれのブロックを「フレームを切る」という手法で分離する方法がありますが、これは、各フレームが独立した形で認識されてしまう為、推奨されず、最近ではあまり使われなくなった手法になりました。
今日は、ここまで。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
前回、htmlの基本形という話をしました。
その中で、<body> と </body>というタグに挟まれた部分に記述したものが、ブラウザに表示されるのです。
文字を書けば、そのまま表示されます。
さて、ここからが大きな分かれ道になります、経験上ですね。
タグというものがたくさんあります。
< と >に挟まれた中に、様々な予約後が書かれてタグとなります。
・・・ですが、色々なタグを憶えようとすると、挫折すると思います。
面倒くさくなっちゃうんですよね。
もう、いいやってなっちゃう。誰かに頼めばいいや、とか。
ホームページなんて書けなくても、困らないや、とか。
ブログが書ければいいじゃん、とか。
だから、ここでもポイントだけ話しましょう。
ホームページは、枠の中にパズルを並べていくものだと思いましょう。
大きな菓子折りの箱があるとしましょう。
その中に小さな箱を並べていきます。
その小さな箱の中に、四角いまんじゅうかなんかを効率よく並べていくということ。
それだけです。そう考えましょう。
その為に重要になってくるのが<div>～</div>というタグです。
次回は、このdivタグについて解説していきましょう。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
その中で、<body> と </body>というタグに挟まれた部分に記述したものが、ブラウザに表示されるのです。
文字を書けば、そのまま表示されます。
さて、ここからが大きな分かれ道になります、経験上ですね。
タグというものがたくさんあります。
< と >に挟まれた中に、様々な予約後が書かれてタグとなります。
・・・ですが、色々なタグを憶えようとすると、挫折すると思います。
面倒くさくなっちゃうんですよね。
もう、いいやってなっちゃう。誰かに頼めばいいや、とか。
ホームページなんて書けなくても、困らないや、とか。
ブログが書ければいいじゃん、とか。
だから、ここでもポイントだけ話しましょう。
ホームページは、枠の中にパズルを並べていくものだと思いましょう。
大きな菓子折りの箱があるとしましょう。
その中に小さな箱を並べていきます。
その小さな箱の中に、四角いまんじゅうかなんかを効率よく並べていくということ。
それだけです。そう考えましょう。
その為に重要になってくるのが<div>～</div>というタグです。
次回は、このdivタグについて解説していきましょう。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop2/kiji01.html
効率の良いホームページ作成ツールはこちら
皆さん、アフィリエイトはご存知でしょうか。
かつては、金鉱掘りの様に儲けている方が多かった分野です。
でも今や、アフィリエイトでは食えなくなってきていますよね。
そうすると、これまでアフィリエイターだった方が、何とか商材を作って売ろうとします。
でも、そこで立ちはだかるのが、ホームページ作成技術です。
アイディアはあるのだけれども、ホームページが作れない。
何とか作れたとしても、サーバのレンタル契約をして設置して更新・・・
これまでやったことの無い方は、気が遠くなるような仕事です。
そこで、ＣＭＳソフトを設置してあげて、ホームページを作成してあげましょう。
→ 年間無制限販売契約
かつてのゴールドラッシュの米国では、金鉱掘りよりも、金鉱掘りを支援してあげた人々が儲けています。
例えばジーンズのリーバイスが良い例です。
実際にインフォプレナーとして情報を販売しても、中々売れるものではありません。
ブランドとなった方以外は、難しいでしょう。
でも、そういった方々の支援をすれば、まだ収益になります。
ネットで一旗揚げようという方がたくさんいます。
そういった方々にサービスを提供しましょう。
→ 年間無制限販売契約
これからのホームページ作りは、ＣＭＳが基本になります。
ホームページビルダーで地道に作っていては、取り残されてしまいます。
お任せコースで一括作成５万円であれば、依頼してくれる方は全国レベルでたく
さんいらっしゃいます。
ＦＸ系やギャンブル系は、まだまだ売れている様です。
それで、サーバレンタルも込みで、こちらは３０００円／月で募集すれば、引く手あまたです。
サーバレンタルの又貸し方法も、伝授いたします。
５万円（一括）＋３０００円／月で１０件もとれば、これだけで食べていけます。
副業であっても、本業を上回るかもしれません。
是非、年間無制限販売契約をご検討ください。
→ 年間無制限販売契約
ご不明な点があれば、何なりと質問してください。
電話でも構いません。
よろしくお願いいたします。
かつては、金鉱掘りの様に儲けている方が多かった分野です。
でも今や、アフィリエイトでは食えなくなってきていますよね。
そうすると、これまでアフィリエイターだった方が、何とか商材を作って売ろうとします。
でも、そこで立ちはだかるのが、ホームページ作成技術です。
アイディアはあるのだけれども、ホームページが作れない。
何とか作れたとしても、サーバのレンタル契約をして設置して更新・・・
これまでやったことの無い方は、気が遠くなるような仕事です。
そこで、ＣＭＳソフトを設置してあげて、ホームページを作成してあげましょう。
→ 年間無制限販売契約
かつてのゴールドラッシュの米国では、金鉱掘りよりも、金鉱掘りを支援してあげた人々が儲けています。
例えばジーンズのリーバイスが良い例です。
実際にインフォプレナーとして情報を販売しても、中々売れるものではありません。
ブランドとなった方以外は、難しいでしょう。
でも、そういった方々の支援をすれば、まだ収益になります。
ネットで一旗揚げようという方がたくさんいます。
そういった方々にサービスを提供しましょう。
→ 年間無制限販売契約
これからのホームページ作りは、ＣＭＳが基本になります。
ホームページビルダーで地道に作っていては、取り残されてしまいます。
お任せコースで一括作成５万円であれば、依頼してくれる方は全国レベルでたく
さんいらっしゃいます。
ＦＸ系やギャンブル系は、まだまだ売れている様です。
それで、サーバレンタルも込みで、こちらは３０００円／月で募集すれば、引く手あまたです。
サーバレンタルの又貸し方法も、伝授いたします。
５万円（一括）＋３０００円／月で１０件もとれば、これだけで食べていけます。
副業であっても、本業を上回るかもしれません。
是非、年間無制限販売契約をご検討ください。
→ 年間無制限販売契約
ご不明な点があれば、何なりと質問してください。
電話でも構いません。
よろしくお願いいたします。
ホームページを作成する場合、ある心構えが必要になります。
一つめは、とにかく実験してみるということです。
気になる事があれば、調べて、自分で記入してみて、すぐにブラウザで表示させてみることです。
htmlはテキストエディタで作成したら、それを保存して、すぐにブラウザにドラッグ＆ドロップすれば表示させることが出来ます。
どんな記述の仕方をしても、パソコンを壊すことはありませんから、どんどん書いてみて、とにかく試してみてください。
二つ目は、最初から美しいプロ並みのページを作ろうとしないことです。
理由は簡単です。プロがデザインするホームページは、どこが違うのかと言えば、ズバリ、グラフィックデザインの美しさと言っても過言ではありません。
きちんとhtmlを理解してホームページを作成するということと、プロ並みのデザインを目指すという事の間には大きな隔たりがあります。
ですから、まずはhtmlを自分の頭に描いた通りに記述出来る様になったら、グラフィックデザインについても追究する様にしましょう。
建築物で言えば、きちんと柱や屋根、壁を組み合わせて、ドアや窓を取り付ける事が出来たら、柱の彫刻やふすま絵について考えましょうと言う事です。
大工仕事の基本を知らずに柱の彫刻から勉強しても家は建ちませんからね。
ホームページ作成の心得
とにかく記述して表示させよ（実験すべし）
最初からプロのデザインを目指すな
htmlについて
ホームページを作る為には、htmlファイルを作成しなければなりません。
まず、htmlファイル作成について取り組む場合、構える必要はありません。
ここが重要です。
ただのテキストファイルです。そこに、ある決まりに基づいた文法で記述するだけなのです。
ここで、文法という言葉を使ってしまうと、ここから既に学習する様な気分になってしまいますよね。
だから、htmlを理解する時には、憶えようとする必要はありません。
眺めてみましょう。
(1)htmlの基本形
まず、htmlの基本的な形を見てください。
（クリックすると全体が見れます。）
htmlの書き方も、いくつかのパターンがありますが、まず上記の形を基本形としてください。
ここでゴチャゴチャ書いてある部分は全てオマジナイと思ってください。
さて、中身については、次回へ。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら
一つめは、とにかく実験してみるということです。
気になる事があれば、調べて、自分で記入してみて、すぐにブラウザで表示させてみることです。
htmlはテキストエディタで作成したら、それを保存して、すぐにブラウザにドラッグ＆ドロップすれば表示させることが出来ます。
どんな記述の仕方をしても、パソコンを壊すことはありませんから、どんどん書いてみて、とにかく試してみてください。
二つ目は、最初から美しいプロ並みのページを作ろうとしないことです。
理由は簡単です。プロがデザインするホームページは、どこが違うのかと言えば、ズバリ、グラフィックデザインの美しさと言っても過言ではありません。
きちんとhtmlを理解してホームページを作成するということと、プロ並みのデザインを目指すという事の間には大きな隔たりがあります。
ですから、まずはhtmlを自分の頭に描いた通りに記述出来る様になったら、グラフィックデザインについても追究する様にしましょう。
建築物で言えば、きちんと柱や屋根、壁を組み合わせて、ドアや窓を取り付ける事が出来たら、柱の彫刻やふすま絵について考えましょうと言う事です。
大工仕事の基本を知らずに柱の彫刻から勉強しても家は建ちませんからね。
ホームページ作成の心得
とにかく記述して表示させよ（実験すべし）
最初からプロのデザインを目指すな
htmlについて
ホームページを作る為には、htmlファイルを作成しなければなりません。
まず、htmlファイル作成について取り組む場合、構える必要はありません。
ここが重要です。
ただのテキストファイルです。そこに、ある決まりに基づいた文法で記述するだけなのです。
ここで、文法という言葉を使ってしまうと、ここから既に学習する様な気分になってしまいますよね。
だから、htmlを理解する時には、憶えようとする必要はありません。
眺めてみましょう。
(1)htmlの基本形
まず、htmlの基本的な形を見てください。
（クリックすると全体が見れます。）
htmlの書き方も、いくつかのパターンがありますが、まず上記の形を基本形としてください。
ここでゴチャゴチャ書いてある部分は全てオマジナイと思ってください。
さて、中身については、次回へ。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら
理論から入ると、どうしても難しそうだという観念が先行してしまいます。
ですから、ここではあくまでホームページの大まかな概念だけを説明しておきます。
（１）ホームページはどこにある？
具体的には、ある業者のサーバにあります（自宅に置いている方もいます）。
サーバと言っても、普通のコンピュータです。最近は、パソコンを使う割合がかなり高いです。
多くの方が利用する、色々なサービスを提供するコンピュータがサーバと呼ばれています。
ホームページを提供するサーバをウェブ・サーバと呼びます。
そのサーバにhtmlファイルが格納されている、ただそれだけです。
（２） どうしてページが表示される？
皆さんがお使いのブラウザ（InternetExplorerなど）がウェブ・サーバと通信してhtmlファイルを読み込み、それを決まりに従って表示します。
つまり、ブラウザは大きく二つの仕事をしているのです。
その１．ウェブ・サーバと通信してhtmlファイルを持ってくる
その２．htmlファイルを表示する
ですから、自分でhtmlファイルを作ったら、それをブラウザに渡してあげれば、その内容を即表示してくれます。
簡単な方法は、htmlファイルをドラッグ＆ドロップでブラウザに食わしてあげることです。
どうして表示されるのか、について言えば、ブラウザに表示する機構が備わっているということに他なりません。
例えて言えば、英文を解釈して読み上げるソフトに英文を渡せば音声を発生する、という様な内容に似ています。
（３）ＵＲＬって何だっけ？
ブラウザでホームページに表示する為に打ち込むhttp://・・・という文字列をＵＲＬと呼びます。
地図を表示する為の住所と似たようなものです。
中身は、ドメイン、サブドメイン、フォルダ、ファイル名に分かれます。
その１．ドメイン
当社の例で言えば、ompookan.jpがドメイン名です。
中身は名称と属性で成り立っています（名称.属性）
その２．サブドメイン
当社の例で言えば、kitchen.ompookan.jpの“kitchen”がサブドメイン名に相当します。
会社で言えば、その中の部署の様な扱いになります。
大きく扱う内容が違う場合には、サブドメインで分類した方が良いでしょう。
その３．フォルダ名
例えば、http://ompookan.jp/shop/kiji01.htmlというURLがあったとすれば、この中の /shop/ がフォルダ名になります。
これは、我々が使っているパソコンのフォルダ名と同様に、サーバ内で作成されているフォルダ名になります。
ひとつのサイトの中でも目的別にフォルダを分類して整理する為に使用します。
その４．ファイル名
例えば、http://ompookan.jp/shop/kiji01.htmlというURLがあったとすれば、この中のkiji01.htmlがファイル名です。
（４）どうしてホームページに辿り着くの？
実際には、ドメインにはＩＰアドレスという番地が割りつけられています。
123.123.123.123 のように、0～255の数字を４セット、ピリオドで繋げたものです。
地球で言えば、緯度・経度のようなものです。
緯度・経度を示してあげれば、あなたの家も特定出来るはずです。
ですから、本来、IPアドレスを打ち込んで辿り着ければ、URLは必要ありません。
但し、人間がそのサイトに辿り着くにあたり、その会社や団体、あるいはサービスのページの内容が分かり易いものであった方がいいはずです。
その為に、ドメインというものが存在し、これは世界で一つしか無い名称になり、そこにＩＰアドレスを紐付けした訳です。
という訳で、ブラウザにドメイン名を打ち込めば、それは緯度・経度を指示したことになり、そのサイト（会社やサービスのページ）に辿り着けるということになります。
住所も、緯度経度より都道府県・市区町村・番地で表した方が、人間には分かり易いですよね。それと同じです。
そして、その中のサブドメイン ＞ フォルダ ＞ htmlファイル名 と辿り、最終的に表示したいhtmlページを読み込むことにより、ブラウザに表示されるということになります。
但し、最後のhtmlファイル名を省略した場合には、ファイル名はindex.htmlあるいはindex.htmであるという暗黙の約束があるのです。
ちなみに、このＩＰアドレスとドメインの関係を記録し、差し示してくれるのがＤＮＳ（ドメインネームサーバ）です。（これは憶えなくていいです。）
（５）ホームページ表示のまとめ
ホームページが表示されるまでの流れをまとめます。
①ブラウザにＵＲＬを打ち込む
②ＤＮＳサーバがＩＰアドレスを指し示す
③サーバに辿りつく
④サブドメインが定義されているフォルダを認識する
⑤フォルダの階層を辿る
⑥htmlファイルを見つけ、それを持ってくる
⑦ブラウザにページが表示される
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら
ですから、ここではあくまでホームページの大まかな概念だけを説明しておきます。
（１）ホームページはどこにある？
具体的には、ある業者のサーバにあります（自宅に置いている方もいます）。
サーバと言っても、普通のコンピュータです。最近は、パソコンを使う割合がかなり高いです。
多くの方が利用する、色々なサービスを提供するコンピュータがサーバと呼ばれています。
ホームページを提供するサーバをウェブ・サーバと呼びます。
そのサーバにhtmlファイルが格納されている、ただそれだけです。
（２） どうしてページが表示される？
皆さんがお使いのブラウザ（InternetExplorerなど）がウェブ・サーバと通信してhtmlファイルを読み込み、それを決まりに従って表示します。
つまり、ブラウザは大きく二つの仕事をしているのです。
その１．ウェブ・サーバと通信してhtmlファイルを持ってくる
その２．htmlファイルを表示する
ですから、自分でhtmlファイルを作ったら、それをブラウザに渡してあげれば、その内容を即表示してくれます。
簡単な方法は、htmlファイルをドラッグ＆ドロップでブラウザに食わしてあげることです。
どうして表示されるのか、について言えば、ブラウザに表示する機構が備わっているということに他なりません。
例えて言えば、英文を解釈して読み上げるソフトに英文を渡せば音声を発生する、という様な内容に似ています。
（３）ＵＲＬって何だっけ？
ブラウザでホームページに表示する為に打ち込むhttp://・・・という文字列をＵＲＬと呼びます。
地図を表示する為の住所と似たようなものです。
中身は、ドメイン、サブドメイン、フォルダ、ファイル名に分かれます。
その１．ドメイン
当社の例で言えば、ompookan.jpがドメイン名です。
中身は名称と属性で成り立っています（名称.属性）
その２．サブドメイン
当社の例で言えば、kitchen.ompookan.jpの“kitchen”がサブドメイン名に相当します。
会社で言えば、その中の部署の様な扱いになります。
大きく扱う内容が違う場合には、サブドメインで分類した方が良いでしょう。
その３．フォルダ名
例えば、http://ompookan.jp/shop/kiji01.htmlというURLがあったとすれば、この中の /shop/ がフォルダ名になります。
これは、我々が使っているパソコンのフォルダ名と同様に、サーバ内で作成されているフォルダ名になります。
ひとつのサイトの中でも目的別にフォルダを分類して整理する為に使用します。
その４．ファイル名
例えば、http://ompookan.jp/shop/kiji01.htmlというURLがあったとすれば、この中のkiji01.htmlがファイル名です。
（４）どうしてホームページに辿り着くの？
実際には、ドメインにはＩＰアドレスという番地が割りつけられています。
123.123.123.123 のように、0～255の数字を４セット、ピリオドで繋げたものです。
地球で言えば、緯度・経度のようなものです。
緯度・経度を示してあげれば、あなたの家も特定出来るはずです。
ですから、本来、IPアドレスを打ち込んで辿り着ければ、URLは必要ありません。
但し、人間がそのサイトに辿り着くにあたり、その会社や団体、あるいはサービスのページの内容が分かり易いものであった方がいいはずです。
その為に、ドメインというものが存在し、これは世界で一つしか無い名称になり、そこにＩＰアドレスを紐付けした訳です。
という訳で、ブラウザにドメイン名を打ち込めば、それは緯度・経度を指示したことになり、そのサイト（会社やサービスのページ）に辿り着けるということになります。
住所も、緯度経度より都道府県・市区町村・番地で表した方が、人間には分かり易いですよね。それと同じです。
そして、その中のサブドメイン ＞ フォルダ ＞ htmlファイル名 と辿り、最終的に表示したいhtmlページを読み込むことにより、ブラウザに表示されるということになります。
但し、最後のhtmlファイル名を省略した場合には、ファイル名はindex.htmlあるいはindex.htmであるという暗黙の約束があるのです。
ちなみに、このＩＰアドレスとドメインの関係を記録し、差し示してくれるのがＤＮＳ（ドメインネームサーバ）です。（これは憶えなくていいです。）
（５）ホームページ表示のまとめ
ホームページが表示されるまでの流れをまとめます。
①ブラウザにＵＲＬを打ち込む
②ＤＮＳサーバがＩＰアドレスを指し示す
③サーバに辿りつく
④サブドメインが定義されているフォルダを認識する
⑤フォルダの階層を辿る
⑥htmlファイルを見つけ、それを持ってくる
⑦ブラウザにページが表示される
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら
皆さん、きれいだなとかプロっぽいなと思うホームページはどういうページですか？
よーく分析してみてください。
パッと見てそう思えるページは、グラフィック技術が優れたページだと言えると私は思います。
色々なツールや技術を使ってみたものの、どうもうまくいかないな～と思った方も多いのではないでしょうか。
最終的には、グラフィック的にすばらしいもの、これが人の目を引くのではないでしょうか。
では、そんな「綺麗な」ホームページであれば本当に良いのでしょうか。
確かに、綺麗で人の目を引くものであるのは良いことです。
ですが、これが例えばGoogleやYahoo!等の検索エンジンの上位に表示され、アクセス数が多いかどうかとは関係ありませんよね。
ホームページは、まず、構造がしっかりしていて、更新し易く、キーワードをうまく使って多くの人の目に触れ易い仕組みが出来ているということがベースとして必要になりますよね。
グラフィックの綺麗さは、それらの基本が出来てから、差し替えればいいことです。
細かいデザインから入る人は、木を見て森を見ずという様なものです。
本当に必要なグランドデザインがしっかりと出来て、はじめてそのページが何を訴えたいのかが見えて来るというものです。
まずは、そんな基本的な構造のあり方から述べていきたいと思います。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら
よーく分析してみてください。
パッと見てそう思えるページは、グラフィック技術が優れたページだと言えると私は思います。
色々なツールや技術を使ってみたものの、どうもうまくいかないな～と思った方も多いのではないでしょうか。
最終的には、グラフィック的にすばらしいもの、これが人の目を引くのではないでしょうか。
では、そんな「綺麗な」ホームページであれば本当に良いのでしょうか。
確かに、綺麗で人の目を引くものであるのは良いことです。
ですが、これが例えばGoogleやYahoo!等の検索エンジンの上位に表示され、アクセス数が多いかどうかとは関係ありませんよね。
ホームページは、まず、構造がしっかりしていて、更新し易く、キーワードをうまく使って多くの人の目に触れ易い仕組みが出来ているということがベースとして必要になりますよね。
グラフィックの綺麗さは、それらの基本が出来てから、差し替えればいいことです。
細かいデザインから入る人は、木を見て森を見ずという様なものです。
本当に必要なグランドデザインがしっかりと出来て、はじめてそのページが何を訴えたいのかが見えて来るというものです。
まずは、そんな基本的な構造のあり方から述べていきたいと思います。
- - - - - - - - - -
Ads by Ompooooooooookan
記事クリエイター http://ompookan.jp/shop/kiji01.html
効率の良いホームページ作成ツールはこちら