ホームページ作成ビギナーズガイド

その２５　サイトを公開する前に覚えておきたい基礎知識

Mon, 18 Jul 2011 18:57:31 +0900

数々のセクションを経て簡単なホームページが完成しました。お疲れさまでした。ですがこれで完成ではありません。ホームページは他のユーザーに閲覧してもらえなければ意味がありませんから・・・ではその設定はどのようにするのでしょうか？それはサイトを公開するという作業を行わなければなりません。ではどのようにあなたのサイトを公開するのでしょうか？それはどこに公開するのでしょうか？今回はあなたのサイトを公開するための基礎を学びますホームページをどのように公開するのかホームページはただ作っただけでは、何も始りません。あなたが作成したホームページをインターネット上で閲覧できるようにするには、ホームページが閲覧出来る場所にあなたのサイトのデータ全てを転送する作業が必要になります。この転送する場所のことをサーバーといいます。つまりホームページは、サーバーにあなたの作成したサイトを転送する作業のことなのです。サーバーというのはどこにあるのでしょうか？サーバーはたくさんの種類があります。ここでは、正しい表現ではないですが、「サーバー」=「ホームーページを転送する場所」という定義をします。そしてサーバーはどこにあるのか？ということですが、基本的には外部の業者のサーバーをレンタルすることがおすすめです。サーバーはレンタルするホームページを公開するサーバーはそれをレンタルしてくれる外部サイトに委託する方法が簡単ですし、むしろそろ方法をお勧めします。このレンタルできるサーバーのことを、俗にレンタルサーバーと言います。外部に委託する理由は、一番は保守をしなくてもよいことと、セキュリティがある程度しっかりしているからです。レンタルサーバーの種類レンタルサーバーの種類は、わかりやすい分け方では２種類になります。無料レンタルサーバー有料レンタルサーバーではそれぞれのメリット、デメリットは何でしょうか？無料レンタルサーバーのメリット、デメリットメリットやはり価格が無料というところでしょう。まず手始めに・・・という方はこちらをお勧めしますデメリットサイト運営をこれから続けていくという場合はこちらをお勧めします。たくさんのページ作成で容量がオーバーになってしまうことも・・・検索結果でも上位にランクされやすいし、何より余計な広告が入ってしまいます。そして機能制限もあります。商用で使用することが、できないこともあります。有料レンタルサーバーのメリット、デメリットは何でしょうか？メリットサーバーの容量が大きいこと。メール配信機能、メールアドレス作成が無制限、アクセル解析が充実、検索結果で上位にランクされやすい。などメリットはきりがありません。私個人のかんがえですが、予算を多少なりともかけられるなら、無料よりも、有料サーバーのほうがおすすめです。しかもそんなにお金をかけなくても高機能なレンタルサーバーもあります。デメリット一番のデメリットはお金がかかる点でしょう。そしてあなたが使いたい機能がサーバーにない場合は当然つかえません。おすすめはあくまで有料レンタルサーバー。将来を見据えた、サーバー選びをどちらが良いかと言えばさきほども個人的に述べましたが、有料レンタルです。ただし、これはあなたの価値観次第です。ホームーページは何のために作るのか？閲覧対象者はだれなのか？どんな機能が使えるのか？などを吟味し、現状でベストなサーバーを選んでください。お勧めレンタルサーバーは？お勧めレンタルサーバーは、たくさんある中で、私自身も使って気に入っているサーバーをご紹介しましょう。それはロリポップレンタルサーバーです。おすすめのロリポプランを紹介します。何より低価格　月々263円～このサーバーはとにかく低価格です。年間にしても３１５０円です。一日換算なら１円にもなりません。昨日も充実でおすすめ容量も13ギガバイトから容量は１３ギガバイトの大容量です。最近は動画マーケティングも主流になっていますが、この容量ならば心配ありません。メールアドレス無制限メールアドレスを好きなだけ作成できます。メルマガ配信機能５００件までのメールリストを５件まで作成できそれらに対してメールを一斉配信することができます。メルマガ配信にも使えます。ブログ設定機能ブログサービスも充実。ブログサイトをすぐに作ることができます。などなどまだまだお得なｻｰﾋﾞｽがいっぱいで私は満足しております。ここまでの低価格なら、ほとんど無料だと思って私はわりきっていますよ☆ 参考にしてくださいね。もうひとつ考えなければならないこと。それはドメインです。ドメインとはホームページの住所のことよく閲覧画面のアドレスバーににhttp://www.～とでていますが、あれがドメインのことです。これも無料と有料がありますので簡単にメリットデメリットを説明しますドメインは有料か？無料か？無料ドメインはさきほどの無料レンタルサーバーを選択したとき、必然的に設定されるものです。サイト運営を本格的に考える際、いづれ無料レンタルから有料に引っ越しをしようと考えることもあるでしょう。そんなとき無料ドメインだと、ユーザーがお気に入りに追加していたアドレスが変更になってしまうことになり、あとあとアドレスの変更をユーザーに連絡する手段にこまることになりますのでこれも有料でドメインを取得することをお勧めします。携帯電話を新規にするたび電話番号が変わるようなイメージでしょうか。それに比べ有料ドメインは、契約を解除しない限り永久に自分のアドレスとして存在することになります。それと自分のドメインは長く持てば持つほど、ホームーページの価値があがり、検索にも有利になるという利点があります。お金がかかるデメリットがあるにせよ、将来のことを考え、ドメイン取得をご検討してみてはいかがでしょうか？お勧めのドメイン取得先は？こちらも低価格なムームードメインをお勧めします。ドメインにより価格帯は変わりますが、安いものでは年間580円～取得が可能です。先程のレンタルサーバーと併用したとしても年間経費は3,736円。月々で311円。1日あたり10円とローコストです。初心者の方でも、受け入れやすい価格だと思います。合わせてご検討してみてはいかがでしょうか？これで終了です。まずは無料のレンタルサーバーでこつをつかみ、慣れてきたら有料ドメインで試してみてはいかがでしょうか？お疲れさまでした

