出産前後の痔にはご注意!

<style>
.navi {
display:table;
}
.navi li:nth-child(3n+1) {
display:table-row;
color:#F00;
}
.navi li {
display:table-cell;
width:50%;
}

/* 色づけ */
* {margin:0;padding:0;list-style:none;}
.navi {width:600px;border-top:solid 1px #CCC;border-left:solid 1px #CCC;margin:0 auto;}
.navi li {border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:5px;}
</style>

<ul class="navi">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>

こうすると、1,4,7,10…番目の要素が改行されますが、
<li></li>に何も入れないようにしなければならず、
行き詰ってしまいました。

table要素で多段表示させることはできないのでしょうか?

A 回答 (3件)

質問内容を伺う限りでは float が適切な気がしますが、いかがでしょうか。


http://jsfiddle.net/cjq0zc6g/1/

---
.navi {
display: block;
width: 600px;
margin: 1em auto;
padding: 0px;
color: #F00;
}
.navi li {
float: left;
display: block;
margin: 0px;
width: 288px;
border: solid 1px #CCC;
}
---
    • good
    • 0
この回答へのお礼

やはりfloatが適切ですか。

table-cellだと縦幅を気にせず使えるので便利だったのですが、
一旦あきらめることにします。

回答ありがとうございました。

PS:http://jsfiddle.net/cjq0zc6g/1/
このツールいいですね。初めて知りました^^

お礼日時:2014/11/03 12:16

>table-cellで再現できないか調べています。


 出来ません。
 なぜ、table-cellの必要があるのでしょう。

この回答への補足

>なぜ、table-cellの必要があるのでしょう。

もう少しでできそうだからです。
そもそもtr要素の指定ができるわけですから、
うまく使えばいけるんじゃないのかって思うのがそんなに悪いですかね?

得意なコーディングばかりではなく、
システムを使えば、タグは変更できないのでCSSだけでレイアウト変更するといったケースは大いにありますが、
それらの際に非常に役に立つと思ったので、試行錯誤しています。

こちらに質問させて頂いたのも、試行錯誤しましたが行き詰ってしまい、諦めようと思いましたが
他の方から見れば意外に簡単に再現できるかもしれないと思い、質問させて頂きました。

可能性を広げて頂ける助言があることを期待しましたが、
これを使う必要があるのかという回答を執拗にお送りされる貴殿に少々げんなりしています。

できる事なら二度と関わりたくないので、回答はされなくて結構です。

ありがとうございました。

補足日時:2014/11/01 00:59
    • good
    • 2

明らかに変です。


<div class="nav">
 <ul>
  <li><a href="/a">a</a></li>
  <li><a href="/b">b</a></li>
  <li><a href="/c">c</a></li>
  <li><a href="/d">d</a></li>
  <li><a href="/e">e</a></li>
  <li><a href="/f">f</a></li>
 </ul>
</div>
じゃないかと、HTML5だと
<nav>
 <ul>
  <li><a href="/a">a</a></li>
  <li><a href="/b">b</a></li>
  <li><a href="/c">c</a></li>
  <li><a href="/d">d</a></li>
  <li><a href="/e">e</a></li>
  <li><a href="/f">f</a></li>
 </ul>
</nav>
となるだろうからして・・・。文書構造だけは落ちがないようにリンクまで書いてください。
 ひょっとして
<div class="nav">
 <ul>
  <li><a href="/a">a</a>
   <ul>
    <li><a href="/b">b</a></li>
    <li><a href="/c">c</a></li>
   </ul>
  </li>
  <li><a href="/d">d</a></li>
  <li><a href="/e">e</a></li>
  <li><a href="/f">f</a></li>
 </ul>
</div>
かも、文書構造は正確に!!
 デザインは文書構造に反するものではありえないので

 そのうえでどのように表示したいか・・
 少なくともdisplay:table-cellは要らないかと

この回答への補足

クラス指定がnaviとなっていたので、紛らわしいですね。
すみません。
目に入ったクラスをそのまま書き込んでしまいました。

こちらはナビゲーションではありません。

リストを縦に並べると横のスペースがあいてしまうため、
table、もしくはfloatで多段表示(今回は3列2段で表示)させていましたが、
table-cellで行えないものか調べています。

tr要素を入れると、その行は1列になってしまうため、
:afterなどの疑似要素などで試してみましたが、
枠の中から出せなかったため、tr指定ができませんでした。


<h3>タイトル</h3>
りんご ばなな いちご
もも  くり  かき

といった感じで<ul>だけで多段表示させたいです。



>>>少なくともdisplay:table-cellは要らないかと

table-cellで再現できないか調べています。
すみません。

補足日時:2014/10/30 14:40
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qdisplay:table-cell内でこんなに都合の良い改行は可能ですか?

display:table-cell内でこんなに都合の良い改行は可能ですか?

こんにちは。下のようにhtmlとCSSで定義しています。

<div class="parent">
<div class="child1">国</div>
<div class="child2">日本 中国 イギリス アメリカ ドイツ アラブ首長国連邦 メキシコ</div>
</div>

.parent{
display:table;
table-layout:fixed;
width:300px;
}
.child1{
display:table-cell;
width:100px;
}
.child2{
display:table-cell;
width:200px;
/*child2の横幅は全角文字6文字分*/
}

これを下記のように出力したいです。

ブラウザ
←child2の横幅は全角文字6文字分→
---------------
 |日本 中国
 |イギリス
国|アメリカ
 |ドイツ
 |アラブ首長国
  連邦
---------------
表示がうまくいってないかもしれないので言葉で説明します。

・child2の横幅は全角文字6文字分です。
・全角6文字以下の国名は改行無しで表示。
・日本と中国のように全角合計4文字で間が半角1文字という合計の全角6文字以内の場合、両者を同じ行に表示(半角スペースで分ける)
・アラブ首長国連邦のように全角6文字を超える場合は、前の国名の次に表示して、はみ出す分は改行して書く。


ググっていて、display:table-cell;を利用している場合は改行は普通と異なるとか見たり、
word-wrap:、overflow-wrap:、white-space:、text-wrap:、word-break:などを駆使してみましたが、
希望のことは出来ませんでした。

こんな都合の良い改行、可能ですか?

display:table-cell内でこんなに都合の良い改行は可能ですか?

こんにちは。下のようにhtmlとCSSで定義しています。

<div class="parent">
<div class="child1">国</div>
<div class="child2">日本 中国 イギリス アメリカ ドイツ アラブ首長国連邦 メキシコ</div>
</div>

.parent{
display:table;
table-layout:fixed;
width:300px;
}
.child1{
display:table-cell;
width:100px;
}
.child2{
display:table-cell;
width:200px;
/*child2の横幅は全角文字6文字分*/
}

これを下記のよ...続きを読む

Aベストアンサー

仕様書を通読されたら気づかれると思います。仕様書全体にわたるコンセプトが理解できると思います。いくつか例を揚げておきます。
 必ずリンク先を読んでください。--理解できると思いますし、今後とも参考になるでしょう。
HTML4.01
『2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
 DIVやspanは、それ自体意味を持たないマークアップですから、idやclassを併用する必要がありました。その反省から・・
『HTML5“とか”アプリ開発入門(1):Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - @IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )』
 の中ほど・・「【問題2】文書内に埋め込まれた「意味」が不明確」

