イラストレーターやフォトショップでWindows更新後に文字化けしたときの対処法。

フォントフォルダに『msgothic.ttc』と『msgothic_数字.ttc』が混在していたら
数字がついている方を念のためバックアップしてから削除。
数字はゼロから順に番号付けされている。

１）レジストリを起動。

２）HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts内の
値の名前『ＭＳ ゴシック & ＭＳ Ｐゴシック & MS UI Gothic (TrueType)』を開きデータに
『msgothic_数字.ttc』と数字が付いていると思うので『msgothic.ttc』とする。
※値の名前は日本語で表記されている方を修正する。

３）変更したらレジストリを閉じてWindowsを再起動。

.flash {
position: relative;
padding-bottom:34%; /* ここで幅、高さを調整 */
padding-top: 0px;
height:100%;
overflow: hidden;
}

.flash iframe,
.flash object,
.flash embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
}

<div class=”flash”>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”100%” height=”317″ id=”top_index” align=”middle”>
<param name=”movie” value=”index.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<param name=”play” value=”true” />
<param name=”loop” value=”true” />
<param name=”wmode” value=”window” />
<param name=”scale” value=”showall” />
<param name=”menu” value=”true” />
<param name=”devicefont” value=”false” />
<param name=”salign” value=”” />
<param name=”allowScriptAccess” value=”sameDomain” />
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”index.swf” width=”100%” height=”317″>
<param name=”movie” value=”http://sugii-ueki.com/con5/files/1414/1630/4228/index.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<param name=”play” value=”true” />
<param name=”loop” value=”true” />
<param name=”wmode” value=”window” />
<param name=”scale” value=”showall” />
<param name=”menu” value=”true” />
<param name=”devicefont” value=”false” />
<param name=”salign” value=”” />
<param name=”allowScriptAccess” value=”sameDomain” />
<!–<![endif]–>
<a href=”http://www.adobe.com/go/getflash”>
<img src=”http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=”Adobe Flash Player を取得” />
</a>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</div>

html {
font-size: 62.5%;
margin-bottom:1px;
height:100%;
overflow-y:scroll;
}

body {
min-width:950px;
background-color:#fff;
color:#333;
margin:0px;
padding:0px;
font-size: 12px; font-size: 1.2rem; /* =12px */
line-height:1.6;
font-family:’Lucida Grande’, ‘Hiragino Kaku Gothic ProN’, ‘ヒラギノ角ゴ ProN W3’, ‘MS Ｐゴシック’,’MS PGothic’, sans-serif;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
font-size: 12px;
}
}

Webサイトの個人的な定義を考え直し。

グリッドシステムは960グリッドシステムの他、 レスポンシブでResponsive Grid Systemのチェック。
BootstrapとFoundationはとりあえず放置だけど扱うならFoundationの方がシンプルでいいかも。
Media-Queriesも一応お勉強。

PCサイトは近年モニターの解像度があほみたいに上がっているけど、
とりあえず960グリッドに沿ったデザインで作る。
Retinaは無視。

html5shivとCSS3 PIEでHTML5とCSS3をIE8以下に対応。
html5shivをダウンロード
CSS3 PIE

画像はCSS Spliteで作り伸縮させるものは個別で用意。

■ rem（応急用にひとまずIEに対応）
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

■ HTMLのmeta
<meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″ />

続きを読む →