【忙しい人向け】htmlとcssの書き方(*'ω'*)

 

今回はhtmlとcssの書き方を解説します(*´ω`)
この記事は

 

  • htmlとcssの書き方を学びたい
  • 時間がないから早く学びたい
  • 必要最低限でいいから知りたい

 

こんな人向けです。
この記事を書いた人はhtmlとcssを学習済みです。

 

目次

 

 


htmlの書き方


htmlの基礎がわからない、もっと深く学びたい方はこちらの記事を参考にしてください

 

【プログラミング初心者向け】HTMLについて解説していきます。 - CONPUROの日記


htmlの書き方は
タグで囲んでその中に文字を書くです。
ただし例外もあります。
具体的にはこんな感じです。

f:id:CONPURO:20200914173431p:plain

上のコードは、ブラウザ上に「みなさんこんにちは。」と表示させる処理をさせます。
注意点としては、<p>や<body>などのタグは半角英数字で書いてください。


cssの書き方


cssの基礎がわからない、もっと深く学びたい方はこちらの記事を参考にしてください

 

【プログラミング初心者向け】CSSとはなんなのか説明していきます - CONPUROの日記


cssの書き方の手順は
htmlの要素またはclass名+{}をかいて
その{}の中に処理を書くです。
具体的にはこんな感じです。

 

f:id:CONPURO:20200914173722p:plain

上のコードは、pタグで囲まれたものの文字の大きさを40pxにして文字の色を赤くするという処理をさせます。こちらも半角英数字で書いてください。

 


htmlをcssに結び付けるには?

cssを使ってhtmlを装飾するにはそれぞれのファイルを結びつけなければいけません。htmlファイルとcssファイルを結びつけるには次の3つの方法があります。

 

  • linkタグをhtmlに入れて外部ファイルにcssを書く
  • styleタグで囲んでその中に書いていく
  • htmlタグの中にstyleを入れて書く

 

それぞれ解説していきます。

linkタグをhtmlファイルに入れて別のファイルにcssを書く


まずhtmlファイルとcssファイルを用意します。
名前はそれぞれindex.htmlとstyle.cssにします。
htmlファイルはこんな感じになります。

f:id:CONPURO:20200914174343p:plain

relにはstylesheetと書きましょう。
hrefには結びつけるcssファイルの名前を書きましょう。
あと、書く場所は<head>の中です。


cssはこんな感じです。

f:id:CONPURO:20200914174733p:plain


これをブラウザで表示するとこんな感じになります。

f:id:CONPURO:20200914174858p:plain


styleタグで囲んでその中に書いていく


<style></style>に囲まれた部分に
さっき紹介したcssの書き方で書いていきます。
具体的にはこんな感じになります。

f:id:CONPURO:20200914175055p:plain



ブラウザで表示するとこんな感じです。

f:id:CONPURO:20200914175143p:plain


htmlタグの中にstyleを入れて書く


<p style="font-size:40px;>こんにちは</p>
こんな感じで書きます。
具体的にはこんな感じです。

f:id:CONPURO:20200914175256p:plain



ブラウザだとこんな感じです。

f:id:CONPURO:20200914175331p:plain