その２４　全てのページを完成させる

Mon, 18 Jul 2011 16:33:13 +0900

ホームページの作成講座　ビギナー編もページ作りとしては最後になりました。あと一息です。がんばりましょう。全ページのレイアウトの為のブロックを設定し、サイトを完成させよう。 div要素はindex.htmlを編集しただけでまだ下記の全てのページにブロックを設定していませんでした。全ページはこれだけありましたね。設定が全て完了したトップページはじめにホームページの基礎ホームページ作成の応用お役立ちサイトリンク集スタイルシートで背景色（今回は薄い緑）を設定しているので、全てのページは緑の背景にはなっていますが、レイアウトはブロックを指定いませんので、全てのページにdiv idを設定して行きましょう。この編集が終わったらサイト作成は完了です。では始めましょう。今までの講義で使ってきたトップページ以外は、ブロックの設定を全くしていません。ですので残りページを編集していきましょう総仕上げでは全てのページのコードを掲載するので、ハイライトの部分を修正してください。 hajime.html はじめに-ホームページの作り方

サイドメニュー

はじめに

はじめての方にでもわかるホームページ作成サイトを立ち上げました

infomaition

○○年○月○日ホームページをリニューアルしました。

kiso.html ホームページの基礎-ホームページの作り方

サイドメニュー

ホームページの基礎

ホームページの基本をまず抑えましょう

infomaition

○○年○月○日ホームページをリニューアルしました。

ouyou.html ホームページ作成の応用-ホームページの作り方

サイドメニュー

ホームページ作成の応用

ここではホームページ作成の応用を理解しましょう

infomaition

○○年○月○日ホームページをリニューアルしました。

oyakudachi.html お役立ちサイト-ホームページの作り方

サイドメニュー

お役立ちサイト

ホームページ作成に関するお役立ちサイトです。

infomaition

○○年○月○日ホームページをリニューアルしました。

linksyu.html リンク集-ホームページの作り方

サイドメニュー

リンク集

お役立ちリンク集です。

infomaition

○○年○月○日ホームページをリニューアルしました。

　これでサイトは完成です。　　　確認してみましょう。（こちらで確認できます。）全てのページにブロックを設定したため、スタイルシートの設定が全ページに施されることになりましたサイトは完成です。そのあとはどうするのか？お疲れさまでした。これでサイトはひとまず完成です。ですが・・・これだけではサイトは真の完成とはいえません。現在作成したファイルは全てあなたのパソコンの中に保存されているだけです。このファイルをホームページが閲覧できる場所に保管する作業。つまり、ホームページの公開手続きをすることになります。では次はサイトを公開する前に知っておくべきことを紹介したいと思います。次のセクションはその２５　サイトを公開する前に覚えておきたい基礎知識　です。

