23/08/23 21:00:21.97 .net
>>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです
3:Name_Not_Found
23/08/24 09:43:59.41 .net
質問失礼します。
レスポンシブデザインでサイトを作成しており、PCから見た時に①の画像のようになるようにCSSを書きました。
これがスマホから見ると②の画像のようになってしまいます。
PC表示部分のCSSは③の画像、スマホ表示部分のCSSは④のような状態なのですが、どこを改善すればよいでしょうか。
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(i.imgur.com)
4:Name_Not_Found
23/08/24 09:50:05.24 .net
>>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう
5:Name_Not_Found
23/08/24 11:06:37.25 .net
>>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ
6:Name_Not_Found
23/08/24 11:07:39.32 .net
>>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で
7:Name_Not_Found
23/08/24 11:08:50.05 .net
>>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです
8:Name_Not_Found
23/08/24 11:09:17.77 .net
>>3
#mainあたりにmax-width入れてみては？
9:Name_Not_Found
23/08/24 11:09:20.06 .net
>>5
レスありがとうございます
flex調べてみます
10:Name_Not_Found
23/08/24 11:10:32.44 .net
>>8
③のCSSの#main内でよろしいですかね
やってみます
11:Name_Not_Found
23/08/24 11:33:56.55 .net
>>8さんのやり方でできました！
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました
12:Name_Not_Found
23/08/24 17:47:45.35 .net
疑似要素を4つ使いたい場合、タグを増やすしかない？
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね
13:Name_Not_Found
23/08/24 19:11:34.49 .net
それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです
14:Name_Not_Found
23/08/24 20:20:35.98 .net
正論ですな
15:Name_Not_Found
23/08/24 22:20:40.10 .net
>>13 例えば
見出しタイプ1
====================================
↑これが通常の見出しで一箇所だけ↓こうなる場合
☆ ★ ※星部分が回転
見出しタイプ2
★ ☆
divで親タグを増やしていくって方法以外無いでしょう？
デザインの為だけに無駄なＨＴＭＬが増えるんでしょ？
<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>
これのどこがマークアップがおかしいの？
16:Name_Not_Found
23/08/24 22:21:53.66 .net
↑閉じタグ抜けてるがきにせんといて
17:Name_Not_Found
23/08/24 22:35:11.89 .net
h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる
18:Name_Not_Found
23/08/25 00:24:37.98 .net
親にdiv追加じゃなくh2にborder-imageとか
19:Name_Not_Found
23/08/25 00:48:03.16 .net
>>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり
20:Name_Not_Found
23/08/25 01:02:29.10 .net
あと見出しタイプ2という呼称からの推察になるが
h2のバージョン違いなら
>>17の言うようにh2の中身を変えるかな
通常
<h2 class="head2">
<span class="head2__label">見出し</span>
</h2>
星付き
<h2 class="head2--star">
<span class="head2__label">見出し</span>
</h2>
こんなん
21:Name_Not_Found
23/08/25 07:56:42.91 .net
みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの？
22:Name_Not_Found
23/08/25 11:00:02.85 .net
どこに困るのかが分からん…
23:Name_Not_Found
23/08/25 12:20:49.64 .net
background-sizeでcoverとかcontainとか色々あるだろ
24:Name_Not_Found
23/08/25 17:48:20.87 .net
chromeの検証ツールで↓のページを見た時、表示端末にスマホを指定するとスワイプ操作で横スクロールできるけど、iPad系を指定するとスワイプできないできないんですがおま環ですか？
URLﾘﾝｸ(jsfiddle.net)
実機で見た時にはスマホと同じようにスワイプで横スクロールできるはずですよね？
タブレット持ってないので試せず。。
25:Name_Not_Found
23/08/25 18:14:39.31 .net
>>22-23
じゃあ見出しの文頭に画像を表示するにはどうしたらいい？
Bootstrap5使ってる静的HTMLサイト
26:Name_Not_Found
23/08/25 19:01:42.19 .net
>>24
スワイプでスクロールできたよ
iPadは実機でないと動作わからないことも多いので、検証用に一枚導入してもらうのが確実ね
制作環境がMacならXcodeのSimulatorが使えるんだけど、Windowsだよね？
27:Name_Not_Found
23/08/25 19:05:41.68 .net
>>26
じゃあおま環ですね。。
多分表示サイズを75%に落としてるのが原因のようです。
28:Name_Not_Found
23/08/25 23:29:22.81 .net
>>25
URLﾘﾝｸ(jsfiddle.net)
29:Name_Not_Found
23/08/25 23:56:16.43 HwTbDN0+.net
集団摘発案件、逮捕案件
表向きはIT企業だが本職は特殊詐欺グループ
SALES GO株式会社（セールスゴー）
セールスゴーは特殊詐欺グループです！！
元鹿島サポーターの押川定和も詐欺グループの一員です。
表向きのセールスゴー
↓↓↓↓↓↓
URLﾘﾝｸ(salesgo.co.jp)
〒140-0002
東京都品川区東品川四丁目13-14
グラスキューブ品川
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
URLﾘﾝｸ(www.jpdo.com)
30:Name_Not_Found
23/08/26 09:38:21.51 .net
>>28
ありがとう、ビューポートを使えば実装できるんだね
31:Name_Not_Found
23/08/26 21:56:22.48 22hMSXVv.net
=T=i=k=T=o=k（←迷惑でしたらこちらをNGしてください。）
友人にも紹介して、追加で￥3500をGETできる。
URLﾘﾝｸ(i.imgur.com)
32:Name_Not_Found
23/08/26 23:38:42.95 .net
>>31
ありがとう、実際にやってみるよ
33:Name_Not_Found
23/08/27 01:28:51.90 .net
>>31
迷惑って自覚があるならNG避けようとすんなゴミカス
34:Name_Not_Found
23/08/27 03:53:52.61 .net
HTMLかどうか分からないんですが、PC版Chromeでホームページを見ると「アプリをインストールしますか？」という謎の通知が出てきます。
出ないようにしたいのですがどうしたらいいでしょうか。
35:Name_Not_Found
23/08/27 11:20:46.15 .net
>>19
borderや背景でそれぞれの星を回転ってできるの？
試しにborderで書いたやつを見せてくれんかの？
36:Name_Not_Found
23/08/27 11:29:25.16 .net
>>19
セマンテックな観点からデザインに関する部分はCSSのみでやるべきだって昔誰かが言ってた気がしたんだよｗ
実際、疑似用を多数使いたいって要望は多いと思ったんだがねえ
>>20
せやね
37:Name_Not_Found
23/08/27 12:21:28.55 .net
>>34
そのホームページとやらの素性が分からないので、その情報だけじゃ何も分からない
38:Name_Not_Found
23/08/27 13:07:05.37 .net
>>35
背景もBorderも回転GIFをはりつければいいんじゃね？
後出し仕様があるなら知らんけど
39:Name_Not_Found
23/08/27 13:21:01.44 .net
cssだけで回転させたいとか言い出しそうだけど
svgでやればイケる？
40:Name_Not_Found
23/08/27 13:28:15.09 .net
>>38 >>39
最初の質問時に
>>12 疑似要素を4つ使いたい場合
>>15 ※星部分が回転
て書いた通り、疑似要素でcssだけで回転させるイメージなんだがやはりborderや背景では無理って事？
gifアニやsvg使うってのはなんか余計に面倒にならない？
41:Name_Not_Found
23/08/27 13:29:29.82 .net
gifアニやsvg使うくらいならjsでやるわ
42:Name_Not_Found
23/08/27 13:40:05.87 .net
そもそもお題の様なデザインはダサいから採用しないってのはあるが
43:Name_Not_Found
23/08/27 14:30:59.88 .net
>>36
要望は多い！使えるなら5個でも6個でも使えたらsection一個で再現できるのになってデザインはもちろんあるぜ！
「デザイナーがコーディングできて、かつすべての要素を疑似要素2つまでで完結できるようデザインする」とかじゃない限りどう足掻いてもdivやspanは必要になるね
というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
44:Name_Not_Found
23/08/27 14:35:34.56 .net
>>42
これは構造を見てわかるようにした例えだよ
つか既存のwebやcssの見出しデザインてもう出尽くし感と既視感しかないと思うんだが。
むしろそこに疑問を感じているのだ
45:Name_Not_Found
23/08/27 14:35:55.82 .net
>>40
borderや背景それ自体は動かないからgifとか使うしかないよ
最小のタグでやりたいというお題に答えるならそうなるというだけ
普通は>>20みたいにするから親と子で疑似要素が4つ存在できる
さらに疑似要素が必要になる場合包括するタグを増やせばいい
入れ子と違って空要素は非推奨だが、実際の現場では背景画像が入れてあるだけの空divなんてざらにある
なんならalt空のimg放り込むなんてことも余裕である
46:Name_Not_Found
23/08/27 14:36:43.81 .net
>>43
うん
47:Name_Not_Found
23/08/27 14:41:15.43 .net
>>45
うん。なんか背景にはtransform使えるようだから、
背景は複数指定できるように昨今、なんかできそうな気もするんよな
既にやってる人いるならそれ貰ったほうがいいなって思い、、
borderでは回転制御の方法は思いつかないから出来るなら見てみたいって思った感じ
48:47
23/08/27 14:43:52.38 .net
すまん、背景にtransformは勘違いかもしれん
49:Name_Not_Found
23/08/27 16:02:08.77 .net
つか、お前らがセマンティクス教徒になってる理由は何なん？
手書き履歴書以上に意味がないと思うが
(手書き履歴書は「意味のない慣習にも30分ほどはつき合う気はある」という踏み絵にはなるが、
論理マークアップ/セマンティクスには本当に何の実質的意味も価値もない)
>>43
> というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
現在は逆で、divだけでどんなデザインも再現出来てしまうのでセマンティクスの存在意義がない(そしてこれは極論ではなく単なる事実)
だからみんなおつきあい程度に守ってるだけで、divが必要なら躊躇無くdiv使う(デザインをセマンティクスより優先させる)
50:Name_Not_Found
23/08/27 19:40:10.34 .net
論理マークアップ不要なら
どんなデザインもdivだけで再現出来てしまうのは昔からやろ
51:Name_Not_Found
23/08/27 19:46:36.84 .net
一昔前はSEOの為のタグ構造（例えばHタグの出現順番など）と
anotherLINTだかW3Cだかの厳格型のHTMLチェッカーで100点目指さないといけないみたいな風潮があったからな
anotherLINTだかがめちゃめちゃ厳しくて、100点取る為には一切無駄な記述をしてはならないって洗脳されてしまったんよ
52:Name_Not_Found
23/08/27 21:44:32.36 .net
>>50
歴史は詳しくないがHTML5からじゃね？
HTML4だと各タグに汎用性/一般性が無かった気が
>>51
> anotherLINT (1997)
つまり26年前のゴミに未だに振り回されてると？
基本、最新版以外はゴミなWeb界で、無駄に伝統を重んじる連中がいたことにびっくりだわ
にしても今更要らんし、何らかの理由で枠が必要なら一番手っ取り早いのはdivだし、
装飾の為だけにHTML構造を変えるのが嫌なら全部div付けて使わずに誤魔化すのが一般的なわけで、
そうすればいいし、また、そうするしかないとも思うが
(現在のCSSには枠を付加する機能がないから、
あらゆるデザインをCSSの差し替えだけで対応出来るようにするには、
あらゆる場所にdivを配置し必要な場合には枠として機能するように仕込んでおく必要があって、
これがプログラムでHTML生成された場合にdivが無駄に入れ子になる原因だが、
15もこれってだけの話)
53:Name_Not_Found
23/08/27 22:05:48.39 .net
anotherLintって聞いて26年前とか言い出す謎リテラシーの時点で読む価値無いのはわかった
その理屈だとhtmlも30年前の言語になるだろ
54:Name_Not_Found
23/08/28 01:21:28.18 .net
>>53
ね。俺も最初のそれで、はァ？？
ああ、後発が自分の立ち位置を正当化したいのねって思った
55:Name_Not_Found
23/08/28 01:23:06.57 .net
ちな一応教えてお手上げるとanotherLINTが機能しなくなって廃れたのはHTML5草案あたりだから2012年ころかな。
56:Name_Not_Found
23/08/28 01:31:38.13 .net
モールのASPやメルマガなんかだとソースの文字数制限なんかも厳しくて、
余計なソース、将来使うかもしれないから予め書いておくなんて考えが一切許されん環境もあったな。
まあ今は自由な環境の方が多いから、予測できる範囲で入れ子はしておくし、使ってない汎用関数も書きっぱなしだわ
57:Name_Not_Found
23/08/28 06:32:47.09 .net
>>53-54
なるほど先発が自分の立ち位置を正当化する為に26年前の開発手法を今でも踏襲しているのか
定義通りの老害だな
>>55
逆に考えてみろ
必要ないから廃れた、HTML5に対応する価値がなかったからやらなかった
(まあ継承してHTML5に対応してるサイトも提供されてるが)
>>56
> 使ってない汎用関数も書きっぱなし
いや使ってないと分かってるのなら落とせよ
多分ビルド時に自動で落とせるし、それ以前にIDEが文句言うと思うが
> 予測できる範囲で入れ子はしておくし
これが比較的許されるのは、ユーザーがCSS当てたときに枠がないと詰むからだよ
お前が今使ってなくても、ユーザーが使う可能性もあるという事
58:Name_Not_Found
23/08/28 06:40:14.68 .net
タグに意味をもたせたいから使う
出会ったこともないけどもし全部がdivのコードみたら乾いた笑いが出るな
お前それ管理どうすんの？って
そしてそのままリファクタissue化される
59:Name_Not_Found
23/08/28 07:19:30.09 .net
>>58
抽象思考出来無い馬鹿乙
全部がdivなら、ほぼ全部にクラスが付いてるはず
実際自動生成されたHTMLはほぼこの形態だろ
タグ名とクラスは役割が被ってて、クラスの方が一般的に使えるんだよ
だから(div+クラス)の形態で生成される
ただ全部がdivなら、省略して(タグ名は省略+クラス)でも同じで、
ならクラスの部分をタグ名にして(タグ名部分にクラス+クラス無し)となってるのが、
お前らが拘ってる論理マークアップ()、セマンティクス()なんだよ
意味的には同じで、書式が違うだけ
60:Name_Not_Found
23/08/28 07:23:28.87 .net
>>59
HTML Living Standard
URLﾘﾝｸ(html.spec.whatwg.org)
Sass Document
URLﾘﾝｸ(sass-lang.com)
Sass Guideline
URLﾘﾝｸ(sass-guidelin.es)
Javascript Reference
URLﾘﾝｸ(developer.mozilla.org)
言ってること小3で草
わざわざ公式が用意してくれてんのに老害がー！ってワールドスタンダード全無視じゃん
何か語る前に何のためにドキュメントが存在してるか、まず初歩の初歩から見直したほうがいいわ
嫌ならお前がルール決める側にまで上がってお前が定義変えろ
それが無理なら公開オナニーやめるかブランチ切ってオナっとけ
61:Name_Not_Found
23/08/28 08:04:00.45 jDjXZqSY.net
>>60
そのドキュメント類のどこに「論理マークアップしろ」と書いてあるんだ？
(せめてW3C謹製のドキュメントを持ってくるべき)
現在の状況において合理的価値が無い事に拘り続けてるから「定義通りの老害」だと言ってる
62:Name_Not_Found
23/08/28 08:10:42.44 .net
>>61
苦しそうで草
63:Name_Not_Found
23/08/28 08:20:14.54 .net
>>61
横からで悪いけど、今はWHATWGに移管されてるよ
よく調べた？
64:Name_Not_Found
23/08/28 08:28:25.99 .net
>>63
知ってるよ
完敗したW3CはWHATWG(ブラウザ勢)の規格を追認するだけの機関に成り下がった
だからその中には「論理マークアップしろ」なんて一言も書いてないはず
だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
「昔からそうだから」なら、現状認識を改めることのない「定義通りの老害」だろ
65:Name_Not_Found
23/08/28 08:32:44.81 .net
>>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して
一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね
66:Name_Not_Found
23/08/28 09:25:21.32 .net
>>65
コミュ障か？
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、
現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ
67:Name_Not_Found
23/08/28 09:33:46.70 .net
>>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから
けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね
68:Name_Not_Found
23/08/28 09:48:48.84 .net
>>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない！！！」だろ
完全に論理マークアップオナニー屋じゃん
まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく
69:Name_Not_Found
23/08/28 09:54:28.24 .net
>>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね
70:Name_Not_Found
23/08/28 11:59:45.34 .net
>>64
横からすまんが君はSEO対策してないの？？
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ？
71:Name_Not_Found
23/08/28 12:02:54.80 .net
>>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。
ユーザーCSSの為にHTML配慮なんてしてるｻｲﾄなんてねーよｗ
そもそも構造決まってんならXpathで特定できるし。
72:Name_Not_Found
23/08/28 12:03:48.11 .net
老害老害いうけどあなた何歳なの？
73:Name_Not_Found
23/08/28 12:11:22.13 .net
このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・
それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね？
74:Name_Not_Found
23/08/28 14:09:13.04 .net
divdiverはコテつけてくれ
75:Name_Not_Found
23/08/28 14:41:32.40 .net
>>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
URLﾘﾝｸ(developers.google.com)
というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない
76:Name_Not_Found
23/08/28 14:44:45.28 .net
「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望！div spanは使うななんて書いてない！」
これもう障害だろ
77:Name_Not_Found
23/08/28 15:01:10.42 .net
>>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ？
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる)
78:Name_Not_Found
23/08/28 15:19:38.33 .net
>>75
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
論理マークップが何故必要かについて SEOの為だと言っているんだけど。
あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ？
79:Name_Not_Found
23/08/28 15:20:07.14 .net
>>77
俺はそんな主張してないから知らんがな
80:Name_Not_Found
23/08/28 15:20:50.62 .net
>>77
何もわかってない。
>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ？しらんな。具体的にソース出して。
81:Name_Not_Found
23/08/28 15:27:46.67 .net
>>78
> 論理マークップが何故必要かについて SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ？
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ)
82:Name_Not_Found
23/08/28 15:43:03.19 .net
>>81
有利ではなくやらないと不利になるんだよ。 アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
てかあんた、そんな事きいてくる時点でお察しだぞ
83:Name_Not_Found
23/08/28 15:50:41.12 .net
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて
84:Name_Not_Found
23/08/28 15:52:19.50 .net
↑検索エンジンのページ以外でな
85:Name_Not_Found
23/08/28 15:57:53.01 .net
何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい
86:Name_Not_Found
23/08/28 15:57:59.87 .net
>>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある
> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)
87:Name_Not_Found
23/08/28 15:58:35.36 .net
>>86
コテつけろ
88:Name_Not_Found
23/08/28 16:02:30.63 .net
>>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて
89:Name_Not_Found
23/08/28 16:36:17.04 .net
SOHOやフリーで本当に細々と食ってる奴の134人目
ｽﾚﾘﾝｸ(hp板)
90:Name_Not_Found
23/08/28 20:19:33.70 .net
質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ
91:Name_Not_Found
23/08/31 19:38:35.37 .net
divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん
92:Name_Not_Found
23/08/31 20:21:01.23 .net
召喚すな
93:Name_Not_Found
23/09/01 07:38:32.84 .net
なにそのdivdiv君って何？
xhtml星から生まれたの？
94:Name_Not_Found
23/09/02 00:22:15.14 .net
ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし
95:Name_Not_Found
23/09/02 01:21:26.04 .net
質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる
96:Name_Not_Found
23/09/03 16:28:20.78 Udh4NPPz.net
質問です
div "display: flex" の中のアイテム(div)の高さを親の div 内に収めたいです。
親 div の中に 子 div だけ置くとできるのですが、
子 div の中に h2 と div を置くと、h2 の高さのぶんだけ親 div からはみ出してしまいます。
display: flex で、子 div の中に見出しと overflow-y: scroll な div を置きたいとき、
どうすればはみ出さなくなるでしょうか？
見出しと、スクロールバー有りのコンテンツを置いて flex で並べたいです。
URLﾘﾝｸ(i.imgur.com)
URLﾘﾝｸ(jsfiddle.net)
97:Name_Not_Found
23/09/03 16:39:34.32 .net
>>96
子もflexにすると親の高さを継承する
98:Name_Not_Found
23/09/03 16:42:57.69 Udh4NPPz.net
>>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。
URLﾘﾝｸ(jsfiddle.net)
99:Name_Not_Found
23/09/03 16:45:27.91 Udh4NPPz.net
>>97
ありがとうございます
できました
URLﾘﾝｸ(jsfiddle.net)
100:Name_Not_Found
23/09/05 18:05:42.35 .net
比較的最近リリースされたCSSで使えるのってなんかある？
Scroll-driven Animations
@scope
この辺も便利なんだろうけどペースが早いわ
101:Name_Not_Found
23/09/06 10:07:05.38 .net
最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい
102:Name_Not_Found
23/09/06 11:11:36.87 .net
リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな
103:Name_Not_Found
23/09/06 11:41:43.45 .net
>>102
さんくす！
scroll-gap
→ググってもでてこんな
代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな
overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス
104:Name_Not_Found
23/09/06 12:00:44.35 .net
scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう
105:Name_Not_Found
23/09/06 12:31:57.86 .net
>>103
すまんscroll-paddingだったわｗ
overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ
106:Name_Not_Found
23/09/06 12:53:16.71 .net
CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる
107:Name_Not_Found
23/09/06 13:33:15.44 .net
cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い
108:Name_Not_Found
23/09/06 13:35:09.53 .net
なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか
109:Name_Not_Found
23/09/06 13:35:38.72 .net
ああ、たしかにイージングは欲しいね
110:Name_Not_Found
23/09/07 01:49:29.45 .net
>>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった
111:Name_Not_Found
23/09/07 10:48:14.19 UAGv2jDr.net
CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする
112:Name_Not_Found
23/09/07 11:32:09.08 .net
>>111
speedが遅い😭
113:Name_Not_Found
23/09/07 12:41:04.67 .net
>>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな
114:Name_Not_Found
23/09/07 13:32:24.71 .net
>>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる
115:Name_Not_Found
23/09/09 14:57:01.91 .net
flexでもgridでもgapが使えるの最高すぎる
116:Name_Not_Found
23/09/09 16:31:00.55 .net
gap最高だよね！超便利 なぜなかったか不思議なくらい
117:Name_Not_Found
23/09/09 18:45:24.00 .net
なにこの良スレ
118:Name_Not_Found
23/09/09 19:11:42.35 .net
<ul>
<li>◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎◎</li>
<li>◎◎</li>
<li>◎◎◎◎</li>
<li>◎◎◎◎</li>
<ul>
こんなHTMLで下記のように最大の文字数(この場合は全角５文字)を基準として各子要素を同じ幅で割り振りたいのですがどうすればいいですかね
flexでもgridでもかまわないのですが
<li> にwidthをあてて別に差し支えはないのですが、同様な記述が10数カ所あるもんでもう少しスッキリできないかと…
・◎◎◎ ・◎◎ ・◎◎◎◎◎
・◎◎ ・◎◎◎◎ ・◎◎◎◎
119:Name_Not_Found
23/09/09 19:35:25.38 .net
grid-template-column: repeat(3, 1fr);
120:Name_Not_Found
23/09/09 20:20:45.75 .net
>>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ
121:Name_Not_Found
23/09/09 20:24:25.64 .net
auto-fillかauto-fit好きな方
122:Name_Not_Found
23/09/09 20:31:29.72 .net
grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは
123:Name_Not_Found
23/09/09 21:50:56.10 .net
auto-fit大好き
124:Name_Not_Found
23/09/10 00:28:44.28 .net
flexboxしか使わんけどgrid必要な場面がまったくない
125:Name_Not_Found
23/09/10 03:20:37.16 .net
auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる
126:Name_Not_Found
23/09/10 05:50:08.75 .net
>>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる