display要素 table

HTML

tableタグを使わずにテーブルのように表示できるメニューの作成など、これでできてしまう ---HTML--- <div class="container"> <div class="box"> Hello Hello Hello Hello </div> <div class="box"> Hello Hello Hello Hello Hello Hello </div> <div class="box"> Hello Hello </div> </div> ---CSS--- .container { display: table; width:300px; } .box { di…

2018-02-19

％で指定

HTML

width（ウィズ）height（ハイト） %で指定する場合、親の要素に対する割合が設定される但し、heightはクセが強いんじゃ。 ---HTML--- <html> <head> </head> <body> <div> hogehoge </div> </body> </html> ---CSS--- div{ width: 50%; height: 50%; } とした場合、heightはうまく適用されない。 ↓↓↓ こんな風…

2018-02-16

HTMLの基本

HTML

favicon メニューバーに表示されるアイコン <link rel="shortcut icon" href="favicon.ico"> placeholder テキストエリアにガイド用に表示する内容 <input type="text" placeholder="例）参加します"> ボタンボタンの作成方法 inputタグ <input type="submit" value="送信"> buttonタグボタンに画像を設定するなど、リッチなボタンが作成できる <button type="submit"><span><img src="img/title.gif" /></span></button></link>

2018-02-03

スタイルの優先順位

HTML

セレクタの詳細度スタイルはセレクタの詳細度によって優先が決まる。 (a) style = "" (b) ID (c) 属性/疑似クラス (d) 要素/疑似要素 (a) > (b) > (c) > (d) ---HTML--- <a href="hoge" class="link search" id="site" style="color:green;"> 。。。(a) styleで記述するとCSS定義より優先 ※importantを使用するとimportantが優</a>…

2018-01-06

CSSの基本

HTML

書き方書き方は３パターン。 ① htmlタグ内に記述する <p style="color:blue"> hogehoge </p> ② html内にstyleタグを作成して記述する <style> p{ color: blue; } </style> <body> <p>hogehoge</p </body> ③ CSSファイルに記述し、htmlから参照する＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ CSS (ex. css/default.css) ＝＝＝＝＝＝</body>…