(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ20at HP
(X)HTML/CSS/Dreamweaverの質問に優しく答えるスレ20 - 暇つぶし2ch2:Name_Not_Found
16/01/09 12:05:05.86 .net
>>1
おつ

3:Name_Not_Found
16/01/11 10:04:51.40 .net
>>1
復活させたのね、お疲れ

4:Name_Not_Found
16/01/11 16:53:39.30 .net
>>1お疲れさまであります!

5:Name_Not_Found
16/01/12 00:00:59.89 af6Y9i/l.net
IEのhelvetica問題ってもう解決してますか?
2年くらい前にバグがあると聞きました。
IE11だと問題ないようですが…9や10では相変わらずなんでしょうか?

6:Name_Not_Found
16/01/12 14:16:33.81 fAePmt0d.net
cssで!importantを付けたのに上書きされて、困っています
こんなの初めてなんですがどこを見たら良いんでしょう?(参考ページとかでも)

7:Name_Not_Found
16/01/12 14:46:20.02 .net
優先順位があるからな
あんまりimportに頼ってると後でめんどくさくなるから気をつけろよ
って↓が言ってた

8:Name_Not_Found
16/01/12 15:20:14.80 .net
パンくずをページの下の方に移動させたら、検索結果画面に反映されなくなったんだけど、場所関係あるの?
構造化ツールでは問題なく認識はされてる。

9:テスト
16/01/12 17:03:39.70 .net
🌑、🌓、🌕、🌗

10:テスト
16/01/12 17:04:45.84 .net
右の「127767」だけ表示されないのはなぜでしょうか?

11:テスト
16/01/12 17:05:59.77 .net
>>9
&# 127761;、&# 127763;、&# 127765;、&# 127767;
です。

12:Name_Not_Found
16/01/12 18:31:21.16 .net
依存文字だからじゃね?知らねーけど

13:Name_Not_Found
16/01/13 14:01:32.10 .net
最近HTMLを始めたんですが、見出しとしてひとつの単語を<b>で太字にする場合は<p>で囲んでからマークアップしないといけないのでしょうか?
良い例 : <p><b>見出し</b></p>
悪い例 : <b>見出し</b>

14:Name_Not_Found
16/01/13 15:04:20.72 .net
>>13
いいも悪いもないよ。それぞれのタグは役割と機能が違うから、自分の理想のレイアウトに必要なタグを選んで使うだけ。
あと、見出しの場合は専用のタグがあるから、"見出しタグ"でググってみて。解説ページが腐るほどある。

15:Name_Not_Found
16/01/13 15:23:00.00 .net
>>14
ありがとうございます!
これから調べてみます!タグって難しいですね(´・ω・`)

16:Name_Not_Found
16/01/14 21:21:31.94 /s8mL2H9.net
htmlとcssで画像を複数横に並べたその下に、それぞれの画像に対してのテキストを表示したいのですが、
よい実装方法が思いつきません。なにかよい実装方法はないでしょうか?
テキストの表示は、そのテキストが対応している上の画像の中心がテキストの中心になるように表示したいです。
イメージとしては
□ □ □ □
テ テ テ テ
□:画像
テ:テキスト

17:Name_Not_Found
16/01/14 22:55:30.76 .net
>>16
よくあるパターンだからググった方が早い
css ブロック 横並び で検索してみ

18:Name_Not_Found
16/01/15 13:37:46.79 .net
Aタグの中にはインライン要素しか入れられないんだよね?
span使うか

19:Name_Not_Found
16/01/15 13:59:32.38 .net
>>18
HTML5以外はそうだね

20:Name_Not_Found
16/01/15 16:24:36.31 .net
>>16
対象ブラウザはどうなってるの?
それによって、書き方変るよ

21:Name_Not_Found
16/01/16 01:10:37.24 .net
cc2014を使用していますが、
カラーピッカーが使いづらくなってしまって困っています。
以前のようなタイプに戻す方法はありますか?

22:Name_Not_Found
16/01/16 03:59:06.62 .net
質問が下手だな

23:Name_Not_Found
16/01/16 09:31:58.12 .net
cc2014ってなんやろ

24:Name_Not_Found
16/01/16 15:14:45.63 .net
>>23
Dreamweaver CC 2014 の事だろうが、省略しすぎだな
タイトルに Dreamweaver が付いてるから省略しても伝わると思っているんだろう

25:Name_Not_Found
16/01/16 15:47:48.94 .net
どり~むうぃ~ば~なら本スレなかったけ?

26:Name_Not_Found
16/01/16 17:06:24.88 .net
だからずっと消せって言ってんじゃん。DWだけがスレタイに入ってる意味ないんだから。

27:Name_Not_Found
16/01/16 18:34:36.75 .net
>>25
確かにあるね
情報を分散させる意味はないからタイトルから "DreamWeaver" は削除して良さげ
Dreamweaver Fireworks♪Macプロ(その23)
スレリンク(hp板)

28:Name_Not_Found
16/01/17 12:14:23.92 .net
知恵を拝借させてください。
現在、スマートフォン用のメニューをcssのみで作成しています。
作成場所のURL : URLリンク(jsfiddle.net)
オレンジ色の格納部分を画面いっぱいまで広げたいのですが、
どうしても広げることができません。
cssのみで広げる方法がありましたら教えてください。
よろしくお願いします。

29:Name_Not_Found
16/01/17 12:33:17.51 .net
>>28
html, body { height;100%; }
を適用して高さは calc() で計算したら?
ただ、必要ないのに全体に拡大するUIは隠れるコンテンツが多くなるからユーザビリティが悪いと思う

30:Name_Not_Found
16/01/17 13:00:47.35 .net
>>29
レスありがとうございます。
あと言葉が足りませんでした。
画面いっぱいは縦方向ではなくて横方向でした。
ごめんなさい。

31:28
16/01/17 13:24:39.84 .net
問題が解決しました。
レスをくださった>>29さんありがとうございました。

32:Name_Not_Found
16/01/17 14:57:47.20 .net
<!DOCTYPE html>と<!doctype html>
皆さんはどっち派ですか?

33:Name_Not_Found
16/01/17 16:34:15.42 .net
>>32
使ってない

34:Name_Not_Found
16/01/17 21:18:37.67 Z+mcVv/9.net
<body>
ああああ。<dr>
<div>かかかかか。さささささ。たたたたた。</div>
ななななな。
</body>
このように表示したい↓
あああああ。
かかかかか。さささささ。たたたたた。
ななななな。
・上記のような記述で1行目の<br>は必要でしょうか?
 あってもなくても表示は変わらないようでした。(クローム47)
・</div>の後に<br>はなくても自動的に改行される、という理解でよいでしょうか?
文法的に正しい方法を知りたいです。
宜しくお願いいたします。

35:Name_Not_Found
16/01/17 21:44:48.33 .net
>>32
前者が正式
後者はHTMLでなければ不可

36:Name_Not_Found
16/01/17 22:33:21.37 .net
dreamweaverについて
URLリンク(youtu.be)
どうやら右上のプルダウンメニューで拡張を選ぶと、CSSデザイナーパネルが2カラムにすることができたようですが、
今のCC2015だと見当たりません。どうしたらできますか?

37:Name_Not_Found
16/01/17 22:34:38.51 .net
すみません動画のここです URLリンク(youtu.be)

38:Name_Not_Found
16/01/17 22:51:45.68 .net
横に一定幅広げたら自動で2カラムになりました…
初心者ですみません

39:Name_Not_Found
16/01/17 23:00:25.69 .net
adobe flashで作ったhtmlファイルが、依然のcs5では見ることが出来ていたのですが、
cs2015に変えるとライブで表示されなくなり、代わりにget adobe flash playerというのが左上に出ています。
adobe flashは最新のが入っているはずで、そのhtmlはexplorerでは見ることが出来るので、データが壊れたとかでもないと思うのですが
原因を教えていただけると幸いです

40:Name_Not_Found
16/01/17 23:26:29.76 .net
>>34
<div>で改行されたのは、ブラウザのデフォルトのCSS(デザイン)設定で、
そういう指定をしているから。
inlineを指定すれば、改行されない
デザインによらず、文章としてそこに改行が入るのなら、
<br>を入れる
あああ。<br>
<div>かかか。<br></div>
ななな。

41:Name_Not_Found
16/01/18 02:58:02.96 .net
あああ。<br>
<div>かかか。<br></div>
ななな。
あああ。
<div>かかか。<br></div>
ななな。
あああ。<br>
<div>かかか。</div>
ななな。
あああ。<br>
<div>かかか。</div><br>
ななな。

全部同じ表示になる。どれが正しいの?

42:Name_Not_Found
16/01/18 03:00:45.05 .net
>>41
<p>あああああ。</p>
<p>かかかかか。さささささ。たたたたた。</p>
<p>ななななな。</p>

43:Name_Not_Found
16/01/18 03:35:09.23 .net
<div>…</div>の前後には自動的に改行が入るのが普通なので
あああ。
<div>かかか。</div>
ななな。
ってするところだけど、それ以前に普通はこんなところで
こんなdivダグの使い方がちょっとおかしいような

44:41
16/01/18 15:45:00.70 .net
例がおかしくてすみません。
“<div>…</div>の前後には自動的に改行が入るのが普通”
まさにこれが知りたかったのです。前行に<br>を入れると、ブラウザの挙動は入れても入れなくても変わらないのですが
入れないのが正しいのですね。

45:Name_Not_Found
16/01/18 15:58:53.64 .net
>>44
HTMLには、ブロック要素とインライン要素という2タイプの要素があるだよ。
ブロック要素は前後に改行が挿入されるよ。
インライン要素は、改行が挿入されないよ。
主なブロック要素は、div、p、h1~h5、table、ol、ul、dl…など
主なインライン要素は、span、b、strong、li、tr、td、small…など
ブロック要素の中にインライン要素を入れてもいいが、インライン要素の中にブロック要素を入れてはいけないよ

46:Name_Not_Found
16/01/18 17:42:02.12 .net
HTML5からは違うらしいけどな

47:Name_Not_Found
16/01/18 20:06:48.16 .net
いや、だからPを使えと

48:Name_Not_Found
16/01/18 20:27:33.10 .net
俺はspanにspan入れて、更にその中にもspan入れてるけど、何か質問ある?

49:Name_Not_Found
16/01/18 20:37:06.84 .net
>>48
この淫乱野郎!

50:Name_Not_Found
16/01/18 21:58:43.77 .net
>>45
ありがとうございました。

51:Name_Not_Found
16/01/18 22:04:18.48 .net
input {
background: #000000;
border: 1px solid #000000;
color: #ffffff;
}
input:hover {
background-color: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .2);
}
のようにしてボタンをhover時にふわっと明るくしたいのですが
borderだけ色が余計に明るくなってしまいます。
試みに
border-color: rgba(255, 255, 255, .0);
としてみたら、うまく動作しました。(borderが真っ白になるとはずなのですが…)
どこをしくじってるんでしょうか?

52:Name_Not_Found
16/01/19 00:08:08.14 .net
>>51
バックグラウンド部分とボーダー部分は重なっているので、hover時には
background-color → バックグラウンドのrgba(255, 255, 255, .2)
border-color → バックグラウンドのrgba(255, 255, 255, .2)+ボーダーのrgba(255, 255, 255, .2)
≒rgba(255, 255, 255, .36)となるので、ボーダー部分の方が少し明るくなります。
ちなみにrgbaの4つめの値は"不"透明度なので、rgba(255, 255, 255, .0)は不透明度0すなわち完全な透明です。
よってボーダー部分にこれを指定したときはボーダー部分もバックグラウンドのrgba(255, 255, 255, .2)だけに
なるのでバックグラウンド部分とボーダー部分が同色になったのです。

53:51
16/01/19 00:21:06.94 .net
>>52
わかりやすい解説をありがとうございます
.2を.0で対応したいと思います
ボーダーを消すのがいいのは解るのですが、他の要素と同じにしたいのでボーダーを付けたまま対応したかった次第です。

54:Name_Not_Found
16/01/19 09:49:52.26 ViMDf3Tm.net
段落であれば<P>
装飾であれば<DIV>
っていうけど、1行程度のサイトの紹介文はこの場合どうなるんだろう
一応文章だから段落(P)なのか、装飾をするから(DIV)なのか
1行程度だと段落っていうのかな
ゲシュタルト崩壊してきたwwwうはwww

55:Name_Not_Found
16/01/19 13:19:31.87 .net
1行程度

56:Name_Not_Found
16/01/19 13:26:15.23 .net
一粒でもお米やで

57:Name_Not_Found
16/01/19 13:48:42.29 .net
段落であれば<P>
装飾であれば<DIV>
こういう固定観念のせいで迷いが生じるんだよね
PとDIVはそれぞれ意味も機能も違うわけなんだから
まずはそれぞれのタグについて勉強した方が良いと思う
一行程度の紹介文でも、場合によってはサイト共通のh1にだってなるし

58:Name_Not_Found
16/01/19 14:09:10.74 .net
>>54
divは装飾ってことじゃないぞ
文字ならp
てかdivにしたとしてもpが必要だから勘違いすんな

59:Name_Not_Found
16/01/19 15:39:59.17 .net
ulを使ったリストの中にdlを使って定義を入れるってアリかな
<ul>
<li>あいうえお</li>
<li>かきくけこ
<dl>
<dt>さしすせそ</dt>
<dd>たちつてと</dd>
</dl>
</li>
<li>なにぬねの</li>
</ul>

60:Name_Not_Found
16/01/19 17:07:38.80 .net
ぜんぜんあり
li要素同士が意味的に並列なら

61:Name_Not_Found
16/01/19 17:28:35.40 .net
>>60
ありがとう

62:Name_Not_Found
16/01/19 20:46:38.44 AWHD2ep0.net
IE11の「要素を検証」というのでページのある個所を見たら
CSSの記述してあるプロパティが表示されて、赤い波線が付いているプロパティがありました
これってもしかして誤った記述だと教えてくれてる?!!
消したほうが(記述を改めた)いいのかな?

63:Name_Not_Found
16/01/19 21:18:04.40 .net
どんな記述か分からないからなんとも

64:62
16/01/19 21:34:10.08 AWHD2ep0.net
>>63
background-position: right;
align: right;
ずいぶん昔に書いたもので
alignに波線が付いていました。そんなプロパティないですよね・・・
右寄せはbackground-positionで効いてたようで
何年も気が付きませんでした

65:Name_Not_Found
16/01/19 22:08:22.43 .net
IE11で検証してないからわかんけど
問題ないなら消してもいいんじゃないの?

66:62
16/01/19 22:16:27.98 .net
クロームでも見てみまた
!マークがついていてカーソルホバーしたらunknown propertyと出てた

67:Name_Not_Found
16/01/19 22:21:03.00 .net
外部CSSの記述についての質問です
@charset "shift_jis";
BODY{
などで始まって、次いでAタグについて書いています。あとは規則性はあまりなく
管理しやすいようにしています
が、実際は後から追加したセレクタなどが増えて、けっこう煩雑です
ふと気になったのはセレクタを記述する順番にルールはあるんでしょうか?

68:Name_Not_Found
16/01/19 22:29:24.94 .net
>>67
基本的には自分が管理しやすい書き方でいいけど、
CSSの仕様として、下に書いたものが優先されたり、詳細度っていうめんどくさい要素もあるから調べてみるといいかも。
まぁhtmlで上から使う順に書いていけばあんまりトラブルは起きない。

69:67
16/01/19 23:20:00.17 .net
CSS セレクタ 記述順序 みたいな感じで検索したんですが、
ヘッダ内のmetaタグ関連の記載は散見されるんですが、中身の順序は見当たらなかったんですよね
body
A
table
input
hr
#ID
.hoge
みたいな指針があるのかなと思ったので。
「htmlで上から使う順」というのは、そのセレクタを使ってる頻度が高い順ということでしょうか?
たとえば、一か所にしか使っていないinputボタンのスタイル設定を先頭に持って来たりすると、なにか不具合が生じたりするものなのでしょうか?

70:Name_Not_Found
16/01/19 23:59:56.62 .net
ん?それなら
CSS セレクタ 優先順位
で検索してみ
メジャーなトピックだからひっかからん訳がない

71:Name_Not_Found
16/01/20 00:07:41.84 .net
>>69
URLリンク(www.hcn.zaq.ne.jp)
URLリンク(hp.vector.co.jp)
仕様書リンクはテンプレにあっても良いのではないかね

72:67
16/01/20 01:31:21.27 .net
優先順位ではなくて、セレクタの記述の標準順序はあるのか?と言う疑問です
@charset "shift_jis";


から書き始めて、以降、序列のルールはあるのか?という疑問です

73:Name_Not_Found
16/01/20 01:36:19.29 .net
入力フォームのテキストエリアの背景色を平常時と入力時で変えたいと思っています。
input[type="text"] {
background-color: gray;
}
textarea,input[type="text"]:focus,
textarea:focus {
background-color: #ffffff;
}
通常時はgrayで、入力時にはブラウザのデフォルトに戻したいのですが、transparentだと背景が透けてしまいます。
#ffffffがそれっぽくはなるのですが、ユーザーによっては色を変えているかもしれません。
#ffffff指定ではなくデフォルトに戻すにはどう指定したらよいでしょうか?

74:Name_Not_Found
16/01/20 01:40:42.82 .net
>>72
優先順位があるから期待通りに動作するように順番を気にするものだろ
問題ない範囲なら好きに書けばいい

75:Name_Not_Found
16/01/20 01:52:47.62 .net
>>72
意味は分かるが、特にルールはない。別にbodyから書く決まりもないし。好きなように書けばいいよ。
ただ、みんなが言ってるのはCSSにはセレクタの優先順位っていう概念があるから、まずそれを理解しとけよって事な。
最初に要素単体で書く場合が多いのは、要素にはそれぞれプロパティの初期値が決まっていて、それをリセットする為。

76:67
16/01/20 02:07:23.23 .net
うむ。了解。
ありそうでないんですね、ルール
SEOなんちゃらとかいう人たちが、こうするべきとか言ってそうなイメージで(^_^;)
アドバイスいただいた優先順位の理解を深めつつ、管理しやすいように並べかえようと思います

77:Name_Not_Found
16/01/20 02:27:04.05 .net
いくら似非SEO業者でもCSSの記述順序なんかに言及しないでしょ

78:Name_Not_Found
16/01/20 10:12:23.48 .net
dlタグの中にはdtタグとddタグしか入れることができない!
っていうけど↓みたいなのもダメなのかな
<dl>
ここからphp開始
"<dt>あいうえお</dt><dd>かきくけこ</dd>",
"<dt>さしすせそ</dt><dd>たちつてと</dd>",
"<dt>なにぬねの</dt><dd>はひふへほ</dd>"
phpここまで
</dl>
だれか教授してくだちぃ

79:Name_Not_Found
16/01/20 11:11:08.37 .net
>>78
HTML出力された段階で正しいHTMLになっていれば、PHPコードは何を書いても問題ない

80:Name_Not_Found
16/01/20 11:13:25.23 .net
>>64
> align: right;
そんなプロパティはない
「誤った記述」を疑うならそのプロパティの意味を考えろ
あなたが何を期待して align を書いたのかを踏まえ、alignプロパティで何を指定できるのかを調査しろ

81:78
16/01/20 11:20:52.34 .net
>>79
ありがとうございましゅ!

82:Name_Not_Found
16/01/20 11:47:49.73 .net
定義で思い出したけどHTML5からはブロック要素・インライン要素の概念がなくなったみたいね
UL,OL,DLとかをAで囲んでもいいってことだろうし便利な世の中になったもんだな

83:Name_Not_Found
16/01/20 12:09:24.49 .net
>>80
遅れてきた挙げ句、なんで偉そうなの?

84:Name_Not_Found
16/01/20 12:41:45.83 .net
回答に遅れるとかあるの?
期限付き質問でもあるまいし、未解決の質問を見かけたら回答するのは普通でしょ

85:Name_Not_Found
16/01/20 13:00:43.00 .net
そもそも、16時間後の回答なら遅くはないと思うがな
それで遅いと不平をいうならチャットでやれ

86:Name_Not_Found
16/01/20 13:02:25.49 .net
>>62,64,66の書き込みを読んだ上で>>80のような回答になるのはちょっと読解力がなさすぎでは

87:Name_Not_Found
16/01/20 14:26:58.34 .net
質問はIE11の機能的な事でしょ?

88:Name_Not_Found
16/01/20 14:55:14.86 .net
div IDのheroって、どうゆう対象、中身?に対して使われることが多いですか?
すみません初心者です。

89:Name_Not_Found
16/01/20 15:12:26.16 .net
メインビジュアル
日本人で使ってるやつあんまりいない気がするが

90:Name_Not_Found
16/01/20 15:52:11.06 .net
へー、知らなかった
URLリンク(qiita.com)

91:Name_Not_Found
16/01/20 17:44:54.55 .net
ヒーローイメージの事でしょ

92:Name_Not_Found
16/01/20 20:26:14.62 .net
あまり使われないんですか、ありがとうございます!

93:Name_Not_Found
16/01/20 20:28:38.67 .net
<audio controls>
<source src="日本語ファイル名.wav" type="audio/wav">
</audio>
htmlにdreamweaverでオーディオを表示しようと思い、上の様に入力しました。
ライブビューでは見ることが出来るのですが、explorerでは「エラー、再生が中止されました」
と出てしまいます。
何が間違っているのでしょうか。

94:Name_Not_Found
16/01/20 20:30:23.14 .net
どなたか、>>73をお願いいたします

95:Name_Not_Found
16/01/20 20:59:33.76 .net
フラッシュで作った画像が大きすぎて画面の下から飛び出しています。
にもかかわらず、スクロールができません。
どうしたらスクロールできるように設定できますか?

96:Name_Not_Found
16/01/20 21:01:47.17 .net
>>32に対する>>35の回答って
xmlを使うなら小文字はダメってことだよね?

97:Name_Not_Found
16/01/20 23:18:58.41 .net
html5とcssを使って、文字数に左右されない(大きさが変わらない)
表を作りたいのですが、どのようなタグを使えばいいでしょうか。
divのボックスでやると文字数が多いと表のも大きくなってしまう‥

98:Name_Not_Found
16/01/20 23:47:54.14 .net
表っていってるじゃん

99:Name_Not_Found
16/01/20 23:48:42.00 .net
>>97
マルチ
URLリンク(detail.chiebukuro.yahoo.co.jp)

100:Name_Not_Found
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
単純にスマホ用を2列にした方がよくない?
画像のサイズが同じなら、結局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
なんとなく分かる
でもあんな不毛な苦労はもう嫌だw

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
大した事ねー奴らが上から目線になれるんだからいいじゃんw

167:Name_Not_Found
16/01/25 19:34:21.43 .net
ウェブサイト内で使用するパーツ画像(ロゴや見出し文字やバナー)について教えてください
(スレ違いでしたら誘導していただけるとありがたいです)
10年近く前に使ったサイトでは、何も考えずに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以上にはどう見て見えないだろw
17色、透過も使ってないみたいだよ

178:Name_Not_Found
16/01/26 00:01:06.62 .net
別に決まりはないんだから、どの形式使われてても不思議じゃないでしょw

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
有能な俺がググったら1秒で見つけられるんだよなぁ。ここが素人との違い。
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だったり表示されたりと聞きましたが
勝手に表示される今時のブラウザってありますか?IE11とクローム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ディスキチの次はボーダー君か
キャラ揃いすぎだろww

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
ちょっと難しい質問するとこれだよw

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とかに貼ったほうが質問するほうも教えるほうも効率的
具体的に答えてもらいやすい気がする
所詮2chだから答える方も義務じゃないし
質問する側もここじゃダメだと思えば他当たればよい
迷惑とか気にしすぎる必要はないよ

355:Name_Not_Found
16/02/01 20:43:49.85 .net
大げさすぎw

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
DWは初心者用の教本がある時点で恵まれてるってこと

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
どぅわれか~(´・ω・`)
とぅわすけて~(´・ω・`)
&copy;で出るコピーライトの色が真っ黒なの!しかもスマホで見たときだけ
なにが原因かわからないお(´・ω・`)
タチケテ(´; ω ;`)
&copy;って環境依存文字だっけ?(´・ω・`)

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の意味ねーw
つか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ファイルを読み込まれることになるから


次ページ
最新レス表示
レスジャンプ
類似スレ一覧
スレッドの検索
話題のニュース
おまかせリスト
オプション
しおりを挟む
スレッドに書込
スレッドの一覧
暇つぶし2ch