X
HTML/CSS のどんな質問にも優しく答えるスレ 34
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2018/10/08(月) 11:45:57.53ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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
0283Name_Not_Found
垢版 |
2018/10/31(水) 19:41:40.84ID:???
>>282
面倒くさいにも二通りの意味があってな


作業を効率化する（のが面倒くさい）が、その後の作業自体は楽になる
と
作業を効率化しなくて楽だが、その後の作業自体は面倒くさい


どっちの面倒くさいを取るかなんだよ？
0284Name_Not_Found
垢版 |
2018/10/31(水) 19:41:58.97ID:???
まぁそれがめんどくさいレベルの規模なら自動化の契機だな。PostCSSとnpm scriptまたはgulpで自動化できる。
0285Name_Not_Found
垢版 |
2018/10/31(水) 19:43:09.09ID:???
>>281
> SASSは所詮ブラウザに直接解釈されないので、使う場合はどのようなCSSになるのかを念頭に置きながら使わないといけない。

ブラウザで直接解釈されても、同じことでは？
0287Name_Not_Found
垢版 |
2018/10/31(水) 21:31:49.57ID:yE26+RAR
>>281
解説ありがとうございました。
>このリソースはメディアの条件が真になった場合のみ読み込まれるので、
これはブラウザのウインドウ幅を変化された場合に、
それに応じてメディアファイルが読み込まれると言う事ですか？
0288Name_Not_Found
垢版 |
2018/11/01(木) 02:14:38.46ID:???
>>283
あたまかたーい
普通は
その後の作業が面倒くさくならないように、作業を効率化するよねー
0289Name_Not_Found
垢版 |
2018/11/01(木) 02:55:06.73ID:???
@media なんかを使っている、WEBプログラミング上級者は100%、SASS！
というか、海外では初心者でも90%、SASS

知らないのは、50% の日本人だけ
0290Name_Not_Found
垢版 |
2018/11/01(木) 02:59:28.07ID:???
>>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと
0291Name_Not_Found
垢版 |
2018/11/01(木) 04:52:41.04ID:+y4YZeqs
>>270
すんません。
さっぱり解らないんですが、ｈｔｍｌのｊｓってのが有るんですか？
それと、ｊａｖａとｈｔｍｌってのは違うものなのですか？
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。
0292Name_Not_Found
垢版 |
2018/11/01(木) 05:14:30.37ID:???
>>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ
0293Name_Not_Found
垢版 |
2018/11/01(木) 12:44:07.97ID:???
>>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ

JavaScriptはブラウザの中で動くプログラムのことだ

んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ
0294Name_Not_Found
垢版 |
2018/11/01(木) 12:51:39.71ID:???
>>293
まったくわかりません。
もっとわりやすく説明できませんか？
0295Name_Not_Found
垢版 |
2018/11/01(木) 13:12:45.81ID:???
ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ！」
0296Name_Not_Found
垢版 |
2018/11/01(木) 16:47:53.33ID:???
メロンとメロンパンの例えに感動した
0298Name_Not_Found
垢版 |
2018/11/01(木) 17:13:13.76ID:???
この上なくわかりやすいけどなぁ
0299Name_Not_Found
垢版 |
2018/11/01(木) 17:16:37.87ID:???
英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか
0300Name_Not_Found
垢版 |
2018/11/01(木) 20:55:35.84ID:???
仕様見てると
<h1>
<p>~</p>
</h1>

も

<p>
<h1>
~~~~
</h1>
</p>

もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る

実際どうなんやろ？
0301Name_Not_Found
垢版 |
2018/11/01(木) 20:56:38.59ID:+y4YZeqs
>>293

自分は２９１ですが、
良くわかりました。
ありがとうございました。
0302Name_Not_Found
垢版 |
2018/11/01(木) 21:00:41.05ID:???
>>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな
0303Name_Not_Found
垢版 |
2018/11/01(木) 21:07:03.94ID:???
>>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。

優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。
0304Name_Not_Found
垢版 |
2018/11/01(木) 22:45:47.80ID:???
>>303
>優れたデザインは常にシンプル

