HTML/CSS のどんな質問に必ず優しく答えるスレ 31
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです 類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK 分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を age にすることをおすすめします。 回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!! 終わった話を蒸し返すやつは このスレにくるな!!! 自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!! 質問側も節度あるレスで!質問前にスレ内を検索しましょう ■次スレについて 基本的にレスナンバー>>980 を取った人(立てられない場合は次の宣言者)が立てて下さい 重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい(>>980 を取った場合も) 立てられない事が予め分かっている場合は、>>980 付近の書き込みは自重しましょう ■前スレ HTML/CSS の質問に優しく答えるスレ 30 http://mevius.2ch.net/test/read.cgi/hp/1508043632/ ■関連スレ Webサイト制作初心者用質問スレ part248 http://mevius.2ch.net/test/read.cgi/hp/1494150188/ ■HTML HTML Living Standard 日本語訳 https://momdo.github.io/html/index.html ■CSS Selectors Level 4 日本語訳 https://triple-underscore.github.io/selectors4-ja.html >>445 The attribute value can remain unquoted if it doesn't contain spaces or any of " ' ` = < or > . Otherwise, it has to be quoted using either single or double quotes. The value, along with the = character, can be omitted altogether if the value is the empty string. だそうな >>446 なるほど。特定の文字を含まなかったら無理に""で囲む必要はないんですね。 見た感じ気持ち悪いけど。 勉強になりました。ありがとうございました。 パース速度考えると省略できるところは省略したほうが速いのか? ブラウザの実装に詳しい人教えてくれ 省略したほうが速いよ 保守性は下がるけど、まぁ好きにすればいい >>449 今時のPCだとたいした速度差にはならないような WebStormのプラグインのLiveEditを使いたいのですがうまく作動しません。 環境はwin7でクロームにJetBrains IDE Supportも入れています。 設定のプラグインのところでもliveeditにチェック入れています。 他に何をすべきでしょうか? http://jsbin.com/yazelolulu/1/edit?html,css,output 三つのフローティング要素があり、 二つ目は隙間に入りきらず「フロート落ち」したとします 三つ目はその隙間に入るサイズだったとしても、 二つ目と同じ垂直位置になり、一つ目の横には行きません 感覚的には、一つ目のフローティング要素に横に配置されそうですが。 何故このような動作になるのでしょうか? フローティング要素が遡行できるのは直前の要素までなのでしょうか? >>443-451 保守性を考えて、常に、" " で囲む どうせ、webpack などのツールで、minify するから、 自分で対応するのは、バグを増やすだけ いらん事を考えるな きもいやつ消えた? 連休中、終日レスしてて、会社始まったらおとなしくなったようだな 見れば分かるのにあえて聞いて呼んでるのだろ ただ荒らしたいだけ >>455 そういう仕様として決められている。 三つ目が二つ目より上に来ることは決してない。 さもなければ、画面幅に依存して上に来たり下に来たりして、読む側はとまどうだろう。 >>439 の件ですが udemyのCSS / CSS3 マスターコースを観ていたら absoluteのための基準を作るために親をrelativeにすると言っていました この自分の認識も、おそらく以前見た教育系コンテンツから得たものだと思います ただstaticだと何故absoluteのための基準になれないのかが分かりませんし、 実際試してみると、staticでもabsoluteを正常に包含できている気もします どうなのでしょうか? ↓のHTMLの時、.p1と.p2のfloat:left;を維持したまま両要素を縦に並べたいのですが、 .p2にclear:both;を設定する意外に良い方法はありませんか? CSSに詳しい方、ご教授ください。 https://jsfiddle.net/3ozu1pv5/1/ >>468 >>470 レスありがとうございました。 >>466 CSSの仕様をよく読んだ?W3CでもMDNでもいいから穴が開くほどよく見てみ staticは初期値で全ての要素が初めはstaticでありabsoluteの基準にはならない absoluteはrelativeなど位置指定された親を基準にする もし位置指定された親がなければトップレベルの親つまりbody要素を基準にする >>467 その質問の仕方だと方法はない floatを維持してスペースがある限り横にならぶ >>470 のようにスペースをなくすってのは1つの方法だけど floatの意味がないからやりたいこととは違うんだろう p1, p2 を縦に並べた上で次の要素をその右におきたいならいくらでも方法はある PCサイトとスマホサイトを切り替える時のブレイクポイントどうしてますか!? 参考にしたいデス 基本はリキッドで作って、あとはざっくり ipadはでかいんだからPCデザインでいいよね?って思いながら 768pxが境界線だわ なんおサイズか忘れたけど、もうずっとこれでやってる 一体何のサイズなんだろうなぁ 原文ママって、<sup>要素で表現すべきですか? それとも<span class="sic">などとしてCSS側で表記すべきですか? 個人的には、意味が違う (唯の視覚的な装飾ではない) ので <sup> かなとも思うのですが。 <p><sup>弟は一言こういいました。<br>「飯はまだかね?」<br>姉はすかさず言い返しました。<br>「さっき食べたでしょ」<br>二人は末永く飯を食べましたとさ。</sup>(原文ママ)</p> こんな感じにしたいってこと? <sup>は上付き文字だぞ? すいません言葉足らずでした。 引用文に「原文ママ」という注釈を加える時、その文言をどうタグ付けすべきかという質問です。 例えば ``` <q cite="http://iss.ndl.go.jp/books/R100000002-I000003978857-00" ; lang="ja"> 必生<sup>原文ママ</sup>の作品を書き、地球へ痕を残すつもりです </q> ``` という構造の<sup>原文ママ</sup>というタグ付けが、果して意味レベルなのか装飾レベルなのか、 どちらで解釈すべきかということです。 意味レベルでの注釈なら <sup> かそれに準ずるものですし、装飾なら <span class="sic"> とでもやって CSS側で処理すべきですし…… >>484 「原文ママ」なんか括弧付きでそのままでいいと思うがそれは置いといて、 supはHTMLの勧告で、上付きにしないといけないちゃんと意味のある時にだけ使うようにされてる 見栄えのためだけに使うべきではない >>485 原文ママは原文には含まれていない用語なので、W3C が言う「意味」に合致するかは分かりませんが ある程度構造的に区別するべきだと思うんです。 <small>ですかね。注釈という意味では。 <blockquote>尾木ママ</blockquote> Wikipediaなんで眉唾なんですが、ざっと目を通した限りでは <sup> 若しくは <small> のようですね。 しかし確かに上付きという目的の為に <sup> を用いるのは W3C 勧告に即していないと思います。 https://en.wikipedia.org/wiki/Template_talk:Sic ただ、しつこいですが「原文ママ」は原文に含めているが意味的には非原文≠ニいう構造を取るべきだと思うので やはりなんらかのタグで区別したいです。 原文に含めているが意味的には非原文=ゥこれで想起したのが引用者註ですが、これもやはりタグで区別するとかいう意見は見当たりませんでした。 うーん。私が異端ですね、これは……w https://stackoverflow.com/questions/37029600/is-there-a-sic-attribute-or-tag-in-html ここでも質問と解答がありましたが、<i> 要素で囲めという主張でした。 >>490 異端じゃないだろタグで区別すべきwikipediaが間違ってる。wikipedia根拠にするとか >>491 ありがとうございます。 結局、 <q cite="http://www.worldcat.org/oclc/676129102" ; lang="ja"> 必生<small class="sic"></small>の作品を書き、地球へ痕を残すつもりです </q> このような HTML に対し q small.sic, blockquote small.sic { font-size: 80%; vertical-align: super; } q:lang(ja) small.sic::after, blockquote:lang(ja) small.sic::after { content: "\3014原文ママ\3015"; } のような CSS を用意することで解決しました。 <small>要素が空でもいいのかなとか色々疑問は残りますが、まあ企業じゃなくて個人だし、もうこれくらいで妥協します。 Windowsのスタートメニューみたいなクリックすると展開する階層メニューってJSなしでCSSだけでつくれる? >>493 作れるよ メニューにcheckbox使って、例えば .menu-button:checked + .submenu { display: block; } で表示させる 閉じるのもメニュークリックが必要だけど 原理的にはどんなアクティブなものも(パフォーマンスが許す限り)作れる あらゆる画面遷移を全部htmlにうめこんでdisplayをnoneとそれ以外で切り替えていけばいいだけ ただ現実問題画面遷移が2つ3つならcssでくんでもいいけど そんなこったことしないならプルダウンメニューぐらいJS知らなくてもjQueryのテンプレコピーするだけで1時間もあれば作れる パフォーマンスならjsよりcssのほうがいいじゃん 要素のレイアウトの為に切り替えが必要になる display:inline;、display:inline-block;、display:block; 要素の表示/非表示を切り替えで使用する(クラスで) display:block;、display:none; これらは用途が違うので、干渉させたくないのだけど良い方法ないかな? 表示/非表示はvisibility:hidden/visibleで制御できれば理想なんだけど 高さなどの情報が残ってまう display:blockは要素を表示するものじゃなくて、 要素をブロック要素として扱うだけだぞ? display:blockが表示というのなら、 display:inlineもinline-blockも表示だ お前、JavaScriptからcssのスタイルを直接変更しようとしてるだろ? JavaScriptでcssを直接いじるな。classを使え > パフォーマンスならjsよりcssのほうがいい ↑これ確かにそれっぽいけど、実際に速さの違いなんて測れるの? 自分としては眉唾モノなので、「CSSでもできるけどJSの方が楽」な挙動はJSで書いてるわ。 制作会社など現場で働いてる人に聞きたいんですが 要素を横並びなどにコーディングするとき使ってる技術は何ですか? float、flexbox、grid、tableなど色々あると思いますが >>472 staticの中でabsoluteすると たしかにbody基準になりました 以前実験した時には body直下に作ったstaticな要素の中で子をabsolute指定したので 一見親要素基準で正常に表示されているように見えたのでした ありがとうございました border-widthを可変にしたいのですが %だと認識されず、vwだと認識されるけど期待した通りにならない 2%で可変にしたような効果を得るにはどういう書き方したらいいですかね >>498 ,>>499 用途 jQueryで言うなら.show()、.hide()にあたるもの。 表示/非表示のみをcssのクラスとして作成し制御したい場合。 表示/非表示のみを制御するcssクラスを作成した場合、 ある個所はdisplay:blockが良くても別の場所ではdisplay:inline-blockであってほしい事があり、 1つのクラスだけでは使いまわせない不便さがあるから、良い方法ないかと思って質問してみた。 >>498 jsからcssのスタイル変更なんてしようとしてないよ。 レスポンシブでデザインをcssのみでどこまで切り替えできるかをやってるだけ。 >>505 とあるサイズでだけ非表示にするだけのクラスを用意したらどうかな? @media screen and (max-width: 900px) { .mobile-hidden { display: idden; } } みたいなかんじで >>505 > 表示/非表示のみを制御するcssクラスを作成した場合、 それがそもそもおかしい CSSで共通化したいならSCSSを使うべき >>506 むむ? ちなみにdisplay:にhiddenという値は使えないのでは? >>508 クライアントが触るからSCSS依存はダメだよ 数年ぶりにCSSを学び直し中でして、最新のデザインパターンを参考にする為にコリスを利用してたんですが、 なんか Fatal error とか出ててサイト見れないんすよ。ここってしょっちゅうエラー吐くんですかね? 他に参考にできるサイトやブログってありますかね? IEでは記事のリンクを押すとそのページに飛ぶのですが GoogleChromeやFirefoxでは記事を押してもそのページに飛びません。 リンクされず記事の文字だけが表示されている状態です。 URL自体FirefoxとChromeだとページ開きません。 私が作成したhtmlのみです!他の方のホームページのリンク押したら飛びます。 1日色々調べてやったのですが、分かりませんでした・・・。 Firefoxのバージョンは Firefox Quantum 58.0.2(64bit) Google Chrome のバージョンは64.0.3282.167(64bit)です。 どちらもJavaScriptは有効になっております。 <!DOCTYPE html> <html lang="jp" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 〜〜〜〜 〜〜〜〜 <head> 〜〜〜〜 〜〜〜〜 <script src="ttp://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </head> <body> //↓問題のやつです。id="rss"はCSSでパーツの位置を設定しております。 <div id="rss" name="#rss"><script id="【単眼RSSパーツ】</script></div> </body> </html> 教えてください。 >>502 並べる対象によるかな 横に並べるだけならinline-blockにして 幅そろえたいならwidth50%とか33%とかつける tableだけはない flexは基本縦にレイアウトそろえたいときだけかな 個人ページだったらflex使いまくるけど 大勢で管理すると提供原稿ソース勝手に縮小されてたりするの気づかなかったりするから危険 まあ大量ページで予算によっては了承の上でtableやフォントだらけの汚いソースそのまま移行もある >>513 そのHTMLじゃどうやってもとばないと思うけど jsで何かしてるならこのスレの範囲じゃない 他からrssラベルにとびたいなら nameには#なしで名前つけて飛び先のhrefの中に#をつける あとハイライトつきのエディタにはりつけてみたら? "がとじてないのが原因だったりしないの? >>515 Sublime Textっていうテキストツールを使っています! わかりにくくてごめんなさい。 RSSパーツの部分はこうなってます。 https://i.imgur.com/472eVsV.png 貼れなかったので画像で・・・。 もしかしてスレ間違えたでしょうか? IEでは開いてGoogleChromeでは開かない これってなにかCSSでリンク拒否してるのかな? と思って・・・。スレ間違えてたらごめんなさい。 >>513 解決しました!なんで解決したか分かりませんが・・・。 >>515 の方ありがとうございました。 >>517 おめでとう キャッシュにCSSがのこってたりするからね そういうときはこまめにCtrl+F5するんだ >>514 まったく同じだわ。 漏れやミスが一番重要だよね。1度も許されないくらいの感覚でやってる。 自分も個人で完結できるようなゆるいやつはflex使いまくってる。 ブロックレベル要素に直接内包されたテキストは匿名テキストになりますが CSSのセレクタでこの匿名テキストを指定することは出来ないのでしょうか? font-sizeなどはコンテナのブロックレベル要素で指定できますが vertical-alignはコンテナで指定しても有効にはなりません spanで囲んで非匿名のインラインレベル要素にするしかないのでしょうか? >>521 テキストノードをCSSで選択することはできないと思う ほんと疑問なんですけど、IE10以下なんぞに対応する必要ありますかね? 趣味ならない。 仕事ならお前が決めることではない。 仕事でも通常はない もし客から対応言われたら必要ないことを説明して納得してもらう それでもどうしてもと言われたら見積書にIE10以下対応の項目入れて多めの見積りをする それで対応することはまずない >>524 googleのsvnがhtml5.js終了したせいでhtml5のタグがやっかいなことになったね これ表面化してないけど結構これからヤバイかも >>525 趣味だがしてる してもさほど不便ないし 趣味ならそれこそどこまで対応したっていいんじゃないかな >>467 clearfixとかってのはどうなん? htmlセレクタでfont-size: 62.5%;って書くのがド定番ですやん? IE11だと9.93pxになるんですがこれが普通なんですかね? >>532 clearfixは結局clear:bothを当ててるだけだから変わらない。 jqueryスレがwwwwww いつぞやのdwと似たような流れだなぁ てかdwバージョンアップしたら待ち望んだ左右分割表示が! これはdwに戻る日が来たかなと思ったけどなんか挙動がおかしい。 関連ファイル?を左右分割できるだけでファイル自体を二個開いて横に並べられるわけではないという謎のクソ仕様になってた…さよならdw <div class="labeledImage"> <div class="text"><div>テキスト</div></div> <div class="image"><img src="http://placehold.jp/200x150.png" ;></div> </div> このHTMLで https://dotup.org/uploda/dotup.org1468519.jpg こんな感じで画像サイズに依存せずに同じ大きさのブロックを左側につけてその中央に文字 さらに全体を中央に表示って可能ですか? すいませんもう1つ <div class="test2"> <div class="image"> <div><img src="http://placehold.jp/200x150.png" ;></div> <p>ながーーーーーーーーーーーーーーーーーい画像の説明</p> </div> <div class="text"> <p>テキストテキストテキストテキストテキストテキスト</p> </div> </div> このHTMLで画像のサイズ指定なしで https://dotup.org/uploda/dotup.org1468544.jpg この上みたいに画像サイズ分で分割したいんですけど いろいろためしてもどうしても下みたいになってしまう どうすればいいか教えていただけませんか? >>536 可能です(めんどくさい) >>537 それぞれのブロックに50%とか横幅を指定すればいい >>537 は前スレで画像の幅でテキストを折り返すって質問と回答あったから それで右側ブロック化すればあとはflexなりfloatなりでいけると思う >>536 はわからんなー >>538 「画像サイズ分で」分割っていってるからそれは違うんじゃない? >>539 ,540 教えていただいてありがとうございました こちらのほうはうまくいきました width:0.1%がなんで必要なのかわかってないですけど ないとうまくいかないので重要なんですね…… 何度もすいません <div class="test4"> <div><img src="http://placehold.jp/400x200.png" ;></div> <div><img src="http://placehold.jp/300x300.png" ;></div> <div><img src="http://placehold.jp/200x400.png" ;></div> </div> <div class="test4"> <div><img src="http://placehold.jp/150x50.png" ;></div> <div><img src="http://placehold.jp/100x100.png" ;></div> <div><img src="http://placehold.jp/50x150.png" ;></div> </div> こんな感じのいろんなサイズの画像がきても https://dotup.org/uploda/dotup.org1468716.jpg こんな感じで高さをそろえてかつページ幅におさまるように伸縮して横並びに表示したいんですけど ずっと検索してても単一画像や幅そろえるのはあったんですが 複数画像のはjsを使ったのしか出てこないんですよね… CSSだけでやるのは無理なんでしょうか >>542 divの幅を%指定にしてflexとflex-wrap:wrap 各画像幅の比率は固定じゃないですとか言うなよ? そんなケースあり得ないからな >>542 グーグルの画像検索結果みたいにしたいってことなら 画像1個の幅が決定できないので両端揃えには根本的には出来ない ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる