css_to_iphone - mod_chxj Wiki - mod_chxj

iPhone端末 CSS変換仕様(0.14.0以降)

Up: CSS変換機能(0.13.0以降)

Prev: SoftBankCSS変換仕様(0.13.0以降)

Next: androidCSS変換仕様(0.14.0以降)

Outline

• 変換対応表

変換対応表

変換元			iPhone/iPod端末	備考
タグ	属性	CSS	変換後
hr	align=left		<hr style="float:left;" />
		float:left	<hr style="float:left;" />
	align=center		<hr style="float:none;" />
		float:none	<hr style="float:none;" />
	align=right		<hr style="float:right;" />
		float:right	<hr style="float:right;" />
		height:char	<hr style="height:char;"/>
		width:char	<hr style="width:char;"/>
		border-style:solid	<hr style="border-style:solid;"/>
		border-color:char	<hr style="border-color:char;"/>
		background-color:char	<hr style="background-color:char;" />
img	src=char		<img src=char />
	align=top		<img style="vertical-align:top;" />
		vertical-align:top	<img style="vertical-align:top;" />	align属性が優先
	align=middle		<img style="vertical-align:middle;"/>
	align=center		<img style="vertical-align:middle;"/>
		vertical-align:middle	<img style="vertical-align:middle;"/>	align属性が優先
	align=bottom		<img style="vertical-align:bottom;"/>
		vertical-align:bottom	<img style="vertical-align:bottom;"/>	align属性が優先
	align=left		<img style="float:left"/>
		float:left	<img style="float:left"/>	align属性が優先
	align=right		<img style="float:right"/>
		float:right	<img style="float:right"/>	align属性が優先
	width=char		<img width=char/>
	height=char		<img height=char/>
	hspace=char		<img style="margin-left:char;margin-right:char;"/>
	vspace=char		<img style="margin-top:char;margin-bottom:char;"/>
		margin-left:char	<img style="margin-left:char;"/>	hspace属性が優先
		margin-right:char	<img style="margin-right:char;"/>	hspace属性が優先
		margin-top:char	<img style="margin-top:char;"/>	vspace属性が優先
		margin-bottom:char	<img style="margin-bottom:char;"/>	vspace属性が優先
	alt=char		<img alt=char/>
		display:none;	<img style="display:none;"/>
div	align=left		<div style="text-align:left;" >
		text-align:left	<div style="text-align:left;" >
	align=center		<div style="text-align:center;" >
		text-align:center	<div style="text-align:center;" >
	align=right		<div style="text-align:right;" >
		text-align:right	<div style="text-align:right;" >
		text-decoration:blink	<style type="text/css"> @-webkit-keyframes blink { 0% { opacity: 1.0; } 100% { opacity: 0.0; } } </style> <div style=" -webkit-animation-name:blink; -webkit-animation-duration: 0.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; " >
		display:-wap-marquee	<div style="overflow:-webkit-marquee;" >
		-wap-marquee-style:slide	<div style="-webkit-marquee-style:slide;" >
		-wap-marquee-style:alternate	<div style="-webkit-marquee-style:alternate;" >
		-wap-marquee-dir:rtl	<div style="-webkit-marquee-direction:left;" >
		-wap-marquee-dir:ltr	<div style="-webkit-marquee-direction:right;" >
		-wap-marquee-loop:-1	<div style="-webkit-marquee-repetition:infinite;" >
		-wap-marquee-loop:0	<div style="-webkit-marquee-repetition:infinite;" >
		-wap-marquee-loop:NUM	<div style="-webkit-marquee-repetition:NUM;" >
		-wap-marquee-loop:infinite	<div style="-webkit-marquee-repetition:infinite;" >
		-wap-marquee-speed:slow	<div style="-webkit-marquee-speed;slow" >
		-wap-marquee-speed:fast	<div style="-webkit-marquee-speed;fast" >
		clear:both	<div style="clear:both;" >
		color:char	<div style="color:char;" >
		background-color:char	<div style="background-color:char;" >
		font-size:xx-small	<div style="font-size:xx-small;" >
		font-size:x-small	<div style="font-size:x-small;" >
		font-size:small	<div style="font-size:small;" >
		font-size:medium	<div style="font-size:medium;" >
		font-size:large	<div style="font-size:large;" >
		font-size:x-large	<div style="font-size:x-large;" >
		font-size:xx-large	<div style="font-size:xx-large;" >
