HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 33
http://mevius.5ch.net/test/read.cgi/hp/1531279252/
■関連スレ
Webサイト制作初心者用質問スレ part249
http://mevius.5ch.net/test/read.cgi/hp/1529144063/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html >>29
お前みたいなのがいるからな…divなくなって欲しいわ無能 >>29を見て思ったのだけど、
なんとなくbodyにCSSをあまりくっつけたくないから、
ページ全体をdivで囲って、そこにページの基本となるCSS
（background-imageとかfont-familyとか）
をくっつけてるんだけど、
これってマズイんだろうか bodyの末尾になんか追加するjqueryプラグインとかあるからなあ
<div>いれとくのはちょっと気持ち悪いけど仕方ないかなって思ってる >>32
文法以外の所で、divを入れる必要性があるのか
そういう可能性は頭になかった
ありがとう >>29
俺の中でだが
1枚の袋に魚、肉とかまとめてブっ込んで
カオスに入り乱れてるイメージ
中のインライン要素をまとめて1つの段落やアウトラインとして認識されていいならいいのかも >>30
無能はお前。インライン要素はブロックに入れずに置いていい。
それだけの話なのに、ブロックに入れないとダメとかいうから
お前の話は矛盾してるって突っついてやったんだよ htmlタグは気にせずにCSSのdisplayを駆使しまくれということでええのかな めんどくさ
そんなことしなくてもサイトに表示されればいいんだよ
細けえよ ul,olを入れ子状に何度も繰り返して配置する時、最大いくつまで入れ子に出来ますか？ >>38
HTMLのルールと
スタイルとはまた別問題
良し悪しは別として >>41
規定として入れ子レベルに制限はないけど、5000階層とかなったらブラウザの処理が重くなるかもしれない。勿論ul,ol直下にli以外は置いてはいけない。 >>37
何の話だよw
単純にdivのブロック要素で生置きspanが回避できる！っていってることがおかしいって話だよ
てかこの話何回目だろうぇ
多分divがある限り永遠と繰り返されるんだろうな MathJaxを使っています
$\begin{array}{cc}
a & b \\
c & d
\end{array}$
はちゃんと機能していますが、
$\begin{array}{cc}
a & b \\
\multicolumn{2}{c}{d}
\end{array}$
が機能しません。
なぜですか？
MathJaxでは\multicolumnは実装されていないんですか？
使っているMathJaxは
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML";>
</script>
です。 レシポンジブで、フォントの大きさ指定する単位は何でしてる？
rem？vw？それともpx…
なんか色々読んだけど。pxでいいような気がしてきた… >>49
pxだとデバイス毎に全〜〜部指定しなおさなきゃいけないから面倒じゃない？
remならrootのpxだけ定義すればいいから楽だぞ でも大手見るとpxでやってるとこはまだ多くある
デザインカンプに超忠実にやらなければならない場合
pxの方がいちいち計算不要だから作るのは早い
illustratorやphotoshopのカンプがpxで指定さいれてるわけだから
それをremに計算するといちいち面倒になる。
vwなんてウインドウサイズで文字以外の要素とのバランス崩れるから大変
全部の要素を完全リキッドに対応させる必要がでてきちゃう
海外サイトみたいに文字中心のざっくりデザインのサイトなら余裕だけど >>49
もはやvwしか使いたくない
viewportを画面の大きさに合わせる仕組みがあるのならpxでも構わないと思う
何れにせよリキッドじゃなければそれほど面倒はないはず フォームのパーツでプルダウンの中身まで作ってあるデザインをもらって、selectタグで再現できないからulとJSのクリックイベントを使って実装したのですが、タブキーで操作できるようにしてくれないかと言われてしまいました。
たしかにselectタグを使えばタブで選択して項目を選ぶことができたのですが、HTMLでselectやinput「っぽい」パーツを作って、タブで操作できるようにすることは可能なのでしょうか？ プルダウン自体はCSSだけで可能だよ
ただ前スレでもでてたけど select というか option にデザインあてるのが結構制約あるから
デザイン指定されてるなら厳しいかもね
すでにJSで実装してるなら accesskey=key とかつけるだけでいいんじゃないの >>55
まさにoptionの方のカスタマイズが必要だったのでselectを使いませんでした。
accesskeyは調べてみましたが、あくまでほかのフォームパーツと同じようにタブ操作できるようにするのが目的なのでちょっと違うかなと思いました。 タブキーで操作ってのをぐらいかしてくれないとよくわからないけど
jQueryUIのselectableとかなら数行かくだけでわりと高機能なことができた気がする >>49-52
漏れは、画像の高さに、vh を使えば「ctrl +-」で拡大縮小ができなかったから、
最初にJavaScript で、window.screen.availHeight で、
タスクバーのような、固定部分を引いた画面の高さ (ピクセル単位) を取得して、
728 px など、その値を元に、画像の高さを、px で設定した
vh, vw は便利だけど、拡大縮小ができないだろ？ semanticをhtmlに、presentationをcssにとキレイに切り分けるためにはcss側で要素を追加する機能がまだ貧弱だと思うんだよね
::beforeと::afterの2人しか作れない…
ネストして::before::beforeと孫を追加したり、::before(2)で2人目のbeforeを作ったりしたいにょ :nth-child(3):hover:beforeとか疑似要素疑似クラスできるのには驚いた >>58
正確にできそうだけどサイトのフォントサイズ定義の場合
js使用前提だとなんとなく嫌だな
いやなんとなくなんだが HTML5のフォームバリデーションを本番で使った人いる？
まだまだ、本番では使えないような気がするんだが… >>52
vwって最大最小決めれないからどこまでもでかくなり、どこまでも小さくなるよな
media queryで変更できるけど、どんなふうに使ってるんだ？ >>63
その通りメディアクエリで区切ってる範囲内だけど
別にいいじゃん小さくなっても >>64
読みやすさは必ずしも横幅と一致しないんだが
まあ人それぞれだからどうでもいいんだけど ライブドアブログですが
画像に枠を入れようと思い
img {
padding: 5px;
border: 1px solid #808080;
をCSSに入れたいのですが、どこに入れても
サイドバーが表示されなくなったりします。
どこに入れたらいいでしょうか？ >>65
ほんそれ。
文字は文字であってオブジェクトじゃないのにな。
一行の長さだって段組の常識があるのに・・・ >>66
ここでライブドアのブログなんて使ってる人なんてほとんどいないと思うから
ブログ系のスレとかアフィリエイトのスレの方が回答もらえそう >>66
セレクタがざっくりしすぎ
imgって書いたらドキュメント内のすべてのimg要素が対象になっちまう
だからサイドバーとかにも影響が出る
親要素で限定するとよかろう
あとimg要素やフォームの部品のような
何かに置き換わる奴を置換インライン要素なんて呼んだりするんだけど
大雑把にいうとpaddingは使わんほうがいい
少なくともCSSを理解できるようになるまでは >>68
>>70
ありがとうございます
暇つぶしニュースにある画像みたいに
画像に小さく枠がほしいんですけど
リンクが貼れなくて申し訳ありませんが >>71
ブラウザはChromeかFirefoxかSafariを使おう
んで、真似したいものがあったら
例えばChromeだったら、それを右クリして一番下の「検証」を選ぶんだ
そうすっと、開発ツールってのが開いて
そこのHTMLとCSSがどうなってんのかわかるから、真似すればいい
んでそのニュースは見てないけど
十中八九、img要素の外に小さい枠のためのボックスが別にあると予想 >>72 ありがとうございます
https://imgur.com/a/PlKfeRd
この画像の1.2.3当たりがCSSだと思うのですが
コピー参考にするヒントをいただけませんでしょうか？ >>73
２
.article-body img { hoge: fuga; }
ってのは「article-bodyというclassを持つ要素の子孫のimg要素」って意味だよ
意地悪で言うわけじゃないんだけど
このくらいのことは聞く前にまず試してみたほうが、早いし理解も深いと思うよ ２の.article-body-more img {}
の{}の中にカーソル合わせると左にチェックボックス出てくるから
オン・オフすると即時連動した変化が確認できるので
imgの枠線に重要な部分もすぐわかると思う >>73
（もちろん自分のサイトを作る時の確認にも活躍する） >>76 ありがとうございます。
ならない、、、のは
.article-body-more img {
margin: 5px 0;
max-width: 695px;
padding: 3px;
border: 1px solid #CFC7AF;
}
とCSSに入れればいい。という単純なことではないんですね、、 >>77
>>66のコードから察するに
もしも、CSSの基本中の基本で躓いてる？なら
問題点はまず、
img {
の部分で括弧が開きっぱなしな点
img {}
という風に括弧を閉じないといけない
あとは、セレクタ（どの要素を選択するかの文字列）の意味と用法はググってもらうとして
CSSの基本は、
セレクタ { スタイル }
という形式になる、ということ。
＞とCSSに入れればいい。という単純なことではないんですね、、
>>77の例で言うと、セレクタは
.article-body-more img
の部分で、意味はざっくり言うと
「クラス名がarticle-body-more要素の、子要素のimg要素全部を選択する」
なので自分のサイトのHTMLに、そもそも「クラス名がarticle-body-moreの要素」が存在しなければ
何も起こらない
ライブドアブログを使っているということなのでおそらく
テンプレの長文コードに滅入っていると推察。
さらに、HTMLもCSSの基本（中の基本）もわからないとなれば
おそらく、「要素にarticle-body-moreというクラス名を付加する」
というのを理解できているかどうか、そこから始めないといけない段階 質問です。
特定のサイトを閲覧する際にユーザーCSSを適用し（ChromeのStylusを使っています）、
tableをflexなりgridなりで並べ替えたいのですがどうすればよいでしょうか？
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
…
…
</table>
と縦にひたすら並んでいるのを強制的に
┌──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│ｔｒ│
├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
と横並び、かつ10個並ぶごとに自動で折り返してくれるようにしたいのです。
displayの値をtableやtable-cellから変えればよいのでしょうけれど、
flexやgridといった新しい要素は何度いじってもまだなかなか慣れなくて……。 tr に display:block; float:left つけて
tr: nth-child(10n):after に clearfix でもつければいいんじゃない >>79
ありがとうございます
セレクタ（どの要素を選択するかの文字列）の意味と用法
勉強してみます。 >>81
あ、新しいやり方をしないといけないと思い込んでいましたが
ずっと昔ながらのやり方でできましたね。ありがとうございます
どうもclearfixが効かないので、もう少し色々試してみます
（一応widthを調整するだけで無理やり10個ずつにはできましたが） div > section とあって
h1に画像をバックグラウンドを指定して
その下に
div > p class="utaimonku"に画像の謳い文句を書いていたのですが、
この謳い文句が文字だけなのも寂しいので画像にしつつ、文字としてもhtml上で記述するということはできますか？ 寒くなってきたので、そろそろ扇風機をしまい
電気ストーブを出そうと思います。
でもその前に秋物の洋服を着るとそこそこ暖かくなるのですが
電気ストーブをつけつつ扇風機はしまわずおいておき
服だけはまだ夏物にしてもいいですか？ キーボードの設定が全角かなと半角英数を間違った状態で
打ち始めている事って頻発しない？
これなんとかならんかなあ >>86
電気ストーブなら扇風機も回した方がいい
暖められた空気は上に行くので扇風機を上に向けて空気を回す
その方が暖まる
というか秋物着て暖かいんならそれでストーブつけなければ電気代うくんじゃないか？
というかこれってスレチじゃないか？ アメブロですが
2chまとめくすで まとめサイト作ってみたのですが
<em style=color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
この文章に
<em style=size="1"color: %color%; background-color: %bgcolor%;
font-weight: bold;" class="specified">ID:%id%</em>
と変更しても駄目でした。アドバイスお願いします 普通のブラウザならば、
<details>
<summary>あ
<div>い</div>
う</summary>
<p>えお</p>
</details>
と書いた時、要約部分には｢あいう｣が表示されるはずですが、
現在の私の環境では｢あ｣しか表示されません(▲をクリックしたら展開されたところに｢いう｣が見えます)
何が原因だと考えられそうですか？ >>95
style=size="1"color: の部分が特におかしい。
正しくはこう
<em style="size: 1; color: %color%; background-color: %bgcolor%; font-weight: bold;" class="specified">ID:%id%</em> >>97
そんなタグが新たに追加されていた事すら知らなかったｗ
しれっと増えてるのなんとかなんないのかよ
こういうのって追加された時、どこで情報得てるの？ こういう情報があるから
5ｃｈが地味に役にたってるんだよな
HTML5.1について見てみたけどコンテキストメニューとかまだFirefoxしか対応してなかったり
下手に手出すと廃止になったりするから使うタイミングがむずいな >>99
ありがとうございます
2ｃｈまとめくすの設定で
日付/IDの文字を小さくしたいわけなんです。
で、その設定画面に
言われたように打ちましたが変わりませんでした。
https://imgur.com/a/0zty9vS
どこがおかしいのでしょうか？
すみません。。 たまにデベロッパーツールで開けないサイトあるんだけど
どういう仕組みなのか分かる人いますか？
自分のサイトでもやってみたい＆他人のサイトを覗いてみたい >>103
別の部分からの影響があるかもしれないのでそのサイトのURLか
もしくは吐き出された実際のソース部分をブラウザで見てみないとこれ以上はなんとも 初心者でやっとホームページの公開がうまくできた
レンタルサーバー借りたりFTPの設定とかいろいろ大変だった。
そこでようやくHTMLとCSSの本格練習していこうと考えてるんですけど
ファイルやフォルダの基本形式？ってどうなってますか？
今の所、index.htmlとstylesheet.cssだけなのですべて同じwwwフォルダに入れてるんですがｉｍｇとかも増えるでしょうし
フォルダで階層わけしたりするんでしょうか？
例えば、wwwフォルダ(index.htmlとCSSフォルダ(cssファイルがいっぱい)imgフォルダ(imgファイルいっぱい))など
もしそうするとしてちゃんと読み込んで貰えるものなのでしょうか？
ファイルを挟んだ場合パス？の指定をすれば大丈夫？？ せっかくながなが書いたのになぜY/N質問にしちゃうんだろうｗ >>100
w3cの方はちゃんと
草案がまず出て、その後に勧告になってるよ
whatwgのLSもそのはず
ちゃんと追っかけてないから違ったらすまん >>110
HTML5への端境期までは草案も追ってたんだけど
w3cのサイトを定期的にチェックするとかダルすぎるな
最新情報を常に発信しているような制作会社やブログを定期チェックしてればいいんだが
重要じゃない情報やメインになりえない情報も多すぎて、見なくなってきたわ >>106
ありがとうございます
文字サイズを小さくしたいのは
http://blog.livedoor.jp/nanjstu/archives/54101260.html
このまとめサイトのように
6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
え？2本打ったんか
の、
6: 風吹けば名無し 2018/09/06(木) 11:48:46.63 ID:u6cU61gi0
の文字だけ小さくしたいのです。
それの2chまとめくすの
設定 4
日付/ID欄の設定の設定という場所がどうも鍵みたいで
https://imgur.com/a/0zty9vS
ここを書き換えればどうにかなるのかな？けど書き方がわからない
という感じなんであります > え？2本打ったんか
ダメ。ゼッタイ。
＿_(＼--、
／⌒ ⌒ ＼∧
/ (●(●) ∨
｜(＿＿＿ノ ﾄ､
(ﾐ) ヽ_／ (ﾐ))
∨ﾀﾞﾒ｡ｾﾞｯﾀｲ/~
＼＿＿＿／
＿|｜｜|＿
(ヽ…)( …/)
￣￣ ￣￣
薬物乱用防止 >>111
なんでわざわざそんな二次情報を追うのか知らんが
超最新の、まだ誰も知らない方法を教えてあげよう
whatwgやw3cのサイトでは更新をXMLで配信してくれてるんだ、RSSっていうんだけど
だからそれだけ見てればいちいちサイトチェックなんてしなくてもいいんだ
これで最新情報に乗り遅れることもなくなるね！
みんなには内緒だよ！ 35歳だけど、HTML5の資格取得して転職できるかな？
今は社内SEでVBAマクロとか、SQLのサーバー管理、データ抽出してます。
来月に子供生まれるんで、育休1年取って独学で勉強しようと思います。
年収は今は450万程度です。380万くらいにはなっても良いです。アドバイスお願いします html5の資格取っても無意味
学生でさえ使えるものなのに
取得しようとしてる技術が子供レベルなんだが… >>116
マジレスするとフロントは一通りさらうくらいにしといてディレクターとかを目指した方が良い HTMLCSSってのはマジで誰でも出来るからそれプラスの技術ないと デザインできるかプログラムできるかディレクションできるかどれか
HTMLなんてほんとガキでもできるし
それだけ覚えても仕事ではなんの役にもたたない
サイト更新のパートや学生バイトレベルのお仕事しかないで そんな簡単なレベルなんですね。
もっと難しいかと思っていました。
プラスアルファで目指すとしたらおすすめありますか？
ネットワークではCCNAを２ヶ月でとりました >>123
おれ資格なんか一つもないけど仕事はいくらでもくる
営業してないけど勝手にくる
そんで、資格取るのやめてアプリつくりな
その無駄な2ヶ月をアプリ作る時間に使う 一年あるなら持ってれば食っていける資格がいいと思う テキスト入力のinputを横幅いっぱいにしたいのですが、フォントサイズを大きくすると
横幅をはみ出してしまいます。フォントサイズが小さいときは問題ないです。
inputに横幅を指定しないといけないのでしょうか？
<div style='width:360px'>
...
<div style='display:flex'>
<input type=text style='flex:1 1 auto;font-size:40px;'>
</div>
...
</div> ■ このスレッドは過去ログ倉庫に格納されています
