※ ChatGPTを利用し、要約された質問です(原文:モバイルサイト構築 - CSS/Class/IDの使用について)
モバイルサイト構築 - CSS/Class/IDの使用について
このQ&Aのポイント
携帯サイトを作成する際、CSSの記述方法に関して悩んでいます。PCブラウザでは正常に表示されるのに、エミュレーターではスタイルが適用されません。
Classで指定したスタイルは適用されるのに、IDで指定すると適用されません。書き方に問題があるのでしょうか?
特にAUを対象に作成していますが、AU独自の記述ルールがあるのでしょうか。誰か教えてください。
モバイルサイト構築 - CSS/Class/IDの使用について
初めて携帯サイトを作っています。
モバイルサイトに詳しい方、教えてください。
CSSは外部ではなくHEADのスタイル部分に記述しています。IE等のPCブラウザでは普通に表示されるのですが、エミュレーターで表示してみるとスタイル(ID)がまったく適用されません。
Classで指定している部分はそのスタイルが適用されているのですが、ID#で指定すると適用されません。書き方に問題があるのでしょうか・・・。
まずはAUを対象に作っているのですが、何かAUどくとくの記述ルールがあるのでしょうか。教えてください。
以下ソースです。(CSSだけ)↓↓↓↓
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<!-- XHTML宣言 ここまで -->
<!-- ここから上は固定 -->
<head><title>いまよむトップ</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis" />
<!-- CSS -->
<style type="text/css" media="メディアタイプ">
body {margin:0; padding:0;}
.marquee {
font-size:xx-small; /* 変更不可 */
color: #ffffff;
background-color: #FF0066;
}
.top_logo {text-align: center;}
.div_bace {
font-size: x-small; /* 変更不可 */
background-color: #FFCCCC;
}
.div_bace#top {border: solid 1px #000000;}
.title {
font-size: medium;
color: #ffffff;
text-align :center;
margin-top :0;
}
.title#001 {background-color: #ff0066;}
.title#002 {background-color: #FF9900;}
.title#003 {background-color: #33CCFF;}
.title#004 {background-color: #000000;}
.title#005 {background-color: #99CC00;}
.title#006 {background-color: #FF9900;}
.title#007 {background-color: #990099;}
.title#008 {background-color: #FFFFB5;}
.title#009 {background-color: #FF6699;}
.title#010 {background-color: #000000;}
.title#011 {background-color: #000000;}
.div_bace#shinkan {border: 2px solid #ff0066; margin: 3px;}
.div_bace#osusume {border: 2px solid #FF9900; margin: 3px;}
.div_bace#tokushu {border: 2px solid #33CCFF; margin: 3px;}
.div_bace#shoseki {border: 2px solid #000000; margin: 3px;}
.div_bace#comic {border: 2px solid #99CC00; margin: 3px;}
.div_bace#shashinshu {border: 2px solid #FF9900; margin: 3px;}
.div_bace#boyslove {border: 2px solid #990099; margin: 3px;}
.div_bace#magazine {background-color: #FFFFB5; margin: 3px;}
.div_bace#ranking {border: 2px solid #FF6699; margin: 3px;}
.div_bace#imayomu_room {border: 2px solid #000000; margin: 3px;}
.div_bace#search {border: 2px solid #000000; margin: 3px;}
.footer {border: 2px solid #000000; margin: 3px;}
.bottom_base {font-size:xx-small; /* 変更不可 */}
.hr_color {
color:#808080; /* 変更不可 */
width:100%; /* 変更不可 */
size:1px; /* 変更不可 */
}
.smallest {font-size: xx-small;}
.smallest#orange {color: #ffcc00;}
.smallest#red {color: #ff0000;}
.smallest#pink {color: #FF00FF;}
.smallest#gray {color: #C0C0C0;}
.smallest#blue {color: #3300CC;}
.border {
width :100%;
height :90px;
margin :5px;
border-top: 2px solid #ff0066;
border-bottom: 2px solid #ff0066;
text-align: center;
}
.largest {font-size: medium;}
.largestt#orange2 {color: #ffcc00;}
.largest#red2 {color: #ff0000;}
.largest#pink2 {color: #FF00FF;}
.largest#gray2 {color: #C0C0C0;}
.largest#blue2 {color: #3300CC;}
</style>
<!-- CSS ここまで-->
</head>