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 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使えば可能だと思う google fontsってローカルに保存してつかえますか？ htmlとcssだけでニコニコのコメントみたいに横方向に流すことってできますか？ ttps://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
文字列がブラウザーのウィンドウを横切る >>443
ありがとうございます
横に動くたびに文字が細かく動くのがちょっと気持ち悪いですね 要素の高さが足りないと背景で指定している画像が
見切れてしまいますが、それを自動的に防ぐ方法ありますか？
<style>
.hoge{
background: url("https://www.google.co.jp/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";) no-repeat 0 0;
background-color: #ddd;
}
</style>
<div class="hoge">
ここのdivの高さを背景画像の高さに応じて自動的に変化するようにしたい
できればmin-heightのように最低値として
</div> >>446
そうですよね...
img要素って縦横比も自動的に保つし
何気に素晴らしい imgが素晴らしいってよりbgは用途が違うからなぁ 少なくとも背景画像サイズをCSSで認識する方法はないので background-image では無理
img を使うしかない compassで幅・高さ測って
要素の縦横比を合わせる
ってことはちょくちょくする >>208>>210
こういう古いcssライブラリ見つけたぞ
http://benschwarz.github.io/gallery-css/
これにcss scroll snapくっつければいいんや！ javascriptで、要素の高さとかを合わせるようにしてるんだけど、描写後に変更するから画面が少しちらつく。
どうしたらええやろか…
Hiddenして、要素の高さ合わせた後にhidden解除したらいけると思ったけどダメだった… >>452
最近よくあるやつ
ページ遷移する度にloadingの画面になってアイコンを数秒見せてごまかすやつは？ >>453
loading画面の要件がないので使えない。
あくまで普通に開くことが必要…
まぁ俺が気になったから直したいだけなんだが… wordファイルから効率良くきれいなhtml用のソースを作成する方法ないかな？
インラインスタイルが邪魔で削除したいが、変な所で改行されてたり微妙に正規表現で上手く消せない・・・ DreamweaverCCで画面切り替えると検索窓がいちいち消えるのなんとかならないのだろうか
入力しておいた文字が消えるし、常に表示しておきたい ライブとコードの画面をマルチにできる様に？
あれ謎よね 一番最初に実装しなきゃならんでしょあんなの
DWあんまり使ってないから良いけど ChromeでDevTool開けば似たようなもんだろ。 Dreamweaver結構使ってるんやね
慣れなくて速攻使うのやめたわ… 逆にDW以外だとみんななに使ってるのか知りたい
JSPが編集できるとうれしいんだけど >>458
ちがう
ファイルをマルチ画面(分割画面)でひらけるようにだ。
なんでわざわざ別ファイル開いてウィンドウ吸着解除して手でならべなかなゃならんのだ？
お前の関連ファイルタブは飾りか？っておもうわ
ライブとかどうでもいい。 >>463
いいという話は聞くけど、DWから乗り換えろといったら反発されるんでは エディタなんてなんでもよくてDwテンプレートの代わりに何使うかでしょ 画面の一部に blur 効果の窓をつけたいんだけど
背景画像が固定じゃないとつけられない？
すでに表示してるページの上にぼかし窓のせたいんだけど
ttps://hacknote.jp/archives/2470/
とかいくつかサイトみてると背景と同じ画像を設定するってあるので
普通のページ要素をぼかすのは無理なのかな >>468
blurは要素をぼかし窓にするものではなく設定した要素自体がぼける
blurした要素に背景がなければ下がくっきり見える
sectionにblurしたところでsectionの中身がぼけるだけ
くっきりした背景(body)の上にぼけた文字(section)が載ってる状態になる
section:beforeにしてもそいつに背景がないと意味をなさない
透明をぼけさせても透明だからね
なので下に見える背景画像と同じ背景画像を設定してそいつをぼけさせると一見ぼかし窓っぽく見えるという騙しテクニック Brackets使ってるがDWよりマシとはいえもっさりしてるから乗り換え検討中 atomモッサリなのにvscodeに次いで二番手、sublimeはサクサクなのになんで廃れたんだ？ vscodeが軽くなって一択になったわ
他のエディタでできることだいたいできる
sublimeは軽いし見た目も良いエディタだけどライセンス催促とコード補完の弱さとサイドバーの使いづらさで捨てた ■ このスレッドは過去ログ倉庫に格納されています
