Help us understand the problem. What is going on with this article?

HTMLとCSS

【HTMLについて】

【タグ】
➡「見出し」「リンク」の意味を持つ
⇒で囲む。<h1></h1>が一番大きな見出し。

【段落】
⇒<p></p>で囲む。

【コメント】
➡ブラウザには表示さえず、メモとして使う
⇒<!-- -->で囲む。

【リンク】
⇒<a></a>で囲む。
⇒<a href="URL"></a>で囲むとURL部分にリンク先のURLを指定し、そのページへのリンクができる。

【画像の表示】
➡終了タグは必要ない。
⇒<img src="URL">のURLの部分に画像のリンクを指定する。

【リスト】
⇒<li></li>で囲むとリストができる

囲む要素で以下のように種類が変わる!
⇒<ul></ul>で囲むと黒店が先頭につく
⇒<ol></ol>で囲むと数字が連番でつく

例)入れ子状態ではインシデント(字下げする)
  行の最初にtabキーでできる。
<ul>
 <li>HTML</li>
 <li>PHP</li>
 <li>Ruby</li>
</ul>

【CSSについて】
➡色、大きさ、配置を指定。デザインする
➡HTMLと別のファイルに記述する。

【色の指定】
例)色は16進数のカラーコード(#ff0000のように)で色指定する
h1{                //どこの
 color:red;            //何を(色):どうする(redにする);
 font-size: 10px;         //文字を:10pxのサイズにする
 font-family: "Avenir Next";      //フォントを:"フォント名"にする;
 background-color: #ffd800;   //背景フォントを:色にする;
 width:500px;           //横幅:500pxにする;
 height:80px;           //縦幅:80pxにする;
}

【CSSのコメント】
⇒/* */で囲む。

【クラスをつける】
HTML側
<ul>
  <li class="selected">HTML</li>  //class="クラス名"
  <li>PHP</li>
</ul>

CSS側
.selected {    //class名には.をつける
  color:red;
  border:5px solid red;   //線:太さ 種類 色;で線で囲まれる。(border-bottomで文字の
                                  下のみに線がつく)
  padding:20px;  //上下左右に20pxの余白を追加する(padding-top(上部のみ、他-bottom、
                                   -left、-right):20px;)
           (borderの下に書くことで、枠の中に余白追加)
  margin:20px;    //borderの下に書くことで、枠の外側に余白がつく

li{
 list-style:none;    //リストのマークをなくす
 float:left;   //要素が左に横並びになる
}

【HTMLのバージョン宣言】
<!DOCTYPE html>
<html>
<head>             //ページに関する情報。WEBページには表示されない
 <meta charset="utf-8">      //文字コード=”文字コード”
 <title>Progate</title>      //ページタイトル。ブラウザのタブ上に現れる
 <link rel="stylesheet"href="stylesheet.css">  //CSSの読み込み”CSSのファイル名”
</head>
      
<body>          //実際に表示したい内容
 <div class="header">   //ヘッダーの<div>要素
   <div class="header-logo">Progate  //ロゴの<div>要素
   <div class="header-list"> //ヘッダーのリストの<div>要素
     <ul>
     <ul>
   </div>
 </div>

 <div class="main">    //メインの<div>要素
 </div>

 <div class="footer">    //フッターの<div>要素
   <div class="footer-logo">Progate  //ロゴの<div>要素
   <div class="footer-list"> //フッターのリストの<div>要素
     <ul>
       <li></li>
     <ul>
   </div>
 </div>

</body>         
</html>

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした