スポンサーサイト

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

CSSで見出し部分へ色をつけてみます。

超初心者の初めてのHTML&CSSを使ったHP作成。
前回はCSSでヘッダーとフッターの幅を変えました。
(過去の記事  CSSヘッダーとフッターの幅を変えてみました を参考にどうぞ(^-^))

今回は、見出しの部分の色を変えてみたいと思います☆

見出しは、
<h2>と<h3>の、
大きめの文字で表示されている部分です。

そこの色を変えます!

好みの色を選べるので
私はグレーっぽい色の『#999999』
にしたいと思います。

見出しはコンテンツ部分、の中にあるので
まず、HTMLの入力している部分に
コンテンツの記述をするという
宣言をします。

<!--コンテンツ--!>
<div id="content">


これがこれからコンテンツを入力しますという
合図になります。
これを
コンテンツ部分にしたい
<h2>の前に置きます。
そしてコンテンツ部分の終わにしたいところで
</div>
で閉じます。

HTMLにコンテンツ部分を指定したところで
次はCSSでコンテンツ部分の色を変える作業に入ります。

CSSの記述は
<style type="text/css">
</div>
の中にされているので
ヘッダーの後にコンテンツ部分の記述をします。

/*コンテンツ*/
div#content h2 {background-color:#999999}
div#content h3 {background-color:#999999}


↑こんな感じに!
#999999は、
色の指定の番号です。

見出しの色を変えたソースはこんな風になりました。


<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*コンテナ*/

div#container {width:760px}

/*ヘッダー*/

div#header {background-color:#79aeae}

/*コンテンツ*/

div#content h2 {background-color:#999999}

div#content h3 {background-color:#999999}

</style>

</HEAD>

<BODY>

<!--コンテナ--!>

<div id="container">

<!--ヘッダー--!>

<div id="header">

<h1>HTMLとCSSで作る初心者のHP作成</h1>

</div>

<!--コンテンツ--!>

<div id="content">

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>

</div>

<div id="footer">

<address>

Copyright (C) 初心者HTML,All rights reserved.

</adress>

</div>

</div>

</BODY>

</HTML>


これが↑
こんな風に

ssaaaa.jpg

なります。
スポンサーサイト
2012-04-17 : CSS : コメント : 1 : トラックバック : 0 :

急にパソコンの画面が横に広がってる!なぜ!?

パソコンの画面が横に広がって
伸びている感じになっていた!
なんで!?え!?てか、なぜ???
なんかインターネット画面も横に広がって
見づらい!

昨日までは
そんなことなかったのに・・・
どうした私のVista!
いったい何があったの?!

意味がとれないので
すぐにネットで検索・・・

『パソコン画面 横に広がって』で検索かけたら
いっぱい出てきました~
ふぅ~なんとかなりそう☆

ssaa.jpg

