QLOOKアクセス解析
ホーム > スポンサー広告 > 実際にホームページを一緒に作りましょう(*´▽`*)ホーム > 未分類 > 実際にホームページを一緒に作りましょう(*´▽`*)
 1件ずつ表示 
--.--.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

続きを読む
Category: スポンサー広告
2014.12.15 Mon

実際にホームページを一緒に作りましょう(*´▽`*)

ではでは、早速ホームページを一緒に作りますよー(*´▽`*)

ホームページ第一号2

ちなみにこちらが完成形。

1時間以内に形にする予定です(強気)。

メモ帳でもホームページは作れるけども、ホームページに特化したソフトではないので使いにくいです。

調べるとホームページ作成用の無料ソフトがありました(^^♪

「Crescent Eve」 クレセントイブ??と読むんだろうか?

使用したほとんどのユーザーが5つ星評価をしているソフトで、無料で軽量というのが実にいい(*´▽`*)

この記事を書くまで知らなかったけど、実際使ってみると実にいいもんだということが分かりました。

ダウンロードはこちらのサイトからできます。赤枠のボタンをクリックするとダウンロードが始まります。

crescent eve

PC初心者が気を付けないといけないのは、しばしばダウンロードページでは関係ないソフトをダウンロードさせようとするもんだと心しておいたほうがいいということ。

脅しではなくて、注意が必要ということ。赤枠ボタンでダウンロードが始まるからそれ以外は触らない。

過去に間違えて違うソフトまでダウンロードしてめんどくさいことになりました(;´Д`)

ダウンロードと書いてあるボタンがあればしっかり見るようにしてください。何のソフトをダウンロードするのか??

相手を責めてもしょうがない。自分が用心すればいいだけの話です。

ダウンロードできたらパソコンのデスクトップにショートカット作成にチェックを入れます。

ダブルクリックするといきなり新規作成になっているので、枠内の文字をコピペします。

ちなみに、枠内の文字がHTML(エイチティーエムエル)と呼ばれるもの。

日本語、英語があるように、ホームページをPCに読ませるためにはHTMLという言語を使わないといけないんです。

この鋭いかっこ<>がでてきたらHTMLねって思ってください。

この鋭いかっこを覚える必要はなくて、慣れたら自然に覚えるようになります。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページ1号</title>
</head>

<body>
<div id="wrapper">
<header>
<h1>簡単コピペで作るホームページ</h1>
<div id="logo">ひーさん主催のホームページ作成講座</div>
</header>
<!-- ▼ グローバルナビゲーション ▼ -->
<nav id="global-navi">
<ul>
<li><a href="http://~リンク先URL~">ホーム</a></li>
<li><a href="http://~リンク先URL~">記事一覧</a></li>
<li><a href="http://~リンク先URL~">メモ書き</a></li>
<li><a href="http://~リンク先URL~">画像加工</a></li>
<li><a href="http://~リンク先URL~">イラスト</a></li>
</ul>
</nav>
<!-- ▲ グローバルナビゲーション ▲ -->
<div id="main-box">
<div id="b-box">
<h2>まずは簡単なのを作ってみよう(1カラム)</h2>

<p>シンプルなデザインのものをまずはつくってみましょう(*´▽`*)経験上、時間がかかると挫折しますので、長くても半日でつくれるようなホームページから始めます。</p>
<h2>ちょっとそれらしいのを作ってみよう(2カラム)</h2>
<p>簡単なのができたら、今度はちょっと高度なホームページに挑戦です!ひとつつくれたらふたつめは簡単って思うはず。</p>
<h2>これができたら何でも来い!!(3カラム)</h2>
<p>これだけいろいろできたらもう初心者ではありませんよ( *´艸`)調子に乗って副業してみる??笑</p>
</div>

<div id="c-box">
<img src="img/管理人(ひーさん).PNG" width="120" height="119" alt="管理人ひーさん">
<p>管理人:ひーさん</p>
<p>過去にホームページ作成で挫折した経験あり。無料ブログを始めてカスタマイズしていくうちに、またホームページが作りたくなった次第です。。。ホームページができるか試しつつ、全国のホームページ初心者に作り方を教えます!というとんでもない企画です。私がギブアップしたときはみなさんは放置、無事ホームページ作成できたときは無料でホームページ作成できる技術が身に付きます。私と泥船に乗ったつもりで始めませんか?笑</p>

</div>
</div><!--bとcを囲むメイン-->
<footer>copyright (c) ひーさん主催のホームページ作成講座All right reserved.</footer>
</div>
</body>
</html>



コピペできたら、ファイル→名前をつけて保存。

ファイル名は半角でindex.html(インデックス ドット エイチティーエムエル)。

トップページは必ずこのファイル名にすることがルールなので、なぜ?と思わないこと。

そうそう、このファイルを入れるフォルダーを作るのを忘れてた。。。

デスクトップに新しくフォルダーを作ってその中にこのファイルを入れておきます。(フォルダー名は何でもいい)

↑この方法は分かるよね??分からない人は調べて調べて。

このファイルがどのようにPCで表示されるか見てみましょう(*´▽`*) もしかしてもうできてたりして( *´艸`)

「Crescent Eve」を立ち上げてファイル→開く→。。。。

あれーーーーーー( ゚Д゚) さっき保存したはずのファイルがない!!って焦らないこと。

下のほうにファイルの種類っていうのがあるでしょ? HTMLファイルにしたら無事出てきます。

ダブルクリックしてツール→ブラウザでプレビューすると

表示

あれ??( ;∀;) なんだかとってもシンプルっすね。。。

※この時点で文字化けしてしまった人は最後を見てくださいm(__)m

そう。HTMLとはページの骨格を表すものであって、装飾したり配置するのはCSS(シーエスエス)というファイルがいるんですね。

というわけでCSSファイルを作りましょう(*´▽`*)

鋭いかっこがHTMLなら、優しいかっこ{}がCSSと思ってください。

この優しいかっこも覚える必要はなく、慣れたら自然に覚えるようになります。

さっきと同じ要領で、ファイル→新規作成で枠内の文字をコピペ。


@charset "utf-8";
* {
margin: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header{height: 100px;
margin-top: 30px;
background: rgb(243, 156, 18);
}
#wrapper{
background-position: center;
margin: 0px auto;
width : 836px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
#main-box {
width : 100%;
overflow:hidden;
border: 1px solid rgb(243, 156, 18);
}

#b-box {
width: 70%;
float: left;
padding: 5%;
border-right: 1px solid rgb(243, 156, 18);
}
#c-box {
width: 30%;
float: right;
font-size: 12px;
color: #414141;
padding: 2%;
}
footer {
padding: 10px 0px;
font-size: 12px;
color:rgba(255,255,255,1.00);
text-align: center;
clear: both;
width: 836px;
background: rgb(243, 156, 18);
}
#logo{
font-size:150%;
color:rgba(255,255,255,1.00);
font-weight:bold;
clear:both;
padding-top:10px;
padding-left:20px;
}
h1 {
padding: 1px 2px;
font-size: 11px;
color:rgba(255,255,255,1.00);
font-weight: normal;
float: left;
}
h2 {
font-size: 100%;
color: red;
padding: 8px 5px 4px 25px;
border-bottom: 1px solid #C4C4FF;
margin-bottom: 8px;
}
img{
border: 1px solid rgb(243, 156, 18);
border-radius: 50%;
}
#c-box p {
line-height:20px
}
#b-box p{
line-height:30px;
}
/*ナビゲーション*/
nav#global-navi ul{
width:100%;
max-width: 1000px;/* メニュー全体の最大横幅(ブログの横幅に合わせて調整) */
list-style:none;
margin: 0 auto;
padding: 0;
}
nav#global-navi ul li{
display: block;
float: left;
width:20%;/* 1つのメニューの横幅(メニュー数を変更した場合等は調整が必要) */
}
nav#global-navi ul li a{
display: block;
text-align: center;
padding: 5px 0;
background: #EEE;/* 背景色 */
color: #333;/* 文字色 */
text-decoration: none;
border-top:1px #AAA solid;/* 枠線上の太さ・色・線の種類 */
border-left:1px #AAA solid;/* 枠線左の太さ・色・線の種類 */
border-bottom:1px #AAA solid;/* 枠線下の太さ・色・線の種類 */
box-sizing: border-box;
}
nav#global-navi ul li:last-child a{
border:1px #AAA solid;/* メニューの一番最後の枠線の太さ・色・線の種類 */
}
nav#global-navi ul li a:hover{
background: #555;/* マウスオーバー時の背景色 */
color: #FFF;/* マウスオーバー時の文字色 */
}
nav#global-navi:after {
content: "";
clear: both;/* 回り込みの解除 */
display: block;
}
/*ナビゲーションここまで*/



コピペできたら、ファイル→名前をつけて保存。

ファイル名は style.css(スタイル ドット シーエスエス)。さっき作ったフォルダに入れます。

このファイルがどのようにPCで表示されるか見てみましょう(*´▽`*) もしかしてもうできてたりして( *´艸`)

って思った人はまた裏切られることになります。。。

試しにもう一度HTMLファイルを開いてツール→ブラウザでプレビューすると、

(;´Д`)(;´Д`) 何も変わってないよーーー (;´Д`)(;´Д`)

先ほどのお寒い限りのシンプルなホームページが表示されることになります。

なぜか???

CSSファイル(優しいかっこね)がHTMLファイル(鋭いかっこね)に何色にしろ!こう配置しろ!

って指示するわけなんだけど、今はこのふたつのファイルが繋がってない状態。

だから、HTMLファイルにCSSファイルの指示を反映させますよという命令文がいるわけ。

これが本日の一番大事なところです(*´▽`*) その魔法の一文がこちら。


<link href="style.css" rel="stylesheet" type="text/css">



これをHTMLファイルのここに入れます。

css.png

で、ファイル→上書き保存。

これでもう一度ツール→ブラウザでプレビューしてみると。。。

表示結果


おお(*^▽^*) できてる、できてる。 写真はないけど、なんかそれらしいのができてる♪

何分でここまでできましたか?? 

写真と、自分仕様のホームページにする作業はまた明日にします。

ここからは私を悩ませた文字化けについてです。

HTMLファイルを開いたとき、この赤枠ふたつが同じでないと見事に文字化けします(;´Д`)

crescent eve

右上の赤枠がUTF8になってないときはcrescent eveで設定が必要です。

ツール→crescent eve起動時の設定

crescent eve2

文字コード→デフォルト文字コードをUTF8にしてOKボタン。

これで文字化けが直るはずです。ちなみに私はこれで丸1日悩んでおりました。。。

先が思いやられます 汗。。。



ブログランキング・にほんブログ村へ


貼るだけでお小遣い貰えます♬(忍者ADMAX)↓↓




関連記事

続きを読む
Category: 未分類 Comments (5) Trackbacks (0)

この記事へのコメント:

ひーさん先生
こんばんわ。
いよいよ、HTML公開ですね。凄い。
でもって、ひーさんらしい、コメントで、これを見て、私も作ってみようって人増えるかも・・・続きの記事も楽しみにしております。
応援ポチです。
ひーさん

頑張ってますね!
ホームページもカラフルで見やすくなりました。

ひーさんの愛嬌のある記事で講義を続けていったら人気ブログ間違いなしですね!

今後の講義にも注目です。ポチ!
ひーさん様

益々本格的にホームページ作成が進んでいらっしゃいますね。

影ながら勉強させていただいております^^
ひーさんこんばんは。

今回の記事はひーさんも大変な力作ですね。

やっぱ画像が多いとたいへんですね(^_^;)

ひーさんサーバーを契約したなら公開もできるんじゃないですか?

まだまだHTMLタグが全然読めない私はこの正月に本を買おうかなと思っています。

嫁の実家の近くに大きな書店があるもので(^_^;)


メインブログ訪問ありがとうございます。

なんと先日「人気ブログランキング」に登録したばかりなのに私のFC2ブログよりメインブログの方が順位が上になってきました。

ますますしっかりやらねばと思っているところです(^_^;)

ではでは、応援ぽち。
凄いなー♪

頑張ってますね!

このプログラムみたいなのって、

自分で考えて作ってるんですか???

だとしたら、私にはかなり難易度が高い(笑)

でも、アフィリエイトするには、

たしかにHP持っている方が良いって言いますよね・・・。

コメントありがとうございます!

冬のダイエットの一つが除雪です(笑涙)

毎年除雪が憂鬱になりますが、こればかりは仕方ないですからね。

降らないでくれたら、嬉しいですけど・・・(笑)

みよしの・・・たぶん北海道だけの展開じゃないかな?

ほんと安くて美味しいですよー!

北海道に来たら、1度は食べてみて下さい♪

本日も応援ポチり。

この記事へコメントする:


    

この記事のトラックバックURL:

http://illustrator989.blog.fc2.com/tb.php/95-5c0bcea4

この記事に対するトラックバック:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。