その２３　マージンとパディングとは

Mon, 18 Jul 2011 14:15:21 +0900

いよいよレイアウトも大詰めです。今回は余白を設定する要素、マージンとパディングを学びましょう。余白を設定しレイアウトの見栄えをさらによくする。(マージンとパディングの設定) まずは、index.htmlを左クリックで開いて確認します。こちらで確認できます。(確認画面はこちら）文字やサイドメニューは左によっていますし、サイドメニューの右側に配置したボーダーはサイドメニューに貼りついていてバランスが悪いです。そしてコンテンツ部分は逆に右側にくっついてこれもバランスが悪いですね。これに余白を設定してバランスを整えるのがマージンとパディングの役割です。では実際にどうなるのか？まずは説明はあとにして、設定してみましょう。layout.cssをメモ帳で開いて、ハイライトの部分のように編集します。 body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;} #contents{width:490px; float:right;} #footer{clear:both;}#header{margin-left:30px;} では確認してみましょうこちらで確認できます。(確認画面は確認画面ヘッダーの写真と文字が位置が右に寄りましたね。詳しい解説は後述するとして、どんどん作業を進めてみます。ついてきて下さいね☆ サイドメニューとコンテンツメニュー,そしてフッターの余白を設定するつづいてサイドメニューの左余白とコンテンツメニューの右余白、そしてフッターの左に余白を設定しましょう。以下のようにスタイルシートに記述しますlayout.cssをメモ帳で開いて以下のように書き加えます（ハイライトが編集部分） body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;margin-left:20px;} #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} では確認してみましょうこちらで確認できます。(確認画面はこちら）これでサイドメニュー、コンテンツ、フッターに余白の設定ができました。ボーダーをパディングで右に移動する。サイドメニューの右にぴったりとくっついたボーダーを右へ移動したいと思います。ここでいよいよ登場するのがパディングです。これも実際にスタイルシートに記述してみます。body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;margin-left:20px;padding-right:20px;} #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} では確認してみましょうこちらで確認できます。(確認画面はこちら）マージンとパディングの図解解説（今回のレイアウトを図にしてみる。）今回のレイアウトを図で表すと以下のようになります。枠の外は一番の大枠のbodyタグのブロック。そして、bodyの中にもとになるmainブロック。幅はスタイルシートで860pxに設定。そしてheaderのブロック。ヘッダー画像は800pxに設定。mainの枠の左側に貼りついていたため、margin-leftで30pxの余白を指定 sideブロックはmainの左側に貼りついていたためmargin-leftで20pxの余白を指定 contentsブロックはmainの右側にに貼りついていたためmargin-rightで20pxの余白を指定 footerブロックはmainの左側に貼りついていたためmargin-leftで20pxの余白を指定 sideの右側に貼りついていたボーダー線はpadding-rightで右へ20px移動このようにレイアウトを図にしてみるとブロックのどの部分がどういう設定なのかがわかりやすくなるかと思います。マージンとパディングの明確な違いは何なのか？では以下の図を見てくださいさきほどのレイアウトの図のなかで、sideブロックの部分を抜き出してみました。ここでsideブロックの横幅はあくまで290pxです。（この図だと白い部分が２９０pxの幅をもつ） sideブロックの右側にボーダーがありましたよね？マージンはこのボーダー（サイドメニューとコンテンツを区切る縦の区切り線）の外側に余白を作ります。そしてパディングの場合はボーダーの内側に余白を作ります。これがマージンとパディングの大きな違いです。言葉で書いてもあまり理解できないかと思うので実際、さきほどのスタイルシートの記述を変えて検証してみましょう。再びlayout.cssをメモ帳で開いていただき、以下のように修正してみてください。body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;margin-left:20px;margin-right:20px;} #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} 先ほどpaddingで設定していたスタイルシートをmarginに変えてみました。上書き保存し、index.htmlを左クリックしてプレビューしてみてください。こちらで確認できます。(確認画面はこちら）ボーダーがsideに貼りついてしまったかと思います。ですがこれは見方を変えれば、ボーダーの右側に20pxの余白を設定したということになります。そしてsideブロックにボーダーが貼りついているということは、sideブロックとボーダーの間のパディングは0pxということになりますね。背景色の設定はパディングまでは影響するがマージンには影響しない最後にsideブロックに背景色を設定してみましょう。layout.cssに以下のように記述します。body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;margin-left:20px;margin-right:20px;background-color:#99FFCC;} #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} 上書き保存し、index.htmlを左クリックしてプレビューしてみてください。こちらで確認できます。(確認画面はこちら）sideに背景色をつけました。ここで分かることがあります。まず左の余白部分です。ここはマージンで余白を設定しています。ということは、つまり背景色が影響しない部分ということです。そのためここはmainブロックで指定した背景色（この場合はホワイト）のままになっているわけです。そして右側の部分はボーダーまでがパディングの範囲ですので当然ボーダーを超えて背景色が設定されることはありません。では左右のマージンの設定をパディングに変えたらどうなるでしょうか？当然背景色がつくということになります。スタイルシートを以下のように変えてみましょう。body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;padding-left:20px;padding-right:20px;background-color:#99FFCC;} #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} 上書き保存し、index.htmlを左クリックしてプレビューしてみてください。こちらで確認できます。(確認画面はこちら）今度はsideの左側はpaddingを20pxと設定したので、mainまでいっぱいに背景色がつきました。この場合はmainとの間にマージンの余白は0pxということになります。そしてsideブロック右側です。右側はボーダーが右にづれ、そしてそこまで背景色が影響していることがわかるかと思います。これがマージンとパディングの概念です。ではスタイルシートに設定したsideの背景を削除し、左余白で設定したパディングをマージンに戻しましょう body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left;border-right-width:1px; border-right-style:dashed;border-right-color:#666666;margin-left:20px;padding-right:20px;background-color:#99FFCC;　　　→削除}　 #contents{width:490px; float:right;margin-right:20px;} #footer{clear:both;margin-left:20px;}#header{margin-left:30px;} マージンとパディングまとめマージンとパディングの違いは理解いただけましたか？ボーダーの中の余白は・・・パディングボーダーの外の余白は・・・マージン背景色が影響しないのは・・・パディング背景色が影響するのは・・・マージン覚えてくださいねでは他のページもブロックを変更しサイト全体を完成させましょう。次のセクションはその２４　全てのページを完成させる　です

