前回からいろいろいじっています。

試行錯誤を重ね、現在はこんな感じになっています。

私は紫色が好きなので、まずは全体を紫色にしてみました。

メインコンテンツの赤は、わかりやすいようにいれているだけです。

紫色も好きだけど、ナチュラルテイストが好きなので、

いろいろいじって、日々変わっていくと思いますが・・・。

グローバルメニューをなんとか作ってみましたが、

そこから下のコンテンツをどうつなげたらいいのか、悩んでいます。

いろいろなホームページを研究して、真似して、勉強していきたいです

漠然と勉強している日々で、覚えることがたくさん。

数えきれないほどのプロパティと、その値があり、何から手をつけたらよいのやら・・・・

ということで、「よく使うCSSプロパティ」で検索してみて、上のほうに出てきて、かつ、

前から気になっていた、display　について、今日は勉強してみることにします。

displayプロパティは、要素の表示形式を指定する際に使用する。

displayプロパティの値でよく使うもの

①　block

②　inline

③　inline-block

④　none

①　block　

• blockの要素の前後には改行が入り縦に並んでいく
• 幅と高さは指定できる
• 余白（marginとpadding）は指定できる
• text‐aline、vertical‐alineは指定できない。

②　inline

• 横に並んでいく
• 幅と高さを指定できない。
• 左右の余白は指定できるが、上は指定できない（実用的でない）。
• text‐aline、vertical‐alineは指定できる（親要素に指定する）

③inline-block

• 改行が入らず横に並ぶ。
• 幅、高さが指定できる。
• 上下左右の余白が指定できる。
• text‐aline、vertical‐alineが指定できる。

④none

• 非表示にする。
• スマホでは表示しないときなどに便利

block と　inline　はCSSで指定できる。

block要素　 inline要素　という呼び方はしなくなった。

③のinline-block をつかうとメニューバーなどを使うのに便利ということなので、さっそく挑戦してみます。

なんとかできたかな？　結構時間かかりました。

メニューを幅いっぱいに隙間なく並べてみたかったけど、幅を調整してもうまくいかず・・・

すぐ下のコンテナとの間にも隙間ができていて、それもなくしたいけどうまくいかず。

menuの高さ　60px　その中の要素も60pxにしているんだけど、なぜ合わないのか・・・

まだまだ勉強の日々は始まったばかり。

がんばります★

前回作成したページにサイドバーをつけてみた。

まず、#main と　#side　を<div></div>で囲み、　 #container　としました。

左側にサイドバーを作りたかったので、サイドのスタイルに

#side {float:left}

右側に配置するメインのスタイルに

#main {float:right}

を追加しました。

全体を囲むwrapperの幅は600pxにしました。

最初、サイドメニュー幅を200px、メインの幅を400px

としたところ、入りきらなくて下にずれてしまい、

なぜだ？？　といろいろ考えて、いろいろ試してみた結果、

wrapper　の外側を　1pxの直線で囲んでいるためでした。

なので、サイドの幅を198pxにしたら、2つがきれいに並びました。

隙間なくきれいに並んできいいきもち♪

ここに入れるのを忘れましたが、footer は

#footer{clear:both}　

で回り込みを解除しています。

日々いろいろなサイトでHPの作成方法を勉強させてもらっていますが、

言葉の意味・使い方がわからないのでまとめます。

「CSSリファレンス（CSS入門）」というサイトと「サルクカ」というサイトがわかりやすく、

参考にさせてもらっています。

セレクタと要素について

• h1 { color: red; } の h1 の部分をセレクタ(selector)
• h1 { color: red; } の color:red; の部分を宣言(declaration)
• h1 { color: red; } の color の部分を属性(property)
• h1 { color: red; } の red の部分を値(value)
• <h1>～</h1> で囲まれた部分を h1要素(element)
• <h1>～</h1> の ～ の部分を h1要素のコンテンツ(content)
• <h1>～</h1> の <h1> の部分を h1要素の開始タグ(start tag)
• <h1>～</h1> の </h1> の部分を h1要素の終了タグ(end tag)

セレクタの種類

超基本のセレクタ　５種類

①　E{  　    　　　} 　　　すべてのE要素

②　.class{　　　　}　　　　class属性がの値がxyzであるすべてのE要素　（クラスセレクタ）

③　#id{　　　　　　}　　　　ｉｄ属性の値がｘｙｚであるＥ要素　（ＩＤセレクタ）

④　〇,〇{　　　　　}　　　カンマで区切って並べる。複数指定　　　（グルーピング）

⑤　〇 〇{　　　　　}　　　半角スペースで区切って並べる。絞り込み指定。小孫セレクタ

覚えておくとよいセレクタ

⑥　*{　　　　}　　　すべて

⑦　〇 *{　　　}　　〇の中のすべての要素。半角スペースで区切る

⑧　〇>〇{　　　}　　一つ下の階層の子要素のみ

⑨　〇+〇{　　　}　　同じ階層のすぐ後ろの要素のみ

⑩　〇~〇{　　　}　　同じ階層の後ろに並ぶ要素

〇番目の要素だけに適用するセレクタ

⑪　〇:first-child{ 　　　   }     最初の要素だけ

⑫  〇:last-child{   　　　 }　　　最後の要素だけ

⑬  〇:first-letter{  　　  }　　　最初の文字だけ

⑭  〇:nth-child(odd){    }　　　奇数行だけ

⑮  〇:nth-child(even){    }　　偶数行だけ

⑯  〇:nth-child(n){ 　　    }　　ｎ番目だけ

リンクでよく使うセレクタ

⑰　a:hover{　　　　}　　　カーソルを上の乗せたとき

