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 >>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プロパティを理解してないから、
縦横比を維持したまま縮小してしまうんですよｗ 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 をもう１度よく確認してみて Pseudo-classesからです。
１ https://gyazo.com/02535a5de4acdc8219053950a6949a72
２https://gyazo.com/31affd8fb9780903bd3b89a3b26126c2
１と２を比較して、 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
って必ずＷｉｄｔｈ Ｈｅｉｇｈｔ 指定した方がいいのかな。
素材画像のサイズそのまま表示されたらいい時でも >>384
気にしたことないな
SPサイトくらいか >>384
大きさを明示すべき理由は
画像の読み込みが進むに連れて、ページのレイアウトがガコガコ動いてしまうから、というもの
なのでガコガコしないようにスタイルを書いてあればOK 画像サイズ指定しないと読み込みのパフォーマンス落ちた気がするが、もうその情報は古いかね いやGoogleがAMPの要件に挙げてんだからパフォーマンスがらみだろ >>378
>>373
ああそうか・・・ありがとう >>382
最近だとロゴのSVG画像じゃね？
altにテキスト入れときゃ問題ないけど >>391
>>392
ん？サイトロゴとかじゃなくタイトルでしょ？
「プライバシーポリシー」とか「会社概要」とかのページタイトル
そんな特殊なフォント使う？ 結構あるかな、例えば
フォントにイラストが付いていて変形されてたり一部に色が付いてたり
背景テクスチャに乗算でフォントが乗ってるとか
エッジに紙のような処理が施されてたりスタンプのような加工がされてたり
縁取りが2重3重に付いてたりとまあいろいろ >>374
余談だけど
paddingで押し出すやり方は
Androidで、長押しするとテキスト出てきちゃう機種があるので注意を text-indentでテキストすっとばすのってブラックハットと同じ手法じゃん
テキストを背景と同じ色にして隠し埋めするのと同じで
CSSや画像内の文字すら認識できるGoogleにはバレバレだろうけど、プラスにもマイナスにもならなそう 自分のやらないことは非常識
自分のやっていることが常識
という思い込みは愚者への第一歩である
哲学者エトゲル・ダーフィト まったく問題ねえけどなあ
単体の単語ではなく、文字と図がいくつもレイアウトされてしまってる画像とかだと
alt属性の文字列だけでは説明しきれないから
背景画像にして、その要素の中にHTMLで詳しく書く、とかよくやる
検索にもちゃんと引っかかるし、そのせいで検索スパム扱いされたこともねえな たぶんだけど
検索スパム判定は、そんなに単純じゃないんだと思う 質問お願いします
親要素は背景の枠組み
その中の文章が違うため改行数が変わり
下に配置させたい画像？も位置が変わってしまいます
子要素に
position: absolute;
bottom: 0;
これで設定しようとしたのですが
その親要素を複数回使用してるため
position: relative;を使うと全ての配置がおかしくなってしまいます
この場合自分で改行を追加して行を合わせる
もしくは親要素を一つずつ変更していくしかないのでしょうか？ 今日初めてこのスレにきたけど、
文章で書かれても全然わからんね じっくり読めばわかるだろ
と、じっくりがんばって読んだけどまじでわからなくて草 >>402
つまり親要素と言ってるものが複数横並びになっていて、親要素同士の高さと画像の位置を全部一緒にしたい？ 説明が下手ですみません
classでサイズを指定した親要素の中に
文章と画像（スワイプ）を入れようとしてます
それと同じclassを何度も使い、違う内容の文章を書いてるのですが
文章量が違うため、画像の位置がバラバラになってしまいます
調べたところ
親要素に
position: relative;
子要素に
position: absolute;
bottom: 0;
で下に配置できるとのことでしたが
先ほどお伝えした通り同じclassを何度も使ってるので
position: relative;を使うと全て同じ位置に重なってしまい
配置がおかしくなってしまいます
この場合、かなり量はあるんですが一つ一つclassを変える
もしくは改行のタグを入れて合わせていくしかないでしょうか？ >>406
いや適切にクラス名与えてればそんなことにはならないはず
どっか閉じタグ忘れたりしてない？ >>406
クラスは何個も書いていいんだよ
今まで使ってた親要素のクラス名を「zaku」として
新たに「gelgoog」というクラスを用意して
.gelgoog{ position: relative; }
<div class=“zaku”>今までのやつ</div>
<div class=“zaku gelgoog”>あたらしいやつ</div>
ってすれば、後者にはザクとゲルググの両方のスタイルが適用されるので
今までのやつに影響することなく、やりたいことできるっしょ background: url('image.png');
background: url(image.png);
のどちらでも出来たのですが、クオーテーションマークは無しでも良いですか？ >>409
どっちでもいいよ
ちなみにダブルクォーテーションでもいい
ただし、ないとは思うけどURLにスペースが入る場合は必須
俺はなし派 >>406
relativeとabsoluteをつける要素を間違えてるんじゃない？ せめてHTMLタグの階層ぐらいはかいてくれないとまだ意味がわからない
本当に解決したいなら質問内容を伝えるのに図ぐらいは描いてほしいところ <container><img><文字></container>
<container>ちがう文章１</container>
<container>ちがう文章２</container>
みたいになってて（クラス名＝タグ名の略式だとおもってね）
container に relative を使うとちがう文章にも影響がでるからつかえない
っていいたいのかな？
そもそも役割のおなじものにちがうスタイルをあてたくなるってことがナンセンスだから
relativeをあてたいクラスにはちがう役割があるはずでちがう名前をつけるべきかと
<container><swipe><img><span>文字</span><swipe></container>
でswipeにrelativeをつけるとか
<container container-swipe><swipe><img><span>文字</span><swipe></container>
.container.container-swipe に限定してrekativeをつけるとか
CMSの自動出力なんかでHTMLをどうしても変更できないとかなら
.container:nth-child(1) とかで何番目のクラスにだけスタイルを適用とかもできる 何度もすみません
水色で小さく枠どった背景の中に
青い線が文章、黄緑がスワイプ画像です
文章がそれぞれ違うので画像の高さがばらばらになります
画像は枠内の一番下に統一したいです
classはfloatがrightのものもあります
left rightともに何度も使ってます
<div class="left">
<p>
あああああああああああああ<br />
</p>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="1.jpg"></div>
<div class="swiper-slide"><img src="2.jpg"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
.left{
float: left;
width: 650px;
height: 600px;
margin: 50px auto 120px 180px;
padding: 30px;
border: 50px;
border-radius: 30px 30px 30px 30px;
background-color: #faf7e6;
} 画像の高さが決まってるなら親要素に画像の高さ分のpadding-bottomを設定して画像をabsoluteで下付にする
もしくは
matchHeight.jsなど高さ揃えのプラグインをいれてテキストの高さを揃える
floatをやめてflex使えばいけそうだけどな .left, .right {
position: relative;
}
.swiper-container {
position: fixed;
bottom: 0;
}
だけでいいような気が それこそ absolute で重なっていいんだったら backgroud-image で済む話じゃないのん
文章と重なってほしくないなら
.left の中に文章エリアとスワイプエリアの２つがきっちりわけられてるし
.left {
display: flex;
flex-direction: column;
justify-content: space-between;
}
でいいと思う ulの中の数個のliに以下のようにafterを追加しました。
li::after{
content:"★";
position:absolute;
right:0;
bottom:0;
・・・
}
など指定。
こうすればliの後ろに★が出ると思ったのですが、実際は画面の最下部に出ました。
どうやらliではなくてbodyに対してrightやbottomの指定が効いているようなのです。
そう言う事ってありますか？ すみませんWEB系に行こうと勉強してるんですが、教えてください
CSSの最初にhtml,body,p,h1...という感じでにタグを網羅してからmarginpadding:0やってるサイトをよく見かけるんですが、
全選択セレクタの *｛ﾏｰｼﾞﾝﾊﾟﾃﾞｨﾝｸﾞ0｝ の方を仕事としてWEB製作やってく上で使ったら駄目な理由とかってありますか？ >>422
right、bottomってどこを基準にして設定したいの？
で、それをあなたちゃんと指定している？してないからbodyが基準になってるんじゃないの >>424
>right、bottomってどこを基準にして設定したいの？
liを基準にしたいです。
と言うか、liのafterでabsolute指定すると、それはliに対して指定した事になると思っていたのですが、
それは間違いですか？ >>425
liを基準にしたいって書くんだよ
あとはグーグルでabsoluteの挙動について調べればわかる >>423
リセットCSSってやつね
ブラウザの差異を吸収するために使うけど当然デメリットも有る
まあここら辺読んでみるといい
ttp://blog.3streamer.net/html-css-beginner/reset-css-1/ absoluteは親をたどって最初にstatic以外の要素を基準にして位置が決定される
特定の親要素の中にabsoluteで配置したい場合はその親要素にrelativeを指定する
relativeをどこにもつけないとbodyを基準にした相対配置になる >>429
そうなんですか！
それは知らなかったです。
ありがとうございました。 >>428
有難うございます
一回用意しとけばコピペで済む話なんで、可能なら*ではなくリセットかけるタグをそれぞれ書いた方が良い。ということですね
どっかからコピペして使うことにします ぜんぜん違うけどまあいいや
実際に仕事で動作環境指定されてはじめて問題になることで最初に覚えることじゃないし好きにしていいよ 皆さんの知恵を拝借し、なんとかできました
助かりました
ありがとうございました inputのボーダーをチカチカ点滅させたいんですがCSSで可能でしょうか？
出来ればルーレットのように点滅しながら回転させたいです。
https://www.youtube.com/watch?v=yVF-Dhz2oKE
こんなふうに。 cssのanimation keyframe使えば可能だと思う ■ このスレッドは過去ログ倉庫に格納されています
