CSSシミュレータ

【使い方】textareaの中身（値）を書き換えて色々と試してみる <style> #cssDisplay { width: 500px ; /*①枠サイズ（横）*/ height: 300px ; /*②枠サイズ（縦）*/ overflow: scroll ; /*③はみだし処理*/ padding: 10px ; /*④内側の余白*/ background-color: white ; /*⑤背景の色*/ border: 3px solid blue ; /*⑥内側の枠線*/ border-radius: 10px ; /*⑦内側の枠線の角を丸める*/ outline: 5px dotted green ; /*⑧外側の枠線*/ outline-offset: 10px; /*⑨外側の枠線の位置*/ box-sizing: border-box ; /*⑩枠サイズの定義*/ font-family: 'Yu Mincho' ; /*⑪文字の種類*/ font-size: 20px ; /*⑫文字の大きさ*/ color: gray ; /*⑬文字の色*/ font-weight: bold ; /*⑭文字の太さ*/ text-decoration: wavy underline red ; /*⑮文字の修飾*/ line-height: 2 ; /*⑯行の間隔*/ letter-spacing: 3px ; /*⑰文字の間隔*/ text-align: center ; /*⑱文字列の位置*/ } </style> 仏説摩訶般若波羅蜜多心経 観自在菩薩行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舎利子。色不異空。空不異色。色即是空。空即是色。受想行識亦復如是。舎利子。是諸法空相。不生不滅。不垢不浄。不増不減。是故空中。無色無受想行識。無眼耳鼻舌身意。無色声香味触法。無眼界。乃至無意識界。無無明。亦無無明尽。乃至無老死。亦無老死尽。無苦集滅道。無智亦無得。以無所得故。菩提薩埵。依般若波羅蜜多故。心無罜礙。無罜礙故。無有恐怖。遠離一切顛倒夢想。究竟涅槃。三世諸仏。依般若波羅蜜多故。得阿耨多羅三藐三菩提。故知。般若波羅蜜多。是大神呪。是大明呪。是無上呪。是無等等呪。能除一切苦。真実不虚故。説般若波羅蜜多呪。即説呪曰。羯諦羯諦波羅羯諦波羅僧羯諦菩提薩婆訶。般若心経 値を指定しない場合（空白）は初期値になる

①枠サイズ（横） / width
　%でも指定可能
　初期値「auto」

②枠サイズ（縦） / height
　初期値「auto」

③はみだし処理 / overflow
　visible　hidden　scroll　auto
　height:auto;なら不要（white-space:nowrap/pre;なら必要）
　overflow-xとoverflow-yを個別に指定可能
　初期値「visible」

④内側の余白 / padding
　padding-top、padding-right、padding-bottom、padding-leftで、上右下左を個別に指定可能
　初期値「0」

⑤背景の色 / background-color
　カラーコード、カラーネーム、RGB、RGBAで指定する
　初期値「transparent（透明）」

⑥内側の枠線 / border
　線の太さ、線の種類、線の色を指定する
　線の種類：solid（実線）　double（二重線）　dashed（破線）　dotted（点線）　groove　ridge　inset　outset
　線の色：カラーコード、カラーネーム、RGB、RGBAで指定する
　border-top、border-right、border-bottom、boder-leftで、上右下左を個別に指定可能
　初期値「none」

⑦内側の枠線の角を丸める / border-radius
　px　%
　左上、右上、右下、左下を個別に指定可能
　初期値「0」

⑧外側の枠線 / outline
　線の太さ、線の種類、線の色を指定する
　線の種類：solid（実線）　double（二重線）　dashed（破線）　dotted（点線）　groove　ridge　inset　outset
　線の色：カラーコード、カラーネーム、RGB、RGBAで指定する
　初期値「none」

⑨外側の枠線の位置 / outline-offset
　初期値「0」

⑩枠サイズの定義 / box-sizing
　content-box（width,heightにpadding, borderがプラスされる）
　border-box（width,heightにpadding, borderが含まれる）
　初期値「content-box」

