コンテンツにスキップ

利用者:令和少年/作業場

出典: フリー教科書『ウィキブックス(Wikibooks)』

div style

[編集]

現在勉強中。

<"プロパティ1: 値1; プロパティ2: 値2;">
そして、<タグ名>タグ内容</タグ名>要素という。 テンプレート:※不必要なプロパティは省略可能

  • 使用例 <div style="float: left; width: 265px; height: 300px; overflow-x: hidden; overflow-y:scroll; border:groove thick #AACFA3;"> あいうあいう </div>
  • 表示

あいうあいう

上のような、図形の中に文字が入っているもので、1要素。

使用記号 使用法
: プロパティと値の間
; 値と次の値の間
" プロパティ群の前後に付ける。
プロパティ名 プロパティ説明 値名 値説明
color 文字色の変更 #〜〜 カラーコードを指定可能。原色大辞典参照。
red等 カラー名を指定可能。red white blue purple pink等。
float ページ上での要素の位置 left 左に表示
center 中央に表示
right 右に表示
width 要素の横の長さ 〜〜px 横の長さ(px)
height 要素の縦の長さ 〜〜px 縦の長さ(px)
display 複数の要素の並び方 none 非表示
block 横いっぱいに要素が広がり、縦に並ぶ。
inline 要素が平べったく横に広がる。
inline-block 並びはinline的、内容はblock的。
overflow-x 横に余った文字の処理 visible はみ出た場所はそのまま無処理(既定値)
hidden はみ出た場所は表示しない
scroll スクロール表示をする
auto ブラウザに任せる(基本的にscroll)
overflow-y 縦に余った文字の処理 visible はみ出た場所はそのまま無処理(既定値)
hidden はみ出た場所は表示しない
scroll スクロール表示をする
auto ブラウザに任せる(基本的にscroll)
border(線種類) 図形を囲む線 none 何も表示しない(既定値)
solid 通常の1本線
double 2本線
dotted 点線
dashed 破線
groove 立体的に窪んだ枠
ridge 立体的に隆起した枠
inset 内側全体に窪んだ枠
outset 内側全体に隆起した枠
border(太さ) 枠線の太さ thin 細め
medium 標準
thick 太め
〜〜px 枠線の太さは pxでも指定可能。
border(色) 枠線の色 #〜〜 カラーコードを指定可能。原色大辞典参照。
red等 カラー名を指定可能。red white blue purple pink等。
padding 文字と枠までの長さ 〜〜px 文字から枠までの長さ(px)
margin 枠から、さらに外の枠までの長さ 〜〜px 枠から外側の枠までの長さ(px)
  • border など複数の値が入力される可能性があるもの

<div style"border: solid thin red>と入力。