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 >>289
日本でもそんなに変わらんじゃろ
流石に
普及してから何年経ったと >>270
すんません。
さっぱり解らないんですが、htmlのjsってのが有るんですか?
それと、javaとhtmlってのは違うものなのですか?
自分としては目的のサイトを作れるのなら、方法については
何でも良いのですが。 >>291
なんでもいいのなら他人に任せたほうが良い
自分でやるなら、理解しろ >>291
JSはJavaScriptのことだ
名前はJAVAと似ているが全くの別物だ
JAVAとJavaScriptは、メロンとメロンパンくらい違うものだ
JavaScriptはブラウザの中で動くプログラムのことだ
んでHTMLは文章の構造を決めるものでたいした機能はないんだ
何かを押したらどうこうする、みたいなのはJavaScriptの仕事だ >>293
まったくわかりません。
もっとわりやすく説明できませんか? ミニ丼セットの丼だけのオーダーはお受けできませ「ぬ!」 英語圏で色々もあるよー
difference java javascript でググると似たような与太話しいっぱいヒットする
CatとCatfish
hamとhamstar
CarとCarpet
CockとCocktail
とかとか 仕様見てると
<h1>
<p>~</p>
</h1>
も
<p>
<h1>
~~~~
</h1>
</p>
もどっちも書いても良さそうだけど、ブログで後者はNGって記事をよく見る
実際どうなんやろ? >>293
自分は291ですが、
良くわかりました。
ありがとうございました。 >>266
20代前半はそういう職場で働いてたわ
皆おっとりしてたから居心地は良かったが
性格悪い奴とか気性が荒い女が紛れてると
パシリに使われるかボイコットされたり最悪な環境にもなりえるんだろうな >>279
それは汎用性、メンテナンス性に欠けるクソ構造だよ
更新や編集の多いサイトを深く運用してみれば意味がわかるようになる。
優れたデザインは常にシンプル。
複雑なものを複雑に書くより
必要なもの以外をいかにそぎ落としていくかに尽力した方がいい。 >>303
>優れたデザインは常にシンプル
それ複雑なデザインをまとめられないだけなんじゃ… 複雑なものを整理してまとめることは誰でもできる
複雑なものを複雑なままバランス取るのは素人にはできん >>310
少なくとも後者は駄目だわな
<p>はブロックレベル要素を内包できない
だから無理やり入れると、そこで<p>のブロックは一度切れるじゃろ?
前者はどうだろう
<h1>って内包してはならん要素ってあったかなあ 所見です
font-sizeについて質問があります。
全ての要素のサイズをvmまたは%で指定し、
font-sizeもvmで指定すれば理論上、画面幅をいくつにしようが
全ての縦横比、スタイルは保持され、
文字もまた、行内文字数、行数が保持されるはずなのですが、
実際に画面幅を変えると、行内文字数、行数は変化してしまいます。
これはなぜでしょうか?
例外的にstrong内の文字は行内文字数、行数は変化しないことを発見しました。
これはなぜでしょうか? >>310
h要素はブロックレベル入れられないから >>300
やってもいいしちゃんと表示されるけど
正しいHTML構造文としてはNG
SEO的に評価下がるよってだけ >>316
それを世間一般ではやっちゃダメって言うやろ 実際にはSEOの評価は下がらんのやけどねw
何故かと言うと結局の所検索で重要視したいのは
HTMLの文法ではなくてコンテンツだから。
HTMLのタグの違いによるスコアの差が悪用されたから
タグによってのスコアの差はなくなってしまっている
今はコンテンツ(CSSなどを反映した実際に画面に表示される内容)で
判断されるようになってる。昔は不正なHTMLをどのように解釈されるかが
バラバラだったから、正しいHTMLを書くことが推奨されていたけど、
HTML5になってから不正なHTMLも同じように解釈するようになったので
ブラウザで表示されてるように解釈される
例えば隠し文字は評価対象から外れるとかね ブロックレベルってhtml5でもまだ言うの?
まあフローコンテンツとかより分かりやすい気もするんだけど div多用したら怒られたんだけど…
divっていっぱい使ったらあかんのか? そりゃ必要ないときに使うのはだめだろうな
適切なタグを使っていれば、divは殆どいらない ネストしたレイアウトが必要だったり
アコーディオンやタブみたいに変化するようなのはdiv大量になるのは仕方ないんじゃない
逆にそういうのBEM記法使わずにコンテナでかこわなかったりすると
flex がとじてもどしたら block になったとかで変なバグ入りそう >>321
いくらでも使っていいぞ
なんなら二、三個くらいおまけしてやってもいい
余分なタグは使うなとかいう
カビの生えたストリクト原理主義者の言うことに耳を傾ける必要はねえ
マジで 現場に出なきゃわからないことが多いんだろうな
今はfloatは使わずにflexで、inlineは使わずにinline-blockが普通? いまの現場ほぼdiv
かなりネストしてる
SEO関係ないけどどうなのよと思ってる >>319
キュレーションサイトの問題で
構造より無意味な文章1万文字のほうが評価が高いって結果でちゃったからなぁ
あれからグーグルがなんか対策したならしらんけど 何らかの要素を
display:none;
した後で、再び表示させたい場合、
display:unset;
display:initial;
どちらをセットしても同じような挙動になりますか? >>313
実際には vm や % で指定されてないスタイルがまだあるんじゃないか
ブラウザの UA スタイルシートなど暗黙的に設定されているやつ >>333
同じ挙動になるとは限らないので、元の display 値を覚えておくか、専用の class でオンオフ切り替えるしかないな
hidden 属性を設定する方法もある( hidden を消せば元に戻る) >>335
ありがとうございました。
大変参考になりました。
クラスでやります。 そのためのコンテナー
外側はとりあえず div にしといて display は none と block できりかえる
flex 使いたければ内側にかく
jquery の .show() hide() 使えばそれやってくれるから楽だよ >>337
いつの時代だよ?そうやって適当に教えるな 画面を小さくすると、背景画像の両端がトリミングされるコードが分からない。 >>337の何がおかしいのかよくうわからない
うちでもそうしてるからもっといい方法があったら教えてくれ 自分の会社でもブロック以外は裸でおかずにとりあえずとりあえず div か p でかこっとけっていわれてるわ
BEM記法ほど厳密じゃないが >>339
img に width height を pixel で設定して親に overflow: hidden つければいいんじゃないかな
object-fit:none; とか
absolute にして親に padding つける方法もある show hideは結局インラインでdisplay直接きりかえてるからスマートじゃないってことじゃないclassを使った方がなにかとよい >>339
background-size: cover; かな?
とエスパーしてみる >>339
background-sizeを指定しなければ勝手に両端切れなかったっけ
忘れちった background-positionをcenterじゃないの background-size:auto 100%;
とか? >>342-347
ありがとうございます。
いまいち画像サイズの概念やoverflowプロパティを理解してないから、
縦横比を維持したまま縮小してしまうんですよw display:block;
をセットしている要素に対して後から追加した
display:none;
が有効に出来たのですが、display:table;に対してはnoneが効きませんでした。
それでnone:!importantにして解決したのですが、そういうもんですか? display: table; とか関係なく、詳細度が低いんじゃないのかな >>348
画像、と書くと
<img>要素のことか、background-imageのことか
混乱するから区別して書くといい
overflowは
内包するコンテンツが自分より大きい時に
どのようにするか(はみ出す・はみ出さない、スクロールする等)
を決めるプロパティ お前らborder imageって使う?
難しいから使うなって言われたんだが…。 「難しいから」は理由じゃない。
お前の都合でしか無いって言ってやれ >>352
今まで使うような案件に出会ったことないや。最近シンプルな画面ばっかだし 質問失礼します
趣味ブログを運営しています。
アクセス数が増えてきたので、google adsenceに応募したら審査が通り、広告を張ってみたいのですが、張る場所の方法に書いてった<head>タグの下に埋め込んでも広告が表示されません。
他のブログテンプレートでは表示されるのですが、お気に入りのブログのみが操作不能です。HTMLの書き方によって広告が張れないということは起こりうるのでしょうか? divで作った長方形の領域があり、その幅を右側に最大化したいのです。
ただし、左端はマージンがあるので、ウインドウの左端から離れています。
太線をウインドウの両端
細線をdiv域とすると、こんな感じです
┃ │ │┃
┃ │ │┃
ウインドウ幅を広げるとdiv左のマージンは増えますので一定ではありません。
ですので、 width:calc(100% - 200px) みたいな記述が出来ないので困っています。
良い方法はありますか? ?
div って何もしなくてもめいっぱい領域使うよ
floatや 親にflex がついてたりしないか margin padding をもう1度よく確認してみて Pseudo-classesからです。
1 https://gyazo.com/02535a5de4acdc8219053950a6949a72
2https://gyazo.com/31affd8fb9780903bd3b89a3b26126c2
1と2を比較して、 text-decoration: noneとtext-decoration: underlineがあるないのは
どういう違いがあるのですか >>359
ブラウザの開発ツールで見てみるといいよ
制作者がCSS書かなくても
各要素にはブラウザがデフォで用意したスタイルが当たってる
a:linkはデフォでtext-decoration: underline;
だから下線がつく
ここでCSSにtext-decoration: none;を書くと
デフォのスタイルが上書きされて
下線がつかなくなる ここで良いのか分からないのですが、ツイッターの埋め込みツイートのデザインはcssで編集出来ますか?
togetterでは普通の埋め込みとはデザインが違うので何かしら方法があると思っているのですが、検索しても全然わかりません
htmlとcssの基本くらいしか分からないので、難しいようであれば諦めます OGP Twitterとかで検索してみればすぐできると思う 大切な女性を傷つけられた
相手の男性をdisplay:noneする方法を教えてください
今彼女は入院しています よくわからなくなってきたんだが、beforeとafterの使い分けってどうしてる?
どっちでも同じことできるような気がするんだが。 「大切な女性を傷つけられた相手の男性」って被害者じゃないですかね。CSSの前に日本語の勉強した方がいい。 >>367
ある男性と女性が付き合っていて、364がその女性に好意を抱いている
ある時、男性が女性を傷つけた(と364が思っている)←実はただの痴話喧嘩
364「相手の男性を消し去りたい」
つまり364はストーカー >>365
beforeはその要素のコンテンツの前に入る擬似要素
afterは後ろに入る擬似要素
って意外に違いはないよ
普通にHTML書くときに、何かの前や後ろに要素置くときと
同じ考えでいいよ >>363
ありがとうございます
これも知らない知識だったので勉強になりました!
特定のツイートを自分のサイトに埋め込んだ時のデザイン変更はやっぱり難しいですかね >>371
JavaScriptですかー
それは未習得なので普通の埋め込みで妥協します
ありがとうございました <h1>タイトル文字</h1>
というHTMLがあったとして、
CSSで「タイトル文字」をtext-indentやpaddingで要素外に出しoverflow:hiddenで非表示しつつ
badkgroundで背景画像を指定ってのをちょいちょいやるんですが
SEO的にはこの「タイトル文字」は無視されちゃうのかな? SEO的には〜無視って日本語がちょっと変でした
サーチエンジン的にはこのタイトル文字は無視されるのか、ですか SEO会社にimgとalt使えって言われたことある
それも意味あるんかなぁ タイトルを画像にすることなんかないなあ
ほとんどの場合、Webフォントをsubset化して+cssで装飾してる >>374
フェレットでそんな記事読んだな。
https://ferret-plus.com/6036
ほとんどのホームページでは、H1タグは テキスト というよりもロゴ画像で囲んでいることのほうが多いのではないでしょうか。 img src
って必ずWidth Height 指定した方がいいのかな。
素材画像のサイズそのまま表示されたらいい時でも >>384
気にしたことないな
SPサイトくらいか >>384
大きさを明示すべき理由は
画像の読み込みが進むに連れて、ページのレイアウトがガコガコ動いてしまうから、というもの
なのでガコガコしないようにスタイルを書いてあればOK 画像サイズ指定しないと読み込みのパフォーマンス落ちた気がするが、もうその情報は古いかね いやGoogleがAMPの要件に挙げてんだからパフォーマンスがらみだろ ■ このスレッドは過去ログ倉庫に格納されています