青色プログラム。

日々楽しくプログラミングを学ぶ

【HTML・CSS #1】基礎を学ぶ

 

第一回、『HTML』『CSSの記事です。

5月からのスクールに向けて独学で勉強している物の復習として書いていきます。

 

この記事を見る人は、 ある程度の知識がある人だと思うので確認程度にゆるく見てください

知らない、勉強中の人はこんなのあるんだ程度にどうぞ!


 

HTMLハイパーテキストマークアップ・ランゲージ)

HTMLはプログラミング言語ではなくマークアップ言語といい要素の集まりで出来ており、どのように見えるか動くかを表現するためのタグで囲まれたまとまり

 

<h1></h1> 見出し h2→h6となるほどに文字の大きさが小さくなる

<p></p> 段落 <h2>や<p>タグで囲むとテキストは改行して表示される

<!-- コメント --> コメント 表示されなくなりメモ用に

<a href="URL">ここに文字</a> リンク 『スペース、" "』忘れずに

<img src="画像のURL">  画像を表示  img(イメージ)、src(ソース)

<li></li> リスト <ul>要素で囲むと黒点が付き <ol>だと数字が付く

  • こんにちは
  • こんばんは
  • おやすみ
 <ul>
 <li>こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>

囲む方の要素を親要素<ul>、囲まれる要素<li>を子要素と呼ぶ。 

 

インデント 入れ子構造の要素がある場合、複雑でも分かりやすくなります。

上の例でいうと<li>を改行と左の空き、必須ではないが大事。

 

このタグは100個以上ある模様。


 

CSS(カスケーディング・スタイル・シート)

CSSはHTMLの要素に色.大きさ.配置などを指定しページをデザインする言語です。

ウェブページのデザインやレイアウトなどの見栄えですね!

 

・文字の色を変える 『color

例:HTML <h1>おはようございます</h1> の場合(あいさつ部分は適当)

  CSS

 h1{
 color: 色を指定;
 }
※インデントを忘れずに、コロン『:』セミコロン『;』も必要なので注意! 
※色は『色 コード』で検索
 
 
 ・文字の大きさを変える 『font-size
例:HTML <h1>おやすみなさい</h1> の場合
  CSS
 h1{
 color: 色を指定;
 font-size: 数字px;
 }
※px(ピクセル)単位で指定
 
 
・文字の種類を変える 『font-family
例:HTML <h1>HELLO WORLD</h1>
        <p>HELLO WORLD</p>
  CSS
 h1{
 font-family:フォント名;
 }
 p{
 fomt-family:"Avenir Next";
 }
※色んなフォントを指定する事ができ、名前は覚える必要は無い
※スペースがある二つ目のフォント名みたいな場合、ダブルクォーテーションで囲む
 
 
・コメント 『/*  */
HTMLと同じくCSSファイルにもコメントが出来る
 h1{
  /* 文字の色を赤色に指定 */
  color: #ff0000;
 }
※書いてるコードは例です。コメントは/* */の部分
 
 
・背景色を変える 『background-color
例:HTML <h1>今日はいい天気</h1>
  CSS
 h1{
  background-color: 色を指定;
 }
 
 
・横幅、高さを変える 『width』『height
 width 幅・・・ウィドゥス、ウィズなど
 height 高さ・・・ハイト
例:HTML <h1>これは飼っている犬と猫です</h1>
        <img src="画像のURL">
  CSS
 h1{
 width: 数字px;
 height: 数字px;
 background-color: 色を指定;
 }
 img{
 width: 数字px;
 height: 数字px;
 }
 

 
・特定の要素にCSSを適用する 『class
HTMLで書いた<li>要素みたいにリストが複数ある場合すべての色が変わるので、
要素にclassを使って名前を付け、それぞれの要素を識別し別々のCSSを適用する。
例:HTML
 <ul>
 <li class="selected">こんにちは</li>
 <li>こんばんは</li>
 <li>おやすみ</li>
 </ul>
  CSS
 .selected {
 color:red;
 }
※classでCSSを指定する場合、先頭にドット『.』が必要なので忘れずに。
これでリストの・こんにちは だけを赤色に出来た。
 
※classに同じCSSを適用する
上記HTMLの <li>こんばんは</li> にも同じ名前のclassを付けた場合、・こんばんは も赤色にする事が出来ます。

 

・まとめ

という事で『HTML』『CSSの基本を学びました。

もし誤字があればすみません、かなり見やすく書いたつもりですが記事作成に時間が掛かってしまい長いコードになってくると細かくまとめられないかもしれません...。

でも時間を掛けた分、良く身につけられた気がします。