center			<center>	変換なし
span		color:char	<span style="color:char" >
		background-color:char	<span style="background-color:char;" >
		text-decoration:blink	<style type="text/css"> @-webkit-keyframes blink { 0% { opacity: 1.0; } 100% { opacity: 0.0; }} </style> <span style=" -webkit-animation-name:blink; -webkit-animation-duration: 0.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-delay: 0s; " >
		font-size:xx-small	<span style="font-size:xx-small;" >
		font-size:x-small	<span style="font-size:x-small;" >
		font-size:small	<span style="font-size:small;" >
		font-size:medium	<span style="font-size:medium;" >
		font-size:large	<span style="font-size:large;" >
		font-size:x-large	<span style="font-size:x-large;" >
		font-size:xx-large	<span style="font-size:xx-large;" >
		display:-wap-marquee	<div style="overflow:-webkit-marquee;" >	divに変換
		-wap-marquee-style:slide	<div style="-webkit-marquee-style:slide;" >	divに変換
		-wap-marquee-style:alternate	<div style="-webkit-marquee-style:alternate;" >	divに変換
		-wap-marquee-dir:rtl	<div style="-webkit-marquee-direction:left;" >	divに変換
		-wap-marquee-dir:ltr	<div style="-webkit-marquee-direction:right;" >	divに変換
		-wap-marquee-loop:-1	<div style="-webkit-marquee-repetition:infinite;" >	divに変換
		-wap-marquee-loop:0	<div style="-webkit-marquee-repetition:infinite;" >	divに変換
		-wap-marquee-loop:NUM	<div style="-webkit-marquee-repetition:NUM;" >	divに変換
		-wap-marquee-speed:slow	<div style="-webkit-marquee-speed:slow;" >	divに変換
		-wap-marquee-speed:fast	<div style="-webkit-marquee-speed:fast;" >	divに変換
br	clear=all		<br clear=all />
		clear:both	<br clear=all />
	clear=right		<br clear=right />
		clear:right	<br clear=right />
	clear=left		<br clear=left />
		clear:left	<br clear=left />
		clear:none	<br />
a	id=char		<a name=char >
	name=char		<a name=char >
	accesskey=char		<a >	なし
	href=char		<a href=char >
	utn		<a >	なし
h1	align=left		<h1 style="text-align:left;" >
	align=center		<h1 style="text-align:center;" >
	align=right		<h1 style="text-align:right;" >
		clear:both	<h1 style="clear:both;" >
		clear:right	<h1 style="clear:right;" >
		clear:left	<h1 style="clear:left;" >
h2	align=left		<h2 style="text-align:left;" >
	align=center		<h2 style="text-align:center;" >
	align=right		<h2 style="text-align:right;" >
		clear:both	<h2 style="clear:both;" >
		clear:right	<h2 style="clear:right;" >
		clear:left	<h2 style="clear:left;" >
h3	align=left		<h3 style="text-align:left;" >
	align=center		<h3 style="text-align:center;" >
	align=right		<h3 style="text-align:right;" >
		clear:both	<h3 style="clear:both;" >
		clear:right	<h3 style="clear:right;" >
		clear:left	<h3 style="clear:left;" >
h4	align=left		<h4 style="text-align:left;" >
	align=center		<h4 style="text-align:center;" >
	align=right		<h4 style="text-align:right;" >
		clear:both	<h4 style="clear:both;" >
		clear:right	<h4 style="clear:right;" >
		clear:left	<h4 style="clear:left;" >
h5	align=left		<h5 style="text-align:left;" >
	align=center		<h5 style="text-align:center;" >
	align=right		<h5 style="text-align:right;" >
		clear:both	<h5 style="clear:both;" >
		clear:right	<h5 style="clear:right;" >
		clear:left	<h5 style="clear:left;" >
h6	align=left		<h6 style="text-align:left;" >
	align=center		<h6 style="text-align:center;" >
	align=right		<h6 style="text-align:right;" >
		clear:both	<h6 style="clear:both;" >
		clear:right	<h6 style="clear:right;" >
		clear:left	<h6 style="clear:left;" >
meta	name=char		<meta name=char />
	content=char		<meta content=char />
	http-equiv=char		<meta http-equiv=char />
p	align=left		<p style="text-align:left;" >
		text-align:left	<p style="text-align:left;" >
	align=center		<p style="text-align:center;" >
		text-align:center	<p style="text-align:center;" >
	align=right		<p style="text-align:right;" >
		text-align:right	<p style="text-align:right;" >
		clear:left	<p style="clear:left;" >
		clear:both	<p style="clear:both;" >
		clear:right	<p style="clear:right;" >
input	type=text		<input type="text" />	istyle=4の場合は<input type="number" /&gtに変換されます
	type=password		<input type="password" />
	type=hidden		<input type="hidden" />
	type=checkbox		<input type="checkbox" />
	type=radio		<input type="radio" />
	type=submit		<input type="submit" />
	type=reset		<input type="reset" />
	type=file		<input />	未対応
	name=char		<input name=char />
	value=char		<input value=char />
	accesskey=char		<input accesskey=char />
	size=num		<input size=num />
	maxlength=num		<input maxlength=num />
	checked		<input checked=checked />
	istyle=1		<input />	なし
	istyle=2		<input />	なし
	istyle=3		<input />	なし
	istyle=4		<input type="number" />	type="text"のときのみ
		-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;	<input />	なし
		-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;;	<input />	なし
		-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;	<input />	なし
		-wap-input-format:&quot;*&lt;ja:n&gt;&quot;;	<input type="number" />	type="text"のときのみ