それ複雑なデザインをまとめられないだけなんじゃ…
0305Name_Not_Found
垢版 |
2018/11/01(木) 22:53:38.17ID:???
複雑なデザインをまとめるってどういうこと？
0306Name_Not_Found
垢版 |
2018/11/02(金) 01:05:16.95ID:???
整理してシンプルにすること
0307Name_Not_Found
垢版 |
2018/11/02(金) 03:10:17.06ID:???
複雑なものを整理してまとめることは誰でもできる
複雑なものを複雑なままバランス取るのは素人にはできん
0308Name_Not_Found
垢版 |
2018/11/02(金) 04:16:34.13ID:???
なら誰でもできることをやったほうが良いのでは？
0311Name_Not_Found
垢版 |
2018/11/02(金) 20:20:39.04ID:hPJ8g+KP
>>310
少なくとも後者は駄目だわな
<p>はブロックレベル要素を内包できない
だから無理やり入れると、そこで<p>のブロックは一度切れるじゃろ？

前者はどうだろう
<h1>って内包してはならん要素ってあったかなあ
0312Name_Not_Found
垢版 |
2018/11/02(金) 21:04:11.56ID:???
前者はいい
後者はだめ
根拠はchrome
0313Name_Not_Found
垢版 |
2018/11/02(金) 22:02:05.52ID:DYmjkWhV
所見です
font-sizeについて質問があります。
全ての要素のサイズをvmまたは%で指定し、
font-sizeもvmで指定すれば理論上、画面幅をいくつにしようが
全ての縦横比、スタイルは保持され、
文字もまた、行内文字数、行数が保持されるはずなのですが、
実際に画面幅を変えると、行内文字数、行数は変化してしまいます。
これはなぜでしょうか？

例外的にstrong内の文字は行内文字数、行数は変化しないことを発見しました。
これはなぜでしょうか？
0314Name_Not_Found
垢版 |
2018/11/02(金) 22:08:05.63ID:DYmjkWhV
vmではなくvwでした
0315Name_Not_Found
垢版 |
2018/11/02(金) 22:28:57.56ID:???
>>310
h要素はブロックレベル入れられないから
0316Name_Not_Found
垢版 |
2018/11/02(金) 23:22:45.29ID:???
>>300
やってもいいしちゃんと表示されるけど
正しいHTML構造文としてはNG
SEO的に評価下がるよってだけ
0317Name_Not_Found
垢版 |
2018/11/02(金) 23:36:36.76ID:???
>>316
それを世間一般ではやっちゃダメって言うやろ
0318Name_Not_Found
垢版 |
2018/11/03(土) 00:06:06.53ID:???
SEOきにしない趣味のサイトならいいんじゃね
0319Name_Not_Found
垢版 |
2018/11/03(土) 02:17:30.15ID:???
実際にはSEOの評価は下がらんのやけどねｗ

何故かと言うと結局の所検索で重要視したいのは
HTMLの文法ではなくてコンテンツだから。
HTMLのタグの違いによるスコアの差が悪用されたから
タグによってのスコアの差はなくなってしまっている

今はコンテンツ（CSSなどを反映した実際に画面に表示される内容）で
判断されるようになってる。昔は不正なHTMLをどのように解釈されるかが
バラバラだったから、正しいHTMLを書くことが推奨されていたけど、
HTML5になってから不正なHTMLも同じように解釈するようになったので
ブラウザで表示されてるように解釈される

例えば隠し文字は評価対象から外れるとかね
0320Name_Not_Found
垢版 |
2018/11/03(土) 08:47:05.46ID:???
ブロックレベルってhtml5でもまだ言うの?
まあフローコンテンツとかより分かりやすい気もするんだけど
0321Name_Not_Found
垢版 |
2018/11/03(土) 11:40:17.31ID:???
div多用したら怒られたんだけど…

divっていっぱい使ったらあかんのか？
0322Name_Not_Found
垢版 |
2018/11/03(土) 11:42:21.97ID:???
そりゃ必要ないときに使うのはだめだろうな
適切なタグを使っていれば、divは殆どいらない
0323Name_Not_Found
垢版 |
2018/11/03(土) 13:37:56.48ID:???
ネストしたレイアウトが必要だったり
アコーディオンやタブみたいに変化するようなのはdiv大量になるのは仕方ないんじゃない

