常連

回答者

ベストアンサー

拍手喝采

鑑定士

有名人

### 前提・実現したいこと

タイトルの通りなんですが、Win7のIEのみに適用させるCSSハックはないでしょうか？
Win10などのIEでは正常に描画されるがWin7のみ表示が崩れるため、
Win7のみ異なったデザインを適用させてくれとの要望がありまして。

調べたのですがIEのバージョンのみのハックは見つけたのですが、Winのバージョンに適用させる方法が見つからず、ご存知であれば教えてください。

Windows7 IEのみにCSS対応させる方法

いつもお世話になっております。
今現在、私が保守担当になっている案件でWebページの一部コンテンツが印刷されない事象が発生しております。
環境が古く、約10年前のものを保守している状況です。また会社の方針により作り直し等は今の所計画されていないため、条件が限られてしまいます。
レイアウトやページ構造などの軽微なコード修正であれば可能なため、ご存知でしたら知恵をお貸りできればと思います。



# 事象

PHPでサーバーサイドレンダリングしたページにて、印刷時にページの切れ目が特定の場所になった場合コンテンツが表示されない。

# コードと、詳細の説明。
ページ構成、印刷範囲は下記の通りで、アウトラインの構成は以下の通りです。

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <title>（機密保持のため削除）</title>
</head>
<body>

  <h1>印刷のタイトル<h1>
  <form>
    <h2>売上明細</h2>
    <table>
      
    </table>

    <h2>入出金（必要経費等）</h2>
    <table>
      
     </table>

    <h2>合計</h2>
    <table>
      
    </table>
  </form>
</body>
</html>
```

可変長テーブルの長さにより、印刷範囲が１ページを超える場合が多々あります。
ちょうどページの切れ目が入出金額と合計の`<h2>`のあたりになった場合に、２ページ目には合計のテーブルが印字されません。
また、テーブルの長さが長くなり、入出金のテーブルが2ページ目まで及ぶような場合は印刷できます。

# 動作環境など

**サーバー側**

- php5.6
- windows server 2012 R2

**クライアント側**

- Windows 7 Professional
- **IE11 (互換表示設定を使用)**
- 印刷サイズ：A4

**条件**

顧客へ納品している案件につき、手元には全く同じハードウェアは用意できmませんでした。またプリンタによる違いかと思いますが、同じプリンタを用意できなかったため、手元の環境では再現できませんでした。
また、リピート納品の案件のため、開発費などの捻出および、モダンブラウザ等への対応費用もかけられない状況です。

### 追記

印刷時のサイズ指定を90%に指定すれば印刷できます。しかしながら、顧客にこの方法を提案したところ受け入れてはいただけませんでした。

# 試してみたこと

顧客DBをdumpし、同じコードで実行。Windows 7マシンにてIE11(互換表示設定)で表示しました。
印刷を実行。A4ですが、プリンタが違うため事象は再現できず。

# 回答として頂きたい内容

印刷範囲を`<div>`で囲ってしまえば印字できるのではないかと予想していますが、この対応方法で可能でしょうか。
その他、修正の案があれば・・・。

再現には現場にて実行する必要があるため、試す内容やベストアンサー等は遅くなってしまいます。

IE6準拠のページで印刷時に一部コンテンツが印刷されない

[前提]
jsp、cssファイルにて、決済確認画面の製作をしています。
jspファイルでは、struts2を使っています。
cssはスタンダードのものです。



[現状]
jspファイル内のコード。
```HTML
<%@ page langua![イメージ説明](64f7b25e1b2cfaff92b99a4ebb4f9abb.png)va" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>


<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<jsp:include page="head.jsp" />
<link rel="stylesheet" type="text/css" href="css/buyItemConfirm.css">
	<title>決済確認</title>
</head>
<body>

	

	<jsp:include page="header.jsp" />


    


	<div id="main">
	<div class="container">
		<h3>決済確認</h3>
		<p>以下の内容でよろしいですか？</p>
	
		<div class="left">
		<s:iterator value="cartList">
			<div class="product">
				<span>商品名：<s:property value="productName"/></span>
			</div>
			<div class="detail">
			<img src="<s:property value='imageFilePath' />" width="300px" height="auto" />
			</div>
			<div class="detail1">
				<p>金額：<s:property value="price"/>円</p>
			</div>
			<div class="detail2">
				<p>購入個数：<s:property value="productCount"/>個</p>
			</div>
			<div class="detail3">
				<p>小計：<s:property value="totalPrice"/>円</p>
			</div>
		</s:iterator>
		<br>
		<br>
		</div>


		<div class="right">
	<s:form id="form1" name="form1" action="BuyItemCompleteAction">


	
		<div class="address">
				<span>名前：<s:property value="#session.ChooseAddressDTO.familyName"/><s:property value="#session.ChooseAddressDTO.firstName"/></span><br>
				<span>ふりがな：<s:property value="#session.ChooseAddressDTO.familyNameKana"/><s:property value="#session.ChooseAddressDTO.firstNameKana"/></span><br>
				<span>郵便番号：<s:property value="#session.ChooseAddressDTO.postalCode"/></span><br>
				<span>住所：<s:property value="#session.ChooseAddressDTO.addr11"/></span><br>
				<span>電話番号：<s:property value="#session.ChooseAddressDTO.telNumber"/></span><br>
				<span>メールアドレス：<s:property value="#session.ChooseAddressDTO.email"/></span>
		</div>

		<div class="price">
			<span>請求金額：<s:property value="finallyPrice"/>円</span>

		<div class="buttom">
			<input id="buttom2" type="submit" value="戻る">
			<input id="buttom1" type="submit" value="完了">
		</div>
		</div>
	</s:form>



	<script>
		$(function(){
			$('#buttom1').click(function() {
				$('#form1').attr('action','BuyItemCompleteAction');
				$('#form1').submit();
			});
			$('#buttom2').click(function(){
				$('#form1').attr('action','BuyItemAction');
				$('#form1').submit();
			});
		});
	</script>
	</div>

	</div>
	</div>


	

	<jsp:include page="footer.jsp" />

	

</body>
</html>
```

cssの現状のコード
```css
@charset "UTF-8";



.container {
	background-color:white;
}


.container h3 {
	font-size:25px;
	font-spacing:3px;
}


.container p {
	font-size:15px;
}

.left {
	float:left;
	width:70%;
}

.right {
	float:right;
	width:30%;
	bottom:0px;
}

.detail {
	display:flex;
}

.price {
	float:right;
}

#form1 {
}

.address {
	padding-left:60px;
}


.buttom {
	display:flex;
}

```

現在のレイアウト状況
![イメージ説明](6580d199999d24d6f40a74b414f38570.png)

[理想]
理想のレイアウトを載せたかったのですが容量の問題なのか、載せられなかったので文面で伝えます。
理想は、商品画像の横に、金額、購入個数、小計を持っていきたいんですが、上手く持っていくことができないため、行き詰まっています。

ご回答よろしくお願い致します。
コード的に改善した方がいい点に関しましてもご指摘ありましたらよろしくお願い致します。

レイアウトが上手くいかないので教えて下さい。

掲題の通り、ネガティブマージン方をいまでも駆使しているという方はいるのか、方法としてありなのかという質問です。

横幅1000pxのul内に、floatで4カラムのliを設置します。
それぞれのリストの横幅は200pxでmargin-leftを50pxとります。

このままだと幅が足りず、最後のリストがカラム落ちしてしまうので、
first-childなどで最初のmargin-leftを0にして収めます。

上記以外にもやり方は多々ありますが、その中でも親要素に対してはみ出た分ネガティブマージンを指定する方法があると思います。

```
ul{
width: 1000px;
margin-left: -50px;
}
li{
float: left;
width: 200px;
margin-left: 50px;
}
```

個人的にこの方法は今ほどCSSが充実していなかった昔のやり方で、今の時代にはそぐわない設計だと思っています。

ただ今やっている作業のデザイン上、運用を考慮すると、ネガティブマージンを使用した方法が記述的にスッキリする場面に直面しており、
方法としては間違いではないと思いますが、やってもいいものなのか悩んでいます。

助言をお願いいたします。

ちなみに設計対象ブラウザは以下です。
IE10
他は、ほぼ最新

CSS コンテンツからはみ出た子要素のマージンを、親要素のネガティブマージンで相殺するのはやり方としてはありなのか

超初心者です。
headerに空白ができます。
宜しくお願いいたします。


```html
<div id="header">
<h1>●●</h1><p id="copy">●●●</p>
</div>
```
```css
/*サイトの横幅*/
#container{
width:900px;
margin:0 auto;
}
#header{
height: 150px;
background: url(../img/heade_bg.jpg) no-repeat left top;
margin-bottom: 20px;
}