⑪文字の種類 / font-family
　Meiryo　'MS PGothic'　'MS Gothic'　'MS PMincho'　'MS Mincho'　'Yu Gothic'　'Yu Mincho'

⑫文字の大きさ / font-size
　%　px　em　ex
　xx-small x-small small medium large x-large xx-largebr
　初期値「medium」

⑬文字の色 / color
　カラーコード、カラーネーム、RGB、RGBAで指定する

⑭文字の太さ / font-weight
　文字か数字で指定する（太さが9種類あるフォントは少ない）
　normal　bold　bolder　lighter
　100～900
　初期値「normal=400」

⑮文字の修飾 / text-decoration
　線の種類、線の位置、線の色を指定する
　線の種類：solid（実線）　double（二重線）　dashed（破線）　dotted（点線）　wavy（波線）
　線の位置：none（なし）　underline（下線）　overline（上線）　line-through（打消線）
　線の色：カラーコード、カラーネーム、RGB、RGBAで指定する
　初期値「none」

⑯行の間隔 / line-height
　数字　%　px　em　ex
　1.5=150%（font-sizeを1=100%とする）
　初期値「normal」

⑰文字の間隔 / letter-spacing
　px　em　ex
　初期値「normal」

⑱文字列の位置 / text-align
　start　end　left　center　right
　初期値「start」

HTML <div id="cssDisplay"></div><br /><br /> <⚠textarea style="width:99%;height:450px;font-family:monospace;" id="cssTextarea" onInput="cssSimulator();"> <style> #cssDisplay { width: 500px ; /*①枠サイズ（横）*/ height: 300px ; /*②枠サイズ（縦）*/ overflow: scroll ; /*③はみだし処理*/ padding: 10px ; /*④内側の余白*/ background-color: white ; /*⑤背景の色*/ border: 3px solid blue ; /*⑥内側の枠線*/ border-radius: 10px ; /*⑦内側の枠線の角を丸める*/ outline: 5px dotted green ; /*⑧外側の枠線*/ outline-offset: 10px; /*⑨外側の枠線の位置*/ box-sizing: border-box ; /*⑩枠サイズの定義*/ font-family: 'Yu Mincho' ; /*⑪文字の種類*/ font-size: 20px ; /*⑫文字の大きさ*/ color: gray ; /*⑬文字の色*/ font-weight: bold ; /*⑭文字の太さ*/ text-decoration: wavy underline red ; /*⑮文字の修飾*/ line-height: 2 ; /*⑯行の間隔*/ letter-spacing: 3px ; /*⑰文字の間隔*/ text-align: center ; /*⑱文字列の位置*/ } </style> 仏説摩訶般若波羅蜜多心経 観自在菩薩行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舎利子。色不異空。空不異色。色即是空。空即是色。受想行識亦復如是。舎利子。是諸法空相。不生不滅。不垢不浄。不増不減。是故空中。無色無受想行識。無眼耳鼻舌身意。無色声香味触法。無眼界。乃至無意識界。無無明。亦無無明尽。乃至無老死。亦無老死尽。無苦集滅道。無智亦無得。以無所得故。菩提薩埵。依般若波羅蜜多故。心無罜礙。無罜礙故。無有恐怖。遠離一切顛倒夢想。究竟涅槃。三世諸仏。依般若波羅蜜多故。得阿耨多羅三藐三菩提。故知。般若波羅蜜多。是大神呪。是大明呪。是無上呪。是無等等呪。能除一切苦。真実不虚故。説般若波羅蜜多呪。即説呪曰。羯諦羯諦波羅羯諦波羅僧羯諦菩提薩婆訶。般若心経 <⚠/textarea><!--⚠は削除する-->

JavaScript <script> var cssSimulator=function(){ document.getElementById("cssDisplay").innerHTML=document.getElementById("cssTextarea").value; } setTimeout("cssSimulator()",0); </script>