HTML5
『NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element )』
 (訳)注意:著者には他により適切な要素ないときの最後の手段としてdiv要素を使用することが強く奨励します。div要素の代わりにより適切な要素を使用することは、読者のた​​めにはより良いアクセシビリティを作者のためには簡単な保守性につながります。
 他にも、HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ )とか・・

 HTML5が勧告(2014/10/28)されましたが、class名はHTML5の新しい要素を参考にすると良いでしょう。

さきのHTMLをHTML5で書くと
<figure>
 <h2>国</h2>
  <p>
    <span class="country">日本</span> <span class="country">中国</span> <span class="countr">イギリス</span> <span class="country">アメリカ</span> <span class="country">ドイツ</span>
  </p>
</figure>
 となります。figureをどういう場面で使用するかは調べてください。

 spanはHTMLに用意されていない行内要素をclassなどをつけて識別するためです。

★HTML5だと、
body
 |-- +header
 |-- -section
   |-- figure
     |-- h2
     |-- p
       |-- span .country

section figure p span.country{}
 のセレクタをご覧になると分かるように、メンテナンス性が向上するのは実際にウェブを開発されていると分かると思います。他人も自身も半年後に、HTMLの変更、デザインの変更などのメンテナンスをする事を想像されると良いでしょう。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
 でチェック済
