読者です 読者をやめる 読者になる 読者になる

代々木で働く超新米エンジニアの足跡

代々木で働くエンジニアです。超新米です。

7/2 CSS インラインCSS 外部CSS クラス指定(CSS)id指定(CSS) CSSで中央揃え margin 要素の検証

CSS

 Web文書、表示のレイアウトをする言語

 スタイルシート ・・・Web文書などのレイアウト、デザインを定義するための概念

 スタイルシートのおかげでhtmlをいじらずにデザインを変えられる

 

 スタイルシートをタグ内に書く→ インラインCSS

 スタイルシートの外部ファイルを作りそこに書く →外部CSS

 

<インラインCSS

  色を変える・・・<p style="color:色コード;">テキスト</p>

<外部CSS

  使用方法  head内に

      <link rel="stylesheet"href="ファイル名.css"type="text/css">

       を記述でファイル名.css内の情報が読み込まれる

        デザインをファイル名.cssに書けば適用される

<クラス指定でCSS

CSSファイルに タグ.クラス名{詳細} を書く 

htmlファイルには <タグ class="クラス名">で適用

 

<id指定でCSS

  CSSファイルに タグ#id名{詳細} を書く

  htmlファイルには<タグ id="id名">  で適用

<画像挿入>

  画像のアクセス権が許可されてないと表示できない

<画像中央揃え>

htmlファイル---

<div class="center"><img src="画像ファイル名.jpeg" /></div>

CSSファイル---

.center{

text-align: center;

}

<位置取り>

  text-align:center 中央揃え

                        right,leftで左右に移動

       margin-left,top,right,bottomで余白の設定

   autoにすると中央揃え  

  ・・・枠を作ってその中で中央揃え

ーーーCSSファイル

 

.sample1{

        width: 10000px;    テーブルの幅

        height: 900px;     テーブルの高さ

        background: #ccc;

        background-color: white;   テーブルの色

        display: table-cell;

        vertical-align: middle;    縦中央

        text-align:center;      横中央 

 

}

 

<ブロック要素とインライン要素の違い> 

・インライン・・・続けて書いても横に並ぶ

・ブロック・・・続けて書いても横に並ばない

 インラインの中にブロック要素を書いてはいけない

 

どれが、インライン要素でどれがブロック要素か知り必要がある。

【vi】

   dd   行削除

           1G   最初の行に移動

【要素の検証】

 

 Web上で右クリックで使える

   html,CSSのおかしいところをチェックできる