パソコンを開いたときの画面を
右クリックして、個人の設定というところを
クリックします!(赤丸のところですっ

そして
つまみを調節してあわせる・・との事ですが
私はWindows vista Home BASICですが
下の画像のように合わせたら
元にもどりました!

ssaaa.jpg

あぁ、こわかったぁ
画面が横広がりで
我慢して慣れるしかないのか?!
と思いましたがなんとか解決!

これでまた無事HP作成を進められます(^-^)





2012-04-15 : HP作成に関係ないお話 : コメント : 0 : トラックバック : 0 :

CSSでヘッダーとフッターの幅を変えてみる。

超初心者が初めて作るHP作成。
CSSを使って、
ヘッダーとフッターの
横幅を変えてみたいと思います。

前回には
タイトル背景に色をつけるところまで
進みました。

過去の記事  CSSでタイトル背景に色をつける方法 』

なんだか
↑横幅を縮めないと、とっても横長な感じのHPになっています。
これに
横幅を変える記述をしていきたいと思います!

ヘッダーとフッターって何?
気になる!

日本語で
ヘッダーは頭、
フッターは足、
と、いうことで
上の部分(タイトルあたり)がヘッダーで
下の部分(コピーライトをいれているあたり)がフッター
と、いうことみたいです!
なるほどねぇ~


CSSでヘッダーとフッターの横幅を変える方法
まず、HTMLでヘッダーとフッターを
コンテナ部分としてまとめます。
コンテナとは
日本語で入れ物や箱などの意味があるみたいなので
ヘッダーとフッターをでかい箱に、
まとめて入れるイメージでしょうか・・・

↓それがその記述方法!


<!--コンテナ--!>
<div id="container">
</div>


BODY、の後につけて、
/BODY
の前でdivを閉じます。
大きく、くくる感じで。

そしてコンテナであることを記述した後に、
CSSで幅を変えます。

/*コンテナ*/
div#container {width:760px}

<style type="text/css">
のすぐ後に入力します。


全体のHTMLとCSSのソースは
こんな感じですっ(^-^)

-----------------------------------------------------
<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*コンテナ*/div#container {width:760px}

/*ヘッダー*/div#header {background-color:#79aeae}

</style>



</HEAD>

<BODY>

<!--コンテナ--!>

<div id="container">

<!--ヘッダー--!>

<div id="header">

<h1>HTMLとCSSで作る初心者のHP作成</h1>

</div>

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>

<div id="footer">

<address>

Copyright (C) 初心者HTML,All rights reserved.

</adress>

</div>

</div>

</BODY>

</HTML>
---------------------------------------------------
だんだんややこしい感じになってきましたね~
でも、昔は暗号?って感じにしか見えなかったのが
解読できるのがなんだかうれしい☆

ssyosinsya2.jpg


これをブラウザ上で表示すると
↑こうなります♪

以上、CSSで横幅を変える、でした☆


HP作成 初心者すぎて超基本からのスタート TOPへ戻る




2012-04-08 : CSS : コメント : 0 : トラックバック : 0 :

CSSでHPのタイトルの背景に色をつけます

初心者が挑戦する
HTMLとCSSで作成中のHPに
CSSにて
(CSSって何?という方は 過去の記事 CSSとは を参考にどうぞ♪
参考になるかどうかは謎ですが・・・(^ー^))
ホームページのタイトル部分の背景の色をつけてみます!

HTMLで
↓このように入力し
(これがHPのタイトル部分に表示されるタイトルになります。)

<!--ヘッダー--!>
<div id="header">
<h1>HTMLとCSSで作る初心者のHP作成</h1>
</div>



CSSでこのように入力します

/*ヘッダー*/
div#header {back-ground-color:#79AEAE}



(これが色の指定をする部分です。
div#headrとありますが
HTMLで入力した
div id="header"に対して
CSSが
div#header {back-ground-color:#79AEAE}
と、なるみたいです。
CSSの#(シャープ)は、HTMLの id=(アイディーイコール) のことなのかな?)

どこに入力するかというと、

---------------------------------------------
<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

<style type="text/css">

/*ヘッダー*/

div#header {background-color:#79aeae}

</style>

</HEAD>

<BODY>

<!--ヘッダー--!>

<div id="header">

<h1>HTMLとCSSで作る初心者のHP作成</h1>

</div>

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>

<div id="footer">

<address>

Copyright (C) 初心者HTML,All rights reserved.

</adress>

</div>



</BODY>

</HTML>
-----------------------------------------------------------


どこに入力するかというと
HTMLの入力は、
<BODY>~</BODY>の間へ!

CSSの入力は
<style type="text/css">~</style>

の間へ。入力するみたいです。

基本、HTMLは
<BODY>~</BODY>の中に入っていて
CSSは
の中に入っているみたいです。


すると、こんな感じになります♪
↓タイトル部分に青い色がつきました♪
syosinsya.jpg
2012-04-07 : CSS : コメント : 0 : トラックバック : 0 :

HTMLの説明をするためにブログでHTMLを表示する方法

解決!ブログにHTMLを表示する方法!
FC2でHTMLの説明のために
HTMLを入力すると、
なぜか
変換されてしまって
HTMLのソース(?)を表示できずに
困っていました。
しかも、すごく困っていました!


でも!
やった!
解決!!!

調べるのにすごく時間がかかりました。
なぜ!?
そんなに時間がかかったのか?
それは!まぎれもなく!
私が超初心者のHP作成挑戦者だからです。

なんていう言葉やキーワードで
検索すればいいのか、
さっぱり分からず。
初心者すぎて、
まず専門用語みたいなのが
分からない!

とりあえず
「ブログ HTML 表示したい」
とか
「FC2 ブログ HTML 変換 させたくない」
などなど、なんか違う・・という検索結果続きの中、
それが知りたかったの!
というサイトを発見(^ー^)☆

ブラウザで表示可能なように代替記号に置換える

こちらのサイトにて
(ダウンロードとかしなくて
すぐに出来ました!)
ブログで表示したい
HTMLソースを貼り付けて
ソース作成を押すだけで
FC2でも表示できるソースを
作ってくれるので
それをブログにコピー&貼り付けで
完成!
↓ブラウザで表示できるように変換してもらって
 表示できるようになりました!


<HTML>

<HEAD>

<TITLE>初心者HTML</TITLE>

</HEAD>

<BODY>

<h2>HTMLでHPを作ってみよう!</h2>

<p>超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!</p>

<h3>HTMLって何?CSSって何?</h3>

<p>初心者ならではの、わかりやすい説明でHP作成を作っていきます!</p>

<div id="footer">

<address>

Copyright (C) 初心者HTML,All rights reserved.

</adress>

</div>

</BODY>

</HTML>

↑HTMLソースが表示されて
 うれしい!
 
ブログでHTMLソースを簡単に表示する方法。でした♪



HP作成 初心者すぎて超基本からのスタート TOPへ




2012-04-07 : 失敗談 : コメント : 0 : トラックバック : 0 :

CSSでタイトルの部分の色を変えてみる。

初めてのHP作成中。
今回は
前回まで作った
HTMLにCSSで入力する準備部分を加えたもの
に、タイトルの部分の色をCSSを使って変えてみたいと思います!

っと、思ったのですがー!!
ストップ~!!!
前回作ったHTMLをコピー&ペーストしたら

↓なんかソースとして表示されずに
 ホームページっぽく表示されちゃってる~
-----------------------------------


初心者HTML



HTMLでHPを作ってみよう!


超初心者がHPを作るまでの道のり。 超基本からスタートする初心者のためのサイト!


HTMLって何?CSSって何?


初心者ならではの、わかりやすい説明でHP作成を作っていきます!




-------------------------------------------
本当は、
HTMLのタグ?ソース?を表示しているのですよ・・
でも、表示されていません・・
勝手に変換されている・・
なんで???
おぉ・・・これは、こまった・・・
FC2に引越て初めてぶち当たった壁だわ・・・

なんとか解決したいのは山々なのですが
もう、ねむくてねむくて
限界です。
明日も仕事か~。はぁ。
アフィリエイトで稼げるようになって
早く仕事辞めてやりたいものです。
アフィリエイト収入1000円くらいの今の私からは
夢のようなお話☆
がんばる☆

☆追記☆
↓こちらの記事にて解決しました♪
HTMLの説明をするためにFC2ブログでHTMLソースを表示する方法
2012-04-02 : 失敗談 : コメント : 0 : トラックバック : 0 :

CSSとHTMLの簡単な区別方法。

HTMLとCSS。違い?って何?
見て分かるものなの?
と思っていましたが
なんか、よく見ると、HTMLとCSS、
確実に違う!

初心者目線でHTMLとCSSで出来たソースを
じっくり見てみると
HTMLは、
<>←マーク
が使われていて
CSSは
{}←マーク

が、使われてるではありませんか!

これは分かりやすい。
HTMLが<>で
CSSが{}。
本でも、こういの、
教えて欲しかった!
超初心者だと、こういうの
大発見!!

♪♪♪
がんばろ。
2012-04-01 : CSS : コメント : 0 : トラックバック : 0 :

アメブロからFC2へ引越してきました。

簡単に出来た!
アメブロから
こちらFC2への
お引越!

FC2のブログ引越しツール
で簡単に、引越完了~(^-^)!

ふぅ、四月から新しい生活を始める雰囲気だしたくて
引越してみました。

引越してみた感想は、
今のところ快適♪

ブログのお引越だなんて
とてもとても大変なものだと
思っていました。

面倒で面倒で
しょうがないものだと

思っていました。

でもでも!
記事まで、自動でお引越
してくれるものだとは!
さらには、
画像にカテゴリまで!
すごい!
2日くらい申請してから
かかるかも、
みたいに書いてあったのっで
2日覚悟していたんですが
申請して、1時間もかからないくらいで
引越し、終わったよ!ていうメールが
届きました☆
仕事早いね!

いやいや、感激だわ~

しかしながら
さすがに
アクセス解析と
ブログランキングのバナーは
引越したら消えていたので、
アクセス解析の登録と
それぞれのブログランキングに行って
ブログのアドレスの欄を編集して変更して、
といった作業は少し手間でした。

でも想像よりは
簡単!
FC2、これからよろしく!!


2012-04-01 : ブログ : コメント : 0 : トラックバック : 0 :
ホーム

QRコード

QR

検索フォーム

スポンサードリンク

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