```

イメージの表示ができません。

IEだけ罫線が消えてしまう現象が起きており、色んなサイトの対処法をやってみたのですがうまくいかないので教えてください。

ソースは以下です。
「〇１．これが正解です。」を罫線で囲むのですが、Edgeやchromeでは罫線が表示されますが、IE11は表示されません。

```html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
</head>
<body>

	<center>
		<table width="250px" style="border-collapse:collapse">
			<tr>
				<td colspan="2" style="background-color: #ccc;text-align:left;">
					問題
				</td>
			</tr>
			<tr style="border:1px solid">
				<td width="50px">
					<font color="red"><B>〇</B></font><font color="black">１．</font>
				</td>
				<td>
					<a href="LevelCheck_12.html" style="display:block;text-decoration: none;color:black;text-align:left;">これが正解です。</a>
				</td>
			</tr>
        </table>
		<br>
	</center>
</body>
</html>
```


追記
以下のように、皆様から4/27の11:32までに指摘された古いコード等を削除/修正してみましたがなぜか私のIEだけ罫線が表示されません。
IEの設定がおかしいとかあるのでしょうか？
```
<!DOCTYPE html> 
<html lang="ja">

<head>

</head>
<body>
        <table style="border-collapse:collapse">
            <tr>
                <td colspan="2" style="background-color: #ccc;text-align:left;">
                    問題
                </td>
            </tr>
            <tr style="border:1px solid">
                <td width="50px">
                    〇１．
                </td>
                <td>
                    <a style="display:block;text-decoration: none;color:black;text-align:left;">これが正解です。</a>
                </td>
            </tr>
        </table></body>
</html>
```

IEだけ罫線が消える

トップページで、センターに画像を配置したいのですが、うまくいかず困っています。
toppagesというフォルダの中のindex.html.erbファイルの以下の記述に問題があると思われます。
配置したい画像は同じtoppagesフォルダ内にある、mountain.jpg　という名前のファイルです。
現在は、alt内のmkcaffeeという文字か画像が配置されるべきところに出現している状態です。
どうぞよろしくお願いします！

【toppages/index.html.erb】 
 <div class="center jumbotron">
    <div class="text-center">
      <div class="container">
        <p><img class="img-responsive center" src="mountain.jpg" alt="mk caffee"></p>
      </div>
     </div>
  </div>

HTMLで画像が表示されません！

CSSで次のようなものを作ることはできるのでしょうか？
![イメージ説明](35a26be513d20362a90df209a09694f8.png)

```html
<body>
<div id="huga">
<div id="piyo">
<body>
```

```css
#huga{
 width:10px;
 height:10px;
 background-color:????/*whiteにすると背景色が変わった時に対応できない。*/
}
#piyo{
 width:20px;
 height:20px;
 background-color:blue
}