その２２　サイトのレイアウトを設定するその３

Mon, 18 Jul 2011 13:58:59 +0900

次はページの配置をかえ、そしてサイドメニューとコンテンツの間に区切り線を入れてみましょうページの配置を真ん中にくるようにしましょうページは現在は左によったかたちになっています。これを真ん中に来るように設定してみましょう。「layout.css」をメモ帳で開いてください。次のように記述していきます。 body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff; margin-left:auto; margin-right:auto;} #side{width:290px; float:left;} #contents{width:490px; float:right;} #footer{clear:both;}これでlayout.cssを上書き保存し、index.htmlを左クリックで開いて確認してみましょう。こちらで確認できます。(確認画面はこちらページを画面中央に表示させるには、margin(マージン）プロパティを設定します。マージンとは余白を設定する要素であり、それにleftとrightをつけることで、「右と左の余白の設定をしなさい。」ということになります。そして、値はautoを指定しているので「余白は自動で処理してください。」と命令していることになります。余白の設定はマージンの他にパディングという設定もあります。レイアウトを行う際両社とも重要な要素なので次のセクションで集中して学びましょうサイドメニューとコンテンツの間に境界線を設定する。サイドメニューとコンテンツの間に境界線を設定しましょう。境界線の設定はborderで設定します。さっそく以下のようにスタイルシートに入力してくださいね。 body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;margin-left:auto;margin-right:auto;} #side{width:290px; float:left; border-right-width:1px; border-right-style:dashed; border-right-color:#666666;} #contents{width:490px; float:right;} #footer{clear:both;} これでlayout.cssを上書き保存し、index.htmlを左クリックで開いて確認してみましょう。こちらで確認できます。(確認画面はこちら）まず#sideの｛｝内にborderを設定してあることを確認してください。そしてborderの後にrightを設定していますね。これは右側という意味です。そしてさらに-以下でwidth(線の幅を指定),style(線のスタイルを指定←この場合は点線),color(線の色を指定)をそれぞれ設定して完了となります。まとめページの配置を中央に設定し、ボーダー(該線）を真ん中に配置しました。でもこれではまだ不十分です。適正に余白が設定されていません。余白の設定は、マージンとパディングで設定します。先ほどでてきましたよね。マージンとパディングを極めて、レイアウトにさらに磨きをかけましょう☆次のセクションはその２３　マージンとパディングとは　です

