16/01/20 23:49:15.83 .net
>>96
XHTMLなら大文字/小文字を区別するので <!DOCTYPE html> でなければNGという事
小文字がダメ (<!DOCTYPE HTML> が良い)わけではない
101:Name_Not_Found
16/01/21 00:05:36.59 .net
>>73,94
事前に URLﾘﾝｸ(jigsaw.w3.org) で検証した方が良い。
color と background-color は同時指定しないと意図しない動きになる場合がある(ex: "color: gray# で文字が見えない)。
それからグレーアウトは読み取り専用のフォームコントロールに見えるから色合いが良くないと思うな。
URLﾘﾝｸ(jsfiddle.net)
102:73
16/01/21 00:36:10.65 .net
>>101
うわ！すばらしい。ありがとうございます。案内いただいた検証サイトも利用します。
例ではgrayとしましたが、実際はもっとふんわりグレーのつもりです。
入力フォームの周囲が濃い色なので、デフォルトの#ffffffだとコントラストきつくて、なんとかならないかと思ってました。
103:Name_Not_Found
16/01/21 09:51:04.31 .net
最近になってhtml5を勉強し始めたんだけど
headerやfooterはセクショニングコンテンツじゃないから
article、section、nav、asideなどのセクショニングコンテンツを入れてはいけない
でも仕様が変わってheaderにnavだけは入れてもOKってことになった
ってことでいいのです？難しいですな！
104:Name_Not_Found
16/01/21 20:46:27.22 .net
よくサイトの内部リンクとかに「文字を重ねた画像」（例：URLﾘﾝｸ(thinkit.co.jp)）を見かけます。
positionを使って文字の位置を調整するとしても、画像と文字の適切なマークアップはどのようにすればいいのでしょうか。
figureタグやdlタグなどいろいろありますが、何か基準とかはないものでしょうか。
サイト内への単純なリンクであればAタグで画像と文字を囲んで作るのが妥当なのでしょうか。
105:Name_Not_Found
16/01/21 21:02:44.85 .net
<a>
<div>
<h2>記事タイトルト</h2>
<p>記事の概要</p>
</div>
</a>
ブログとかの記事一覧での表示なら、こういうののdivの背景に記事内の見出し画像が自動で入ったりするだけじゃないの？
単に画像にリンク貼って、それにコメント付けるだけなら画像を表に出しててもいいかもしれないけど。
106:Name_Not_Found
16/01/21 21:47:48.64 .net
>>104 これとか？
URLﾘﾝｸ(youtu.be)
107:Name_Not_Found
16/01/22 09:52:58.20 .net
>>105
>>106
レスありがとうございます
お二方のアドバイスを参考に作ってみます！
108:Name_Not_Found
16/01/22 12:55:41.90 .net
javascriptとかcssとかスクリプト使わず
一つのhtmlだけ使用して
そのhtml内のボタンをクリックした時にだけ
それぞれのボタンに組み込まれた画像一覧を読み込むようにする方法教えて
一気に画像読み込んだら読み込む時間が邪魔だからクリック時にだけ画像読み込むようにしたい
そもそも複数htmlでページ構成じゃなく一つのhtmlでそういう事が可能ならサンプルでも教えてほしい
109:Name_Not_Found
16/01/22 13:23:20.60 .net
スクリプトなら簡単だけど
スクリプト使えない理由は？
110:Name_Not_Found
16/01/22 14:27:05.75 .net
>>108
不可能
111:Name_Not_Found
16/01/22 14:36:27.50 .net
>>108
不可能はないぞ！
おまえさんが新たなるHTMLを創造するのら！
112:Name_Not_Found
16/01/22 14:44:43.29 .net
スクリプトを使えば軽いし効率もいいし読み込むタイミングだって調整できるんだが、
そんな過酷な条件下で画像一覧を表示しなきゃいけないサイトって何なんだ？
113:Name_Not_Found
16/01/22 14:52:51.02 .net
>>108
既存の環境では不可能。
お前が専用ブラウザ作るしか無い。
HTMLにそんな仕様無い
114:Name_Not_Found
16/01/22 14:52:55.55 .net
闇サイトだよ…
すごいよ？
115:Name_Not_Found
16/01/22 15:19:12.27 .net
>>112
横からだけど記述例あるサイトある？
116:Name_Not_Found
16/01/22 15:20:13.93 .net
URLﾘﾝｸ(niwakasoft.jp)
↑このサイトのインライン要素のところに
「単体での使用は出来ず、必ずブロック要素の中に存在しなければいけないタグであり」
ってあるけど↓みたいなのはブロック要素の中にあるっていえますか？
<aside>
<a href="hoge.com">hogehoge</a>
</aside>
asideはそもそもブロック要素なんですか？
117:Name_Not_Found
16/01/22 15:30:25.75 .net
>>115
記述例じゃなくて、そういうギャラリー系のスクリプトはたくさんあるでしょ。自分で探してみたら？
118:Name_Not_Found
16/01/22 15:46:00.63 .net
まあスクリプト使用だとファイル構成ごちゃごちゃするから極力使いたくないってのはあるね
119:Name_Not_Found
16/01/22 15:48:33.35 .net
えっ
あぁ、ここ初心者スレか
120:Name_Not_Found
16/01/22 16:12:06.42 .net
>>119
>>1
121:Name_Not_Found
16/01/22 20:40:25.35 .net
>>116
pで囲うべき
122:Name_Not_Found
16/01/23 00:55:09.35 .net
ふむー
123:Name_Not_Found
16/01/23 01:29:43.48 .net
>>121
何故
124:Name_Not_Found
16/01/23 08:12:34.62 .net
まあ常識的に考えてaside内にaタグ1つだけなんて普通ないだろうし
125:Name_Not_Found
16/01/23 08:35:28.65 .net
>>116
記事を最後まで読んで。下記一文がある。
「今回の記事に該当するHTMLの文法は4.01基準（XHTMLも）となります。HTML5になって上記のルールが変更されているものも多々ありますので、ご注意下さい。」
126:Name_Not_Found
16/01/23 10:13:49.95 .net
asideはもろにhtml5です
127:Name_Not_Found
16/01/23 20:33:00.95 .net
>>124
別にあり得るでしょ。関連記事や参照元へのリンクに使ったっていいし。
128:Name_Not_Found
16/01/23 21:23:05.85 .net
揚げ足取りはいいからさ、習慣としてつけとくべきだと思うよ
pタグで囲うくらい手間じゃないし
129:Name_Not_Found
16/01/23 21:46:31.28 .net
Pで囲わないとどうなるの？具体的に。
130:Name_Not_Found
16/01/23 21:59:00.24 .net
asideに広告入れてるだけだからp付けてないけどマズいんか？
131:Name_Not_Found
16/01/23 23:32:10.23 .net
レスポンシブデザインについてなのですが
URLﾘﾝｸ(imgur.com)
のようにするにはどうしたらいいのでしょうか?
近いことはできるのですが特定の画像の頭の位置と文章の頭の位置のをそろえることができないです・・・
132:Name_Not_Found
16/01/23 23:47:43.94 .net
各ボックスの高さを固定でoverflow:autoでスクロールさせるか
jquery.heightLineのようなjsを使って横に並ぶ要素の高さを揃える
133:Name_Not_Found
16/01/23 23:49:07.35 .net
うーんこれデザインが悪いんじゃないの
いざとなったらdisplay:noneで要素の表示切り替えればできなくはないだろうけどさ、
近いとこまでいけたソース見てみたい
134:Name_Not_Found
16/01/24 00:10:51.56 .net
>>131
単純にスマホ用を２列にした方がよくない？
画像のサイズが同じなら、結局PC用の方で、右の文章エリアの方が縦長くなっちゃうでしょ。
何の画像か分からんけど、そっちの方が閲覧者にも優しい気がする。
135:Name_Not_Found
16/01/24 00:56:56.82 .net
>>132 そんな方法があるのですか試してみます。
>>133 Dreamweaverでそれっぽくレイアウトと整えただけのものなのですが
html
URLﾘﾝｸ(pastebin.com)
CSS
URLﾘﾝｸ(pastebin.com)
URLﾘﾝｸ(pastebin.com)
JavaScript
URLﾘﾝｸ(pastebin.com)
>>134 一度スマホ用を2列でやったのですが画像が小さくて見づらいので仕方なく1列にしました
PC表示に合わせていて文章がそこまで長くないので、スマホ用のほうが文章エリアが長くなってしまいます
136:Name_Not_Found
16/01/24 12:37:13.44 .net
>>131
PC版の画像と文章の対応関係がわかりづらいと思う。
スマホ版をベースに float: left; で流し込むと可変的でわかりやすいと思うけど、どう？
>>135
セキュリティfixのなくなった IE6,IE7,IE8 もサポートしてるの？
new ActiveXObject("Microsoft.XMLHTTP"); は保守されてないから書き直した方がいいよ
URLﾘﾝｸ(blogs.msdn.com)
137:Name_Not_Found
16/01/24 12:40:15.84 .net
どうしてもみづらいなら文章を画像の下に持ってきて float: left するとか
media query を使うとか
138:Name_Not_Found
16/01/24 18:16:10.31 79QiNLnu.net
とあるサイトのソースを見ていたら
<meta name="fb_admins_meta_tag" content="hogehoge"/>
という記述がありました。
facebook関連かと思いますが、どのような用途のものなのかググっても情報が極端にありません。
みなさんご存知ですか？
139:Name_Not_Found
16/01/24 18:38:55.40 .net
それはおまえ…
140:Name_Not_Found
16/01/24 19:16:52.49 .net
>>139
分からないんでしょ？
141:Name_Not_Found
16/01/24 21:48:20.89 .net
>>136 float: left もやってみます
IE6,IE7,IE8はサポートするつもりはなく設定し忘れていて、自動で書き出されたものに標準で入ってしまっているだけなので当該部分は削除します。
>>137 @media only screen and (min-width: ○○px) と入れてあるのでmedia queryのつもりだったのですが違うのでしょうか?
142:Name_Not_Found
16/01/24 22:01:13.96 .net
元々のソースがごちゃごちゃしてるね
白紙の状態から必要な物だけ追加していった方がいいよ
143:Name_Not_Found
16/01/24 22:38:58.03 .net
そうですね、白紙からから一度作り直します。
それとMicrosoft.XMLHTTPはMsxml2.XMLHTTP.6.0に差し替えるだけでよいのでしょうか？
IEについては全く詳しくなくて・・・
144:Name_Not_Found
16/01/24 23:22:57.75 .net
>>143
3.0 も必要だけど、IE6 をサポートしないなら ActiveXObject が必要ない。
そもそも、Respond.js は IE8- 対策だと思うけど、本当に必要なの？
145:Name_Not_Found
16/01/24 23:25:51.10 .net
個人サイトは旧式IE対応とか考えなくていいお
146:Name_Not_Found
16/01/25 00:08:55.79 .net
>>144
一応VistaがIE7から始まっているのと身内にVista使ってる人がいるのを見ると、IE7からサポートしたほうがいいのか悩んでいます。
本当はそんなものの互換性なんて消し去りたいのですが、仕方なく入れてます。
147:Name_Not_Found
16/01/25 00:12:12.48 .net
8ならまだしも7とかどんな罰ゲームだよ
148:Name_Not_Found
16/01/25 00:17:22.33 .net
>>145 このサイトを作ってる動機は、とある昔作られた解説サイトの表示が崩れてるので、それがちゃんと見れるようにしようということなので表示が崩れてしまうのはちょっと・・・
149:Name_Not_Found
16/01/25 00:43:49.77 .net
>>146
ごく少数の旧式ブラウザに対応するよりも、サポート切れたブラウザのアップグレードを薦める方がよほど親切。
150:Name_Not_Found
16/01/25 00:52:23.04 .net
>>149 そうですか。 悩んでいましたがIE8以前の対応はせずにそうします。
151:Name_Not_Found
16/01/25 01:12:31.14 .net
あとは安藤ロイドか
152:Name_Not_Found
16/01/25 01:16:50.77 .net
>>138をおねがいします
153:Name_Not_Found
16/01/25 07:08:18.14 .net
それはおまえ…
154:Name_Not_Found
16/01/25 13:02:26.47 .net
質問が難しかったですか？
155:Name_Not_Found
16/01/25 13:12:38.31 .net
>>152
facebookのOGP設定だと思うが、書式が古いと思う。
今、そんな書き方していないからね。
【OGPとは】
OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。
シェアされたときに、URLだけの場合より目立つためクリック率が上がります。
156:Name_Not_Found
16/01/25 13:22:43.28 .net
最近はどこのサイトもレスホンシブデザインをこぞって採用してるけど
なんかどこも色違いスキン変えただけで同じデザインに見える
テーブルレイアウト全盛の頃の方が個性があった
157:Name_Not_Found
16/01/25 13:25:10.56 .net
なんとなく分かる
でもあんな不毛な苦労はもう嫌だｗ
158:Name_Not_Found
16/01/25 13:52:09.26 .net
そういうのは、レイアウトやデザインだけが目立って、
内容が入ってこないサイトというわけで、いいサイトとは言えないというのが今時だからね。
その考え方は、オレも納得した。
だから、見た目が似ているサイトが多くていい。
内容を伝えるという機能を優先すれば当然の事。
159:Name_Not_Found
16/01/25 14:44:03.55 .net
見た目が似ていて内容も似ているサイト多いよね
160:Name_Not_Found
16/01/25 14:47:20.33 .net
「あー、WPの○○テンプレ使ってますね」
「あーWIXですね」
「あーBINDですね」
ってサイト多いよね
161:Name_Not_Found
16/01/25 14:51:38.17 .net
天ぷら食べたい
162:Name_Not_Found
16/01/25 15:20:17.00 .net
そりゃ同じサービスの色違いテンプレ使ってたり、WPだってアフィとか対応した日本語のものは選ぶほどないからね。
163:Name_Not_Found
16/01/25 17:38:37.20 .net
>>146
レシポンシブがどうこうというより、テンプレートエンジンが進化してきて安易にテンプレートそのままで制作する人が増えたのが原因な気がする
164:Name_Not_Found
16/01/25 18:20:36.64 .net
>>163
技術の進化は使用者をダメ人間にする場合があるよね
165:Name_Not_Found
16/01/25 18:41:22.77 .net
まぁでも最後にモノを言うのは中味だし、ある程度はしょうがないんやろね。
服装に関心ない人もいるようなもん?
166:Name_Not_Found
16/01/25 19:14:48.48 .net
大した事ねー奴らが上から目線になれるんだからいいじゃんｗ
167:Name_Not_Found
16/01/25 19:34:21.43 .net
ウェブサイト内で使用するパーツ画像（ロゴや見出し文字やバナー）について教えてください
（スレ違いでしたら誘導していただけるとありがたいです）
１０年近く前に使ったサイトでは、何も考えずにGIFで作っていましたが、最近はPNG形式のものがほとんどな気がします
たとえば、うちのサイトのロゴを確認したところ、使用している色数は190色程度でした。
こういったものを、あえてPNGで作り直すメリットはありますでしょうか？
168:Name_Not_Found
16/01/25 19:46:11.46 .net
>>167
その色数ならないんじゃないかな
169:Name_Not_Found
16/01/25 20:21:41.80 .net
>>167
作り直すというか、画像変換ソフトでPNGに変換してみて、サイズが軽くなったら採用すればいいんじゃない？
あと、画像があまりにも古い場合、ビット数によっては新しめのブラウザで透過部分が上手く表示されない事がある。
170:167
16/01/25 20:45:39.46 .net
>>169
画像変換はフォトショでもOKですか？
それとも専用のソフトがよいのでしょうか
171:Name_Not_Found
16/01/25 20:48:55.83 .net
素朴な疑問で、たとえば
URLﾘﾝｸ(radiko.jp)
ラジコの左上のロゴはPNGだけど、どう見ても256色以上は使用しておらず
GIFではなくPNGにしているのはなぜなんだろう？
172:Name_Not_Found
16/01/25 20:53:08.20 .net
背景透過ちゃいますか。
173:Name_Not_Found
16/01/25 21:11:24.61 .net
>>171
GIF PNG JPGの特徴をお勉強しておいで
174:Name_Not_Found
16/01/25 22:57:14.73 .net
別にGIFでいいけど
“GIFに代わる画像形式として、W3Cが開発、策定を行い、インターネット標準フォーマットとしてPNGを推奨しています。”
とかあるので、制作業者がPNGを好んで使って普及したのだと思う
175:Name_Not_Found
16/01/25 23:01:12.35 .net
PNG is NOT GIF
176:Name_Not_Found
16/01/25 23:13:20.54 .net
>>171
未検証だけど、ツートンカラーだから256色以内だと安易に考えてそう
177:Name_Not_Found
16/01/25 23:22:16.75 .net
>>171,>>176
単純に二色ってことはないだろうが、256以上にはどう見て見えないだろｗ
17色、透過も使ってないみたいだよ
178:Name_Not_Found
16/01/26 00:01:06.62 .net
別に決まりはないんだから、どの形式使われてても不思議じゃないでしょｗ
179:Name_Not_Found
16/01/26 00:27:52.89 .net
>>177
わかってないみたいだけど、256色以内なら何色でも使えるわけではないでしょ？
180:Name_Not_Found
16/01/26 00:39:20.42 .net
みんな落ち着けよ。板違いだぞ。
今はpngとjpg使うのが主流なんだよ。それだけの話。
181:Name_Not_Found
16/01/26 00:59:37.27 .net
>>179
？？？？？？？
182:Name_Not_Found
16/01/26 01:19:49.02 .net
>>179
なにいってんの？
gifは256色以内ならどの色でもつかえるよ？
183:Name_Not_Found
16/01/26 02:02:29.58 .net
>>179恥ずかしい奴
184:Name_Not_Found
16/01/26 02:07:58.72 .net
ああああああああああああああ [ 01.01.2016 ]
という文があって、文の長さによって文末の日付途中で改行されてしまうのを防ぎたいのですが
どうしたらよいでしょうか？
ああああああああああああああ
[ 01.01.2016 ]
文が長くなったときはこのようになってほしくて
ああああああああああああああ <wbr>[ 01.01.2016 ]
としてみましたが
ああああああああああああああ [
01.01.2016 ]
のように改行されてしまいます。
括弧の前後の半角スペースに反応してしまってる気がするのですが・・
よろしくお願いします
185:Name_Not_Found
16/01/26 02:22:06.82 .net
>>179は、GIFにはセーフカラーしか使えないと思ってるんだろうな
186:Name_Not_Found
16/01/26 03:13:34.77 .net
>>184
<p>ああああああああああああああ <time datetime="2016-01-01">[ 01.01.2016 ]</time></p>
time {display:inline-block}
187:Name_Not_Found
16/01/26 14:29:02.28 FAPnlu4f.net
質問させて頂きます
URLﾘﾝｸ(edge.sincar.jp)
このサイトを参考にさせていただいて、オリジナルの画像をツイッターボタンに設定しようとしているのですが
固定URLやテキストではなく、設置ページの情報をツイート画面に表示させられますか？
公式ボタンをいじってみたりしたのですがうまくいきませんでした
ご存知の方はご教授お願いします。
188:Name_Not_Found
16/01/26 14:46:08.89 .net
>>179
わかってないみたいだけど、GIF画像は256色以内ならどの色でも使えるよ？
189:187
16/01/26 14:47:52.42 .net
すみません。
自己解決しました。スレ汚し失礼しました。
190:Name_Not_Found
16/01/26 14:55:34.02 .net
URLﾘﾝｸ(radiko.jp) を gif に変換すると変色するのはなぜでしょうか？
191:Name_Not_Found
16/01/26 15:00:28.98 .net
変色しませんよ
192:Name_Not_Found
16/01/26 15:10:42.72 .net
>>188
すでに書いてある事を得意げに書かなくていいよ
193:Name_Not_Found
16/01/26 15:12:55.30 .net
そろそろ板違いですけど、こういうのは聞こえないんだろうなぁ
194:184
16/01/26 15:14:57.11 .net
>>186
なるほど、日付をdisplay:inline-block してやるといけますね
ありがとうございました
195:Name_Not_Found
16/01/26 15:27:14.46 .net
>>191
Pixia v6で保存するとオレンジ色に変色しますが、何のソフトで変換したら変色しませんか？
196:Name_Not_Found
16/01/26 15:52:13.78 .net
フォトショ
197:Name_Not_Found
16/01/26 16:26:58.29 .net
>>196
Photoshopは持っていません。
フリーソフトでは出来ませんか？
198:Name_Not_Found
16/01/26 16:36:32.16 .net
いいかげんスレ違いすぎるで
怒るで(´・ω・｀)
199:Name_Not_Found
16/01/26 16:45:11.29 .net
知恵袋で袋叩きにされてこい
200:Name_Not_Found
16/01/26 20:24:20.78 adzUb7SG.net
テーブルのセル（td）にあるリンクの範囲をセル全体にしたいんだけど
リンクのテキストがセルの上部になってしまいます
中央にセルの持っていくにはどうすればいいんですか？
ソースはこれです。
<style type="text/css">
a{
display:block;
width:100%;
height:100%;
}
a:hover{
background-color:#00ff00;
}
</style><TABLE BORDER="1">
<TR>
<TD width="200" height="100"><A HREF="test.html">てすと</A></TD>
</TR>
</TABLE>
201:Name_Not_Found
16/01/26 20:33:29.15 .net
>>200
a{
display:table;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
a:hover{
background-color:#00ff00;
}
<table border="1">
<tr>
<td><a href="test.html">てすと</a></td>
</tr>
</table>
202:Name_Not_Found
16/01/26 20:36:37.24 .net
>>200
書き換えてあるけどdisplay:block;でいい
203:Name_Not_Found
16/01/26 22:10:49.85 .net
rubyタグ感動した！
でも物書きじゃ無いから使うとこない。使いたい……
204:Name_Not_Found
16/01/26 23:05:57.25 .net
>>200
セルのパディングはゼロになってる?
205:Name_Not_Found
16/01/26 23:15:21.46 .net
CSSのコメントアウトで使ってはいけない漢字？があると聞いたのですが
事実でしょうか？
もしあるのならそれはどのような字でしょうか？
206:Name_Not_Found
16/01/27 00:44:28.24 .net
>>205
ソースは？
207:Name_Not_Found
16/01/27 01:00:13.43 .net
おたふく
208:Name_Not_Found
16/01/27 01:18:34.88 .net
どこ？
URLﾘﾝｸ(www.google.co.jp)
209:Name_Not_Found
16/01/27 01:28:08.57 .net
>>205
有能な俺がググったら１秒で見つけられるんだよなぁ。ここが素人との違い。
URLﾘﾝｸ(q.hatena.ne.jp)
210:Name_Not_Found
16/01/27 01:45:34.05 .net
Mac版のIEだけかいな、なーんだ
211:Name_Not_Found
16/01/27 01:56:04.65 .net
>>209
そこしか見当たらないのが信憑性に欠けるのだよ
212:Name_Not_Found
16/01/27 02:07:55.25 .net
>>209
その記事で該当しているのは有名な Shift_JIS で2byte目が5cになる文字じゃないか
URLﾘﾝｸ(ja.wikipedia.org)
@charset "Shift_JIS"; を指定するなり、"Content-Type: text/css; charset=Shift_JIS" を指定するなり、文字コードで UTF-8 を使うなり、いくらでも対策があるだろ
213:Name_Not_Found
16/01/27 02:22:58.44 .net
心配するほどの事じゃないみたいだな
214:Name_Not_Found
16/01/27 12:27:17.31 .net
.abc:after {content: attr(href);}
W3Cで「文法解析エラーが発生しました attr(href) 」と出るが何か根本間違ってる？
215:Name_Not_Found
16/01/27 12:37:05.49 .net
content: "";
216:Name_Not_Found
16/01/27 13:11:34.87 .net
2016年になってもShif_JISの話題が出るとはなw
オレの職場からは、とっくに撲滅したが
217:Name_Not_Found
16/01/27 13:19:42.26 .net
>>215に対する突っ込みはとりあえず置いといて
>>214であっていると思うけどね
.abcをa.abcとちゃんと要素名をつけてもエラーになるのかな
218:Name_Not_Found
16/01/27 20:28:09.13 .net
>>217
a.abc、#、a、::after（コロン2つ）、どれでもエラーになります。
リファレンス各サイトの例そのままでも出るので仕様変更かなにかかな。
URLﾘﾝｸ(jigsaw.w3.org)
219:Name_Not_Found
16/01/27 21:04:28.62 .net
<style type="text/css">
<!--
.table01{
width:800px;
margin:0 auto;
position: relative;
}
.toplogo{
position:absolute; top:40px; left:40px;
} /* 以下では省略 */
-->
</style>
<body>
<div class="table01">
<table border="0" cellspacing="0" cellpadding="0" width="800">
<tr><td align="center">○</td></tr>
<tr><td align="center">△</td></tr>
<tr><td align="center">□</td></tr>
</table>
</div>
</body>
---
tableを中央配置したく、上記でうまく表示されていいるのですが
divとtableの双方で800px指定しているのがどうも気になって（重複指定のようで）、すっきりさせたいのですが
例えばdivの800pxを削除したり、100%に変えると、tableが左に寄ってしまいます。
どの様にすればすっきりするでしょうか？
220:Name_Not_Found
16/01/27 21:23:21.55 .net
div削除
tableのwidth属性削除
tableのclass属性に.table01
221:219
16/01/27 21:30:22.18 .net
>>220 ありがとうございます!
後だしでスミマセン
だいぶ端折りましたが、.table01内にはimgやpも少しあります
なのでdivは必要なんです
222:Name_Not_Found
16/01/27 21:36:38.53 .net
>>219
tableタグにいろいろな属性をつけるのはちょっと古い手法だからそっちを削除し
tdのalign属性も削除してすべてスタイルシートの方で指定した方が良いかと
.table { width: 800px; margin: 0px auto; }
table { width 100%; border-collapse: collapse; }
td { padding: 0px; text-align: center; }
みたいな感じで
223:Name_Not_Found
16/01/27 21:39:20.48 .net
ちょっとミス 3行目は
.table01 { width: 800px; margin: 0px auto; }
4，5行目も
.table01 table { width 100%; border-collapse: collapse; }
.table01 td { padding: 0px; text-align: center; }
としておいた方がいいかも
224:219
16/01/27 22:13:10.01 .net
>>223
ありがとうございます
書き直して見ます
初歩的なことですが、
tableのボーダー幅を0かつ非表示にしているのは
border-collapse: collapse;
の部分でしょうか？
225:219
16/01/27 22:21:17.34 .net
.table01 table {border-collapse: collapse; }
.table01 td { }
として
各々、border:*px 等指定しなければ、table border=0 と同じと考えてよいでしょうか？
226:Name_Not_Found
16/01/27 22:53:32.17 .net
border:0px は不要？
227:Name_Not_Found
16/01/27 23:20:04.42 .net
>>221
なんだdivは必要なのか
まあ要点はブロック要素を左右中央配置したい場合は
「その要素の幅を明示的に指定する」「左右マージンをautoにする」
ということだけだ
>>220も>>222,223も要するにそういうことを言っている
228:Name_Not_Found
16/01/28 00:32:14.94 .net
imgにborder指定しない場合、ブラウザの仕様によって0だったり表示されたりと聞きましたが
勝手に表示される今時のブラウザってありますか？ＩＥ11とクローム48では表示されないようです
229:Name_Not_Found
16/01/28 00:48:12.70 .net
気にしなくていいんじゃない
230:Name_Not_Found
16/01/28 00:54:58.39 .net
>>228
今どきのブラウザでは聞かないね
IE6とかそういう時代の話
231:219
16/01/28 01:18:20.39 .net
>>227 ありがとうございました。要点、理解しました。書き直して表示の確認もできました。
>>224-225で書きましたが、
<table border=0>をCSSで書き換える場合、
table {border-collapse: collapse; }
とだけ書けばよく、あえて border:0; のような記載は不要なのでしょうか？
232:222
16/01/28 01:24:24.03 .net
>>224,225
ボーダーの初期値はボーダーそのものが「非表示」です。
よってtableタグのborder属性を0に指定した場合と実質同じことになりますので
特にborder値を指定する必要はありませんが、気になるのなら念のためtableタグの
スタイルにborder:0px;を指定しておいてもいいでしょう。
border-collapseはボーダー幅の指定ではなくセル間のマージンの指定であり、
初期値がseparateのブラウザが主流なので、そのままではセル間に少し空き
スペースが入ってしまうのでcollapseを指定しておきます。これがtableタグの
cellspacing属性=0に対応しています。
最後に、tableタグのcellpadding属性=0はtdタグにスタイルでpadding:0px;を
指定することで同じ効果になります。
233:Name_Not_Found
16/01/28 01:27:55.04 .net
border: 0; は必要
collapseはボーダー消すための指定じゃなくてセルとセルくっつけるためのもの
>>222,223は単に書き忘れじゃない？
234:Name_Not_Found
16/01/28 01:30:33.61 .net
失礼、言葉足らずでした。
tableタグのスタイルでボーダー幅を指定した場合は、テーブルの外側のボーダー幅を指定
したことになり（要はブロック要素の周りのボーダー幅を指定したこと）、
各セルのボーダーはtdタグの方のスタイルで指定してください。
235:219
16/01/28 01:36:22.35 .net
table01 { width: 800px; margin: 0px auto; }
.table01 table { width 100%; border-collapse: collapse; border: 0;}
.table01 td { padding: 0px; text-align: center; border: 0;}
で完璧？
236:219
16/01/28 01:37:42.26 .net
.table01 td { padding: 0px; text-align: center; border: 0;}
は、
.table01 tr td { padding: 0px; text-align: center; border: 0;}
かな？
237:Name_Not_Found
16/01/28 01:44:00.68 .net
>>235,236
それで十分ですが、スペースでセレクタをつなげて指定するのは「子要素」ではなく
「子孫要素」ですので「tr」を入れる必要はありません。
「子要素」を指定する「>」があるのはそのためです。
238:219
16/01/28 01:46:48.63 .net
ありがとうございます
>>235でよいようですね
239:219
16/01/28 01:55:41.29 .net
なるほど、そういえばそもそも<tr>にborderは付かないですかね
240:Name_Not_Found
16/01/28 02:22:48.47 .net
繰り返しになりますが、ボーダーの初期値は非表示です。
正確にはborder-style:none;です。
>>219の各タグから属性を取り除いて単純化したものを表示させてみてください。
<html><body>
<table>
<tr><td>○</td></tr>
<tr><td>△</td></tr>
<tr><td>□</td></tr>
</table>
</body></html>
枠線は表示されませんよね。ですから実際はborder:0px;は必要ないのです。
ちなみにborder:10px;としても枠線は表示されません。
ボーダー幅の指定を有効にするためにはborder-styleをnoneまたはhidden以外に
指定しなければ有効となりませんから初期値のままではボーダー幅をいくつにしても
未表示です。よってボーダーを表示する場合は
border: 10px solid;
のようにborder-styleも同時に指定する必要があるのです。
241:Name_Not_Found
16/01/28 02:33:13.46 .net
補足すると、tableタグに<table border="2">のようにborder属性をつけた場合は
スタイルシートでborder-widthとborder-styleの両方を同時に指定したことになります。
242:219
16/01/28 12:25:20.38 .net
どれが正しいんだ(^^;
今晩また試してみます
243:Name_Not_Found
16/01/28 13:10:02.47 .net
>>242
>>240と>>241が正しい
244:Name_Not_Found
16/01/28 16:17:18.06 .net
cssについてお願いします(´・ω・`)
<body>
<header>あいうえお</header>
<footer>かきくけこ</footer>
</body>
body{border-radius:1em;}
header{background:#000;}
footer{background:#fff;}
↑のようにbodyに対して角をまるくするように設定しているのですが
headerとfooterの角がはみ出てしまいます
bodyに対してはoverflow:hidden;を試してみましたが角を消すことができませんでした
このような場合はheaderとfooterにもborder-radiusを設定して合わせるしかないのでしょうか
教えてください！
245:Name_Not_Found
16/01/28 16:44:23.06 .net
bodyに角丸付かないだろう！
246:244
16/01/28 17:52:09.91 .net
つかないものなのです？
↓のcssコードです
body{
boder:#000 solid 1px;
boder-radius:1em;
margin:1em auto;
max-width:1000px;
}
今、調べ中ですがうまくいかないです
247:Name_Not_Found
16/01/28 18:09:34.06 .net
どんな表示にしたいの？
248:Name_Not_Found
16/01/28 18:17:09.88 .net
border:0px; があってもなくてもブラウザの挙動は変わらんなー
開発者ツールでも、特に指摘はつかない
あってもなくてもいいのは分かったけど
文法上はどうするのが正しいんだ？
249:Name_Not_Found
16/01/28 18:20:20.69 .net
htmlにbackgroundでいろつけたら丸角でそうな気が
250:Name_Not_Found
16/01/28 18:21:32.78 .net
bodyにも色いるわ
251:244
16/01/28 18:22:47.69 .net
>>247
単純に横幅1000pxのサイトの角を丸くしたいだけなのです
bodyの中にはheader、article、footerが入ってます
252:Name_Not_Found
16/01/28 18:25:34.46 .net
>>248
公式に廃止されてない以上、cssでオフにしておくのが利口。
253:Name_Not_Found
16/01/28 18:41:45.25 .net
>>251
横幅1000ならdivで囲め
bodyにwidth:1000px;入れても横幅1000にならないだろ？
254:Name_Not_Found
16/01/28 18:43:43.48 .net
>>244
丸くなった部分の1em*1emのスペースにpaddingが設定されてないからだろ。
とりあえずbodyじゃなくてwrapperに装飾した方が良いぞ。bodyが縮むとややこしいしhtmlまで指定しなきゃいけなくなる。
bodyには背景色とフォント関連だけ入れて、その下のwrapperを魔改造するのが一般的。
255:Name_Not_Found
16/01/28 18:48:21.55 .net
>>244
あぁ、あとwidth:1000pxになってるけど、borderの両サイド2px分は含まれてないから気をつけてな。
そのままだとsolidのラインまで合わせて1002pxになる。全部含める場合はbox-sizing:border-boxを指定。
256:244
16/01/28 19:02:58.48 .net
親切に教えていただけると嬉しいです
中身をdivに入れて装飾することにします！
レスをくださった方々、ありがとうございました
257:Name_Not_Found
16/01/28 20:01:54.01 .net
ヘッダとフッタにradiusでいいじゃん。
いまどきラッパーなんか必要ない。
258:Name_Not_Found
16/01/28 20:03:09.60 .net
質問内容理解できてねーじゃん
そういう話じゃねーのよ
259:Name_Not_Found
16/01/28 20:21:30.66 .net
>>252
オフにしておくということは
border:0px; は記載しておく
で宜しいでしょうか？
260:Name_Not_Found
16/01/28 20:42:35.15 .net
入ってなければリセットにimg{border:none}入れておけばいいだけでしょ
いらないと思ったら消せばいいだけの話で
261:Name_Not_Found
16/01/28 20:50:18.41 .net
テーブルborderの話なんだが
262:Name_Not_Found
16/01/28 21:16:25.20 .net
だ・か・ら、border-styleのデフォ値はnoneなんだから、
border:0px;だろーがborder:億千万px;だろーが記載そのものをやめよーが
全部枠線は表示されないのに何でそこにこだわるの？
そんなに気になるのならブロック要素全部にborder:0px;つけるの？
263:Name_Not_Found
16/01/28 21:23:45.36 .net
もうほっとき
264:Name_Not_Found
16/01/28 22:29:15.70 .net
>>232,>>233の発言があるからだろ
265:219
16/01/28 22:42:43.82 .net
なんか殺伐としてしまってすみません
結局、border:0;は不要（書かなくても表示されない） で
>>223で正解でしょうか？
266:Name_Not_Found
16/01/28 23:02:28.21 .net
ボーダーのcss初期値は0だからブラウザのテーブルボーダー初期値は1px
とりあえずリセットかノーマライズかけとけ
267:Name_Not_Found
16/01/28 23:03:21.39 .net
だから→だが
268:Name_Not_Found
16/01/28 23:08:43.18 .net
不要
枠線をつけない → border:～を書かない
枠線をつける → boerder: 1px solid #ff0000;のように指定する
（幅とスタイルの両方は必ず指定、色は指定してもしなくてもOK）
269:Name_Not_Found
16/01/29 01:35:21.11 .net
自分でやりゃわかるのにいつまでグダグダち。
270:Name_Not_Found
16/01/29 01:53:54.72 .net
border-width の初期値とデフォルトスタイルシートを同一視してる人がいるようで
デフォルトスタイルシートは標準化されてないので不安なら指定しておきなさい
271:Name_Not_Found
16/01/29 03:43:37.19 .net
>>270
横だけど教えてください
HTMLの仕様では初期値は特に定められておらずUAの実装まかせということですか？
ということは現状多くのブラウザで
tableのborderはデフォルトでは表示されないものの（border-width:0）
すべてのブラウザ、あるいは今後出てくるブラウザでも
border-width:0になるという保証はないということですか？
272:Name_Not_Found
16/01/29 05:17:31.94 .net
href="#top"の逆で、一番下まで飛ぶスマートな方法は結局footerにid仕込む事ですか？
273:Name_Not_Found
16/01/29 06:04:47.36 .net
border-widthのデフォ値はmediumです。0ではありません。
試しにborder-widthの指定をせずにborder-style:solid;を指定して
表示させてみてください。やたら太いボーダーが表示されます。
つまりボーダーが表示されないのはborder-width:0px;だからではなく
border-style:none;だからです。これは未来永劫に渡って変更される
ことはないと思われます。ブラウザ間で差異が出ることもあり得ない
でしょう。
274:Name_Not_Found
16/01/29 06:18:18.84 .net
一応貼っとく
URLﾘﾝｸ(www.w3schools.com)
URLﾘﾝｸ(www.w3schools.com)
275:270
16/01/29 07:42:37.10 92QNUl4c.net
確かに初期値は order-width: medium; border-style: none; でした(top, left...は省略)
URLﾘﾝｸ(standards.mitsue.co.jp)
URLﾘﾝｸ(standards.mitsue.co.jp)
>>271
CSSの仕様です
初期値とは「何も指定されていない時のスタイル」を指します
ただし、ブラウザは初めからデフォルトスタイルシートを持っていますが、デフォルトスタイルシートについては標準化されていません
必要であれば reset.css 的な方法で上書きします
URLﾘﾝｸ(hp.vector.co.jp)
276:Name_Not_Found
16/01/29 08:33:54.19 .net
線引き変態かよ。いい加減うざいな。
277:Name_Not_Found
16/01/29 11:06:03.11 .net
text-alignは画像でも有効ですか？
278:Name_Not_Found
16/01/29 11:32:12.92 .net
たればわかるだろ
279:271
16/01/29 12:08:26.51 .net
>>273-275
大変よくわかりました
ためしにSafari、Chrome、Firefoxでtdにborder-style:solid;としたら
いずれも線が表示されるのも確認できました
この3つブラウザのtdのborderに関する限りはCSSの仕様で定められている初期値を
UAのスタイルシートで上書きするようなことはしていないようですね
（実務上は必要に応じてリセットCSSでborder:0をいちおう指定すると思いますが）
ありがとうございました
280:Name_Not_Found
16/01/29 12:40:20.12 .net
みんな知識が曖昧で、なかなか解決しないなぁ
281:Name_Not_Found
16/01/29 12:47:58.15 .net
>>277
有効だよ
>>280
いちおう279までの流れで解決なんじゃない
282:Name_Not_Found
16/01/29 12:59:13.05 .net
>>280
さぁ、ここで颯爽と明確な解決策を示して
美味しい所持っていっちゃってくださいよ
283:Name_Not_Found
16/01/29 13:28:09.67 .net
>>279
デフォルトスタイルシートは制作者スタイルシートよりも優先順位が低いのでデフォルトスタイルシートで上書きされることはありません
詳しくは>>275のカスケード規則を読んでください
284:Name_Not_Found
16/01/29 13:37:42.14 .net
>>277
text-align は display: inline; には適用できないので img { text-align: cente; } は無効
285:Name_Not_Found
16/01/29 13:46:53.06 .net
>>283
はい、そこはわかっていまして>>279で書きたかったことは
Safari, Chrome, Firefoxのtdのborderに関する限りは
「仕様で定められておりUAにも仕様どおり実装されている初期値」を
「デフォルトスタイルシート（＝UAのスタイルシート）」で
上書きしていないことを確認しましたということと、それでもいちおう
「制作者スタイルシート」でborder:0を指定しておくことにします
・・・ということです
（ユーザが独自のスタイルシートを設定している可能性もあるため）
わかりにくくてすみません・・・
286:Name_Not_Found
16/01/29 14:37:07.41 .net
文法心配なら、バリデーションサービスつかって確認すればいいんだよ
287:Name_Not_Found
16/01/29 14:37:27.25 .net
>>277
img-align
288:Name_Not_Found
16/01/29 15:42:54.09 .net
CSSのメディアクエリを利用したレスポンシブデザインについての質問です。
画面幅min-width:1280pxで有効になるプロパティを設置をしたところ、
解像度1280px*800pxのPCにて、ブラウザウインドウ最大で有効になりました。
しかし、ブラウザの表示領域にはスクロールバーが含まれているため1280pxより狭くになっているはずです。
これはmin-widthやmax-widthで指定したの値はスクロールバーを無視したサイズだという解釈でよろしいのですか？
289:Name_Not_Found
16/01/29 16:17:18.08 .net
ネットスケープナビゲーターで見てもレスホンシブルなデザインに見えますか？
290:Name_Not_Found
16/01/29 16:17:59.05 .net
cssに詳しい人に質問があります！
@media(min-width:1000px){
nav li{
position:relative;
}
}
@media(max-width:1000px){
nav ul{
position:relative;
}
}
↑のようになっているときに
ひとつにまとめるということはできるもんでしょうか？
教えてください(´・ω・`)
291:Name_Not_Found
16/01/29 16:20:41.33 .net
できるよ
292:Name_Not_Found
16/01/29 16:48:38.44 .net
svgってなんですか？？
293:Name_Not_Found
16/01/29 16:53:28.70 .net
>>292
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で
イラストレーターで扱うベクターデータの事を言う。
だから、拡大縮小しても、描線がボケる事が無い。
しかしながら、ブラウザが対応していなければ、表示する事ができない
294:Name_Not_Found
16/01/29 17:19:39.79 .net
>>288
メディアクエリの幅は、javascriptのwindow.innerWidthと同じくスクロールバーを含んだ幅です。
従って、min-width:1280pxで設定したプロパティが有効になっているときの
ブラウザ画面で表示されている部分の幅は1280px-スクロールバー幅です。
295:Name_Not_Found
16/01/29 18:45:10.37 .net
>>285
td で制作者スタイルシートを指定する前の状態で開発者ツールでデフォルトスタイルシートを確認した、ということでしょうか。
td { border-style:solid; } を指定してから「～のようですね」といわれていましたが、 td を指定したらデフォルトスタイルシートを確認出来ないので前後関係がよくわかりませんでした
>（ユーザが独自のスタイルシートを設定している可能性もあるため）
ユーザスタイルシートは制作者スタイルシートよりも優先順位が高いですよ
究極的にはデザインはユーザの自由になるものなのでユーザスタイルシートを上書きする事は出来ません
制作者スタイルシートでタイプセレクタを指定するのはあくまで(実相依存な)デフォルトスタイルシートを上書きする為です
296:Name_Not_Found
16/01/29 19:10:17.92 .net
>>295
> ユーザスタイルシートは制作者スタイルシートよりも優先順位が高いですよ
これはどうなの？（W3Cより引用）
Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:
1.user agent declarations
2.user normal declarations
3.author normal declarations
4.author important declarations
5.user important declarations
297:Name_Not_Found
16/01/29 19:13:22.50 .net
>>295
こんなふうに確認しました
URLﾘﾝｸ(i.imgur.com)
開発者ツールでtdのひとつに制作者スタイルシート（border-style:solid）を定義しています
>ユーザスタイルシートは制作者スタイルシートよりも優先順位が高いですよ
あれ？これは逆ではないですか？
298:Name_Not_Found
16/01/29 19:45:06.80 .net
だからー…
リセット・ノーマライズなりをしないでCSSを書くことがあり得ないからそこを突き詰める意味は無いんだよ。
それが趣味だってのなら別だけど、ならボーダーでもなんでも好きにしろっての。
299:Name_Not_Found
16/01/29 19:59:30.11 .net
ほんとそれ
パンツ履かないで外出して捕まらない方法を考えるようなもんだね
最初からパンツはけっての
300:Name_Not_Found
16/01/29 20:00:45.25 .net
たぶんリセットなりノーマライズの話はみんなわかってると思うよ
その上で気になるので突き詰めるかどうかは>>298の言うとおり趣味の領域
人の趣味の話に口出しすんなや
スレチでもなし迷惑もかけてるわけでもなし
醜い煽りあいに発展してるわけでもなし
301:Name_Not_Found
16/01/29 20:08:06.70 .net
borderに限らず、デフォルトで余計な事やってるタグはいくらでもあるでしょ。
それをまとめてリセットなりノーマライズするのが定番になってんだから、みんな邪魔くさいと思ってるんだろう。
302:Name_Not_Found
16/01/29 20:16:02.15 .net
>>296-297
失礼、誤って記憶していました
!important 属性がなければ制作者スタイルシートの方が優先順位が上ですね
303:Name_Not_Found
16/01/29 20:41:37.23 .net
ul li{
float: left;
margin-right: 20px;
list-style-type: none;
}
ul li a:hover img{
border:3px solid #000;
margin: -3px;
position:relative
}
<ul>
<li><a><img></a></li> ×4
</ul>
これをIEで見るとホバー時ボーダーがちゃんと表示されず困っています。
zoomとかz-index設定しても変わらずで、どうしようもないんでしょうか？
ちなみにborderをoutlineにしたらうまく表示できました。
ありがとうございました。
304:Name_Not_Found
16/01/29 20:53:31.82 .net
IEのバージョンは？
305:Name_Not_Found
16/01/29 20:54:31.81 .net
11です。
306:Name_Not_Found
16/01/29 21:09:20.58 .net
違った10でした
307:Name_Not_Found
16/01/29 21:14:32.01 .net
11です。
308:Name_Not_Found
16/01/29 22:23:36.56 .net
10です。
309:Name_Not_Found
16/01/29 22:31:02.42 .net
>>303
img:hoverにする
あとカクカク対策はネガティブmarginよりも
border-color: transparentがいいような気がする
310:Name_Not_Found
16/01/29 22:54:19.48 .net
ホバーじゃない時も透明なボーダーを付けとくということ事ですか
白背景だったので#fffで試したら見た目が変になってしまったので別の方法を探してたのですが、それは試してませんでした。
どうもです。
311:Name_Not_Found
16/01/30 03:03:16.02 .net
ボーダー沸きすぎ
312:Name_Not_Found
16/01/30 05:47:55.72 .net
DWディスキチの次はボーダー君か
キャラ揃いすぎだろｗｗ
313:Name_Not_Found
16/01/30 07:59:13.77 .net
IEが悪い
314:Name_Not_Found
16/01/30 08:46:06.03 .net
ボーダー君の趣味につきあうスレになったのかここは
315:Name_Not_Found
16/01/30 12:48:20.43 .net
HTML 仕様の
detached nested browsing context
（ www.w3.org/TR/html51/browsers.html#navigating-nested-browsing-contexts-in-the-dom ）
とはどういうものですか？
detached であっても、 nested の状態は維持されるのですか？
それとも nested とは言えなくなくなるのですか？
316:315
16/01/30 15:03:28.08 .net
すいません。
自己解決しました。
317:315
16/01/30 15:37:33.40 .net
>>316
勝手に解決するなよ
318:315
16/01/30 16:10:08.24 .net
解決して何が悪い？
319:Name_Not_Found
16/01/30 17:52:20.59 .net
ちょっと難しい質問するとこれだよｗ
320:Name_Not_Found
16/01/30 18:00:08.34 .net
font-familyの欧文指定で、
Helvetica,Arial
としてmacでArialが表示されるのを避けたいのですが
先頭にHelveticaを持ってくるとIEで不具合が出ると聞きました
回避するにはどうしたらいいでしょうか？
321:Name_Not_Found
16/01/30 18:39:36.30 .net
UAから呼び出すフィルを変える
322:320
16/01/30 18:59:43.55 .net
>>321
キーワードだけではちょっと私にはレベル高いです…ググってみます…
font-family: Arial, Helvetica, sans-serif;
このようにしたら、Macの方はArialで表示されてしまいますよね!?
323:244
16/01/30 19:20:58.56 .net
>>290
できないだろjk
324:Name_Not_Found
16/01/30 20:04:37.53 .net
>>290
メデイアクエリの外側に書くとかそういう話じゃなくて？
325:Name_Not_Found
16/01/30 20:35:17.80 .net
min-width:1000pxなら
max-width:999px;、もしくはmin-width1001pxにした方がよくね
実害は少ないだろうけど、1000pxでカブる事になる
326:Name_Not_Found
16/01/31 21:59:57.86 .net
私アホで英語全然ダメなんですけど
HTMLとCSS勉強すれば出来るようになりますかね？
327:Name_Not_Found
16/01/31 22:07:06.48 .net
HTMLCSS勉強しても英語はできるようにならないと思う
328:326
16/01/31 22:15:50.18 .net
>>327
そういう意味じゃなくって
英語が苦手でもHTMLとCSSを出来るようになりますかってことです。
329:Name_Not_Found
16/01/31 22:42:58.36 .net
趣味レベルならできんじゃね
330:Name_Not_Found
16/01/31 22:49:06.00 .net
background-imageはbackground-positionで表示する位置を指定することができるけど
img要素を使った背景画像の位置は指定することができないん？(´・ω・`)
今img要素をposition:absolute;とtop:0;とleft:0;で敷き詰めてるん(´・ω・`)
誰かおしえて
331:Name_Not_Found
16/01/31 22:53:11.85 .net
img要素って言ってる時点ですでに背景画像じゃねえだろ
素直にbackground-repeatで敷き詰めなさい
332:Name_Not_Found
16/01/31 23:54:50.86 .net
>>328
出来るって言って欲しいの？
でも実際は無理だよ。たかだか英語が出来る出来ないなんて次元の話してる時点で無理。
333:Name_Not_Found
16/02/01 00:10:44.20 .net
>>331
そんな殺生なー
img要素で背景画像を指定しないとスマートフォンで見たときにアドレスバーにいじめられるんよ(´・ω・`)
あとposition:absolute;じゃなくてposition:fixed;だった ごめん
334:Name_Not_Found
16/02/01 00:43:45.10 .net
>>333
言ってる意味がぜんぜんわからん
なんだアドレスバーにいじめられるって
ソース貼れソース
335:Name_Not_Found
16/02/01 01:28:03.60 .net
>>322をおねがいします
336:Name_Not_Found
16/02/01 01:36:18.26 .net
>>328
そういう意味に読めるよ。何だよその態度は。
337:Name_Not_Found
16/02/01 02:07:33.45 .net
フォント変態かよ。
338:Name_Not_Found
16/02/01 02:41:18.23 .net
>>328
だめ
まず、英語できないと話にならない
339:Name_Not_Found
16/02/01 03:08:38.44 .net
タグがアルファベットなだけで、英語のスキルなんか不要。
日本語の解説も腐る程あるから何の問題もない。
こいつらだって英語が出来るわけじゃない。無視して良いよ。
340:Name_Not_Found
16/02/01 03:34:50.39 .net
>>326
東大合格マンガ、ドラゴン桜の、
英語教師のモデルになった竹岡広信。
ドラゴン・イングリッシュのシリーズは秀逸
必修英単語1000・必修英文法100
この2冊で勉強せよ。
そしたらGoogle翻訳を使いながらも、意味がわかるようになる
341:Name_Not_Found
16/02/01 04:48:21.64 .net
押し付けうっとーしー
342:Name_Not_Found
16/02/01 11:08:12.33 .net
>>334
↓の設定で画像を張り付けることはできるんだけど
背景画像（1枚絵）の固定とスマートフォンのインターフェースの動きが合わないのか
アドレスバーの領域と同じ高さの分だけ背景画像がずれるんよ(´・ω・`)
body{
background-attachment:fixed;
background-image:url(画像);
background-position:50%;
}
↓みたいにimg要素を背景画像として張り付けるとずれないんだけど
表示位置を調整できないん(´・ω・`)
img{
left:0;
position:fixed;
top:0;
z-index:-1;
}
もう他の画像を作ることにするお
ありがちょ(´・ω・`)
343:Name_Not_Found
16/02/01 11:57:02.51 .net
>>342
background-position: 50% 0; /* または「0 0」 */
にすればなおる、というかimg要素使った場合と同じ見た目にはなるはず
あと今回の件とは関係ないが background-size もうまく使えると便利だよ
344:Name_Not_Found
16/02/01 12:06:08.91 .net
>>343
アドバイスありがとう
でもうまくいかなかったよ(´・ω・`)
今日は自棄食いするね
345:Name_Not_Found
16/02/01 12:36:09.05 .net
>>344
それbodyに背景いれてるからアドレスバーの有無でパディングみたいな感じの挙動してるんでしょ
とりあえずbody直下にdivかませてそのdivに背景指定すれば回避できるんじゃない？
346:Name_Not_Found
16/02/01 12:52:22.40 .net
>>340
そんなもん今さら読破しなくても、WEB翻訳に頼らずとも読むくらいは中高出てたら普通にできるだろ
会話は出来ないがな
347:Name_Not_Found
16/02/01 13:15:39.09 .net
定期的にくるなこれ
348:Name_Not_Found
16/02/01 13:18:56.23 .net
>>345
試しに空のdivを置いてテストしてみたけどアカンかったよ(´・ω・`)
div{
background-attachment:fixed;
background-image:url(画像);
height:100%;
left:0;
position:fixed;
top:0;
width:100%;
z-index:-1;
}
349:Name_Not_Found
16/02/01 13:59:31.31 .net
>>348
height:100vhで
350:Name_Not_Found
16/02/01 15:09:08.55 .net
>>348
結局imgとbackgroundどっちでやりたいの？
backgroundでやるならpositionいらないでしょ
351:Name_Not_Found
16/02/01 17:44:17.82 .net
>>349
vh対応していないブラウザはどうする？
352:Name_Not_Found
16/02/01 18:21:06.78 .net
>>350
今のところimgでやれば問題はないんよ
でもなんかモヤモヤするん(´・ω・｀)
>>345のいう不具合が正にそれなんだけど、これ以上は迷惑がかかりそうなんで大人しくimgでするん(´・ω・｀)
353:Name_Not_Found
16/02/01 19:51:25.10 .net
>>351
対応しているブラウザ、パソコンを買うように一文を表示させる。
354:Name_Not_Found
16/02/01 20:32:26.86 .net
>>352
余計なおせっかいかもしれんが
ソースはjsfiddle.netとかに貼ったほうが質問するほうも教えるほうも効率的
具体的に答えてもらいやすい気がする
所詮２ｃｈだから答える方も義務じゃないし
質問する側もここじゃダメだと思えば他当たればよい
迷惑とか気にしすぎる必要はないよ
355:Name_Not_Found
16/02/01 20:43:49.85 .net
大げさすぎｗ
356:Name_Not_Found
16/02/01 20:50:25.38 .net
そんなガチなやつがつまずいてこんなとこで答え求めたりしねーよ。
357:Name_Not_Found
16/02/01 21:13:46.24 .net
jsfiddleみたいなのは積極的に使ったほうがいい
結果として抽象的ななんともいえん質問がへってくれればなおよし
358:Name_Not_Found
16/02/01 23:06:10.95 .net
SVGでもHTML中で、<svg>タグで図形を指定すれば、
すべての機能を使えるけど、
CSSのプロパティに、url関数で指定して、
外部ファイルとして参照すれば、使える機能が限定される
background: url(～.svg);
ブラウザ製作者は、結構いい加減だろ
359:Name_Not_Found
16/02/02 10:08:15.34 .net
俺の使ってサーバー
SVG対応してない怒
360:Name_Not_Found
16/02/02 11:36:31.36 .net
じゃあ俺も怒るわ
361:359
16/02/02 12:34:00.69 .net
勘違い
対応してたわ
早とちりスマン
362:Name_Not_Found
16/02/02 13:48:50.94 .net
じゃあ俺も謝るわ
すまん
363:Name_Not_Found
16/02/02 14:14:16.68 .net
せんせい、だんしがバカです
364:Name_Not_Found
16/02/02 20:49:18.55 .net
いつものことです
365:Name_Not_Found
16/02/02 21:34:19.42 .net
cssでテキストをbackgroundの中心に配置するにはどうしたらいいでしょうか？
左上に配置されてしまいます。
それと一番下のアドレスが背景と合体するのを解除するにはどうしたらいいでしょうか？
URLﾘﾝｸ(sironeco.info)
366:Name_Not_Found
16/02/03 00:59:59.19 .net
なるほどな
367:Name_Not_Found
16/02/03 03:15:11.76 .net
まさか全部contentで流しこんでないよな。
斬新やけどやめときや。
368:Name_Not_Found
16/02/03 18:35:58.47 .net
{
"itemNum": "0",
"itemSource": "<a href="hoge.html"><img src='hoge.jpg' alt='a'></a>"
},
リンクが機能しないんだけど
369:Name_Not_Found
16/02/03 19:29:59.41 .net
おらには難しくてわからねえだ(´・ω・｀)ﾕﾙｼﾃｹﾛ
370:Name_Not_Found
16/02/03 20:36:04.74 .net
何が起こってるの…
371:Name_Not_Found
16/02/03 20:49:22.31 .net
>>368
スレチ
372:Name_Not_Found
16/02/03 20:51:17.74 8yUQeyaF.net
>>368
imgの属性は’で囲ってるのにaタグの属性に”使ってるからじゃない？
373:Name_Not_Found
16/02/03 20:54:11.82 .net
hrefがurlじゃなくファイルな件
374:Name_Not_Found
16/02/03 21:32:10.78 .net
つまりどういうことだってばよ
375:Name_Not_Found
16/02/03 22:13:08.95 .net
>>372
そういう統一性必要なんか
'にしたら開けたわthx
376:Name_Not_Found
16/02/03 23:37:58.26 .net
なんでうまくいったかまったくわかってないっぽいな
まあええけど
377:Name_Not_Found
16/02/04 00:11:35.97 .net
んなことよりスレタイ読めや
378:Name_Not_Found
16/02/04 16:45:26.74 i0li0Bs6.net
コメントの閉じタグに // を書くのって
//-->
なんの風習だっけか
これ今はいらないよね
379:Name_Not_Found
16/02/04 16:55:09.49 .net
そもそも必要だった時代があるの？
380:Name_Not_Found
16/02/04 20:34:24.00 .net
ロールオーバーについての質問です。
よろしくお願いします
Aファイル
以下2つを配置できるようにテーブルを組みました。
・上部にナビゲーションボタンが並ぶ（それぞれロールオーバーします）
・その下のテーブル内に1枚のメインのjpegイメージ
Bファイル
別ファイルに縦三分割のテーブルを組んでその中にそれぞれ
ロールオーバーするイメージ3つを配置しました
Bファイルのテーブルを丸ごとコピーし、Aファイルのjpegイメージを削除してそこへペーストすると
上部のナビゲーションボタンも、ペースとした下部の3イメージもロールオーバーしなくなりました。
ロールオーバーする素材のIDに重複はないのですが、なぜ絵が切り替わらなくなったのでしょうか？
初心者なので根本的にやり方が間違ってるのかもしれませんがよろしくお願いします
381:Name_Not_Found
16/02/04 20:44:28.36 .net
解読班はよ
382:Name_Not_Found
16/02/04 20:53:43.75 .net
サンプルでいいからファイルアップすりゃいいだけなのに
説明するなら完璧にしないと状況把握できないから、原因も何も分かるわけが無い。
383:380
16/02/04 20:59:37.21 .net
分かりづらくて済みません。
テーブル内にロールオーバーする素材があるAファイルに、別のBファイルからロールオーバー素材をコピーペーストすると
ロールオーバー素材のIDは重複してないのに、元からあったのもペーストしたのもロールオーバーしなくなりました。
何が原因なのでしょう？
384:Name_Not_Found
16/02/04 21:01:15.54 .net
例えばBファイルを削除したら元に戻るのか？
そんなわけないと思うけど
385:380
16/02/04 21:05:31.40 .net
Bからペーストしたものを削除してもAのロールオーバー素材は動きませんでした。
自分でも把握しやすいように簡単なサンプルを作ってみます
386:Name_Not_Found
16/02/04 21:17:19.51 .net
おそらくこれはDreamweaver上での話だろ？
であればまずそれを言わないとわからないよ
んで、DWにロールオーバーを設定する機能があるんだよな、たぶん
その辺ちゃんと前提条件伝えた上で回答できる人を待つことだね
ただ正直DWでサイト作り続けるのは茨の道だよ
使ってる人少ないし必然的にネット上にも情報はあまり転がってない
>>380読む限りやってることも一昔前のやり方っぽい（DW知らんので違ったらすまん）
387:Name_Not_Found
16/02/04 21:32:36.42 .net
>>386
別に茨の道でもないだろ…
ある程度いったらソフトなんてなんでもよくなるんだからdwかどうかなんて関係ない。
dwに拘るのもアホだしdwを貶すのも素人まるだし。
388:380
16/02/04 21:46:30.37 .net
単純なサンプルを作ったらそれは正常でした。
オリジナルの方をもう一度一から作り直してみます
お騒がせしてすみませんでした
蛇足ですが、昔GoLiveを使ってたのですが今はなくなってしまったので新たに何か選択肢なくてはならず、
であれば昔から名前だけは聞いたことがあるDWを という流れで今に至るでした
389:Name_Not_Found
16/02/04 22:22:21.20 .net
>>387
お前自分でも書いてるがDWが別に茨の道じゃないのは「ある程度いった」やつにとってだろ？
380みたいな初学者にとってはどうだと思ってんの？
俺は上にも書いたとおりDWは情報少ないし
場合によっては汎用的じゃない知識に時間をとられる（ロールオーバーの設定とか）から
初学者にはあんまりおすすめしないのよ
お前の言う「知識あるやつにとってはソフトなんて関係ねえ」ってのは
俺に対するレスとしてもおかしいし>>380にも関係ない話でピントがずれてんだよ
そうじゃなくって初学者にとってDWはこういう理由でおすすめだよとかそういう話なら
俺も知りたいし何より380にとっても有益だと思うよ
（てかDWのこと知ってるなら380の質問に答えてあげろよ）
390:Name_Not_Found
16/02/04 22:33:36.03 .net
そもそも>>380がDWの話だと気がついてあげたのは見たとこ>>386が最初で
きちんと交通整理してくれてんのに>>387の言い草はないわ
俺は>>381とおなじでなんのこっちゃ全然わからんかったよ
391:Name_Not_Found
16/02/04 22:49:51.68 .net
>>389
本屋いったことないの？
dwの教本なんて腐るほどあるだろ
他のオーサリングソフトの教本なんて滅多にない。
それでもまだ情報が少ないってンならむしろある程度のレベルまでいった段階なんじゃねーの？
392:Name_Not_Found
16/02/04 22:56:46.86 .net
>>391
人のこと素人まるだしっていったりある程度のレベルっていったり一貫しない人だね
しかも結局DWが初学者にとってどうなのかに答えてないし380のことも置いてきぼりだし
393:Name_Not_Found
16/02/04 23:56:45.28 .net
どうも何も、どうってことない
394:Name_Not_Found
16/02/05 00:52:37.07 .net
ＤＷは初心者用の教本がある時点で恵まれてるってこと
395:Name_Not_Found
16/02/05 04:56:11.43 .net
>>388
たぶんdwが自動で書いてるロールオーバのjsがヘッダーにあるとおもうからそれがないと動かないよ
396:Name_Not_Found
16/02/05 10:37:09.85 .net
>>379
それで思い出した
scriptタグを書くときの作法だったわ
397:Name_Not_Found
16/02/05 10:41:34.62 .net
どぅわれか～(´・ω・｀)
とぅわすけて～(´・ω・｀)
©で出るコピーライトの色が真っ黒なの！しかもスマホで見たときだけ
なにが原因かわからないお(´・ω・｀)
ﾀﾁｹﾃ(´; ω ;｀)
©って環境依存文字だっけ？(´・ω・｀)
398:Name_Not_Found
16/02/05 13:03:44.87 .net
>>397
フォントサイズ小さいのだろう
デカくしてみん
399:380
16/02/05 14:17:10.85 .net
すいません。自己解決しました。
400:Name_Not_Found
16/02/06 22:38:05.13 .net
inputのplaceholderを使いたいけどvalueが優先されてしまいます！
valueは入れないと構文チェックで引っかかってしまいます；；
placeholderを優先する方法はないでしょうか
401:400
16/02/06 22:50:00.21 .net
自分の勘違いでした
解決済みです
402:Name_Not_Found
16/02/06 23:47:16.09 .net
iframeのname指定で、記号「'」は使えますでしょうか？
403:Name_Not_Found
16/02/07 01:19:58.53 .net
iframeに限らずname属性では使えない
というかたぶん「'」使える属性自体存在しないかと
404:Name_Not_Found
16/02/07 01:38:27.04 .net
URLﾘﾝｸ(docs.adobe.com)
使えるんじゃない？
405:Name_Not_Found
16/02/07 04:03:17.66 .net
URLﾘﾝｸ(jsfiddle.net)
使える
406:400
16/02/07 13:13:40.60 .net
壁に直面したのでヒントをください(´・ω・`)
<textarea placeholder=
407:400
16/02/07 13:15:08.53 .net
なんか書き込めなかったのでもう一度書き込みます
壁に直面したのでヒントをください(´・ω・`)
textarea placeholder="あいうえお"> あいうえお </textarea
↑の場合でplaceholderを優先したいのですが何か方法はないでしょうか
ちなみに、初期値を削除すると構文に問題が出るので削除しない方向でいきたいとです(´；ω；`)
408:Name_Not_Found
16/02/07 13:44:53.04 .net
開始の<と閉じの>がない
409:Name_Not_Found
16/02/07 13:53:09.68 .net
初期値ってvalueのことだと勝手に解釈するがvalueをjsで消せばよい
が、そんなことしたらvalueの意味ねーｗ
つかvalueが空だとエラー出す文法チェッカーってなに？
興味あるんだが
410:400
16/02/07 14:53:33.16 .net
>>408
ごめんなさい 閉じタグを入れたら>>406のようになってしまったので外しました
>>409
URLﾘﾝｸ(www.htmllint.net)
↑のサイトだとtextareaの初期値が空だとエラーで訴えてきます
inputだとvalue=""でも問題はないみたいです
現在はJavaScriptのDOMとやらを使って修正作業中です(´・ω・`)
411:400
16/02/07 22:12:42.41 .net
なんとか解決しました。
ありがとうございました。
412:Name_Not_Found
16/02/07 22:26:59.43 .net
imgとhrefが同じURLの場合って
省略出来ないの？
同じURL二度書くと無駄にソース長くなるし
413:Name_Not_Found
16/02/07 23:42:59.15 .net
サムネように小さい画像作ればアドレス変えられるよw
414:Name_Not_Found
16/02/08 00:34:23.81 .net
>>412
そもそもaタグとimgタグは別もんだろ…
415:Name_Not_Found
16/02/08 01:03:22.10 .net
URLを省略すりゃいいじゃん
416:Name_Not_Found
16/02/08 09:29:47.86 .net
>>412
サーバサイドスクリプトで変数を参照したら？
417:Name_Not_Found
16/02/08 13:00:51.75 .net
>>412
srcとhrefが同じ値って事？
XSSでも仕込むかのよと勘ぐっちゃう。
君、スクリプトキでぃ じゃないよね？
418:Name_Not_Found
16/02/08 15:40:51.93 .net
ウィーバーみたいな機能のグーグルのフリーアプリありませんでしたっけ
ぐぐろうにもなんてキーワードでググっていいかも分からなくて手ごたえなし
グーグルのじゃなくてもいいんですが、ソースとヴィジュアルを確認しながら作業したかったんですが適当なものご存じありませんか？
419:397
16/02/08 16:03:30.73 .net
>>398
試しにフォントサイズを2倍にしてみましたけど
真っ黒です(´・ω・`)
420:397
16/02/08 16:09:16.73 .net
どうやらchromeのバグのようでござる
お騒がせしますた(´・ω・`)
421:Name_Not_Found
16/02/08 16:45:44.54 +FEZ36px.net
titleについて教えてください
TOPページ:
ホゲホゲ館
例)ギャラリーページ:
ホゲホゲ館｜ギャラリー
ギャラリー｜ホゲホゲ館
例)お知らせ
ホゲホゲ館｜お知らせ
お知らせ｜ホゲホゲ館
どちらが正しいのでしょうか？
色々なサイトを見るとまちまちなようで
内容は、個人で小規模な写真サイトやっています
422:Name_Not_Found
16/02/08 16:54:43.18 .net
>>420
ふぉんとがわるいのかもい
423:Name_Not_Found
16/02/08 17:16:00.07 .net
>>421
どっちでも正しいよ
424:Name_Not_Found
16/02/08 17:16:33.07 .net
CSSでギザギザの線をつくり上側の領域を透明に下側を赤にしたいです。
CSS Jagged Border Generatorで、上を青下を赤にして生成すると、
{
background:
linear-gradient(-135deg, #0000ff 20px, transparent 0) 0 20px,
linear-gradient(135deg, #0000ff 20px, #ff0000 0) 0 20px;
background-color: #0000ff;
background-size: 40px 40px;
}
となったので、何も考えずに#0000ffの部分をtransparentに書き換えたのですが、上手くいきませんでした。
次にlinear-gradientの意味を知ろうと思いGoogleでいろいろ調べたのですが、
linear-gradientは元々グラデーションをつくるためのメソッドらしく、
解説を読んでもいまいち理解できませんでした。
お詳しい方、ご教示いただけませんか？
425:424
16/02/08 17:31:11.60 .net
すいません自己解決しました。
426:424
16/02/08 20:42:56.03 .net
>>425この人偽者です。なんですかこの人・・・
知らない人が僕を装って自己解決しましたと書き込まれています。
変な人もいるもんですね。
427:424
16/02/08 21:03:14.25 .net
いいえ、解決したものは解決したんです。
わけのわからないことを言わないでください。
428:Name_Not_Found
16/02/08 21:09:01.59 .net
こいついつもいるよ
429:Name_Not_Found
16/02/09 01:48:07.83 .net
>>410-411
解決法になってない手段で解決してる気になってる件
ｽﾚﾘﾝｸ(hp板:242番)n-
430:Name_Not_Found
16/02/09 06:56:28.02 .net
>>424
background-repeat: repeat-x; /* 背景を左右方向にだけ繰り返す */
background-position: bottom; /* 背景を下端に合わせる */
を追加すればわかるだろう
ちなみにその背景は
background-size: 40px 40px;
で縦横 40px の正方形ボックス背景を指定している
linear-gradient はボックスを三角形に塗りつぶす2枚の画像を指定している
その重ね合わせでギザギザを表現している
linear-gradient(-135deg, #0000ff 20px, transparent 0) 0 20px
というのは
(1) グラデーションは左下方向へ進行する（ 12時の方向から 135度反時計回り）
(2) その開始点は左下方向と反対方向にあるボックスの隅になる
(3) 開始点から 20px の所までは最初の色 #0000ff で塗られる
(4) 開始点から max( 20px, 0 ) より先の所は次の色 transparent で塗られる
よって 20px の所で色が transparent に切り替わる
（ transparent 0 は transparent 20px でも同じで
transparent 30px にすると本当のグラデが現れる）
431:424
16/02/09 12:56:54.14 .net
>>430
それは試してみたんですが、うまくいかなかったんです。
432:Name_Not_Found
16/02/09 20:46:59.16 .net
管理者モードなどでテーブルの色や枠線の幅を設定する場合
スタイルシートはHTMLタグにstyle="border:Solid 枠線の太さ設定変数 枠線の色設定変数"のように埋め込むしかないですよね？
外部ファイルにcssを置くとcssファイルに設定値を書き込んでいる最中に
cssファイルを読み込まれることになるから
433:Name_Not_Found
16/02/09 20:58:40.85 .net
管理者モードって何の?
434:432
16/02/09 22:34:36.36 .net
ワードプレスです
435:Name_Not_Found
16/02/09 22:49:48.23 .net
掲示板とかの管理者モード
436:Name_Not_Found
16/02/09 22:54:50.04 .net
ワードプレスかよｗ
まあなんにしてもHTMLタグのstyle属性に直接記述することはあまりない
あと>>432の後半２行は意味不明
全般的にもっと読む人がわかりやすいように書けｗ
437:Name_Not_Found
16/02/10 02:30:00.48 .net
>>432
作業中のCSSがリアルタイムで読み込まれるわけじゃないから。
一時的にページが崩れるくらい大幅なメンテやアップデートするときに、閲覧者に見られたくないんであれば、
作業してる間だけサイトをプライベートにしておくか、ローカルでテストしてからアップすればいいよ。
438:Name_Not_Found
16/02/10 11:00:01.46 .net
多分スレチな内容なんだろうと思うけどどこで質問すればいいのかわからなかったからこちらに
昔流行りそうだった、フレームを使ってメニューやヘッダーを分けるみたいに、
フレーム無しでメニューやヘッダー、を外部ファイルから読み込んで来るような
いわゆるオブジェクト指向の構造を作るにはどの分野を勉強すればいいんだろうか
コンテンツが一つ増えるごとに全ページのメニュー編集とかがそろそろ追いつかなくなってきて
勉強したいもののどうぐぐればいいのかがさっぱり状態
439:Name_Not_Found
16/02/10 11:11:14.11 .net
>>436
じゃあちょっと質問かえる
phpやperlなどのプログラムでスタイルシートの背景色や枠線の太さの設定値を自動生成する場合
直接htmlタグにstyleを埋め込むしか思いつかないんだけど
こういう場合はcssを外部ファイルに置くと言うのは無理なので埋め込むしかないですよね？
440:Name_Not_Found
16/02/10 11:17:22.22 .net
付け加え
掲示板で投稿毎に投稿ごとの背景色が変わるようにする場合は
外部にcssを置くのって無理じゃないかってことです
441:Name_Not_Found
16/02/10 12:21:54.45 .net
overflow-y:scroll に設定したエレメントについて
最下部にスクロール済みの状態をcssだけで再現可能でしたら方法を教えて下さい
よろしくお願いします
442:Name_Not_Found
16/02/10 12:32:33.32 .net
無理です
443:Name_Not_Found
16/02/10 12:51:16.06 .net
>>440
結局何がしたいの？背景色をランダムで変えたいって事？？
444:Name_Not_Found
16/02/10 12:55:13.47 .net
>>438 SSIじゃだめかい？
445:Name_Not_Found
16/02/10 13:40:42.86 .net
>>439
プログラムでclass属性を出し分ける方法もあるよ
実際のスタイルはあらかじめcssファイルに定義しておく
style属性をいじってもいいけど
変更するCSSプロパティが増えると煩雑になりがちなので
どちらの方法をとるかはケースバイケースで
446:Name_Not_Found
16/02/10 13:43:20.25 .net
>>438
SSI
php インクルード
HTMLテンプレートエンジン
などでググれ
447:Name_Not_Found
16/02/10 13:46:02.41 .net
>>440
445の続きだが投稿ごとにstyle-1、style-2などのclassを付与する
外部cssにそれぞれのclassのスタイルを定義する
448:Name_Not_Found
16/02/10 14:06:55.63 .net
すみません、教えてください
table要素で表を作成したのですが、表全体が左側に偏ってしまいます。
中央に配置させたい時は、どうしたら良いでしょうか？
449:Name_Not_Found
16/02/10 14:09:28.20 .net
>>440
447の続き
それからstyle-1、style-2などにIDも付与してやる
外部cssにそれらも定義してからstyle名を一括変更
450:Name_Not_Found
16/02/10 14:12:27.47 .net
>>448
table-position:center;
451:Name_Not_Found
16/02/10 14:12:56.02 .net
>>450
ありがとうございます
452:Name_Not_Found
16/02/10 14:27:51.41 .net
>>448
margin: 0 auto; /* 0のところはお好みで */
>>450
なんやtable-positionてｗ
453:448
16/02/10 14:29:39.82 .net
>>452
ありがとうございます
450さんの方法で試したら上手くいかなくて試行錯誤してましたｗ
454:Name_Not_Found
16/02/10 14:34:52.03 .net
>>439
CSSシグネイチャの考え方を導入してbodyタグのクラスを変化させるとか?
455:Name_Not_Found
16/02/10 14:54:04.87 .net
tinpo-family: skined;
tinpo-position: left;
tinpo-size: 5cm;
456:Name_Not_Found
16/02/10 17:42:06.62 .net
>>438
jqueryでも読み込めるよ
457:Name_Not_Found
16/02/10 18:01:15.03 .net
まぁ定番はphpだろう
458:Name_Not_Found
16/02/10 18:02:06.26 .net
>>456
横だがそれだとSEO的に大丈夫なん？
459:Name_Not_Found
16/02/10 20:47:58.00 .net
ここでいいのか、わからないけど教えて下さい。
float:leftした時のmarginが効かない時に、親要素を overflow:hidden するみたいですが、結構な数の要素にoverflow:hiddenを適用してるんですが、SEO的には特に問題なしですか？
460:Name_Not_Found
16/02/10 20:49:59.26 .net
問題なし
461:Name_Not_Found
16/02/10 21:06:42.25 .net
>>460
ありがとうございます。
462:Name_Not_Found
16/02/10 21:10:12.40 .net
>>459
もはやSEOってのは非リンクの事だから問題ない。
463:Name_Not_Found
16/02/10 21:36:13.83 .net
>>438です
色々な手法があるみたいですね ちらちら見てphpが他にも色々使えそうなのでこれ勉強してみたいと思います
沢山のレスありがとうございます
464:Name_Not_Found
16/02/11 00:03:41.16 .net
TD.menu a:hover{
background-color:#00ff00;
color: #fff000;
}
これをstyle=""の形にするにはどうすればいいのですか？
465:Name_Not_Found
16/02/11 00:22:14.17 .net
>>464
htmlに直接書くのは無理。
スクリプトで当てるってのは出来るけど、それならcssでいいし。
466:Name_Not_Found
16/02/11 13:09:12.07 .net
>>462
ありがとうございます。
もう一つ教えて下さい。
class指定の仕方で、liタグやhタグを変更するときに
cssで#test li{}としたほうがいいのか、それともタグに
直接<li id="">とタグの中に?直接入れるのではどう違うのでしょうか?
SEO対策なのか、作者の好みで分けるのかいまいちわかりません。
467:Name_Not_Found
16/02/11 13:24:23.41 .net
class指定で、#やidは使わないよ
468:Name_Not_Found
16/02/11 14:15:57.74 .net
>>466
とりあえずネットに溢れてるSEOの情報は気にしなくて良い。
そのほとんどがアフィリエイト目的で作られてページに過ぎないから。
htmlに直接スタイル当てるのが推奨されてないのは、
文字数が増えてhtmlのファイル自体のサイズが増える＝読み込みに時間がかかる＝ページが重くなる
ページが重くなれば閲覧する人にはマイナスにしかならないから。それだけの話。
あと、制作する人が管理しやすいってのもある。htmlに直接スタイル書くとタグが長くなって見にくくなるから。
htmlにはクラスだけ指定しておいて、cssで装飾するってのが一番効率的で、作業しやすい。
後から変更を加えたいって時でも、cssをちょっとイジるだけで良いし。
469:Name_Not_Found
16/02/11 14:50:53.80 .net
>>468
俺はhtmlファイルの容量増加よりも役割分担のためって認識だなぁ
470:Name_Not_Found
16/02/11 15:13:41.35 .net
>>469
俺もそう思うし、>>468も本当はそう思っている
471:Name_Not_Found
16/02/11 16:06:02.93 .net
>>468,469,470
ありがとうございました。
色んなサイト見ると、<li id="">等直接書いているパターンが多い気がしたから
これが綺麗な書き方なのかなぁと。
一応、cssやタグの正しい使い方等がある程度わかってきたので
次は綺麗な書き方というか、正しい書き方を学ぼうかなと思いまして。
感謝します。
472:471
16/02/11 16:20:11.51 .net
cssは互いのものでしか？
473:Name_Not_Found
16/02/11 16:35:21.50 .net
>>471
いろいろ見えてくると楽しくなるよね。
新しい疑問も出てくるだろうけど、それらもいずれ解消するだわさ。
474:Name_Not_Found
16/02/12 12:00:17.48 .net
>>471
<li id="">等直接書いているパターン
文書内に常に1 個しかないことがわかってるなら、全然あり
#test p {}
と書けば id=test の中の p 以外の p には干渉しないことが保証される
id セレクタは詳細度が高いので、他より優先させたいスタイルをあてがいやすい
利点もある
475:Name_Not_Found
16/02/12 12:34:53.64 .net
DW2015使ってるのですが、まとめサイトなどの下のほうにあるコメント欄をつけたいのですが。DWの機能でないでしょうか？
一応下記のようなものは発見したのですが、こういうのって安全なのでしょうか？
URLﾘﾝｸ(fukafuka295.jp)
476:Name_Not_Found
16/02/12 13:25:15.52 .net
>>475
> DWの機能でないでしょうか?
ない
> こういうのって安全なのでしょうか？
わからない
ただ、オレならこんなの仕込まないで、自分で作る
477:Name_Not_Found
16/02/12 15:57:37.48 .net
>>475
dwの機能はないと思うよ。
コメントまわりはDISQUSというサービスが割とポピュラーな印象ある。
478:Name_Not_Found
16/02/12 16:05:17.92 .net
>>475
まとめサイトは基本ブログベースだから
コメントもブログのコメント機能を使ってるのが多いと思われる
479:Name_Not_Found
16/02/12 18:40:31.21 .net
一般的なCSSの記述方法って
・HEAD内で外部CSSを読み込む
・HEAD内にSTYLEを直接書き込む
の二通りだよね？
480:Name_Not_Found
16/02/12 18:57:09.91 .net
セルの結合colspanをcssで書くにはどうすればいいんですか？
481:Name_Not_Found
16/02/12 19:06:46.50 .net
>>480
書けない
ので、無理やりcssで書くなら、はみ出さす！
引き継ぎの時に変態と言われるコードになる
482:Name_Not_Found
16/02/12 20:25:56.71 .net
>>479
だね。
他にはbodyタグ以降に直接とか。
でも少し前にやりとりがあったように、あんましやらない。
483:479
16/02/12 21:01:36.71 .net
>>482
外部CSSを読み込んでるとレンダリングが阻害？されてるらしくていろいろ考えてたんよ(´・ω・`)
レスありがとう
484:Name_Not_Found
16/02/12 21:03:39.27 .net
>>483
ファーストビューのcssは直接記入とかルールはあるけど今はまだ大丈夫かな
表示速度を細かく気にしないなら全部外部でおkだし
485:479
16/02/12 21:22:50.90 .net
>>484
今日は半日くらいグーグル先生とにらめっこしてた
現在進行形
486:Name_Not_Found
16/02/12 22:28:45.09 .net
i.imgurをsrcで表示させようとしたら失敗するんだけど
どうやったら対処できんの？
487:Name_Not_Found
16/02/13 00:47:05.15 .net
ダイレクトリンクでやってる？
488:Name_Not_Found
16/02/13 00:53:23.55 .net
>>483
阻害？
外部cssにすることによるオーバーヘッドって気にするほど大きい？
httpリクエストが1回増えるだけだろ？
外部cssがたくさんあればまた別だけど
489:Name_Not_Found
16/02/13 01:59:44.90 VNURWcQN.net
HTMLやCSSの読み込みの順番について教えてください。
<head>内に外部CCSを指定しています。
HTMLの上から順番に読み込むそうですが、classやid等cssで指定した部分はその都度、ブラウザがcssを見に行って描画されるのでしょうか？
HTMLとCSSを分離する利点はよくわかるのですが、インラインで書いた方が描画が早かったりとかしますか？
また、例えば、TOPページに<input>があって、その装飾を外部cssに記述してあったとします。
仮に外部cssが1000行あって、inputの指定が一行目にある場合と1000行目にある場合で
ブラウザの描画時間の差が出ますか？
490:Name_Not_Found
16/02/13 04:36:12.95 .net
今時のブラウザで、imgにボーダーがデフォルトでつくのってありますか？
また、いつごろのブラウザからつかなくなったのでしょう？
今でもリセットで
img { border-width : 0; }
は必須でしょうか？
491:Name_Not_Found
16/02/13 05:10:10.37 .net
>>490
IE7まで
492:Name_Not_Found
16/02/13 05:12:29.99 .net
>>489
URLﾘﾝｸ(tokkono.cute.coocan.jp)
493:Name_Not_Found
16/02/13 08:56:52.49 .net
>>488
バリデータにでも引っ掛かったんでない？普通はきにならないもんだろうし
494:Name_Not_Found
16/02/13 09:56:43.11 .net
だよね
それか大量の外部cssを読みにいってるか
495:Name_Not_Found
16/02/13 10:48:20.59 .net
GoogleのなんたらInsiteあたりかな
496:Name_Not_Found
16/02/13 11:25:35.48 oizcU6fK.net
1つ手前の要素（class、idなし）を指定する方法ってないですかね？
下の9と11にスタイルを効かせる場合、どういう方法がありますか？
<p>7</p>
<p>8</p>
<p>9</p>
<p class="current">10</p>
<p>11</p>
<p>12</p>
11については隣接セレクタでいけますが、9が特定できないんです
497:Name_Not_Found
16/02/13 11:29:04.47 .net
nth-childでいけるお(´・ω・｀)
かんばれお(´・ω・｀)
498:Name_Not_Found
16/02/13 12:40:33.99 .net
>>496
:has()
URLﾘﾝｸ(www.hcn.zaq.ne.jp)
499:Name_Not_Found
16/02/13 12:56:22.50 .net
>>496
そのコードが、完全自前で作れるものなら、9と11に専用のクラス当てるのが一番楽だよ。
自動で生成されるhtmlなら仕方ないけど。
500:Name_Not_Found
16/02/13 15:56:02.39 .net
:has()てjQueryのみの疑似クラスでなかったけ
501:490
16/02/13 15:56:45.99 .net
>>491
IE7以前を無視するとすれば、
img { border-width : 0; } はもはや不要なんでしょうか？
502:Name_Not_Found
16/02/13 16:11:46.31 .net
:has()って初めて知った！
使ってみたけど使いこなせなかった！
ムズイ；；
503:Name_Not_Found
16/02/13 16:43:22.57 .net
>>497
それだとpの数だけ設定必要じゃない？
504:Name_Not_Found
16/02/13 17:04:10.39 .net
Pがどこにあるかにもよるだろうけど いけると思われる
ソースが出てくれば試しに組んでみてやってもいい
って↓が言ってた
505:Name_Not_Found
16/02/13 17:13:53.14 .net
>>501
悪いけどそんぐらい自分で判断してくんない?
506:Name_Not_Found
16/02/13 17:33:55.42 .net
IE7以前を無視しちゃダメだよ
無視されたら悲しいでしょう？
俺だったら無視するなー
507:Name_Not_Found
16/02/13 19:29:23.61 .net
>>501
最近それが不要かどうかでこのスレで長々と揉めてたから、このスレの前半、もしくは前スレ漁ってみ
508:Name_Not_Found
16/02/13 21:10:15.74 .net
サイト用の画像素材の手入れをしているんですが
既存のGIFやPNG画像の色数を確認するにはどうしたらいいのでしょうか？
PNG24で作られた画像が256色以下なら、PNG8で作り直したいなと。
仮に（極端な話）257色だったらそのままにしておき、255色だったらPNG8に作り直したいといった状況です
フォトショCS4が作業環境としてあります
よろしくお願いします
509:Name_Not_Found
16/02/13 21:36:44.90 .net
板違いです。
510:Name_Not_Found
16/02/13 22:04:40.90 .net
拡大して色を数える
511:496
16/02/14 00:22:27.33 .net
すいません>>496は自動生成のページ送りの部分です。ほぼそのままです。
カレントの前後に効果をかけたいという内容です。
>>497
相対位置であること、総数不定ですが、できますかね？
>>498
初めてしりました。が、具体的にどう使っていいのかわかりません。
>>499
自動生成です
>>504 試しにこれでどうでしょう（下記の例では3と5が対象）
<div id="pager">
<p>1</p>
<p>2</p>
<p>3</p>
<p class="current">4</p>
<p>5</p>
<p>6</p>
省略（7～100）※数量不定
</div>
512:496
16/02/14 00:26:31.41 .net
※補足
ページ送り：googleの検索結果にあるようなナンバリングのやつ
カレント：現在表示しているページ数（常に変化する）
今回の対象：カレントが変化するので今回の対象も相対的に常に変化する
513:Name_Not_Found
16/02/14 01:26:32.38 .net
ページ送りなら、別にcurrentだけでいいんじゃないの？
514:Name_Not_Found
16/02/14 02:34:47.51 .net
jsなら朝飯前だが使えんの？
515:Name_Not_Found
16/02/14 02:36:14.73 .net
>>508
そこまでこだわる理由なにかあるの？
516:496
16/02/14 02:37:42.53 .net
>>513
まあ、色々事情があってですね。
レスポンシブでより見やすくするために工夫したいんです。（ここはjQueryナシで）
それと今回はページ送りですが、技術的に今はCSSだけでどこまでできるか知りたいので。
517:496
16/02/14 02:48:37.03 2AgJFe13.net
>>514
js使ったら、自分でも解決できますが、データ遷移してもURLに変化がない（クエリ文字なし）ので
ページロードはキーになりません。（初回のajax-load時は掛かるが、遷移時は消える）
いちいちページ送りボタンをclick時にfunctionさせるのもナンセンスなので、
cssでできないかと思いました。
.current + p →1つ後ろの要素が指定できる
.current - p →1つ前の要素 ←こんなのがあればいいのですが。
518:Name_Not_Found
16/02/14 03:10:32.13 .net
そんなもんあっても滅多に使わないよ。
とりあえずスマホ用のページ送りを作ればいいんじゃね。
519:Name_Not_Found
16/02/14 04:48:33.72 mKonVvrO.net
>>515
256まではPNG-8でいけるのに、257になったとたんPNG-24で容量が増える
塵も積もればで
マルチアイコンとかね
520:Name_Not_Found
16/02/14 10:01:57.35 .net
時には妥協も大事である
js使って楽になっちゃいなYO！
521:498
16/02/14 12:30:37.61 .net
>>511
仕様書に隣接セレクタの事例が載っていたはずだが、どこがわからない？
ただし、実装されているブラウザが存在するかまでは調べていない。
:has() はMDNにも載ってないぐらいだから少なくとも Firefox では未実装なのだろう。
他の手段としては :not(:not()) で肯定先読み的なセレクタが作れるかも知れん(未検証)。
論理構造的にはサーバサイドでclassやidでマークアップさせる方が素直な実装だとは思うが。
<p class="prev">3</p>
<p class="current">4</p>
<p class="next">5</p>
522:496
16/02/14 12:58:51.24 .net
>>521
わからない点は、今回はクラスがキーになり、構造だけでは指定できない点です。
こういう感じで書ければいいのですが、効かないようっす。（そういう意味ではない？）
p:has(p + .current),p:has(.current + p){
}
サーバーサイド含め、解決はできるのですが、今回はCSSでできないものか知りたいだけなんです。
具体的にはWordPressのFAQmanagerというプラグインでページ送りの設定にした場合のケースです。
プラグイン側をカスタマイズするよりもCSSで解決できないものかと。
523:Name_Not_Found
16/02/14 13:19:52.73 .net
>>500
これは違うのか？
524:Name_Not_Found
16/02/14 13:31:58.47 .net
>>523
>>498はW3Cのサイト。
525:Name_Not_Found
16/02/14 14:23:28.21 .net
>>522
プラグイン側をいじればすぐ出来るのに。
526:498
16/02/14 17:35:21.21 .net
>>522
class がキーになろうが、基本原理は変わらないと思うのだが。
URLﾘﾝｸ(www.hcn.zaq.ne.jp)
> 次の選択子は，別の dt 要素が直後に続く dt 要素に合致する：
> dt:has(+ dt)
上記のようにあるので、>511のHTMLに倣うなら p:has(+.current) で良いだろう。
開発者ツールのCSSタブでも見ればブラウザが対応しているかも分かるはずだ。
> サーバーサイド含め、解決はできるのですが、今回はCSSでできないものか知りたいだけなんです。
繰り返すようだが、Selectors API Level 4 で可能だから CSS で出来る。
Editor’s Draft で実装が整っていないだろうし、実用段階とも思えんが、実験目的なら良いだろう。
527:Name_Not_Found
16/02/14 18:29:21.21 .net
CSS4っていつ頃から使えるようになるんですの？
528:Name_Not_Found
16/02/14 21:57:24.91 .net
URLﾘﾝｸ(www.htmllint.net)
このサイトでテストしてみたら
body内のarticleをマークアップしてるmainはダメだって怒られた
mainはセクショニングコンテンツに入ってないし
問題ないと思ったんだけど、bodyの下位要素にはmainはダメなんだっけ？