⑱  a:visited{　　　}　　　訪問済みリンク

⑲  a:link{　　　　　}　　　未訪問リンク

⑳  a:active{　　　　}　　　クリックした瞬間

否定セレクタ

㉑  〇:not(　　){　　　}　　　　　　否定疑似クラス。　　　以外　

㉒  〇:not(　　):not(　　　)　　　否定を複数指定する。:not(　　)を繰り返す。

属性セレクタ

㉓  〇[属性名]{　　　　}　　　　　

㉔  〇[属性名="値"]{      }

⑪以降は使ったことがなく、

属性セレクタは全く意味がわからない。

属性名と言われても・・・・・

使いながら学習していきたいと思います。

これ、とっても基本なんだけど、苦手です。

苦手というか、仕組みがよく理解できていなくて、最初はレイアウトを整えても、

内容を入れていくうちにどんどん崩れてしまう。

なので、簡単なレイアウトで仕組みを勉強してみます。

ｈｔｍｌはこんな感じ。内容を少し追加しました。

上から３段のレイアウトにして、"header" "main" "footer"　　というid名を付けました。

ｃｓｓは、まずはこう記述。

レイアウト枠がわかりやすいように適当に背景色をつけました。

それをIEで開いてみると、こうなりました。

疑問点

①幅を指定しているけど、全体に表示されているのはなぜ??

②余白は指定していないけど、なぜ空いてる??

いろいろ調べて改善したところ

①レイアウト枠<div></div>で全体を囲む枠を作る　id="wrapper"

②上で幅を指定したが反映されていなかったのは・・・単なるスペル間違え

③全体の配色をグリーン系にして、文字サイズも整えました。

④余白は解明できず。次回以降へ持ち越し。

それをIEで読み込みとこうなりました!!

やったー!!

できてきた気がする。

ページの中央に配置しました。

調べていったら、最近は「リキッドレイアウト」というのがレイアウトの基本らしい。

PCやタブレット、スマホなど、画面サイズに対応できる柔軟なレイアウト。

切り替わるレイアウト。

私が今作ったようなのは「固定レイアウト」

とりあえずは、固定レイアウトで練習します。

今日学んだ事のまとめ

★全体を囲んだレイアウト枠　"wrapper"　で、幅・センター配置を指定する

★センターに配置するには、その"wrapper"　に、margin:0 auto;　を追加する。

次は、サイドメニューのあるレイアウトを作ってみたいです。

がんばります!!

ホームページビルダーをいじっているとき、CSSでの装飾にすこしかじりました。

それ、テキストだったらどうやるのかしら？？

まず、昨日作ったHTMLの土台にレイアウトを追加。

今日はあまり意味を成しませんが、今後使うと想定していくつかの枠を作り、IDをつけました。

インターネットで見てみるとこんな感じになりました。

次にスタイルシート「index.css」に、下記の2行を追加。

書き方まだよく理解していないのですが、いつもビルダーで見ているように書いてみました。

そのスタイルシートをHTMLに結びつけるには・・・

上から４行目の記述を追加。

そしてインターネットで見てみるとこんな感じになってました。

おおお、、、反映されてる。

すごい

これだけでOKなのか・・・。

今日学んだことのまとめ

HTML　と　CSS　を結び付けた魔法の１行について

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

リンクするのはスタイルシート。

リンク先のスタイルシートのファイル名は「index.css」

type属性はテキストです？　これちょっとわからないけど、つけておく必要があるらしい。

これはヘッダ内に記述する。

今日は以上！！

仕事でホームページビルダーを使い、職場のホームページをいじっています。

作ってはいません。いじっているだけ。

でも、いじっているうちに、ホームページの構造に興味を持ちはじめ、

ｈｔｍｌやらｃｓｓやら、それっぽい言葉に触れ始めました。

でも、ビルダーをいじっていてもよくわからない。

ビルダーではtableを多用したページになっているけど、どうやらｃｓｓで作るのが主流らしい??

でも、それってどうやって作るの??　・・・??

わからないから、勉強のために、テキストでホームページを作成してみよう！

そして、理解して、ゆくゆくは職場のホームぺージをリニューアルしてしまおう!と思い立って始めたブログです。

その一つ一つの工程を記した備忘録です。

１日目　テキストからホームページを作る。

まず、パソコンのメモ帳で新規ファイルを２つ作成し、「index.hｔml」「index.css」という名前をつけて保存しました。

「index.hｔml」に記述した内容（検索してコピペしました。）

<!DOCTYPE html>

• HTML文書の最初の1行目にはドキュメントタイプ<!DOCTYPE html>を記述する。
• <!DOCTYPE html> は、この文書が HTML5 の書式に従って記述されていることを示している。

<html>

<head>

<tittle></tittle> 

• タイトル。タイトルバー・履歴・お気に入り、検索エンジンなどで記述される。
• ヘッダの中に記述する

</head>　ヘッダを閉じる

<body></body>　　この中に本文を書く。

</html>

おおわくはこういう流れで記述する。

ｃｓｓでページに装飾をつける。

先日久しぶりに寄った園芸店で、「もみじ葉ゼラニウム」というのを見かけ、

葉色がとってもきれいだったので購入してみました。

「春には赤い花がいっぱい咲いて見事です」とかかれていて、

春が楽しみです。

今は、春を想像して、お庭にいろいろ仕込みをする時期ですね。

冬を、凍るように寒い冬を、無事越せるように、見守ってあげないと。

玄関前アプローチのコンテナに植えました。

隣に植えた緑はなんだたっけ・・忘れてしまいました。

もう片方の隣は昨年の秋に植えた「コロキア」

折れそうな枝で、１年がんばりました！！