最近の記事

マージンの相殺について

ブロックレベル要素の上下マージンに起こる「マージン相殺」現象について。 display: inline-block; float なお、上記などがかかってる場合では起きない。 <div class="box"><div class="box">.box { margin: 20px 上記の場合縦に並んだBOXの隙間は20px+20pxにはならず、20pxになる。  <div class="box1"><div class="box2">.box1 { margin:

    • emとremの違い

      emは親要素のfont-sizeを1とした倍数を指定するもの。 【HTML】<div class="parent"> <div class="child"> </div></div> 【CSS】html {font-size: 10px;} .parent {font-size: 1.2em →10px*1.2=12px} .child {font-size: 1.2em →12px*1.2=14.4px} remはルート要素(HTMLならhtml要素)のfont-s

      • a要素の装飾と擬似クラス

        HTML   <p><a href="XXX.html">トップへ戻る</a></p> 上記の場合は、p要素ではなく、a要素にプロパティをかける必要がある。 ※a要素は象形で文字色の変更がされない為 CSS  p a{ color:#333333; } 擬似クラス :から始まる4つの特殊クラスがあり、主にa要素で使用する。(半角スペース入れると無効になるよ)a:hover なお以下の順番に指定しないと、他の擬似クラスに上書きされるので注意。 :link 未訪問リ

        • 勉強サイト

        マージンの相殺について

          flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方

          ずっとできなかった、2つの要素をひとまとめにすることができました…!私はずっとメニューバーの左にlogo、右にメニューを置きたかった! まずHTML ↓ <nav> <div class="inner flex"> <div class="logo"> <a>FRUITS!</a> </div> <div class="menu"> <ul class="flex"> <li><a href

          flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方

          おしゃれなポートフォリオサイト

          おしゃれなポートフォリオサイト

          CSSの記号 「クラス名」「*」「#」 「.」 「 」 「>」

          「クラス名」 装飾を施す範囲を指定できる。 【HTML】 <p>TEST</p> <span>TEST2</span> 【CSS】 p { color: #333333 } 上記の場合は、spanタグには適用されない。 「*」 CSS中の「*」は全ての要素に装飾が指定される。 「#」 CSS中の「#」はID名をセレクタにするときに使います。 #test{ color:red; } <p id="test">ここが適用</p> <p>ここはそのまま</p> 「

          CSSの記号 「クラス名」「*」「#」 「.」 「 」 「>」

          CSSの記述の場所について

          CSSを書く場所は3つあります。 ①styleタグに書く ②インラインに書く ③外部ファイルに書く ①styleタグに書く →headのなかに書く方法。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UTF-8”> <title>CSS</title> <style> h1 {color: red; } </style> </head> <body> <h1>CSS入門</h1> <p>は

          CSSの記述の場所について

          Chromeの検証機能(デベロッパーツール)の使い方

          初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

          Chromeの検証機能(デベロッパーツール)の使い方

          HTML基本タグ

          <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sanitize.css"> <link rel="stylesheet" href="style.css"> <title>portfolio</title> </head> <body> </body> <footer> </footer> </html>

          HTML基本タグ

          HTML/CSS備忘録

          今日から初めてのWebサイト作成ってことで備忘録を残したいと思います。

          HTML/CSS備忘録