#
```

huga背景色と同じ色にすることも考えましたが、グラーデーションにしたとき底の部分だけ不自然になりそうなので却下しました。

[css]特定部分だけ切り抜き

モバイル表示時のヘッダー固定時のページ内リンクのズレを解消する方法をご教示いただければ幸いです。

現在position: fixed;の固定ヘッダーの中にメニューがありその中にページ内リンクをつけております。
対応策として
```css
.anc::before {
    content: "";
    height: 100px;
    margin-top: -100px;
    display: block;
    visibility: hidden;
```

を書いて.anc部分のズレはPCでは無事にキレイに見えるのですが
モバイル（iPhone８）で見た際にズレてやはりヘッダーに被ってしまいます。

モバイル時にメディアクエリで

```css
.anc {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-display: flex;
    display: flex;
    margin: 2em 0;
```

が追加されます。
これが何かジャマしているのでしょうか。。

どなたか改善方法をご教示いただければ幸いです。

モバイル表示時のヘッダー固定時のページ内リンクのズレを解消する方法

### 前提・実現したいこと
一部端末でサイトの文字が変わってしまう状況が発生したとクライアントから連絡がありました。

### 発生している問題・エラーメッセージ
制作したWEBサイトで、PC、iOSでは正しい漢字なのですが、android 端末で全く違う漢字になる現象
サイト自体はWordpress で管理。web font はM+を使っています。

問題になっている漢字は　碍　　という漢字。これが、アンドロイドだと 涙　になってしまう。
ただ、その１文字以外は正常に表示されています。
WP multi byte patch 有効
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
でWEBフォントを使用。

という状態です。WP内に該当する”涙”という文字を入れた覚えもないです。
こういう事はありえるのでしょうか？
文字コードの問題でもないような気がします。
### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

アンドロイド端末でのWEB文字化け

### 前提・実現したいこと
サーブレットを用いて開発しているWebアプリケーションをスマホで見ると、
PC・スマホ画面でコンテンツがページをはみ出しているのですが、横スクロールバーが表示されずはみだしている部分を見ることができません。
下記CSSを追記しても何も変わりませんでした。


### 該当のソースコード

```CSS
html {
 overflow: scroll;
}
```

追記
PC
・GoogleChrome
・Firefox
・InternetExplore
→表示されない

スマホ
iPhone
　・GoogleChrome
　・Safari
→表示されない
他ブラウザでは確認しておりません。

HTMLはHTML5以降です。
(<!DOCTYPE html>)

横スクロールバーは左右にスクロールするスクロールバーです。

画面のはみだした部分と記載しましたが、
厳密にいうと、テーブルクラスの部分だけがはみ出ているのにスクロールバーがつかない
ということでした。

横スクロールバーが表示されない

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
クラウドワークスでCSSコーディングの案件を引き受けたのですが、
「欧文は::beforeや::afterでフォントとして追加するようにしてください。」という指摘を受けました。

単にbeforeやafterにフォントを指定しても変更したい箇所のフォントは変わりません。
どのように指定するように言われているのか、わかる方が教えていただけると助かります。

```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

欧文は::beforeや::afterでフォントとして追加するとは？

### 前提・実現したいこと

AWSに昨日登録をしました。cloud9でまずはHTML言語を勉強したいです。


### 発生している問題・エラーメッセージ

動画で勉強しているのですが、LiveRevieweができず（４項目あり、それらしきものなし）、
しかも「RUN」をおすと

bash: line 1: index.html: command not found
Process exited with code: 127

がでて、全然実際どうなっているのか見ることができません。

### 該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>HTML Practice</title>
    </head>
    <body>
        <h1>Hello</h1>
        <p>world!</p>
    </body>
</html>

### 試したこと

コードが間違っていないか、まずLiveReviewができない人がいないか
ネットで調べましたが、そんなところでつまずいている人がいないからか
見つかりませんでした。

### 補足情報（FW/ツールのバージョンなど）

Windows７です。

cloud9でのLiveReviewe機能・Run機能について

### 前提・実現したいこと
初心者です。
WordpressでtwentySeventeenのテーマを使ってホームページを作成しています。
フロントページのコンテンツの幅を広くする方法が分かりません。
固定ページのコンテンツの幅はググって出てきたソースを子テーマにコピペして上手くいきましたが、
フロントページはググったものをコピペしてもなかなか上手くいきませんでした。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Wordpress フロントページのコンテンツの幅を広くしたい

ページの背景に文字を指定したいのですが、CSSの作図でやろうと思いましたが、うまくできませんでした。
具体的には背景に「N」という字を指定したいです。
ぜひ参考になりそうなサイトやコードを教えてください。
よろしくお願いします。

背景に文字を指定したいが

ロゴの隣にリンクを入れたいのですが、なぜか改行されて２段になります。
HTML5が使えるIE10以上では折り返さないのですが、
互換モードを利用すると折り返してしまいます。

どこを直せばよいか誰かわからないでしょうか？

```ここに言語を入力
<div id="groupHeaderLogo">
	<a tabindex="-1" href="#">
		<img src="images/logo.jpg"  height="17">
	</a>
	<div id="globalHeaderLogout">
		<a tabindex="-1" href="#">ログアウト</a>
	</div>
</div>
```

CSS
```ここに言語を入力
/* groupLogo */
#groupHeaderLogo{
	margin: 0px 0 0 0;
	padding: 10px 0px 0 0;
	width: 100%;
	text-align: right;
}
#groupHeaderLogo a{
	text-decoration: none;
	margin: 0;
	padding: 0;
}

/* Logout */
#globalHeaderLogout{
	margin: 0 0 0 15px;
	padding: 1px;
	width: 86px;
	text-align: right;
	vertical-align: middle; /*上下中央*/
	float: right;
}
#globalHeaderLogout a{
	margin: 0;
	padding: 0px;
	width: 80px; /* ボタン幅 */
	color: #ffffff;
	text-decoration: none;
	text-align: center;
	display: block;
	font-size: 12px;
	cursor: pointer;
	font-weight: bold;
	border-radius: 3px; /*角を丸く*/

}
#globalHeaderLogout a:link,
#globalHeaderLogout a:visited{
	color: #454545;
	background-color: #dddddd;
}
#globalHeaderLogout a:hover,
#globalHeaderLogout a:active,
#globalHeaderLogout a:focus{
	color: #ffffff;
	background: -moz-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	background: -webkit-linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	background: linear-gradient(to bottom,rgb(100,100,100),rgb(120,120,120),rgb(100,100,100));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#646464', endColorstr='#646464', GradientType=0); /* IE7,8,9 */
}
```

globalHeaderLogoutのid指定を外すと上手くいくのですが、スタイルが無い状態になるので困っています。
誰か教えてください

リンク文字が折り返される理由がわかりません

### 前提・実現したいこと

クロームで表示されているのと同じようにサファリで表示したい。


```
エラーメッセージ
```

    padding-bottom: 15px;
    background-color: rgb(73,130,70);
    width: auto;
    height: 32px;
    display: inline-block;
    padding: 3px 10px;
    line-height: 32px;
    color: #fff;
    letter-spacing: 3px;
    margin-bottom: 25px;
    font-size: 16px;
    text-align: center;

```ここに言語名を入力
ソースコード
```

### 試したこと



### 補足情報（FW/ツールのバージョンなど）

letter-spacing: 3px;がサファリでは効いていて文字の間に感覚が取られているのに対して、サファリでは、文字間が詰まっていて、そのあとに変なスペースが取られている状況

・環境
mac osx 　サファリ[バージョン 10.1.2 (10603.3.8)] クローム[バージョン: 65.0.3325.181（Official Build） （64 ビット）]

・html
<p class="menuitemtitlebox01">hoge</p>

### 前提・実現したいこと



### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

-webkit-text-size-adjust

### 補足情報（FW/ツールのバージョンなど）

フォントファミリーについて、の記述です。
font-family:'MS P Gothic', Osaka, "ヒラギノ角ゴ Pro W3"; font-size:12px; color:#3e2212;

はじめは'MS　Pゴシック'と、日本語で書いてあり、英語に直してみたのですが、特に変わりなしでした。
font-weight については、指定されておりません。

日本語でアップしていた時には、サファリのデベロッパーツールで見るとその部分が文字化けしており、そこをコメントアウトすると、通常どうりの letter-spasing　が適用されていました。

クロームとサファリで見た目がずれる

お世話になっております。

GoogleAnalyticsで
robots.txtはどこか指定する場所があると思います。

そちら「robots.txt」で
```
User-agent: *
Disallow: /product/secret/
Sitemap: http://www.hoge.com/sitemap.xml
```
と表記していたのですが
サイトのレイアウト変更に伴い
sitemap.xmlから引いていたxmlではエラーが多発するようになってしまいました。

以前は
www.xml-sitemaps.com
から作成していたのですが
フリー版では500までしか対応していないようです。

今現在は500以上ファイルがあるため
自力でxmlを表記しようとしていますが無謀でしょうか？

その場合　皆様が使用しているxml出力サイトをお教えいただけないでしょうか？
ご助力頂けますと幸いです。

お忙しいところ大変申し訳無いのですが上記お問い合わせいたします。

GoogleAnalyticsでのxmlの書き方

### WordPressの入門書でつまづいています
　WordPressを「WordPressの教科書 Ver4.x 対応版」という本で勉強し始めたところです。
Webサーバはローカル(MAMP)でやっています。
WordPressのバージョンは4.9.4–jaです。

　Chapter3まで進んだところで「プラグイン」なのか「テーマ」なのかそれ以外なのか忘れましたがスマホで言うところのバッジみたいな赤い丸があって「更新」とあったのでクリックしたら見た目が大きく変わってしまいました。
　そこでサンプルコードのChapter2までの出来上がったもので上書きしてChapter3から再度始めようと思ったのですが、グローバルナビゲーションが表示されなくなってしまっています。

### やった事
本(p.98)には表示されないのが正常で、表示させるには
`css/nav.css`の
```css
#global-nav #menu-item-home
```
をブラウザでソースコード表示した対応する部分のidの
```css
#global-nav #menu-item-数字
```
に書き換えると出来ると書いてありますが、書き換えても表示されません。

具体的には、ソースコード表示は
```html
（略）
<nav id="global-nav" class="menu-global-container"><ul id="menu-global" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-83 current_page_item menu-item-100"><a href="http://localhost/wordpress/">トップページ</a></li>
<li id="menu-item-109" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-109"><a href="http://localhost/wordpress/about/">会社概要</a>
<ul class="sub-menu">
	<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://localhost/wordpress/about/business/">事業紹介</a></li>
	<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://localhost/wordpress/about/history/">沿革</a></li>
	<li id="menu-item-110" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-110"><a href="http://localhost/wordpress/about/access/">アクセスマップ</a></li>
</ul>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-104"><a href="http://localhost/wordpress/mall/">モール開発実績</a>
<ul class="sub-menu">
	<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://localhost/wordpress/mall/tokyo/">汐留モール</a></li>
	<li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107"><a href="http://localhost/wordpress/mall/singapore/">ドリアンモール</a></li>
	<li id="menu-item-106" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-106"><a href="http://localhost/wordpress/mall/bangkok/">チャオプラヤモール</a></li>
	<li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://localhost/wordpress/mall/jakarta/">タムリンモール</a></li>
</ul>
</li>
<li id="menu-item-113" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-113"><a href="http://localhost/wordpress/archives/category/column/">コラム</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/wordpress/inquiry/">お問い合わせ</a></li>
</ul></nav>
（略）
```
となっていたので、
`css/nav.css`
```css
（略）
#global-nav #menu-item-home {
	background-image: url(../images/nav/menu_home.png);
	width: 194px;
}
#global-nav #menu-item-about {
	background-image: url(../images/nav/menu_about.png);
}
#global-nav #menu-item-mall {
	background-image: url(../images/nav/menu_mall.png);
}
#global-nav #menu-item-column {
	background-image: url(../images/nav/menu_column.png);
}
#global-nav #menu-item-inquiry {
	background-image: url(../images/nav/menu_inquiry.png);
	width: 194px;
}
（略）
```
を
`css/nav.css`
```css
（略）
#global-nav #menu-item-100 {
	background-image: url(../images/nav/menu_home.png);
	width: 194px;
}
#global-nav #menu-item-109 {
	background-image: url(../images/nav/menu_about.png);
}
#global-nav #menu-item-104 {
	background-image: url(../images/nav/menu_mall.png);
}
#global-nav #menu-item-113 {
	background-image: url(../images/nav/menu_column.png);
}
#global-nav #menu-item-103 {
	background-image: url(../images/nav/menu_inquiry.png);
	width: 194px;
}
（略）
```
としてみました。

何か分かることがありましたら教えてください。