逆にそういうのBEM記法使わずにコンテナでかこわなかったりすると
flex がとじてもどしたら block になったとかで変なバグ入りそう
0324Name_Not_Found
垢版 |
2018/11/03(土) 15:40:16.03ID:???
変な空divでレイアウト崩れることもあるからなぁ
0326Name_Not_Found
垢版 |
2018/11/03(土) 16:10:21.17ID:???
>>321
いくらでも使っていいぞ
なんなら二、三個くらいおまけしてやってもいい

余分なタグは使うなとかいう
カビの生えたストリクト原理主義者の言うことに耳を傾ける必要はねえ
マジで
0327Name_Not_Found
垢版 |
2018/11/03(土) 17:26:19.28ID:pS15NHy1
現場に出なきゃわからないことが多いんだろうな
今はfloatは使わずにflexで、inlineは使わずにinline-blockが普通？
0328Name_Not_Found
垢版 |
2018/11/03(土) 18:20:29.18ID:???
普通っていうか、その場に適したものを使うだけよ。
0329Name_Not_Found
垢版 |
2018/11/03(土) 19:12:51.62ID:???
いまの現場ほぼdiv
かなりネストしてる
SEO関係ないけどどうなのよと思ってる
0331Name_Not_Found
垢版 |
2018/11/03(土) 19:37:58.27ID:???
そうですよねgoogleさん…
0332Name_Not_Found
垢版 |
2018/11/03(土) 19:38:31.69ID:???
>>319
キュレーションサイトの問題で
構造より無意味な文章1万文字のほうが評価が高いって結果でちゃったからなぁ
あれからグーグルがなんか対策したならしらんけど
0333Name_Not_Found
垢版 |
2018/11/03(土) 21:18:59.56ID:6Ec8PRLb
何らかの要素を
display:none;
した後で、再び表示させたい場合、
display:unset;
display:initial;
どちらをセットしても同じような挙動になりますか？
0334Name_Not_Found
垢版 |
2018/11/03(土) 21:30:13.88ID:???
>>313
実際には vm や % で指定されてないスタイルがまだあるんじゃないか
ブラウザの UA スタイルシートなど暗黙的に設定されているやつ
0335Name_Not_Found
垢版 |
2018/11/03(土) 21:37:30.84ID:???
>>333
同じ挙動になるとは限らないので、元の display 値を覚えておくか、専用の class でオンオフ切り替えるしかないな
hidden 属性を設定する方法もある（ hidden を消せば元に戻る）
0336Name_Not_Found
垢版 |
2018/11/03(土) 21:50:30.55ID:6Ec8PRLb
>>335
ありがとうございました。
大変参考になりました。
クラスでやります。
0337Name_Not_Found
垢版 |
2018/11/04(日) 01:10:29.25ID:???
そのためのコンテナー
外側はとりあえず div にしといて display は none と block できりかえる
flex 使いたければ内側にかく

jquery の .show() hide() 使えばそれやってくれるから楽だよ
0338Name_Not_Found
垢版 |
2018/11/04(日) 07:05:50.53ID:???
>>337
いつの時代だよ？そうやって適当に教えるな
0339Name_Not_Found
垢版 |
2018/11/04(日) 09:41:29.72ID:???
画面を小さくすると、背景画像の両端がトリミングされるコードが分からない。
0340Name_Not_Found
垢版 |
2018/11/04(日) 10:06:35.97ID:???
>>337の何がおかしいのかよくうわからない
うちでもそうしてるからもっといい方法があったら教えてくれ
0341Name_Not_Found
垢版 |
2018/11/04(日) 12:24:33.70ID:???
自分の会社でもブロック以外は裸でおかずにとりあえずとりあえず div か p でかこっとけっていわれてるわ
BEM記法ほど厳密じゃないが
0342Name_Not_Found
垢版 |
2018/11/04(日) 12:30:39.68ID:???
>>339
img に width height を pixel で設定して親に overflow: hidden つければいいんじゃないかな

