HTML/CSS の質問に優しく答えるスレ 30
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を age にすることをおすすめします
回答してくれる方は優しい人のみ！質問者に対して暴言を吐く人は このスレを見るな！！終わった話を蒸し返すやつは このスレにくるな！！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 29
http://mevius.2ch.net/test/read.cgi/hp/1503136885/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494233240/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>293 テキストエディターでライブビューのあるものでお勧めのものありますか。
フォームだけですけど、HTMLは本当に必要ないのでしょうか >>295
atom
後半は何を言ってるのか分からん
必要ならすれば良いだけだよ >>289
ならchromeの開発者ツールでいいんじゃね >>297 プログラマーでないと難しいのではないか プログラミング言語じゃなくてマークアップ言語でしょ？ 間違えた
htmlがマークアップ言語で
cssはスタイルシート言語だった ＵＲＬの、「これ」って記事の、画像の赤丸で囲ってあるところに広告入れたいのですが、
ＣＳＳのどこに入れたらいいのかわかりません。教えてください。
お願いします。 http://dietsokuhou.liblo.jp/archives/5300274.html >>300
例えばフォトショで
とあるテキストレイヤーを選択して
文字パネルのフォントサイズのところに「20」って入れる
みたいな作業に近い 例えば
<div>
<a href=xxx>hoge1</a>
"hoge2"
<a href=yyy>hoge3</a>
</div>
って記述されてる場合に、CSSで『hoge2』を選択、指定するにはどうすれば？ <div> "hoge2" </div>
<div>hoge2</div>
下じゃないの？
<div>に、id, class とか付けないと、すべての<div>でしか選択できない。
その<div>だけを選択したいのなら、id, class などで特定すべき
メールアドレスに「sage」と入れたら、ID は出ない >>310
どうもお世話になります
hoge2には<div>は付いておらず上下の<a>hoge</a>の間に
挟まれる形で直接記述されてます
どうにかしてhoge2だけを指定できないものかと思いまして そもそもhoge2がpにもdivにも囲われずタグなしってどうよ 近い形でいくと、5chの板一覧（http://menu.5ch.net/bbstable.html）における
"/"のような記述状態です >>307
div:not(a) {};
つうかpとかで囲っとけよ。。。 なんかうまくいきませんね
jsとかで拾ってタグ振り直す方が現実的な感じですかね
もう少し自力で格闘してみます
とりあえずお付き合い頂いてどうもありがとう すまぬ途中で送信してしまった
>>316
文の一部をインラインレベル要素でくくったら
こんな感じになるんじゃね？ このページをパソコンで表示して、
https://lifemagazine.yahoo.co.jp/articles/8500
マウスホイールで下にスクロールすると、先頭にある大きな画像がズームインする
のですが、どういう仕組みですか？ いや、<div>hoge2</div>が根本的に駄目だろ。
p等で囲めよ。 >>321
スクロール量に応じて、配置したimgタグにtransform: scale3d() と opacityをかけてる
JSでcssを制御してる >>324
解説ありがとうございました。
この効果は何を狙っているのでしょうか？ ホームページの新着情報の部分にスクロールバーを常に表示させたいのですが
スマホのchromeで見ると表示されません
overflow-y: scroll; や ::-webkit-scrollbar を試してもダメでした
どうすれば宜しいでしょう？ >>325
何も狙ってない
恐らくだけど、js担当がテキトーに作ってみたものが上司のハートに突き刺さって実装されたものと思われる >>313
<div class="message">
あいう<br/> <br/>ABC
</div>
2ch では、<p> で囲っていない。
5ch では知らないけど hoge2総突込みだな
なんかpやspanの感覚でdivで囲っちゃってる気がする いうｔも思うけどなんでhogeなんて使うのfooでよくないhoge打ちやすいけど 何でhogeと書いてホゲとは書かないのか突っ込みたい >>318
こんな感じか？
<div>
<なんかのタグ>
<a href=xxx>hoge1</a>
"hoge2"
<a href=yyy>hoge3</a>
</なんかのタグ>
</div>
だからうまくいかんのかな
そもそもそのhoge2は文字なんかな？ならばとりあえずこれでどうか
div:not(a) {color: red;}; 2週間からネットの講座申し込んで始めた、初心者と言うのすらおこがましいレベルの人間です。
このスレでもいつも勉強させて頂いて(ほぼ理解できませんが)ありがたいです。
何度教材や他のサイト読んでもfloatが理解できません。
例えば
僕は あなたが
大好きだ
としたい場合、
<div class＝"main">
<h1>僕は</h1>
<h1>あなたが</h1>
<h2>大好きだ</h2>
</div>
スタイルシートで
.main h1 {
float:left;
}
と記述すると
僕は 大好きだ
あなたが
と、なってしまいます。
h2は並べるようにしてないのにどうして横に並んでしまうんでしょうか
そして、あなたが←はなぜ並んでくれないのでしょうか・・
全然思い通りになりません・・
初歩の初歩ですんません 僕は
あなたが の改行
はブラウザ？のサイズの問題と自己解決しました！ も、もう少し勉強して出直してきます・・m(_ _)m floatは一番最初にぶち当たる壁だからな。
仕様を理解すればなんてことないし、同時にfloat糞だなって思うよ。 floatの仕様を理解するためにブロック要素やインライン要素を理解せにゃならんのと
インライン部分だけずれるって摩訶不思議（でもないんだけど）な仕様が本当にとっつきにくい
最初は重ねずに使えばどうってことないんだけどね CSSをHTMLに適用するには３種類あるに関して質問させてください
http://www.htmq.com/csskihon/004.shtml
のURLを参照してください。
たとえば１つのホームページはHTMLとCSSで構成されてコードソースの順番がCSSとHTMLに分かれていないですか。
たとえば、
CSSの記述
HTMLの記述
になっているか
CSSの記述
HTMLの記述
CSSの記述
のようにごちゃごちゃになっているか
以上から適用するという文言から、コードの順番がごちゃごちゃであれば、HTMLに適用しなくてもCSSのままでコードを書いていけば
いいのではないでしょうか >>340
海外の方かな？
適用ってなんのことを言っているの？ >>326
これなんですが質問の仕方が悪かったですか？ >>338-339
ありがとうございます！少し安心しました！
精進して少しはまともな質問できるように頑張ります
その時はまたよろしくお願いしますm(_ _)m >>342
chromeの仕様
全体のスクロールバーもよく考えたら見えてないだろ、それと同じ
多重スクロールは避けた方がいい >>340
普通、HTML, CSS は、別のファイルに書く
HTMLファイル内に、CSS も書いてあるのは、
Java, PHP, Ruby など、サーバー内のプログラムで、
HTMLファイルを作っているからだろう
だから、人間が書いていない。
プログラムによって作られたもの 自分のエスパー力に挑戦であえて書いてみる。
>>340
言う通り（上書きしない限り）順番は関係ない。
(2)CSSが簡単なものであれば、また初心者は「<style>要素で文書単位に適用する」、
つまりHTMLファイルに直接書いてもいいだろう。
(1)HTMLファイルが複数になるとCSSの共通部分がいくつも出てきたりすることが多い。
その場合は「<link>要素で外部CSSファイルを呼び出して適用する」にする。
これが君の言う”HTMLに適用しなくてもCSSのままでコードを書いて”かな？
管理（メンテ）面からこの方法が最もいい。(2)と(1)の併用もある。
(3)「要素にstyle属性を追加して局所的に適用する」は悪い例とされているので
特別な事情がない限り用いないほうがいい。（そのURLは説明のため書かれているが。）
話がずれてたら言ってくれ。 >>345
なるほど、たとえばFirefoxのF12を押せば、どういう構成でできているかわかるが、素人
が把握はなかなかできないだろう。アンケートなどのフォーマットをCSSなどをいじって
カスタマイズしたいのだけど、それでも素人にとっては難しいのかな。体裁だけなので、
HTMLは関係ないと思うのだが。 >>346
たとえば、HTMLとCSSが密接になっている例として下記をとりあげれば、私が質問した
１から３のうち、どれにあてはまる。
プラウザ表示
段落(青)
段落(赤)
段落(赤)
IDセレクタ CSS
p { color: red; }
#blue { color: blue; }
id属性を指定 HTML
<p id="blue">段落 </p>
<p>段落 </p>
<p>段落 </p> 游ゴシックが好きで個人サイトで使ってるんですが
いつも使用しているFirefoxじゃなくてchromeから見てみたらなんだか全体的に字が細く？見づらい感じになってました
これってよく知られた話ですか？対策とかあるのでしょうか selectを使ってドロップダウンリストを作りました。
現在の選択項目を再び選択してもonchangeが発生しないようですが、
その場合でもonchangeを実行させる方法はありますか？ またもやエスパーで。
>>348
p { color: red; }
#blue { color: blue; }
を、
・HTMLファイルの<style type="text/css">（ココ）</style>に書くか→(2)
・別ファイルの○○.cssに書くか→(1)
なので君次第。 >>351
まぁそこは自然にまかせたほうがいいともうけどねぇ
正解は>>353だけど >>349
調べたら対策方法出てくるよ
対策しないとMacで汚くなったりIEで縦にずれたりすげーめんどくさいフォントだよ
IEは本当に致命的 >>347
ブラウザに送られてくる、HTML, CSS は、ツールによって合成された結果だから、
開発者は、数個のファイルに、別々に書いているから、開発者にはわかりやすいけど、
合成物からは、元々のファイルに分割できない
CSS も最近では、SASS で作っているから、
SASS ファイルを見ている開発者にはわかりやすいけど、
変換後のCSS から、変換前のSASS はわからない
つまり、変換前のファイルをわかりやすく書いているけど、
変換後のファイルは難しいから、
変換後のファイルに、手を出しちゃいけない。
変換前の数倍の解析時間が掛かるから
例えれば、変換前のファイルが答えとすると、答えを知っている人には簡単だけど、
答えを知らない人、つまり、変換後のファイルを見ている人には難しい
機械語と同じ。
ソースコードを見るとわかるけど、
コンパイル後の機械語を見ている人には、さっぱり分からない >>355
Macを検索ワードに入れたらそれらしいものが出てきました
知らなかった…
ありがとうございました ＜select＞
＜option value="1"＞100＜/option＞
＜option value="2"＞200＜/option＞
＜option value="3"＞300＜/option＞
＜/select＞
この場合、200を選択すると
[ 200▼]
と表示されますが、選択した後に
[ ▼]
と何も表示させないようにできますか？
と言うのは、実際には表示する項目が 200などの単純な文字ではなくて、
ちょっと長い文字列なので、全体を表示するにはselectの表示欄の幅が狭く、
かと言って途中までしか表示しないと見た目が悪いので、それならいっその事
何も表示させないほうが見た目がスッキリするかなあと思いました。
あるいは、より良い代替案が有れば教えて下さい。 >>360
<select style="max-width:5em; text-overflow:ellipsis;"> >>361
レスありがとうございました。
でも、教えて頂いた記述では何も変わりませんでした。
上手く行くと [長い文字列...] が表示されるんですか？ JSでやったほうが簡単かもしれない
選択切り替わったらフォントカラーを白に変更
アクセシビリティ考えると選んだものが見えないって最悪だと思うけど font-sizeの指定方法がよく分かりません
htmlを62.5％で指定すると1rem=10pxになるので便利というところまでは分かったんですが、
そこからemでの指定が混乱します
全てremで指定するとマズイのでしょうか？ >>364
全然便利じゃない。10pxなんて使わないからめちゃくちゃ使いにくい
どれが最高ってのはないけど、現状最も見やすいのは14pxだと思う
迷ったらbootstrapに合わせておけばいい
http://bootstrap3.cyberlab.info/css/typography-body.html >>360
>何も表示させないほうが見た目がスッキリ
そうは思えんしユーザは戸惑うかと。
代替というか思いつきでこっちのスレに書いておいた。
jQuery 質問スレッド vol.8
http://mevius.2ch.net/test/read.cgi/hp/1508707878/ >>366
なんでいちいち移動するかな？
話がわからなくなるだろ
その動きならjQuery（JavaScript）は不要
<select id="hoge">
<option>ああああああああああああああああああああ</option>
<option>いいいいいいいいいいいいいいいい</option>
<option>ううううううううううううううううううう</option>
</select>
#hoge { width: 100px }
#hoge:hover { width: 300px } >>367
ああそうだった。寝起きでボケてたわtnx
移動はよくあることだぞ。 >>364
>全てremで指定するとマズイのでしょうか？
em が基本
rem だと、親要素のフォントサイズを変えても、子要素のサイズが変わらないから、
それらを変えるのが大変
子要素は、親要素のサイズへ、依存させておく方が良さそう 親要素のフォントサイズを変える場面ってどういうときでしょう >>364
remは比較的最近できたもの
emが使いづらいからremが登場した
古いブラウザで対応してないことも有るが
対応しているならremでよい スレチ（だと思ったのだから）で移動するのはマナーの１つで問題なし
その流れでそのまま続けられるしな >>360
select:selected{
color:#fff;
}
これあかんのか？ >>364
rootサイズが参照されるremのが便利だ。emだと親要素のサイズ変えて小要素もかえる必要がある。 >>360
これではダメ？
選択項目は見切れるのは全体を分かっているWeb製作者側からすれば便利だけど、初見のユーザからすれば不便だと思うな
長すぎてデザインが崩れるなら、長くてもいいようにデザインを工夫するか短い項目名を考えるのが良いかと
<select>
<option>未選択</option>
<option>ああああああああああああああああああああ</option>
<option>いいいいいいいいいいいいいいいい</option>
<option>ううううううううううううううううううう</option>
</select> >>365
古い人間なので16pxをベースにしていたんですが、今は14pxが主流なんですか？ px は一切使わず、em だけで見てる側の好みに任せる
のは主流なのかどうか？ ＜option value="1"＞100の項目 ： 100の内容100の内容100の内容＜/option＞
＜option value="2"＞200の項目 ： 200の内容200の内容200の内容＜/option＞
＜option value="3"＞300の項目 ： 300の内容300の内容300の内容＜/option＞
select select {
width:○○px; /* 100の項目の幅 */
}
幅は帳尻合わせでｗ >>378
最近はそういう風潮もあるね。もうリセットやめてある程度はブラウザデフォルトのcssに任せようって
俺は絶対にやらんけど >>377
px で指定すると、固定サイズになるから、
ユーザーが変更できなくなるので、使わない方がよい
body { font-size: 62.5%; }
普通、ブラウザのデフォルトサイズは、16px だから、
16px * 62.5% = 10px となり、
1em, 1rem が、10px となり、em, rem での計算がしやすい
font-size - MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-size 10インチFHDとか24インチFHDとかある環境で
px指定してたらとても読めたもんじゃない
あとブラウザ設定で何pxよりも小さくしないこともできる
10pxで指定しても14pxとか16pxで表示されるから、
デザイナーの意図通りの大きさで見られてるとは限らない
20年前の「このサイトはIE専用です」ならぬ「このサイトは24インチ以上専用です」で作るのもよし、
どんな環境でも問題なくみられるようにするのもよし font-sizeをlargerにするとlargeよりも小さくなるのはなぜですか？
逆じゃないですか？ >>384
larger は相対的に大きくするので
large と比較してどうかは場合による >>385補足
smallにlargerするとlargeの方が大きい
mediumにlargerすると同じ
largeにlargerするとlargerの方が大きい >>385
ところが例えばH1に対して
large
larger
試したらlargeのほうが大きくなったのですが。
なぜですか？ >>387
larger は親のfont-sizeに基づく
h1 自身がデフォルトで largeでも
親のfont-sizeが小さいなら larger の方が小さくなる 三つの画像を
| □ □ □ |
のようにウインドウの左中右に均等に配置するにはどんな手法がお勧めでしょうか？
ウインドウ幅が狭い場合には、それぞれの幅に応じて均等に配置したいです。
| □ □ |
| □ |
もっと狭い場合は
| □ |
| □ |
| □ | https://mallento.com
こういうの使って似たようなサービスできんかね
システムよくわからんから誰かおしえてくれ >>390
flexとtext-align;center？ ■ このスレッドは過去ログ倉庫に格納されています
