表のCSSをコピーして他のページに貼り付けたのに同じ見え方にならない

MEMO

状況: 

あるページの表(table)のCSSをコピーして、

他のページにも同じ表を作成しようと思ったが、

PCサイトではCSSが適用されなかった。

スマホサイトでは同様の見え方になった)

理由: 

 cssの最後に張り付けたことがいけなかったようだ。

どこがおかしかったかは不明。

以下でとりあえず解決したので、OKとする。

 

 

解決方法:

 とりあえずコピーした元の表のCSSの真下に、

CSSを張り付け、classは違うので変更したら、

PCサイト、スマホサイトとも、表のCSSが適用された。

 

こういうので、数時間かかってしまったなー。

対策考えよっと。

スマホサイト: h2見出しが横にはみでる

MEMO

状況: 

PC用サイトのHPをもとに、スマホサイト作成時、

body全体を width:100% にしたが、

h2見出しが横にはみ出る 

理由: 

 

body(id="wrapper")全体は、100%にしたが、以下が理由のようだ。

1.bodyの中をヘッダー、コンテンツ、フッターと分けている

2.コンテンツをmainwrapとし、それをさらにmainwrap-left、mainwrap-rightに分けている

3.左サイドバーであるmainwrap-leftを非表示にした後、

  コンテンツ全体(id="mainwrap")に対し、width=100%にする必要があったようだ。

  予想だけど・・・。

解決方法:

 

/*■■■ 小画面:body(wrapper)に下記設定*/
/* mainwrapは別途設定必要あり*/
@media (max-width: 767px){
#wrapper{
width: 100%;
}
}

/*■■■ 小画面:画面サイズになるようにmainwrapに幅設定する*/
@media (max-width: 767px){
#mainwrap{
width: 100%;
}
}

スマホ下部に横スクロールバーがでてしまう(レスポンシブデザインで右側に余白ができる)

MEMO

状況:

 

スマホ用サイト(レスポンシブデザイン)作成時に、

下部に横スクロールバーが表示される。

画面内にサイトは収まっているのに、右側に余白・空欄が表示されている状況。 

理由:

不明のため、下記サイトを参照させていただいた。ありがとうございました!

[:a]横スクロールバーを消したい!【HTML+CSS】 | AKANEIRO.me

 

解決方法:

以下と最後の行に入力したら、余白が消えました。めでたしめでたし。

 

[css]
body{
overflow-x: hidden;
}
[/css]

【html】UTF-8で文字化け 理由 解決

MEMO:

<meta charset="UTF-8">

と設定したのに、

UTF-8設定では文字化けするので、Shift-JIS設定にしていた。

しかし、やはりUTF-8がよいようなので、変更したら文字化け再発。

 

理由:

Terapadの設定が悪かったようです。

 

解決方法:

Terapadの以下の設定を変更。

● 表示>オプション>文字コード>初期文字コード(c):>UTF-8N

● ファイル>文字/開業コード指定保存>文字コード(J):>UTF-8N

 

参照元

下記サイトのご教授で解決しました。ありがとうございます!!!

TeraPadでUTF-8N保存時に文字化け発生!原因はオプション画面の文字コード設定