object-fit:none;　とか
absolute にして親に padding つける方法もある
0343Name_Not_Found
垢版 |
2018/11/04(日) 16:26:59.57ID:???
show hideは結局インラインでdisplay直接きりかえてるからスマートじゃないってことじゃないclassを使った方がなにかとよい
0344Name_Not_Found
垢版 |
2018/11/04(日) 16:38:29.87ID:???
>>339
background-size: cover; かな？
とエスパーしてみる
0345Name_Not_Found
垢版 |
2018/11/04(日) 16:47:12.39ID:???
>>339
background-sizeを指定しなければ勝手に両端切れなかったっけ
忘れちった
0346Name_Not_Found
垢版 |
2018/11/04(日) 17:25:29.52ID:???
background-positionをcenterじゃないの
0347Name_Not_Found
垢版 |
2018/11/04(日) 17:37:13.84ID:???
background-size:auto 100%;
とか？
0348Name_Not_Found
垢版 |
2018/11/05(月) 00:33:00.19ID:???
>>342-347
ありがとうございます。

いまいち画像サイズの概念やoverflowプロパティを理解してないから、
縦横比を維持したまま縮小してしまうんですよｗ
0349Name_Not_Found
垢版 |
2018/11/05(月) 09:22:11.55ID:rg4rpwwX
display:block;
をセットしている要素に対して後から追加した
display:none;
が有効に出来たのですが、display:table;に対してはnoneが効きませんでした。
それでnone:!importantにして解決したのですが、そういうもんですか？
0350Name_Not_Found
垢版 |
2018/11/05(月) 09:54:21.10ID:???
display: table; とか関係なく、詳細度が低いんじゃないのかな
0351Name_Not_Found
垢版 |
2018/11/05(月) 14:45:25.29ID:???
>>348
画像、と書くと
<img>要素のことか、background-imageのことか
混乱するから区別して書くといい

overflowは
内包するコンテンツが自分より大きい時に
どのようにするか（はみ出す・はみ出さない、スクロールする等）
を決めるプロパティ
0352Name_Not_Found
垢版 |
2018/11/05(月) 16:42:19.89ID:???
お前らborder imageって使う？

難しいから使うなって言われたんだが…。
0353Name_Not_Found
垢版 |
2018/11/05(月) 16:56:51.34ID:???
「難しいから」は理由じゃない。
お前の都合でしか無いって言ってやれ
0354Name_Not_Found
垢版 |
2018/11/05(月) 20:05:46.62ID:???
>>352
今まで使うような案件に出会ったことないや。最近シンプルな画面ばっかだし
0355Name_Not_Found
垢版 |
2018/11/05(月) 21:27:09.78ID:n+lZq6iO
質問失礼します

趣味ブログを運営しています。
アクセス数が増えてきたので、google adsenceに応募したら審査が通り、広告を張ってみたいのですが、張る場所の方法に書いてった＜head＞タグの下に埋め込んでも広告が表示されません。
他のブログテンプレートでは表示されるのですが、お気に入りのブログのみが操作不能です。HTMLの書き方によって広告が張れないということは起こりうるのでしょうか？
0356Name_Not_Found
垢版 |
2018/11/06(火) 09:02:29.68ID:G7U6fKUW
divで作った長方形の領域があり、その幅を右側に最大化したいのです。
ただし、左端はマージンがあるので、ウインドウの左端から離れています。
太線をウインドウの両端
細線をdiv域とすると、こんな感じです

┃　　│　　　　│┃

┃　　　│　　　　　　　│┃

ウインドウ幅を広げるとdiv左のマージンは増えますので一定ではありません。
ですので、 width:calc(100% - 200px) みたいな記述が出来ないので困っています。
良い方法はありますか？
0357Name_Not_Found
垢版 |
2018/11/06(火) 10:00:32.57ID:???
?
div って何もしなくてもめいっぱい領域使うよ
floatや 親にflex がついてたりしないか margin padding をもう１度よく確認してみて
0358Name_Not_Found
垢版 |
2018/11/06(火) 10:05:49.39ID:???
その増える左マージンがどう算出されるのかによる
0360Name_Not_Found
垢版 |
2018/11/06(火) 14:58:21.29ID:???
>>359
ブラウザの開発ツールで見てみるといいよ