その２１　サイトのレイアウトを設定するその２

Mon, 18 Jul 2011 13:42:32 +0900

さらにスタイルシートにレイアウトの設定をしていきましょう。ページの背景色を決定しましょうページの背景色を設定します。「layout.css」をメモ帳で開いてください。次のように記述していきます。ハイライト部分が追加部分です。 body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px;} #side{width:290px; float:left;} #contents{width:490px; float:right;} #footer{clear:both;}これでlayout.cssを上書き保存し、index.htmlを左クリックで開いて確認してみましょうこちらで確認できます。(確認画面はこちら）メインの背景を白にする背景は変えることができました。ですが、サイドバーもコンテンツも全て背景の色になっています。そこでmainにも背景色を指定しサイトにメリハリをつけましょう。 body{background-color:#ccffcc;}h1{font-size:15px;} h2{font-size:15px;} h3{background-color:#33FF00;} h4{background-color:#90ee90;} #main{width:860px; background-color:#ffffff;} #side{width:290px; float:left;} #contents{width:490px; float:right;} #footer{clear:both;}これでlayout.cssを上書き保存し、index.htmlを左クリックで開いて確認してみましょう。こちらで確認できます。(確認画面はこちら）まとめ背景色の決定をしました。body要素に背景色を指定することでページ全体の背景がかわり、mainブロックの背景色を設定する事でメイン部分の背景を変えることができました。次はページの配置を真ん中に寄せる方法と、サイドメニューとコンテンツの間に線(ボーダー）を入れることを学びましょう次のセクションはその２２　サイトのレイアウトを設定するその３　です

サイドメニュー

ホームページの基礎

infomaition

サイドメニュー

ホームページ作成の応用

infomaition

サイドメニュー

お役立ちサイト

infomaition

サイドメニュー

リンク集

infomaition

ホームページ作成ビギナーズガイド

その２５　サイトを公開する前に覚えておきたい基礎知識

その２４　全てのページを完成させる

ホームページの作り方

ホームページの作り方　へようこそ！

サイドメニュー

はじめに

infomaition

ホームページの作り方

ホームページの作り方　へようこそ！

ホームページの作り方

ホームページの作り方　へようこそ！

ホームページの作り方

ホームページの作り方　へようこそ！

ホームページの作り方

ホームページの作り方　へようこそ！

その２３　マージンとパディングとは

その２２　サイトのレイアウトを設定するその３

その２１　サイトのレイアウトを設定するその２

ホームページ作成ビギナーズガイド

その２５ サイトを公開する前に覚えておきたい基礎知識

その２４ 全てのページを完成させる

ホームページの作り方

ホームページの作り方 へようこそ！

サイドメニュー

はじめに

infomaition

ホームページの作り方

ホームページの作り方 へようこそ！

サイドメニュー

ホームページの基礎

infomaition

ホームページの作り方

ホームページの作り方 へようこそ！

サイドメニュー

ホームページ作成の応用

infomaition

ホームページの作り方

ホームページの作り方 へようこそ！

サイドメニュー

お役立ちサイト

infomaition

ホームページの作り方

ホームページの作り方 へようこそ！

サイドメニュー

リンク集

infomaition

その２３ マージンとパディングとは

その２２ サイトのレイアウトを設定するその３

その２１ サイトのレイアウトを設定するその２

その２５　サイトを公開する前に覚えておきたい基礎知識

その２４　全てのページを完成させる

ホームページの作り方　へようこそ！

ホームページの作り方　へようこそ！

ホームページの作り方　へようこそ！

ホームページの作り方　へようこそ！

ホームページの作り方　へようこそ！

その２３　マージンとパディングとは

その２２　サイトのレイアウトを設定するその３

その２１　サイトのレイアウトを設定するその２