★タブは_に置換してあるので戻す。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css" media="screen">
<!--
div.section div.figure{
_width:10em;
_margin:0 auto;
_position:relative;
_border-style:dotted none;
_border-color:gray;
_border-width:1px 0;
}
div.section div.figure p{
_margin:0 0 0 5em;
_text-indent:0;
_line-height:1.6em;
}
div.section div.figure h3{
_margin:0;
_font-size:1.2em;
_position:absolute;
_top:0;left:0;
_width:4em;height:100%;
_display:table-cell;
_text-align:center;
_border-right:gray 2px solid;
}
div.section div.figure p span.country{
_display:inline-block;
_max-width:6em;
_background-color:yellow;
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
__<div class="nav"><!-- ここはナビゲーション(ヘッダ内のあるのでグローバル) -->
___<ul>
____<li><a href="/">トップ</a></li>
____<li><a href="/products">製品</a></li>
___</ul>
__</div>
_</div>
_<div class="section">
__<h2>本文</h2>
__<div class="figure">
___<h3>国</h3>
___<p>
____<span class="country">日本</span> <span class="country">中国</span> <span class="country">イギリス</span> <span class="country">アメリカ</span> <span class="country">ドイツ</span> <span class="country">アラブ首長国連邦</span> <span class="country">メキシコ</span>
___</p>
__</div>
_</div>
_<div class="footer">
__<h3>文書情報</h3>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>

>htmlには装飾などデザインは書いていないつもりでした。ですので、『全てCSSに書いた』つもりでした。
<div class="parent">
 <div class="child1">国</div>
 <div class="child2">
 後日、分かりますか?
<figure>
 <h2>国</h2>
  <p>
    <span class="country" title="Japan">日本</span>
たとえ、今回はデザインで<span class="country">が必要ないにしても、書いておくと役立つ

仕様書を通読されたら気づかれると思います。仕様書全体にわたるコンセプトが理解できると思います。いくつか例を揚げておきます。
 必ずリンク先を読んでください。--理解できると思いますし、今後とも参考になるでしょう。
HTML4.01
『2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q「CSS」リストの2段組どのように組まれていますか?(同一カテゴリの場合)

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ...続きを読む

Aベストアンサー

確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q背景画像を反転させる方法

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこの反転させた画像を背景に使いたい場合、どうすればいいのでしょう?
そもそもそのようなことが可能なのでしょうか?

もし可能でしたら具体的にどのような記述をすればいいのか教えて頂きたいのです。

それとfilterはIE独特の要素と聞いていますが、filter: fliphもそうなのでしょうか?
しかしながらfilter: alphaに関しては

filter: alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;

と記述すればFirefoxなどでも透明効果が出るようです。

filter: fliphもIE独特の要素ならばfilter: alphaのように他のブラウザでも対応させる方法があるのでしょうか?


長々と書いてしまいましたが、知りたいことを要約すると

1.cssで画像を反転させ、それを背景画像に使うことは可能か否か
  可能ならばどう記述すればよいのか

2.filter: fliphで画像を反転させた場合、IE以外でのブラウザで反映されるか否か
  また反映されないのなら、対応させる方法はあるのかどうか

と言うことです。

1と2、分かる方だけでも結構ですのでよろしくお願いします。

背景画像を反転させる方法

いつもお世話になっています。
今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。
そこでcssの記述について教えて頂きたいのです。


背景の画像を右下に固定する場合、cssの記述は、

body{
background-image:url("×××.gif");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
}

としますよね?

後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。

ではこ...続きを読む

Aベストアンサー

1.否
2.否

対応策は予め反転させた画像を別途作っておく事です。

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む


人気Q&Aランキング