制作者がCSS書かなくても
各要素にはブラウザがデフォで用意したスタイルが当たってる

a:linkはデフォでtext-decoration: underline;
だから下線がつく

ここでCSSにtext-decoration: none;を書くと
デフォのスタイルが上書きされて
下線がつかなくなる
0362Name_Not_Found
垢版 |
2018/11/06(火) 18:54:53.93ID:9qlSO4j+
ここで良いのか分からないのですが、ツイッターの埋め込みツイートのデザインはcssで編集出来ますか？
togetterでは普通の埋め込みとはデザインが違うので何かしら方法があると思っているのですが、検索しても全然わかりません
htmlとcssの基本くらいしか分からないので、難しいようであれば諦めます
0363Name_Not_Found
垢版 |
2018/11/06(火) 19:04:57.39ID:???
OGP　Twitterとかで検索してみればすぐできると思う
0364Name_Not_Found
垢版 |
2018/11/06(火) 19:25:00.20ID:lodyECL3
大切な女性を傷つけられた
相手の男性をdisplay:noneする方法を教えてください
今彼女は入院しています
0365Name_Not_Found
垢版 |
2018/11/06(火) 19:54:18.66ID:Opl2e+DL
よくわからなくなってきたんだが、beforeとafterの使い分けってどうしてる？

どっちでも同じことできるような気がするんだが。
0367Name_Not_Found
垢版 |
2018/11/06(火) 20:09:14.94ID:???
「大切な女性を傷つけられた相手の男性」って被害者じゃないですかね。CSSの前に日本語の勉強した方がいい。
0368Name_Not_Found
垢版 |
2018/11/06(火) 22:51:06.23ID:???
>>367
ある男性と女性が付き合っていて、364がその女性に好意を抱いている
ある時、男性が女性を傷つけた(と364が思っている)←実はただの痴話喧嘩
364「相手の男性を消し去りたい」
つまり364はストーカー
0369Name_Not_Found
垢版 |
2018/11/06(火) 23:30:50.31ID:???
>>365
beforeはその要素のコンテンツの前に入る擬似要素
afterは後ろに入る擬似要素

って意外に違いはないよ
普通にHTML書くときに、何かの前や後ろに要素置くときと
同じ考えでいいよ
0370Name_Not_Found
垢版 |
2018/11/07(水) 00:11:05.72ID:L2hnebu7
>>363
ありがとうございます
これも知らない知識だったので勉強になりました！

特定のツイートを自分のサイトに埋め込んだ時のデザイン変更はやっぱり難しいですかね
0373Name_Not_Found
垢版 |
2018/11/07(水) 00:56:06.96ID:L2hnebu7
>>371
JavaScriptですかー
それは未習得なので普通の埋め込みで妥協します
ありがとうございました
0374Name_Not_Found
垢版 |
2018/11/07(水) 11:05:55.62ID:???
<h1>タイトル文字</h1>
というHTMLがあったとして、
CSSで「タイトル文字」をtext-indentやpaddingで要素外に出しoverflow:hiddenで非表示しつつ
badkgroundで背景画像を指定ってのをちょいちょいやるんですが
SEO的にはこの「タイトル文字」は無視されちゃうのかな？
0375374
垢版 |
2018/11/07(水) 11:10:49.85ID:???
SEO的には～無視って日本語がちょっと変でした
サーチエンジン的にはこのタイトル文字は無視されるのか、ですか
0377Name_Not_Found
垢版 |
2018/11/07(水) 12:46:31.94ID:SKekrxCb
>>374
なんでタイトル文字を隠すん？
0379Name_Not_Found
垢版 |
2018/11/07(水) 13:39:24.96ID:???
SEO会社にimgとalt使えって言われたことある
それも意味あるんかなぁ
0380Name_Not_Found
垢版 |
2018/11/07(水) 13:47:43.41ID:???
差があった時期もあった
0382Name_Not_Found
垢版 |
2018/11/07(水) 13:58:15.72ID:???
タイトルを画像にすることなんかないなあ
ほとんどの場合、Webフォントをsubset化して＋cssで装飾してる
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況