textarea	name=char		<textarea name=char />
	accesskey=char		<textarea accesskey=char />
	rows=num		<textarea rows=num />
	cols=num		<textarea cols=num />
	istyle=1		<textarea />	なし
	istyle=2		<textarea />	なし
	istyle=3		<textarea />	なし
	istyle=4		<textarea />	なし
		-wap-input-format:&quot;*&lt;ja:h&gt;&quot;;	<textarea />	なし
		-wap-input-format:&quot;*&lt;ja:hk&gt;&quot;;	<textarea />	なし
		-wap-input-format:&quot;*&lt;ja:en&gt;&quot;;	<textarea />	なし
		-wap-input-format:&quot;*&lt;ja:n&gt;&quot;;	<textarea />	なし
table	align=left		<table align=left >
		text-align:left	<table align=left >
	align=center		<table align=center >
		text-align:center	<table align=center >
	align=right		<table align=right >
		text-align:right	<table align=right >
	width=char		<table width=char >
		width:char	<table width=char >
	height=char		<table height=char >
		height:char	<table height=char >
	border=num		<table style="border:[n]px solid" >
	bordercolor=char		<table style="border: [n]px solid char" >
	bgcolor=char		<table bgcolor=char >
		background-color:char	<table bgcolor=char >
tr	align=left		<tr align=left >
		text-align:left	<tr align=left >
	align=center		<tr align=center >
		text-align:center	<tr align=center >
	align=right		<tr align=right >
		text-align:right	<tr align=right >
	valign=top		<tr valign=top >
		vertical-align:top	<tr valign=top >
	valign=middle		<tr valign=middle >
		vertical-align:middle	<tr valign=middle >
	valign=bottom		<tr valign=bottom >
		vertical-align:bottom	<tr valign=bottom >
	bgcolor=char		<tr bgcolor=char >
		background-color:char	<tr bgcolor=char >
th	align=left		<th align=left >
		text-align:left;	<th align=left >
	align=center		<th align=center >
		text-align:center;	<th align=center >
	align=right		<th align=right >
		text-align:right;	<th align=right >
	valign=top		<th valign=top >
		vertical-align:top	<th valign=top >
	valign=middle		<th valign=middle >
		vertical-align:middle	<th valign=middle >
	valign=bottom		<th valign=bottom >
		vertical-align:bottom	<th valign=bottom >
	bgcolor=char		<th bgcolor=char >
		background-color:char	<th bgcolor=char >
	width=(num|num%)		<th style="width:num(px|%);" >
		width:num(px|%)	<th style="width:num(px|%);" >
	height=(num|num%)		<th style="height:num(px|%);" >
		height:char(px|%)	<th style="height:num(px|%);" >
	colspan=num		<th colspan=num >
	rowspan=num		<th rowspan=num >
td	align=left		<td align=left >
		text-align:left;	<td align=left >
	align=center		<td align=center >
		text-align:center;	<td align=center >
	align=right		<td align=right >
		text-align:right;	<td align=right >
	valign=top		<td valign=top >
		vertical-align:top	<td valign=top >
	valign=middle		<td valign=middle >
		vertical-align:middle	<td valign=middle >
	valign=bottom		<td valign=bottom >
		vertical-align:bottom	<td valign=bottom >
	bgcolor=char		<td bgcolor=char >
		background-color:char	<td bgcolor=char >
	widtd=(num|num%)		<td style="widtd:num(px|%);" >
		widtd:num(px|%)	<td style="widtd:num(px|%);" >
	height=(num|num%)		<td style="height:num(px|%);" >
		height:char(px|%)	<td style="height:num(px|%);" >
	colspan=num		<td colspan=num >
	rowspan=num		<td rowspan=num >
object	id=char		<object id=char >
	width=char		<object width=char >
	height=char		<object height=char >
	type=char		<object type=char >
	data=char		<object data=char >
	declare=declare		<object declare=declare >
	classid=char		<object classid=char >
	codebase=char		<object codebase=char >
param	name=char		<param name=char >
	value=char		<param value=char >
	valuetype=char		<param valuetype=char >
body	bgcolor=char		<body style="background-color:char;" >
		background-color:char	<body style="background-color:char;" >
	text=char		<body style="color:char;" >
		color:char	<body style="color:char;" >
	link=char		<body link=char >
		<style type="text/css" > a:link {color:char} </style>	<body link=char >
	vlink=char		<body vlink=char >
		<style type="text/css" > a:visited {color:char} </style>	<body vlink=char >
	alink=char		<body >	なし
		<style type="text/css" > a:focus {color:char} </style>	<body >	なし
	background=char		<body background=char >
		background-image:url(char)	<body background=char >
form	action=char		<form action=char >
	method=char		<form method=char >
	name=char		<form name=char >
		clear:left	<form style="clear:left;" >
		clear:both	<form style="clear:both;" >
		clear:right	<form style="clear:right;" >
select	name=char		<select name=char >
	size=char		<select size=char >
	multiple		<select multiple=multiple >
option	value=char		<option value=char >
	selected		<option selected=selected >

Up: CSS変換機能(0.13.0以降)

Prev: SoftBankCSS変換仕様(0.13.0以降)

Next: androidCSS変換仕様(0.14.0以降)