HTML/CSS のどんな質問にも優しく答えるｽﾚ 52
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html
前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/ >>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです 質問失礼します。
レスポンシブデザインでサイトを作成しており、PCから見た時に①の画像のようになるようにCSSを書きました。
これがスマホから見ると②の画像のようになってしまいます。
PC表示部分のCSSは③の画像、スマホ表示部分のCSSは④のような状態なのですが、どこを改善すればよいでしょうか。
https://i.imgur.com/e42hJSO.png
https://i.imgur.com/mBDlOmA.png
https://i.imgur.com/6RavAGV.png
https://i.imgur.com/DuEybLY.png >>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう >>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ >>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で >>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです >>3
#mainあたりにmax-width入れてみては？ >>5
レスありがとうございます
flex調べてみます >>8
③のCSSの#main内でよろしいですかね
やってみます >>8さんのやり方でできました！
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました 疑似要素を4つ使いたい場合、タグを増やすしかない？
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです >>13 例えば
見出しタイプ1
====================================
↑これが通常の見出しで一箇所だけ↓こうなる場合
☆ ★ ※星部分が回転
見出しタイプ2
★ ☆
divで親タグを増やしていくって方法以外無いでしょう？
デザインの為だけに無駄なＨＴＭＬが増えるんでしょ？
<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>
これのどこがマークアップがおかしいの？ h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる 親にdiv追加じゃなくh2にborder-imageとか >>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり あと見出しタイプ2という呼称からの推察になるが
h2のバージョン違いなら
>>17の言うようにh2の中身を変えるかな
通常
<h2 class="head2">
<span class="head2__label">見出し</span>
</h2>
星付き
<h2 class="head2--star">
<span class="head2__label">見出し</span>
</h2>
こんなん みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの？ background-sizeでcoverとかcontainとか色々あるだろ chromeの検証ツールで↓のページを見た時、表示端末にスマホを指定するとスワイプ操作で横スクロールできるけど、iPad系を指定するとスワイプできないできないんですがおま環ですか？
https://jsfiddle.net/om7uLzwy/show
実機で見た時にはスマホと同じようにスワイプで横スクロールできるはずですよね？
タブレット持ってないので試せず。。 >>22-23
じゃあ見出しの文頭に画像を表示するにはどうしたらいい？
Bootstrap5使ってる静的HTMLサイト >>24
スワイプでスクロールできたよ
iPadは実機でないと動作わからないことも多いので、検証用に一枚導入してもらうのが確実ね
制作環境がMacならXcodeのSimulatorが使えるんだけど、Windowsだよね？ >>26
じゃあおま環ですね。。
多分表示サイズを75%に落としてるのが原因のようです。 集団摘発案件、逮捕案件
表向きはIT企業だが本職は特殊詐欺グループ
SALES GO株式会社（セールスゴー）
セールスゴーは特殊詐欺グループです！！
元鹿島サポーターの押川定和も詐欺グループの一員です。
表向きのセールスゴー
↓↓↓↓↓↓
https://salesgo.co.jp/company
〒140-0002
東京都品川区東品川四丁目13-14
グラスキューブ品川
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
http://www.jpdo.com/cc02/18/img/34090.jpg >>28
ありがとう、ビューポートを使えば実装できるんだね =T=i=k=T=o=k（←迷惑でしたらこちらをNGしてください。）
友人にも紹介して、追加で￥3500をGETできる。
https://i.imgur.com/4BmBiOm.jpg >>31
迷惑って自覚があるならNG避けようとすんなゴミカス HTMLかどうか分からないんですが、PC版Chromeでホームページを見ると「アプリをインストールしますか？」という謎の通知が出てきます。
出ないようにしたいのですがどうしたらいいでしょうか。 >>19
borderや背景でそれぞれの星を回転ってできるの？
試しにborderで書いたやつを見せてくれんかの？ >>19
セマンテックな観点からデザインに関する部分はCSSのみでやるべきだって昔誰かが言ってた気がしたんだよｗ
実際、疑似用を多数使いたいって要望は多いと思ったんだがねえ
>>20
せやね >>34
そのホームページとやらの素性が分からないので、その情報だけじゃ何も分からない >>35
背景もBorderも回転GIFをはりつければいいんじゃね？
後出し仕様があるなら知らんけど cssだけで回転させたいとか言い出しそうだけど
svgでやればイケる？ >>38 >>39
最初の質問時に
>>12 疑似要素を4つ使いたい場合
>>15 ※星部分が回転
て書いた通り、疑似要素でcssだけで回転させるイメージなんだがやはりborderや背景では無理って事？
gifアニやsvg使うってのはなんか余計に面倒にならない？ そもそもお題の様なデザインはダサいから採用しないってのはあるが >>36
要望は多い！使えるなら5個でも6個でも使えたらsection一個で再現できるのになってデザインはもちろんあるぜ！
「デザイナーがコーディングできて、かつすべての要素を疑似要素2つまでで完結できるようデザインする」とかじゃない限りどう足掻いてもdivやspanは必要になるね
というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ >>42
これは構造を見てわかるようにした例えだよ
つか既存のwebやcssの見出しデザインてもう出尽くし感と既視感しかないと思うんだが。
むしろそこに疑問を感じているのだ >>40
borderや背景それ自体は動かないからgifとか使うしかないよ
最小のタグでやりたいというお題に答えるならそうなるというだけ
普通は>>20みたいにするから親と子で疑似要素が4つ存在できる
さらに疑似要素が必要になる場合包括するタグを増やせばいい
入れ子と違って空要素は非推奨だが、実際の現場では背景画像が入れてあるだけの空divなんてざらにある
なんならalt空のimg放り込むなんてことも余裕である >>45
うん。なんか背景にはtransform使えるようだから、
背景は複数指定できるように昨今、なんかできそうな気もするんよな
既にやってる人いるならそれ貰ったほうがいいなって思い、、
borderでは回転制御の方法は思いつかないから出来るなら見てみたいって思った感じ すまん、背景にtransformは勘違いかもしれん つか、お前らがセマンティクス教徒になってる理由は何なん？
手書き履歴書以上に意味がないと思うが
(手書き履歴書は「意味のない慣習にも30分ほどはつき合う気はある」という踏み絵にはなるが、
論理マークアップ/セマンティクスには本当に何の実質的意味も価値もない)
>>43
> というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
現在は逆で、divだけでどんなデザインも再現出来てしまうのでセマンティクスの存在意義がない(そしてこれは極論ではなく単なる事実)
だからみんなおつきあい程度に守ってるだけで、divが必要なら躊躇無くdiv使う(デザインをセマンティクスより優先させる) 論理マークアップ不要なら
どんなデザインもdivだけで再現出来てしまうのは昔からやろ 一昔前はSEOの為のタグ構造（例えばHタグの出現順番など）と
anotherLINTだかW3Cだかの厳格型のHTMLチェッカーで100点目指さないといけないみたいな風潮があったからな
anotherLINTだかがめちゃめちゃ厳しくて、100点取る為には一切無駄な記述をしてはならないって洗脳されてしまったんよ >>50
歴史は詳しくないがHTML5からじゃね？
HTML4だと各タグに汎用性/一般性が無かった気が
>>51
> anotherLINT (1997)
つまり26年前のゴミに未だに振り回されてると？
基本、最新版以外はゴミなWeb界で、無駄に伝統を重んじる連中がいたことにびっくりだわ
にしても今更要らんし、何らかの理由で枠が必要なら一番手っ取り早いのはdivだし、
装飾の為だけにHTML構造を変えるのが嫌なら全部div付けて使わずに誤魔化すのが一般的なわけで、
そうすればいいし、また、そうするしかないとも思うが
(現在のCSSには枠を付加する機能がないから、
あらゆるデザインをCSSの差し替えだけで対応出来るようにするには、
あらゆる場所にdivを配置し必要な場合には枠として機能するように仕込んでおく必要があって、
これがプログラムでHTML生成された場合にdivが無駄に入れ子になる原因だが、
15もこれってだけの話) anotherLintって聞いて26年前とか言い出す謎リテラシーの時点で読む価値無いのはわかった
その理屈だとhtmlも30年前の言語になるだろ >>53
ね。俺も最初のそれで、はァ？？
ああ、後発が自分の立ち位置を正当化したいのねって思った ちな一応教えてお手上げるとanotherLINTが機能しなくなって廃れたのはHTML5草案あたりだから2012年ころかな。 モールのASPやメルマガなんかだとソースの文字数制限なんかも厳しくて、
余計なソース、将来使うかもしれないから予め書いておくなんて考えが一切許されん環境もあったな。
まあ今は自由な環境の方が多いから、予測できる範囲で入れ子はしておくし、使ってない汎用関数も書きっぱなしだわ >>53-54
なるほど先発が自分の立ち位置を正当化する為に26年前の開発手法を今でも踏襲しているのか
定義通りの老害だな
>>55
逆に考えてみろ
必要ないから廃れた、HTML5に対応する価値がなかったからやらなかった
(まあ継承してHTML5に対応してるサイトも提供されてるが)
>>56
> 使ってない汎用関数も書きっぱなし
いや使ってないと分かってるのなら落とせよ
多分ビルド時に自動で落とせるし、それ以前にIDEが文句言うと思うが
> 予測できる範囲で入れ子はしておくし
これが比較的許されるのは、ユーザーがCSS当てたときに枠がないと詰むからだよ
お前が今使ってなくても、ユーザーが使う可能性もあるという事 タグに意味をもたせたいから使う
出会ったこともないけどもし全部がdivのコードみたら乾いた笑いが出るな
お前それ管理どうすんの？って
そしてそのままリファクタissue化される >>58
抽象思考出来無い馬鹿乙
全部がdivなら、ほぼ全部にクラスが付いてるはず
実際自動生成されたHTMLはほぼこの形態だろ
タグ名とクラスは役割が被ってて、クラスの方が一般的に使えるんだよ
だから(div+クラス)の形態で生成される
ただ全部がdivなら、省略して(タグ名は省略+クラス)でも同じで、
ならクラスの部分をタグ名にして(タグ名部分にクラス+クラス無し)となってるのが、
お前らが拘ってる論理マークアップ()、セマンティクス()なんだよ
意味的には同じで、書式が違うだけ >>59
HTML Living Standard
https://html.spec.whatwg.org/multipage/
Sass Document
https://sass-lang.com/documentation/
Sass Guideline
https://sass-guidelin.es/
Javascript Reference
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference
言ってること小3で草
わざわざ公式が用意してくれてんのに老害がー！ってワールドスタンダード全無視じゃん
何か語る前に何のためにドキュメントが存在してるか、まず初歩の初歩から見直したほうがいいわ
嫌ならお前がルール決める側にまで上がってお前が定義変えろ
それが無理なら公開オナニーやめるかブランチ切ってオナっとけ >>60
そのドキュメント類のどこに「論理マークアップしろ」と書いてあるんだ？
(せめてW3C謹製のドキュメントを持ってくるべき)
現在の状況において合理的価値が無い事に拘り続けてるから「定義通りの老害」だと言ってる >>61
横からで悪いけど、今はWHATWGに移管されてるよ
よく調べた？ >>63
知ってるよ
完敗したW3CはWHATWG(ブラウザ勢)の規格を追認するだけの機関に成り下がった
だからその中には「論理マークアップしろ」なんて一言も書いてないはず
だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
「昔からそうだから」なら、現状認識を改めることのない「定義通りの老害」だろ >>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して
一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね >>65
コミュ障か？
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、
現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ >>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから
けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね >>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない！！！」だろ
完全に論理マークアップオナニー屋じゃん
まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく >>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね >>64
横からすまんが君はSEO対策してないの？？
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ？ >>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。
ユーザーCSSの為にHTML配慮なんてしてるｻｲﾄなんてねーよｗ
そもそも構造決まってんならXpathで特定できるし。 このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・
それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね？ >>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja&visit_id=638287958271530595-2635680571&rd=1
というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない 「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望！div spanは使うななんて書いてない！」
これもう障害だろ >>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ？
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる) >>75
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
論理マークップが何故必要かについて SEOの為だと言っているんだけど。
あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ？ >>77
何もわかってない。
>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ？しらんな。具体的にソース出して。 >>78
> 論理マークップが何故必要かについて SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ？
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ) >>81
有利ではなくやらないと不利になるんだよ。 アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
てかあんた、そんな事きいてくる時点でお察しだぞ >>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて 何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい >>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある
> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要) >>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて 質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん なにそのdivdiv君って何？
xhtml星から生まれたの？ ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし 質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる 質問です
div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に 子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。
display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか？
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。
https://i.imgur.com/sXA8Rcs.png
https://jsfiddle.net/0dghepau/13/ >>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。
https://jsfiddle.net/7kq2mvbd/10/ 比較的最近リリースされたCSSで使えるのってなんかある？
Scroll-driven Animations
@scope
この辺も便利なんだろうけどペースが早いわ 最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな >>102
さんくす！
scroll-gap
→ググってもでてこんな
代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな
overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう >>103
すまんscroll-paddingだったわｗ
overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか >>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする >>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな >>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる flexでもgridでもgapが使えるの最高すぎる gap最高だよね！超便利 なぜなかったか不思議なくらい <ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>
こんなHTMLで下記のように最大の文字数(この場合は全角５文字)を基準として各子要素を同じ幅で割り振りたいのですがどうすればいいですかね
flexでもgridでもかまわないのですが
<li> にwidthをあてて別に差し支えはないのですが、同様な記述が10数カ所あるもんでもう少しスッキリできないかと…
・◎◎◎ ・◎◎ ・◎◎◎◎◎
・◎◎ ・◎◎◎◎ ・◎◎◎◎ grid-template-column: repeat(3, 1fr); >>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは flexboxしか使わんけどgrid必要な場面がまったくない auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる >>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。
□全部 □円形 □四角形 □青色 □緑色
とチェックボックスが並んでおり、その下には
丸くて青色・四角くて青色・丸くて緑色・四角くて緑色
・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
（１）円形かつ四角形のオブジェクトを可視化
（２）円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
（上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです） 個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば 自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ
2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる tableの作り方で質問です。
こんなテーブルを作ろうと思っています。
a: colspan=2
b: colspan=2
c: colspan=4
d: 指定不要
e: colspan=2
f: 指定不要
とすればよいと思うのですが、
テーブル全体の幅やeとfの中身のテキスト量にかかわらず
eとfの幅が均等な状態を維持したいです。
その場合、どのように設定すればよいでしょうか。
必要な情報かわからないですが以下補足です。
aとdのwidthは固定、
bはテーブル全体の幅からaの幅を引いた幅
cは未固定（テーブル全体の幅）
eとfはテーブル全体の幅からdの幅を引いた幅を2分した大きさとなるようにしたいです。
dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな >>132
<col>を用意してそれにwidthを指定したらよいのでは colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…
https://codepen.io/Nickey-the-looper/pen/MWZoPJv grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
https://jsfiddle.net/dumov8ng/ あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや… >>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。
>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？ >>141
あー、分かる人にはなんか表示されてるのか
納得 >>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし >>142
>>135のcodepen見て>>136作ったけど、>>132の画像ちゃんと見てなかったから一応修正
https://jsfiddle.net/xjo2qLcy/
結局のところtable-layout: fixedの場合は
table-layout - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/table-layout#%E5%80%A4
> 表と列の幅は table 要素と col 要素の幅によって、または最初の行のセルの幅によって設定されます。後続する行のセルは列の幅に影響しません。
ってことなので、先頭行がcolspanで結合してる場合には後続のセル幅のコントロールが少し面倒
colタグ使ってもセルが結合してると難しいね
あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
https://jsfiddle.net/q48phobx/ <div id="hoge">
<ul>
<li>文１</li>
<li>文２</li>
<li>文３</li>
</ul>
</div>
#hoge > ul li {
・・・
}
でW3C CSS検証かけると
#hoge > ul li 文法解析エラーが発生しました [empty string]
とエラーになってしまいます。
何がいけないのでしょうか？
CSS（表示）としては正常に働いています。 今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね >>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？ gridがflexよりも優秀な時ってどういう時があるの？ >>152
たぶん同じ質問繰り返して荒らしてるだけだと思う >>150
ダメですか？
#hoge > ul li {
color: #03f;
text-decoration: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 2px 10px;
background: #ddd;
outline: none;
display: inline-block;
}
#hoge > ul li:hover {
color: #06c;
background: #fff;
border-radius: 5px;
}
ちなみにHTMLはエラーなしです。 https://css-validator.org/validator.ja.html
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。
>>156
そこと何が違うのでしょうか？ >>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975
border-radiusをなくしたらエラーでなかったよ 原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め バリデーターやツールはW3Cの本家サイトから辿った方が無難だね
Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/ コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。
スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
https://jsfiddle.net/tb62nuxh/
実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。 .header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
} 最新のSafariでもまだベンダプリフィクス要るのよね… chromeだと動くからsafariで検証してたってことか あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
https://jsfiddle.net/tb62nuxh/2/
>>163の内容だと -webkit～のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか？ >>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定 opacityだめなんだね
rgbaで指定するのがよいのかな >>167
あぁ、ありがとうございます！
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。 ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。
具体的にどの程度の長さになるかはまだ作成していないためわからないです。 >>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど
>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし… >>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。
>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。 >>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。 >>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> https://jsfiddle.net/q48phobx/ defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる パっと見だとそもそもa d c部分はテーブルですらない Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
ttps://gigazine.net/news/20230920-webkit-safari-17-0/ TwitterでiOS17のSafariでフォントの太さがーって騒いでるね 次のようなcssがあります。
#hoge_1:checked ~ #target_1 {
省略
}
このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか？ https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな
[id^="hoge_"] でid属性がhoge_で始まるもの全てになる 「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち
@container
@layer
:scope bootstrap5を使ってカルーセルを実現しようとしているのですが、モバイルデバイスで表示した場合に以下のような動きをしており、原因がわからないでいます。
・フリックで画像を切替えられない
・ただし、一度「prev」「next」のボタンを使った後はフリックも有効になる
該当部分のhtmlは以下のようになっています。
bootstrapのカルーセルに関するページを同じデバイスで閲覧すると、問題なく最初からフリックによる操作が出来ているのでなにかおかしいところがあるのだと思うのですが…
原因がわかる方はおられますでしょうか。よろしくお願い致します。
<div class="carousel carousel-dark slide" id="carousel-container" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="test d-block w-100" src="static/images/test_01.png">
</div>
<div class="carousel-item">
<img class="test d-block w-100" src="static/images/test_02.png">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel-container" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel-container" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>
</button>
</div> そういう場合は
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/
ここにあるサンプルのHTMLコードと比較する
ってことで多分、最上位のコンテナに
data-bs-ride="carousel"
ってのが足りないので、コレ追加すれば上手くいくんじゃない？
ついでに
Carousel (カルーセル) · Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/components/carousel/#via-data-attributes
> data-bs-ride="carousel"属性は、ページの読み込み時にカルーセルをアニメーションとしてマークするために使用されます。 data-bs-ride="carousel" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。
とのことなので、ボタン押さないとフリック出来ないというのは、この属性が無くて初期化されてなかったとか？ >186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。 >>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの？
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる？ 質問です
<meta name="viewport" content="initial-scale=1, minimum-scale=0, user-scalable=yes">
を指定すると、横幅の広いページの場合（ページの横幅が画面サイズより大きい倍）には縮小表示できますが、
縦長のページの場合（ページの横幅が小さく、縦幅が画面サイズより大きい場合）、縮小表示できないようです。
どうすれば縦長のページで縮小表示できるようになりますか？
（縦長のコンテンツを縮小して一目で確認できるようにしたいです）
Android の Chrome、iPadOS の Safari で確認しました
（ページの横幅が画面サイズより小さい場合、minimum-scale=0 が無視されて scale=1 までしか縮小できないような。
ウェブページは一般的に縦長で縦にスクロールして読むものなので、横幅さえ画面に収まる（ように縮小できた）ならそれ以上は縮小できないように仕様で決まっているか、各ブラウザが制限を設けているのでしょうか？
力技として、
<meta name="viewport" content="width=10000">
とすると縮小できるようになりますが、横幅が無駄にめちゃくちゃ広いページになってしまいます）
https://jsfiddle.net/14xepgrb/2/ IE11が亡くなった今だからこそ
使ってる／使いたいおすすめCSSを教えて！
transform使わずにscale、translate、rotateが地味に便利 文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。
調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。 >>192
ツールチップを表示させたいってこと？
HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
ttps://dev.ore-shika.com/post/css-tooltip/ >>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。 ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
https://jqueryui.com/tooltip/
HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点 質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか？？ 自動で収集されてるんだとは思うんですが、海外の怪しい通販サイトのソースに自分のサイトの文章が無意味に引用されてるっぽいんですけど、これって防ぐ手立てないんですか？ 公開されてる以上防ぐのは不可能
ドメインからサーバーが特定できれば大元に通報するなりできるけど
大体はサーバー会社も外国の訳わからん所だからな ですよね。なんかセキュリティ面で致命的なミスなり欠陥なりあるのかなあとも悩みましたが、まあそういうものだと思って諦めます https://i.imgur.com/kJUPURh.jpg
家族等などにも紹介してプラス\4000をゲットできます
tk..tk [あぼーん用] ｢あいうえお【ここで改行】かきくけこ｣と書いた場合、｢お｣の直後に半角スペースが１個挿入されて改行されてしまう。
これを防ぐ方法は？ 訂正
【ここで改行】ってのは、ソースコード上の改行であって、改行命令ではない。
だから、｢あいうえお かきくけこ｣っていう半角スペース込みの出力になってしまう。 「ここで改行」は<br>の意味かと思ったけど
エディタ上での改行ってことか エディタなら閉じタグの変なところで改行するとかコメントアウトするとか色んな小技が編み出されてきたが
そんなことしなきゃいけない時はHTML設計がおかしい ソースコード上は改行したいけど、出力は改行したくないってこと？ >>209 その通り
>>210 おぉ、その手があったか！ でも、何か汚い感じするｗ 昔からこれでやってんだよ
実際クソ汚い
テーブルコーディングとかと同レベルの古代遺物
嫌ならソースでは改行しないかCSSで無茶しろ vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに 例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか？
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです) >>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが 付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが >>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。
>>217さんの最後の行の意味が良く分からなかったのですが、今の想定の表があくまでイメージですが↓以下のようになっています。
--
<div class="itemList">
__<div class="item sale">商品
__<div class="item soldout">商品
____ : (上記が商品数だけずらずら並ぶ)
で非表示用チェックボックスがONの時、以下のように一括でクラス付与、みたいな感じです。
$('.soldout').addClass('hide')
(.hideの適用スタイルがdisplay:none)
--
「親のクラスを切り替える」というのは、CSSで
.itemList.hide_soldout > .soldout {
diaplay: none;
} を準備し、
$('.itemList').addClass('hide_soldout')
ということなのでしょうか？？ >>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ 自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ 取り扱ってすらいないのかわからない状態にするってこと？ 見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する ##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()
↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状
:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか？
よろしくお願いいたします >>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね >>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと has擬似クラスはいつになったらFirefoxで使えるようになるんだろ :hasみたいなのあればいいな（jsのcladdList.containsみたいなことやりたいな）としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある 皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか？
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい displayつながりならよくね？
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし borderのdashedって
破線の長さ、間隔をCSSで設定することはできませんよね？
Figmaが線の「高度な設定」内で破線と間隔指定できるので
なにか対策あるのかと思いまして border-styleじゃ無理なのでbackground-imageで再現するみたいだよ >>234
ありがとうございます！
やっぱりそうなんですね ひと手間かけるんですね 角丸どうしよう >>233
figmaでできるなら
figmaの開発者モードでどんなCSS吐き出してるか見ればよいのでは >>236
レスついてたの気がつきませんでした
開発者モードでは
border: 1px dashed var(--Grey, #666);
となっているだけで、破線と間隔指定の記載は見当たらないのです >>238
わーーー、すごい！！ありがとうございます！！
border imgではなく
background-imageで作るんですね
ブックマークします SVG使うならダッシュストロークの長さを制御して順に描画するアニメーションも面白いよ
>>236,237
figmaの表示はcanvasにwebGLで描画してるぽいので、そのまま持ち込むのは難しそう 低レベルな質問をさせて下さい
拡張子を.htmlとして作成したファイルを、クロムなどで開くとブラウザ表示されると
思うのですが、タグで囲わず例えば「練習」とだけ書いても見られるんです
これはheadタグやbodyタグ内に「練習」と書いて見るのと
意味的には何が違うのでしょうか？ >>241
ブラウザが補完してbody内のテキストとして扱われてる
そのファイルを開いて開発者ツールで要素の状態見れば納得できると思うよ >>242
マジですか
目から鱗です
ありがとうございます 239です
>>238さんに教えていただいたサイトだと丸点線ボーダーが半分削れちゃっていましたが
svgを%指定、svgに点線指定すればインラインSVGをposition:absoluteで配置でレスポンシブ対応で丸点線ボーダーができました！
>>240さんのアニメーションできるってアドバイスも気づきのきっかけになりました 合わせてお礼申し上げます そろそろpopover API使ってみよかなって思ったら、これもまだFirefox対応してないのか…
:has()もそうだし、使えないままのプロパティ多いと非対応枠にポイッとされちゃうぞ デスクトップ版「Firefox」の開発が「Git」に一本化へ、「Mercurial」を諦める
https://forest.watch.impress.co.jp/docs/news/1545389.html
Mozillaは11月6日（米国時間）、デスクトップ版「Firefox」の開発を「Git」に一本化すると発表した。 知り合いから今運営しているHPがだいぶ古いからリニューアルしてって頼まれたんですが、見てみたらカラーミーで作ってあるショップでした。コーディングで作りたかったのですが、自分で作ったhtmlを既存サイトのトップに表示させる方法もわからず、かと言ってカラーミーのテンプレでは思い描くサイトにはほど遠く。自作サイトにカラーミーの商品ページだけリンクさせようかとも思ったけど、カラーミーのシステムである「マイアカウント」とかも厄介で…。皆さんだったらどうしますか？知り合いの制作会社では凄い勉強してカラーミー専用の言語も学んで0からショップをコーディングできるらしいですが、自分は正直そこまで理解出来そうにないです。 ありがとうございます。WPのプラグインですかね？良い知恵を頂き大変感謝しております。全く新しいカートという事ですね。既存のカラーミーショップに結構な会員登録してる購入者がいるのですが、移行してもらう他ないですかね〜(^-^; カラーミーに既存客いるなら移動なんて絶対に無理
あとトップページを大幅に変えたらSEO下がる可能性もある
というよりも仕事で受けてるならカラーミーくらいやり倒せば？
このくらいできないならWordPressだろうが他のEC系カスタマイズも無理だろ
そもそもhtmlだけで何とかできそうと思ってはいけない
それぞれのシステムに合わせてページ毎のロジックの学習は必須 分かりましたぁ！勉強してきます！さーせんしたぁ！！！ Shopify は？
月5千円〜1万円
Shopifyのカスタマイズ用言語は、Ruby 製のLiquid だけど、
これもRuby on Rails のirb で、HTML を作っていれば、何となく分かる
命令文は、{% 〜 %}
表示部分はヒゲ、{{ 〜 }}
<h1>{{ collection.title }}</h1>
{% for product in collection.products %}
<p>{{ product.title }}</p>
{% endfor %} ありがとうございます。カラーミーが月3,000円でカート機能的に十二分なので、「どこでもカラーミー」って奴を用いて新規サイトにカートを貼り付けて対応しようかなと今思ってます。カートから従来のカラーミートップへ飛ばないようにする&新規TOPに飛ばしてみたいな…愚策ですかね…(T . T) すみません！CSSでどうも上手くいかないので質問させてください
同じ位置に、複数のテキストを順番にフェードイン・フェードアウトさせて、
最後に画像をフェードインさせて固定させたいのですが、どうすれば良いでしょうか？ 同じ位置に重ねてテキスト（複数）と画像を設定
一番最初
animation-duration:1s;
animation-delay: 0s;
二番目
animation-duration:1s;
animation-delay: 1s;
三番目
animation-duration:1s;
animation-delay: 2s;
ってanimation-delayの数値を変える >>259
CSSだけじゃ厳しいですか？
>>260
ありがとうございます！
よろしければですが、同位置に表示させる方法を教えていただけないでしょうか‥‥
なおレスポンシブなページなので相対的に指定しなければいけません あ、ID出ないのですねこの板
私は>>258,261です。
テキストと図形を表示させる位置はdivのセンターです Gridで重ねてもいいし、position:absoluteで重ねてもいいよ >>263
ヒントありがとうございます！やってみます 動きと表示位置については、何とか出来ました！
ただ、#ffffffの文字なのに真っ白にならないんです
#ffffffになるのはほんの一瞬だからでしょうか？
アニメーションのopacity: 1になる間の秒数って設定出来ないでしょうか？ 何度も申し訳ありません。
ease-in-outやらcubic-bazie()やら色々試してみましたが、ダメでした
アニメのタイミングの問題ではないのかもしれません
画像はちゃんと真っ白になるんだけどなあ
難しいですね‥‥ @keyframes fade {
0% {
opacity:0;
}
70% {
opacity:1.0;
}
80% {
opacity:1.0;
}
100% {
opacity:0.0;
}
全体5秒（animation-duration: 5s;）だとして
3.5秒でフェードインして
0.5秒間表示して
1秒かけてフェードアウト
ただし、animation-timing-functionの設定しだいで計算通りにいきません >>267
なんとこんな技が！！
本当にありがとうございます😭
自分もいつか他の人に恩返し出来るよう頑張ります！ :local-linkって知ってた？
これ使えばメニューなどでcurrentの効果をCSSだけで簡単に作れるよね？ 他人に恩返し、良いじゃん
中国では大金持ちに助けてもらって自分が成功した場合、また他の貧しい者を救えって考えがある
受けた恩を本人へ返せるならごもっともだけど、世界規模で見たらとても良い考えだと思うよ
共産思想だのマルクス主義自体は好きじゃないけどね 本ではHTMLファイルのインデントがスペース2つになっているのですが、
自分で書くときはスペース4つでもいいですか？ お好きにどうぞ
2つ、4つ、タブなど宗教戦争になるから自分の信じる道を。 分かりました
レスくれた方、ありがとうございました 最近のエディタはその辺の事情酌んで事後の扱いが自由になってるから助かる
俺はTab派 HTMLの表示に何のフォントが使われているかを確認するためにWhatFontという
ブラウザの拡張を入れたのですが、フォントがserifやsan-serifの場合にそれが
実際に何のフォントなのかを確認する方法はあるでしょうか?
本来論理的なフォント名にしてそういう詳細にこだわらないというものなのでしょうが、
その他のフォントとの兼ね合いやOS等による違いを一応把握しておきたいのです chromeのdevツールのComputedの一番下にRendered fontsがあるじゃろ firefoxも開発ツールの右ペインにフォントタブがある Firefox121、規定で:has()有効になったね >>284 >>285
できました、どうもありがとうございます 画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか？ drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか？
乗算ならberforeのblockにbackground-color: white;入れとくといいかも 画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな 矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい
手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし 288です
ありがとうございます！ おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！ filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？ >>293
https://developer.mozilla.org/ja/docs/Web/CSS/position
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。
まあいつもの通りでSafariが悪い 謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど 初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします position:absolute;
で自由に配置しよう！ >>300できました！！！すごい！ありがとうございます！！本当に助かりました！ >>300
すみませんposition:absolute;ってテキストには使えないんですか？ >>300
すみませんposition:absolute;ってテキストには使えないんですか？ >>303
divなりspanなり、タグでテキストを囲えばいい h2 {
color:#66cc99;
font-size: 85px;
font-family: serif;
width: 1500px;
height: 120px;
background-color: #ccffcc;
padding: 2px;
left: 5px;
top: 1px;
}
cssこんな感じで、テキストを左上に寄せたいです。うまくいかないのですがどこが原因なのかわかりません
ご教示願いますm(_ _)m ゴールがわからないから答えようがない
こういうサービスでコード張って
https://jsfiddle.net/
目指す形を画像で出そう 幅1500、高さ120の範囲に
見出しをサイズ85pxでレイアウトしたいってことなら
<div class='bg'>
<h2>タイトル</h2>
</div>
って形に変えてh2だけでレイアウトしない
ちなみにcssは
.bg {
position: relative;
width: 1500px;
height: 120px;
padding: 2px;
background-color: #ccffcc;
}
h2 {
color: #66cc99;
font-size: 85px;
font-family: serif;
position: absolute;
left: 5px;
top: 1px;
}
で想定のデザインなのかな？ >>306 ありがとうございます！
>>307 ハイ！ >>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか？ imgurに完成予想図、
ソースをjsFiddleにアップしないと伝わりにくいよ
https://imgur.com/
https://jsfiddle.net/ >>309です！ホームページ完成しました！本当にありがとうございます！
すみません、スレの趣旨とは外れてしまいますが、皆さんのおすすめのレンタルサーバーは何ですか？
学生であまりお金がないです。期間はとりあえず1年ほどを考えています。 今考えているのはロリポップ、桜のレンタルサーバー、エックスサーバーです どんな内容で何が目的のページか知らんけどただの静的サイトならスターフリーみたいな無料のでいいんじゃないの >>313静的サイトではないです！スターフリー調べてみました！候補に入れます！ありがとうございます！ >>314そうなんですか？wi-fiはプロバイダですか？ 一度思うままやってみればいい
うまくいかないときに学んだことは役に立つ >>318はい！ありがとうございます！とりあえずやってみます！ ページ内の1つもセグメント(div)に、複数のタイトル表示要素があり、そのタイトル要素をposition: sticky; (top: 0px)で
スクロールしても画面上部に固定されるというのをしたいです。
その際にすでに上部にstickyで固定されているタイトル要素がある状態で、スクロールで次のsticky要素が上部に来たとき、もともと固定されていた要素はそのまま、その直下に固定させるようにしたいのですが、この場合は 2番目のsticky要素の top で位置を調整しないと無理でしょうか？
上記のタイトル要素をtop: 0px で設定すると、2番目3番目のタイトル要素は1番目に重なって表示されます。
1番目がすでに固定状態にあるときに、2番目はそれに重ならないようにするにはどんなやり方がありますか？ 親のセグメントにpadfing-topで一つめのstickyの格納場所を作っておく >>321
ありがとうございます。その場合、padingの高さはsticky要素の高さに会わせないといけないということですよね？
stickt要素の高さが可変の場合はjavascriptで調整するしかないですか？ ドロップダウンメニューですがパソコンで見る場合マウスを合わせると下にサブメニューが出るのですが
スマホだとタップしないとサブメニューが出ません
そのときタップ扱いとなるため一番上にリンクを置いているとその下のサブメニューは一瞬表示されるのですが選ぶ前にタップした一番上のメニューに飛んでしまいます
長押しすれば飛ばずにサブメニューが開いた状態のまま選ぶことが出来るのですが、そのまえにブラウザののサブメニューが表示されるので消す作業が必要になります
iosも似たような感じですがさらに操作が煩雑になります
なにかスマートに動作させる方法はあるでしょうか？
旨く説明できずすみません Web上のテキストボックスへの入力時、iPhone Safariが勝手にズームしてしまうで、それを抑止するためviewportの"maximum-scale=1.0"を設定していますが、これだとAndroid Chromeでピンチアウトによる拡大ができません。
ピンチアウトによる拡大はできるようにしつつ、iPhone Safariの勝手ズームを止める方法ありますか？
フォントサイズが16px以上なら拡大しないそうなのですが、レイアウトの関係でそこまでフォントサイズは大きくはできません。 逆に、iPhone Safariの勝手ズームを止めたらダメ！
既定の動きを勝手に変えたらダメ！
それは想定外で使いにくいサイト
それを使っている人は、その機能があるから使いやすいわけだから。
嫌なら、その機能をオフにするか、ブラウザを変えるはず https://maaengineerhouse.com/archives/1551
ここのサイトを参考にページ遷移しない送信ページを作ったのですが全然ページ遷移してしまいます
action="./test"は自分のメールURLにしてますが他に何が駄目なのかわからない状態です
わかる方教えて頂きたいです >>328
遷移するということはevent.preventDefault();まで到達してないのでスクリプトかidが間違ってる
そのページのnew formData(form)は間違いnew FormData(form)が正しい
フォームデータを送信できるのはhttp/httpsに対してだけ
どうしてもメールで受け取りたいなら自分のサーバー側で転送するか、EmailJSやStmpJSといった外部のサービスを利用する 今レスポンシブデザインの静的サイトを作るとして一番有用なツールは何になりますか？
ひと昔前だとDWだったと思うのですが最近はあまりおすすめされていないようです
習得も難しいです
HTMLとCSSの知識は一通りあります
先達のお知恵を拝借したいです >>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか？ >>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ DWマスターしたレベルで使えるなら他のも普通に使えよう メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか？
そういうプラグインやテンプレートありますか？ >>342
VisualStudioのCSSのフォーマッタが好き >>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ 日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ 正義マンはお呼びじゃないです by スレ利用者一同 結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう 初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。
表に黒い線(1重線)を引くのでいいのですが、薄い罫線として表示されてしまいます。
コードを書き、cmsのフォーマットの上では黒い罫線として表示されるのですが、プレビューや実装段階になると薄くなってしまいます。
(色の変更もフォーマット上では可能でした)
フォーマット的にHTMLのみ使えるのですが、CMSに邪魔されない(？)やり方はありますでしょうか？
<table border="2" table width="1550" style="height:560px; border-collapse:collapse margin;auto: border-color: black"> >>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に >>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)
cms上で
< table border="border: 1px solid #000!important" width="1550" style="height: 560px;">
(更新すると微妙に簡略化されます...)
の様に入れて見ましたが、薄い罫線のままでした。
border-color:black!important
も同様です。
何故だ... tableではなくthやtdにborderを設定しなさい デベロッパーツールで実際にあたってるスタイルは？
目に見えてる薄い線とやらが実はborderですらないかもしれん ただtableに外枠つけるなら<table width="1550" style="border:1px solid; height:560px;">でいいだろうけど
thtdがどうなってるかどうしたいのかがわからんと何も答えられん >>360
ありがとうございます！
tdの方に設定したら無事反映されました！ 質問です。
stylebotでどのようにcssを書けばバナーとオンライブを非表示にできますか？
Chrome（64 ビット）Stylebot(拡張機能)
campaign.showroom-live.com/akb48_sr/#/
バナー（SHOWROOMバレンタイン2024キャンペーン for AKB48）
www.showroom-live.com/r/akb48_official
オンライブ それってバナーのリンク先URLを貼ってんの？
その書き方じゃどのページでどこを非表示にしたいのか分からんのだが、勝手にエスパーした上で質問するけど
それって、SHOWROOMのトップページの最上部にある各専用ページへのバナーのスライダー全体と
同じくトップページちょい下にある「#オンライブ」全体を非表示にしたいって話？
それともAKBに限定してバナー等を非表示にしたいって話？
それとも全く別の話？ >>365
showroom live 全部です。一応自己解決しました。
/* オンライブ アクティブ */
section.is-show.st-onlivelist.active {
display: none !important;
}
/* イベントバナー */
div a img {
display: none !important;
}
/* イベントバナー 閉ボタン */
button.room-campaign-close {
display: none !important;
}
showroom live (all)で音量を指定する場合はどのようにcssを書けば良いでしょうか。
（ページを再読込するとミュートから始まったりので） 漏れはShowroom を、
Ruby で、selenium-webdriver を使って、ブラウザを操作して、
画面上のアバターやパネルなどを削除して見ている
Chrome の拡張機能にも、Showroom を改造するものがあるのでは？
# 各要素の削除
jsCode = <<'EOT'
var elements = document.getElementsByClassName( 'footer-menu' ) ;
elements[0].parentNode.removeChild(elements[0]) ;
var elem = document.getElementById('js-avatar');
elem.parentNode.removeChild(elem);
elem = document.getElementById('gift-log');
elem.parentNode.removeChild(elem);
elem = document.getElementById('gift-area');
elem.parentNode.removeChild(elem);
elem = document.getElementById('js-room-comment-wrapper');
elem.parentNode.removeChild(elem);
elem = document.getElementById('comment-log');
elem.parentNode.removeChild(elem);
EOT
# JavaScript を実行
driver.execute_script jsCode ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな 画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき？ ユーザー自身が拡縮する分は
こちらの想定外でいいと思う 人のSassのソースを見る機会があったんですが
以下のA・B、どっちが主流ですか？
Bで書くことが多いのでAのメリットはなんでしょう？
Aの書き方
.hoge {
width: 100px;
@media (min-width: 1080px) {
width: 200px;
}
…
}
Bの書き方
.hoge {
width: 100px;
}
@media (min-width: 1080px) {
.hoge {
width: 200px;
}
} Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
みたいにセットでコピペするようにすればいい
エディタのスニペットや独自emmetルールでショートカットで出力できるようにしておくとなおよし なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ >>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる >>380
なるほど変更修正も考えて分かりやすくって事ですね div.hogeに以下のようなcssを効かせました
hoge{
position:relative;
}
hoge::after{
position: absolute;
bottom: -20px;
right: -20px;
display: block;
width: 100%;
height: 100%;
background: red
z-index: -1;
}
hoge要素に赤いベタの影つけることができました
ところが、after要素にfilter:drop-shadow()を使うと
after要素の上、hoge要素の下に表示されてしまいます
after要素に影をつけ用とした場合、before要素でafter要素と重ねる方法以外ありますか？ >>382
hogeの中にインナーを作る
z-indexが インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。 疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない 背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します ありがとうございます お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが 3DCGのweb表示をしたいと考えています。
最初はThree.jsでやってたのですがGPU使用率が多く、試行錯誤して
今はmodel-viewerで試行錯誤しています。
model-viewerはモデルが動いてないとGPU使用率も0になるのでいいかとおもったのですが、
表示して暫く触らないと勝手にポインタが出てきてモデルを左右に振ってみせて、
動かせることを主張してきます。これのせいでGPU使用率が上がってしまいます。
この、勝手にポインタが出てくる仕様をOFFにできないでしょうか。
https://008.server-test.space/ >>389
ありがとうございます。お手数をお掛け頂いて感謝であります。
>>390
ワオ！すごい！まさに！そのブログもいくつか目を通したのですがそこは読み飛ばしてました。
感激であります！！！！１ <table class="test">
<tr>
<td>aaa1</td><td>bbb2</td><td>ccc1</td>
</tr>
<tr>
<td>aaa2</td><td>bbb2</td><td>ccc2</td>
</tr>
</table>
一番左の列のみbackgroundで色をつけるにはどのようなセレクタにしてやればいいんですか？ >>392
.test tr > :first-child tr th:first-child,
tr tf:first-child{
} .test tr > *:first-child { }
外野だけど今までこうしてた
*省略していいんだ>>393さんくす プロゲートというものをやってる初心者ですが
cssのactiveというコマンドで
position relative
top 7px
boxshadow none
と指定するものがあるんですが
これだと上に動くのか下に動くのかわかりにくくて
それならbottom7pxと何が違うのかと考えたりしてるんですが、どう考えたらいいですか？
質問わかりずらかったらすみません
お願いします ×コマンド→○疑似クラス
position: relative; ボックスの元の位置を基準に
top: 7px; 「上から」7pxにボックスを配置
bottom: 7px; 「下から」7pxにボックスを配置 >>397
ありがとうごさいます
擬似クラスですね間違えました
topは上から下に
bottomは下から上に動くんでしょうか？ 動きじゃなくて距離
上辺を基準に7px離すならtop とりま、これでも読んだ方が早い
position - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/position
top - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/top
bottom - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/bottom
基本的にtop, right, bottom, leftはそれぞれボックスの内側方向が正の向きって憶えとけば
方向は間違わないかと >>399
わかりました
ありがとうございます
>>400
理解しました
読んで勉強します
ありがとうございました プロゲートの教材で画像のようにtop wrapperを作り背景を指定して、その中にcontainerをいれて中に
h要素、p要素をいれていくものがあるんですが
top wrapperの中にh要素やp要素を直接いれてはいけないんでしょうか？
containerという箱を間に挟む意味を教えて欲しいです
よろしくお願いいたします wrapperがページの外枠そのものでcontainerがいわゆるコンテンツ幅ってやつや
wrapperとcontainerにそれぞれ別にpaddingなどが指定できるし
containerの幅を制限して中央寄せなどよくある
gridレイアウトなど使えばコンテナなしでもできたりするが難易度高いから今は言われた通り覚えたまえ すみません、質問させてください！
分かりにくかったら申し訳ございませんが、例えば
<h1>hoge1</h1>
<p>hogehoge</p>
<h1>hoge2</h1>
<ol>
<li>hoge01</li>
<li>hoge02</li>
</ol>
みたいな形式の文章があったとして、<p>内の文章の全行のインデントを<li>と同じ位置にしたいのですが、
<p>を<ul>に変えてlist-style: noneにしたとしても、消えた黒丸の分スペースが残っていて
<ol>の<li>よりも下がってしまうし、本来は段落なのに<ul>を使うのも良くないし、困っています
<p>にtext-indent：◯em等を適用しても、最初の行の一文字目しか下がってくれず、
自動改行の2行目以降はインデントされないので目的が達成されません
どういった方法が良いか、アイデア教えていただけないでしょうか？ >>405
ありがとうございます
わかりました
今回貼った画像のようにwrapper部分に背景がなかったとしても、wrapperの中にcontainerをいれたほうがいいですか？ >>407
考え方が逆
「wrapperの中にcontainerは必要か」
ではなく
「今はcontainerのスタイルの設定しているのにwrapperは必要か」
を疑問視するべき
いるいらないはそのうち勝手に判断できるようになる >>408
言い方を間違えました
言いたいことはそれでした
wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど
とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました >>406
何も指定しなければブラウザが持っているデフォルトのスタイルで、コンテンツが装飾される訳だけど
デフォルトのliの左余白は、olやulのpadding-leftで決まり（chromeやfirefoxではデフォルトで40px）
更に番号や中黒は、list-style-positionがoutsideになっているため、liの外側（olやulのpadding領域内）に表示される
なので、list-style-positionをinsideにしてもいいんだが、liのテキスト量が多い場合に改行位置がズレるので
デフォのoutsideのままでulやolのpadding-leftを、例えばcalc(40px + ○em)とかで指定すると改行されてもズレない
（使用するフォントに合わせて○は1.2とか1.3ぐらい？で番号や中黒の分を位置調整）
以上まとめるとpをliの位置に合わせるなら、pにはpadding-left:40px;、olにはpadding-left:calc(40px + 1.3em);を指定
というのが簡単でオススメ
具体的にはこんな感じ
https://jsfiddle.net/zjt3vxf1/
というわけで上記を応用すれば、お好みの位置で色々と調整できるはず >>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます 画像のようにh2の下に50px距離をあけたい場合
h2のpadding-bottomなのか
h2のmargin-bottomなのか
iconのpadding-topなのか
iconのmargin-bottomなのか
どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます
よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg >>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく
iconのmargin-topなのか、です 内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう 質問お願いします
この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした
ただ写真を見ると高さの合計が200でした
なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした
よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg heightを200にして
paddingを40にすると
footerの高さが高くなってしまいます >>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます >>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる 質問させてください
下記URL先の画像のように作りたいです
画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…
どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m
https://imepic.jp/20240418/637200 display:flexを使えばいいよ
とりあえずググってみよう >>422
flex使えばいけるね
そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？ レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でしたm(_ _)m
<div class="outline">
<div class="box1"></div>
<div class="greenbox"></div>
<div class="box2"></div>
</div>
.outline {
width: 100%;
height: auto;
display:flex;
}
.box1 {
width: 50px;
height: 50px;
float: left;
background: #da5f2b;
}
.box2 {
width: 50px;
height: 50px;
float: right;
background: #da5f2b;
}
.greenbox {
width: 100%;
height: 50px;
float: left;
background: #76c03d;
} >>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？
ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない 以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。
┌┬┐ ここで、左側の行にカーソルをのせた時に
│├┤ ハイライトするようにしたいです。
│├┤ この時、カーソルを載せている右列だけでなく
└┴┘ 左の列もハイライトするようにするには
どうすればよいですか？
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。 jqueryのほうが早いな
cssでやるのはちとつらいのでは？ その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう 質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでｓｓｌ対応です
ただurlが業者の名前＆ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます
http → https のフレーム転送でssl対応にする方法は有りますか？ 過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね 質問です
親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか？ <div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>
.parent{
display:flex;
justify-content:space-between;
} >>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと？で子要素2の配置が真ん中やや右に表示されてしまいました 他のcssなければ子要素は同じサイズのはず
（子要素内の文字数一緒なので）
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず ある WEB サイトに入力する場所が２つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか？
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。 >>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで >>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…？ 自分でURLから何か受け取れるように実装したもの以外は基本的にありません >>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか？
それは欲しい… フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？ >>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが… それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443
そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ 『html input 初期値』でぐぐって出てくる話じゃダメなん？
textだったらvalueに書いとく、てやつ 対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね 掲示板に同じ書き込みしまくって荒らすんじゃないか？ <div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか？
背景色だけperlやphpなどで入力された値にしたいので >>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う <div class="test magenta">てすと</div> 
