HTML/CSS のどんな質問にも優しく答えるｽﾚ 52
- 1 ：Name_Not_Found：2023/08/23(水) 18:52:13.52 ID:???.net
- ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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/
- 2 ：Name_Not_Found：2023/08/23(水) 21:00:21.97 ID:???.net
- >>前998
新スレ立てた瞬間に知り合いが遊びに来てレスするの忘れてスレ埋まってしまいました。
また相談に乗ってもらったらありがたいです
- 3 ：Name_Not_Found：2023/08/24(木) 09:43:59.41 ID:???.net
- 質問失礼します。
レスポンシブデザインでサイトを作成しており、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
- 4 ：Name_Not_Found：2023/08/24(木) 09:50:05.24 ID:???.net
- >>3
②が正しくないのでしたら、まずどうなるのが正しいのかを書きましょう
- 5 ：Name_Not_Found：2023/08/24(木) 11:06:37.25 ID:???.net
- >>3
画像のinline-block上の階層でflex使いなよ
横に並べるにしても縦に並べるにしても制御が楽になるよ
- 6 ：Name_Not_Found：2023/08/24(木) 11:07:39.32 ID:???.net
- >>5
あ、編集したら抜けた
画像のinline-block「やめて」上の階層で
- 7 ：Name_Not_Found：2023/08/24(木) 11:08:50.05 ID:???.net
- >>4
失礼しました
テキストがスマホの端で折り返し、ピンクの点線枠内に収まるようにしたいです
- 8 ：Name_Not_Found：2023/08/24(木) 11:09:17.77 ID:???.net
- >>3
#mainあたりにmax-width入れてみては？
- 9 ：Name_Not_Found：2023/08/24(木) 11:09:20.06 ID:???.net
- >>5
レスありがとうございます
flex調べてみます
- 10 ：Name_Not_Found：2023/08/24(木) 11:10:32.44 ID:???.net
- >>8
③のCSSの#main内でよろしいですかね
やってみます
- 11 ：Name_Not_Found：2023/08/24(木) 11:33:56.55 ID:???.net
- >>8さんのやり方でできました！
しかし制御が楽になるとのことなので、この機会にflexのことも勉強しようと思います
また何かありましたらこのスレで質問させてください
アドバイスありがとうございました
- 12 ：Name_Not_Found：2023/08/24(木) 17:47:45.35 ID:???.net
- 疑似要素を4つ使いたい場合、タグを増やすしかない？
でもそれって明らかに論理マークアップ上で無駄なHTMLだよね
- 13 ：Name_Not_Found：2023/08/24(木) 19:11:34.49 ID:???.net
- それをいうなら疑似要素が4つ必要になるのはデザインに対してマークアップがおかしいです
- 14 ：Name_Not_Found：2023/08/24(木) 20:20:35.98 ID:???.net
- 正論ですな
- 15 ：Name_Not_Found：2023/08/24(木) 22:20:40.10 ID:???.net
- >>13 例えば
見出しタイプ1
====================================
↑これが通常の見出しで一箇所だけ↓こうなる場合
☆ ★ ※星部分が回転
見出しタイプ2
★ ☆
divで親タグを増やしていくって方法以外無いでしょう？
デザインの為だけに無駄なＨＴＭＬが増えるんでしょ？
<h2>見出しタイプ1<h2>
<div class="star"><h2>見出しタイプ2</div>
これのどこがマークアップがおかしいの？
- 16 ：Name_Not_Found：2023/08/24(木) 22:21:53.66 ID:???.net
- ↑閉じタグ抜けてるがきにせんといて
- 17 ：Name_Not_Found：2023/08/24(木) 22:35:11.89 ID:???.net
- h2の飾りって意味合いだと
<h2><span></span>見出し<span></span></h2>
って形にしたくなる
- 18 ：Name_Not_Found：2023/08/25(金) 00:24:37.98 ID:???.net
- 親にdiv追加じゃなくh2にborder-imageとか
- 19 ：Name_Not_Found：2023/08/25(金) 00:48:03.16 ID:???.net
- >>15
その例だとborderや背景でできるだろとしか言いようがないけど
重要なことを教えると
空divなどと違って装飾のための入れ子は構造的に何もおかしくない
>マークアップ上で無駄なHTMLだよね
に答えるなら「無駄じゃない」で終わり
- 20 ：Name_Not_Found：2023/08/25(金) 01:02:29.10 ID:???.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：2023/08/25(金) 07:56:42.91 ID:???.net
- みんなCSSで背景作ればいいんです言うけど
レスポンシブ対応はどうすればいいの？
- 22 ：Name_Not_Found：2023/08/25(金) 11:00:02.85 ID:???.net
- どこに困るのかが分からん…
- 23 ：Name_Not_Found：2023/08/25(金) 12:20:49.64 ID:???.net
- background-sizeでcoverとかcontainとか色々あるだろ
- 24 ：Name_Not_Found：2023/08/25(金) 17:48:20.87 ID:???.net
- chromeの検証ツールで↓のページを見た時、表示端末にスマホを指定するとスワイプ操作で横スクロールできるけど、iPad系を指定するとスワイプできないできないんですがおま環ですか？
https://jsfiddle.net/om7uLzwy/show
実機で見た時にはスマホと同じようにスワイプで横スクロールできるはずですよね？
タブレット持ってないので試せず。。
- 25 ：Name_Not_Found：2023/08/25(金) 18:14:39.31 ID:???.net
- >>22-23
じゃあ見出しの文頭に画像を表示するにはどうしたらいい？
Bootstrap5使ってる静的HTMLサイト
- 26 ：Name_Not_Found：2023/08/25(金) 19:01:42.19 ID:???.net
- >>24
スワイプでスクロールできたよ
iPadは実機でないと動作わからないことも多いので、検証用に一枚導入してもらうのが確実ね
制作環境がMacならXcodeのSimulatorが使えるんだけど、Windowsだよね？
- 27 ：Name_Not_Found：2023/08/25(金) 19:05:41.68 ID:???.net
- >>26
じゃあおま環ですね。。
多分表示サイズを75%に落としてるのが原因のようです。
- 28 ：Name_Not_Found：2023/08/25(金) 23:29:22.81 ID:???.net
- >>25
https://jsfiddle.net/r1wkj0e6/
- 29 ：Name_Not_Found：2023/08/25(金) 23:56:16.43 ID:HwTbDN0+.net
- 集団摘発案件、逮捕案件
表向きはIT企業だが本職は特殊詐欺グループ
SALES GO株式会社（セールスゴー）
セールスゴーは特殊詐欺グループです！！
元鹿島サポーターの押川定和も詐欺グループの一員です。
表向きのセールスゴー
↓↓↓↓↓↓
https://salesgo.co.jp/company
〒140-0002
東京都品川区東品川四丁目13-14
グラスキューブ品川
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
鹿島アントラーズ 鹿島アントラーズ
押川定和押川定和押川定和押川定和押川定和
セールスゴー セールスゴー セールスゴー
http://www.jpdo.com/cc02/18/img/34090.jpg
- 30 ：Name_Not_Found：2023/08/26(土) 09:38:21.51 ID:???.net
- >>28
ありがとう、ビューポートを使えば実装できるんだね
- 31 ：Name_Not_Found：2023/08/26(土) 21:56:22.48 ID:22hMSXVv.net
- =T=i=k=T=o=k（←迷惑でしたらこちらをNGしてください。）
友人にも紹介して、追加で￥3500をGETできる。
https://i.imgur.com/4BmBiOm.jpg
- 32 ：Name_Not_Found：2023/08/26(土) 23:38:42.95 ID:???.net
- >>31
ありがとう、実際にやってみるよ
- 33 ：Name_Not_Found：2023/08/27(日) 01:28:51.90 ID:???.net
- >>31
迷惑って自覚があるならNG避けようとすんなゴミカス
- 34 ：Name_Not_Found：2023/08/27(日) 03:53:52.61 ID:???.net
- HTMLかどうか分からないんですが、PC版Chromeでホームページを見ると「アプリをインストールしますか？」という謎の通知が出てきます。
出ないようにしたいのですがどうしたらいいでしょうか。
- 35 ：Name_Not_Found：2023/08/27(日) 11:20:46.15 ID:???.net
- >>19
borderや背景でそれぞれの星を回転ってできるの？
試しにborderで書いたやつを見せてくれんかの？
- 36 ：Name_Not_Found：2023/08/27(日) 11:29:25.16 ID:???.net
- >>19
セマンテックな観点からデザインに関する部分はCSSのみでやるべきだって昔誰かが言ってた気がしたんだよｗ
実際、疑似用を多数使いたいって要望は多いと思ったんだがねえ
>>20
せやね
- 37 ：Name_Not_Found：2023/08/27(日) 12:21:28.55 ID:???.net
- >>34
そのホームページとやらの素性が分からないので、その情報だけじゃ何も分からない
- 38 ：Name_Not_Found：2023/08/27(日) 13:07:05.37 ID:???.net
- >>35
背景もBorderも回転GIFをはりつければいいんじゃね？
後出し仕様があるなら知らんけど
- 39 ：Name_Not_Found：2023/08/27(日) 13:21:01.44 ID:???.net
- cssだけで回転させたいとか言い出しそうだけど
svgでやればイケる？
- 40 ：Name_Not_Found：2023/08/27(日) 13:28:15.09 ID:???.net
- >>38 >>39
最初の質問時に
>>12 疑似要素を4つ使いたい場合
>>15 ※星部分が回転
て書いた通り、疑似要素でcssだけで回転させるイメージなんだがやはりborderや背景では無理って事？
gifアニやsvg使うってのはなんか余計に面倒にならない？
- 41 ：Name_Not_Found：2023/08/27(日) 13:29:29.82 ID:???.net
- gifアニやsvg使うくらいならjsでやるわ
- 42 ：Name_Not_Found：2023/08/27(日) 13:40:05.87 ID:???.net
- そもそもお題の様なデザインはダサいから採用しないってのはあるが
- 43 ：Name_Not_Found：2023/08/27(日) 14:30:59.88 ID:???.net
- >>36
要望は多い！使えるなら5個でも6個でも使えたらsection一個で再現できるのになってデザインはもちろんあるぜ！
「デザイナーがコーディングできて、かつすべての要素を疑似要素2つまでで完結できるようデザインする」とかじゃない限りどう足掻いてもdivやspanは必要になるね
というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
- 44 ：Name_Not_Found：2023/08/27(日) 14:35:34.56 ID:???.net
- >>42
これは構造を見てわかるようにした例えだよ
つか既存のwebやcssの見出しデザインてもう出尽くし感と既視感しかないと思うんだが。
むしろそこに疑問を感じているのだ
- 45 ：Name_Not_Found：2023/08/27(日) 14:35:55.82 ID:???.net
- >>40
borderや背景それ自体は動かないからgifとか使うしかないよ
最小のタグでやりたいというお題に答えるならそうなるというだけ
普通は>>20みたいにするから親と子で疑似要素が4つ存在できる
さらに疑似要素が必要になる場合包括するタグを増やせばいい
入れ子と違って空要素は非推奨だが、実際の現場では背景画像が入れてあるだけの空divなんてざらにある
なんならalt空のimg放り込むなんてことも余裕である
- 46 ：Name_Not_Found：2023/08/27(日) 14:36:43.81 ID:???.net
- >>43
うん
- 47 ：Name_Not_Found：2023/08/27(日) 14:41:15.43 ID:???.net
- >>45
うん。なんか背景にはtransform使えるようだから、
背景は複数指定できるように昨今、なんかできそうな気もするんよな
既にやってる人いるならそれ貰ったほうがいいなって思い、、
borderでは回転制御の方法は思いつかないから出来るなら見てみたいって思った感じ
- 48 ：47：2023/08/27(日) 14:43:52.38 ID:???.net
- すまん、背景にtransformは勘違いかもしれん
- 49 ：Name_Not_Found：2023/08/27(日) 16:02:08.77 ID:???.net
- つか、お前らがセマンティクス教徒になってる理由は何なん？
手書き履歴書以上に意味がないと思うが
(手書き履歴書は「意味のない慣習にも30分ほどはつき合う気はある」という踏み絵にはなるが、
論理マークアップ/セマンティクスには本当に何の実質的意味も価値もない)
>>43
> というかセマンティックなタグだけでどんなデザインも再現できるなら極論divとspanというタグは存在する意味がないんよ
現在は逆で、divだけでどんなデザインも再現出来てしまうのでセマンティクスの存在意義がない(そしてこれは極論ではなく単なる事実)
だからみんなおつきあい程度に守ってるだけで、divが必要なら躊躇無くdiv使う(デザインをセマンティクスより優先させる)
- 50 ：Name_Not_Found：2023/08/27(日) 19:40:10.34 ID:???.net
- 論理マークアップ不要なら
どんなデザインもdivだけで再現出来てしまうのは昔からやろ
- 51 ：Name_Not_Found：2023/08/27(日) 19:46:36.84 ID:???.net
- 一昔前はSEOの為のタグ構造（例えばHタグの出現順番など）と
anotherLINTだかW3Cだかの厳格型のHTMLチェッカーで100点目指さないといけないみたいな風潮があったからな
anotherLINTだかがめちゃめちゃ厳しくて、100点取る為には一切無駄な記述をしてはならないって洗脳されてしまったんよ
- 52 ：Name_Not_Found：2023/08/27(日) 21:44:32.36 ID:???.net
- >>50
歴史は詳しくないがHTML5からじゃね？
HTML4だと各タグに汎用性/一般性が無かった気が
>>51
> anotherLINT (1997)
つまり26年前のゴミに未だに振り回されてると？
基本、最新版以外はゴミなWeb界で、無駄に伝統を重んじる連中がいたことにびっくりだわ
にしても今更要らんし、何らかの理由で枠が必要なら一番手っ取り早いのはdivだし、
装飾の為だけにHTML構造を変えるのが嫌なら全部div付けて使わずに誤魔化すのが一般的なわけで、
そうすればいいし、また、そうするしかないとも思うが
(現在のCSSには枠を付加する機能がないから、
あらゆるデザインをCSSの差し替えだけで対応出来るようにするには、
あらゆる場所にdivを配置し必要な場合には枠として機能するように仕込んでおく必要があって、
これがプログラムでHTML生成された場合にdivが無駄に入れ子になる原因だが、
15もこれってだけの話)
- 53 ：Name_Not_Found：2023/08/27(日) 22:05:48.39 ID:???.net
- anotherLintって聞いて26年前とか言い出す謎リテラシーの時点で読む価値無いのはわかった
その理屈だとhtmlも30年前の言語になるだろ
- 54 ：Name_Not_Found：2023/08/28(月) 01:21:28.18 ID:???.net
- >>53
ね。俺も最初のそれで、はァ？？
ああ、後発が自分の立ち位置を正当化したいのねって思った
- 55 ：Name_Not_Found：2023/08/28(月) 01:23:06.57 ID:???.net
- ちな一応教えてお手上げるとanotherLINTが機能しなくなって廃れたのはHTML5草案あたりだから2012年ころかな。
- 56 ：Name_Not_Found：2023/08/28(月) 01:31:38.13 ID:???.net
- モールのASPやメルマガなんかだとソースの文字数制限なんかも厳しくて、
余計なソース、将来使うかもしれないから予め書いておくなんて考えが一切許されん環境もあったな。
まあ今は自由な環境の方が多いから、予測できる範囲で入れ子はしておくし、使ってない汎用関数も書きっぱなしだわ
- 57 ：Name_Not_Found：2023/08/28(月) 06:32:47.09 ID:???.net
- >>53-54
なるほど先発が自分の立ち位置を正当化する為に26年前の開発手法を今でも踏襲しているのか
定義通りの老害だな
>>55
逆に考えてみろ
必要ないから廃れた、HTML5に対応する価値がなかったからやらなかった
(まあ継承してHTML5に対応してるサイトも提供されてるが)
>>56
> 使ってない汎用関数も書きっぱなし
いや使ってないと分かってるのなら落とせよ
多分ビルド時に自動で落とせるし、それ以前にIDEが文句言うと思うが
> 予測できる範囲で入れ子はしておくし
これが比較的許されるのは、ユーザーがCSS当てたときに枠がないと詰むからだよ
お前が今使ってなくても、ユーザーが使う可能性もあるという事
- 58 ：Name_Not_Found：2023/08/28(月) 06:40:14.68 ID:???.net
- タグに意味をもたせたいから使う
出会ったこともないけどもし全部がdivのコードみたら乾いた笑いが出るな
お前それ管理どうすんの？って
そしてそのままリファクタissue化される
- 59 ：Name_Not_Found：2023/08/28(月) 07:19:30.09 ID:???.net
- >>58
抽象思考出来無い馬鹿乙
全部がdivなら、ほぼ全部にクラスが付いてるはず
実際自動生成されたHTMLはほぼこの形態だろ
タグ名とクラスは役割が被ってて、クラスの方が一般的に使えるんだよ
だから(div+クラス)の形態で生成される
ただ全部がdivなら、省略して(タグ名は省略+クラス)でも同じで、
ならクラスの部分をタグ名にして(タグ名部分にクラス+クラス無し)となってるのが、
お前らが拘ってる論理マークアップ()、セマンティクス()なんだよ
意味的には同じで、書式が違うだけ
- 60 ：Name_Not_Found：2023/08/28(月) 07:23:28.87 ID:???.net
- >>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で草
わざわざ公式が用意してくれてんのに老害がー！ってワールドスタンダード全無視じゃん
何か語る前に何のためにドキュメントが存在してるか、まず初歩の初歩から見直したほうがいいわ
嫌ならお前がルール決める側にまで上がってお前が定義変えろ
それが無理なら公開オナニーやめるかブランチ切ってオナっとけ
- 61 ：Name_Not_Found：2023/08/28(月) 08:04:00.45 ID:jDjXZqSY.net
- >>60
そのドキュメント類のどこに「論理マークアップしろ」と書いてあるんだ？
(せめてW3C謹製のドキュメントを持ってくるべき)
現在の状況において合理的価値が無い事に拘り続けてるから「定義通りの老害」だと言ってる
- 62 ：Name_Not_Found：2023/08/28(月) 08:10:42.44 ID:???.net
- >>61
苦しそうで草
- 63 ：Name_Not_Found：2023/08/28(月) 08:20:14.54 ID:???.net
- >>61
横からで悪いけど、今はWHATWGに移管されてるよ
よく調べた？
- 64 ：Name_Not_Found：2023/08/28(月) 08:28:25.99 ID:???.net
- >>63
知ってるよ
完敗したW3CはWHATWG(ブラウザ勢)の規格を追認するだけの機関に成り下がった
だからその中には「論理マークアップしろ」なんて一言も書いてないはず
だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
「昔からそうだから」なら、現状認識を改めることのない「定義通りの老害」だろ
- 65 ：Name_Not_Found：2023/08/28(月) 08:32:44.81 ID:???.net
- >>64
60に言ってね同一人物認定されたくないから横からって書いたの理解して
一つ言うなら今の標準も知らなかったあなたが現状について何かを言っても誰も納得しないと思う。
けど現状をなんとかしたいってのはよく分かったよ頑張ってね
- 66 ：Name_Not_Found：2023/08/28(月) 09:25:21.32 ID:???.net
- >>65
コミュ障か？
W3C謹製の『現行の』「論理マークアップしろ」と書いた文書なんて無いはずと分かってての発言だぞ
『昔の』なら多分あるんだろうけど
まあこんな小学生レベルの揚げ足取りはどうでもよくて、問題は、
現在は公式には誰も「論理マークアップしろ」なんて言ってないのに
お前らが認識改めずに昔のままで「論理マークアップしろ」と考えるのは「定義通りの老害」だろ
- 67 ：Name_Not_Found：2023/08/28(月) 09:33:46.70 ID:???.net
- >>66
興奮しすぎ少し落ち着きなよ。
じゃあそれでいいから好きにdivdivすればいいと思うよ誰も止めないから
けどその先の展望があって且つ提示し続けないと、
それこそあなたが上で言われてるようなオナニー屋さんとして評価されるから気をつけてね
- 68 ：Name_Not_Found：2023/08/28(月) 09:48:48.84 ID:???.net
- >>67
展望もクソも、div使わないとデザイン出来ないからdiv使う、これが普通の人だろ
お前ら老害は、「完璧な論理マークアップでは再現出来ないデザインがあると知ってるが、
それでも論理マークアップを止めない！！！」だろ
完全に論理マークアップオナニー屋じゃん
まあこれまで通りdivもspanも禁止でどうぞ
誰も止めないし、君達が今後とも公開オナニーし続けるのも自由だし
実際、現実はdivdivしてるだろ、俺だけの話ではなく
- 69 ：Name_Not_Found：2023/08/28(月) 09:54:28.24 ID:???.net
- >>68
オナニー返しww
ごめん笑っちゃったそれ効いてたんだね
まあとにかく頑張ってね
- 70 ：Name_Not_Found：2023/08/28(月) 11:59:45.34 ID:???.net
- >>64
横からすまんが君はSEO対策してないの？？
何のために論理マークアップって、巡回ロボに構造を伝えるためだろ
Googleの仕様読んだことないのかえ？
- 71 ：Name_Not_Found：2023/08/28(月) 12:02:54.80 ID:???.net
- >>57
>ユーザーがCSS当てたときに枠がないと詰むからだよ
そんな説は聞いたことない。それ主観だろ。
ユーザーCSSの為にHTML配慮なんてしてるｻｲﾄなんてねーよｗ
そもそも構造決まってんならXpathで特定できるし。
- 72 ：Name_Not_Found：2023/08/28(月) 12:03:48.11 ID:???.net
- 老害老害いうけどあなた何歳なの？
- 73 ：Name_Not_Found：2023/08/28(月) 12:11:22.13 ID:???.net
- このdivdiv君って以前も同じ内容で暴れて、なぜ必要なのかを具体的な大手サイトを複数提示して教えてあげて
その時納得したはずなのに、また考えが元に戻ってる・・
それと俺に勘違いして噛みついてきた事に謝れって言ったらそこから静かになって逃げたよね？
- 74 ：Name_Not_Found：2023/08/28(月) 14:09:13.04 ID:???.net
- divdiverはコテつけてくれ
- 75 ：Name_Not_Found：2023/08/28(月) 14:41:32.40 ID:???.net
- >>70
それもお前らの奇妙な願望で、都市伝説だろ
以下にはお前らがやってる「装飾div/spanを使わない」なんて書いてない
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ja&visit_id=638287958271530595-2635680571&rd=1
というかね、そもそも検索エンジンは各サイトの「優良コンテンツ」をレーティングするわけで、
それが仮に「優良マークアップ順で中身無視」なら検索エンジン間の競争に負けるだろ
だからそっち方向には圧力はかからない
- 76 ：Name_Not_Found：2023/08/28(月) 14:44:45.28 ID:???.net
- 「div spanは必要に応じて使うべきだが意味のある部分はセマンティックなタグで作ろう」
「それはお前らの願望！div spanは使うななんて書いてない！」
これもう障害だろ
- 77 ：Name_Not_Found：2023/08/28(月) 15:01:10.42 ID:???.net
- >>76
「セマンティックなタグを駆使すれば検索順位が上がります」とも書いてないぞ
つかお前らのその都市伝説的願望、どこから来てるんだ？
(なおHTML講座みたいなサイトではそう吹聴されてるのは知ってる)
- 78 ：Name_Not_Found：2023/08/28(月) 15:19:38.33 ID:???.net
- >>75
>>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
論理マークップが何故必要かについて SEOの為だと言っているんだけど。
あんた、俺が指摘するまでここまで一切SEOの事一切触れてなかったけど>>70で言われてハッとしたんだろ？
- 79 ：Name_Not_Found：2023/08/28(月) 15:20:07.14 ID:???.net
- >>77
俺はそんな主張してないから知らんがな
- 80 ：Name_Not_Found：2023/08/28(月) 15:20:50.62 ID:???.net
- >>77
何もわかってない。
>HTML講座みたいなサイトではそう吹聴されてるのは知ってる
どこそれ？しらんな。具体的にソース出して。
- 81 ：Name_Not_Found：2023/08/28(月) 15:27:46.67 ID:???.net
- >>78
> 論理マークップが何故必要かについて SEOの為だと言っている
論理マークアップがSEOに有利という話の出所はどこなんだ？
(検索エンジン各社がそう言ってるのならいいが、そうではないだろ)
- 82 ：Name_Not_Found：2023/08/28(月) 15:43:03.19 ID:???.net
- >>81
有利ではなくやらないと不利になるんだよ。 アルゴの仕様はそりゃ公開してないだろ。
これは何年も何十サイトと実際に自分の管理サイトと検索順位を監視して検証してきてわかっている事だから。
例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
てかあんた、そんな事きいてくる時点でお察しだぞ
- 83 ：Name_Not_Found：2023/08/28(月) 15:50:41.12 ID:???.net
- >>64
>だからお前らは何を根拠に「論理マークアップしろ」と考えるのか？と聞いてるのだ
てか論理マークアップしてない有名サイトなんてどこにあんの？
具体的なURLを今教えて
- 84 ：Name_Not_Found：2023/08/28(月) 15:52:19.50 ID:???.net
- ↑検索エンジンのページ以外でな
- 85 ：Name_Not_Found：2023/08/28(月) 15:57:53.01 ID:???.net
- 何の生産性もないからdivdiverの講演会とそれへの反論はよそでやってほしい
- 86 ：Name_Not_Found：2023/08/28(月) 15:57:59.87 ID:???.net
- >>82
つまり経験知か
なるほど出所としては妥当だろうし、ずっと更新されないのも納得ではある
> 例えばH1タグをdivにしてみたり、titleタグを空にしてみたり試してみろ。
なお、前者は分かるが、後者はあり得ない
(titleはタブに表示されるので検索切ってても必要)
- 87 ：Name_Not_Found：2023/08/28(月) 15:58:35.36 ID:???.net
- >>86
コテつけろ
- 88 ：Name_Not_Found：2023/08/28(月) 16:02:30.63 ID:???.net
- >>86
なんか自分の方が新しい事知ってますよってていで行きたいんだろうけど
残念ながら俺らも実務で最前線でやってんだから常にアップデート求められる環境なんよ。
あんたは、恐らくSEO対策をした事がないよね。
YESかNoで答えて
- 89 ：Name_Not_Found：2023/08/28(月) 16:36:17.04 ID:???.net
- SOHOやフリーで本当に細々と食ってる奴の134人目
https://mevius.5ch.net/test/read.cgi/hp/1687357689/
- 90 ：Name_Not_Found：2023/08/28(月) 20:19:33.70 ID:???.net
- 質問と返しですぐに見抜かれるのに
なんで自分の知らないことを知ってるように装うんだろ
>>61で色んな人に見限られただろうに
損な性格してるわ
- 91 ：Name_Not_Found：2023/08/31(木) 19:38:35.37 ID:???.net
- divdiv君、また追い詰められて沈黙、逃走
前回と同じじゃん
- 92 ：Name_Not_Found：2023/08/31(木) 20:21:01.23 ID:???.net
- 召喚すな
- 93 ：Name_Not_Found：2023/09/01(金) 07:38:32.84 ID:???.net
- なにそのdivdiv君って何？
xhtml星から生まれたの？
- 94 ：Name_Not_Found：2023/09/02(土) 00:22:15.14 ID:???.net
- ブランチきってオナっとけって結構殺傷能力高いよな…一方的過ぎて見ててちょっと可哀想だった
一応初心者スレだし
- 95 ：Name_Not_Found：2023/09/02(土) 01:21:26.04 ID:???.net
- 質問スレであって初心者スレではない
真面目に質問してる初心者にはあんなふうにならんだろう
上級者ぶってイキってる無知ウンコだから懲らしめられる
- 96 ：Name_Not_Found：2023/09/03(日) 16:28:20.78 ID:Udh4NPPz.net
- 質問です
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/
- 97 ：Name_Not_Found：2023/09/03(日) 16:39:34.32 ID:???.net
- >>96
子もflexにすると親の高さを継承する
- 98 ：Name_Not_Found：2023/09/03(日) 16:42:57.69 ID:Udh4NPPz.net
- >>96
flex は関係なかったので、最小の例を作りました。
子 div の中に h2 と div を置いて、子 div の高さを親 div と同じにしたいです。
https://jsfiddle.net/7kq2mvbd/10/
- 99 ：Name_Not_Found：2023/09/03(日) 16:45:27.91 ID:Udh4NPPz.net
- >>97
ありがとうございます
できました
https://jsfiddle.net/7kq2mvbd/12/
- 100 ：Name_Not_Found：2023/09/05(火) 18:05:42.35 ID:???.net
- 比較的最近リリースされたCSSで使えるのってなんかある？
Scroll-driven Animations
@scope
この辺も便利なんだろうけどペースが早いわ
- 101 ：Name_Not_Found：2023/09/06(水) 10:07:05.38 ID:???.net
- 最近リリースといっても他のブラウザで対応してないのもあるから
今すぐ無理に使わなくてもよい
- 102 ：Name_Not_Found：2023/09/06(水) 11:11:36.87 ID:???.net
- リリースは全然最近じゃないけど自分が使い始めたのが最近なのは
scroll-gap
と
overflow: clip;
かな
- 103 ：Name_Not_Found：2023/09/06(水) 11:41:43.45 ID:???.net
- >>102
さんくす！
scroll-gap
→ググってもでてこんな
代わりにscroll-paddingってのを知れたから良かった。これでページ内リンクの問題も楽になりそうな
overflow: clip;
→使いどころがわからん、気が向いたら教えてクレメンス
- 104 ：Name_Not_Found：2023/09/06(水) 12:00:44.35 ID:???.net
- scroll-padding 調べてみた
めっちゃ便利だねー
margin-top と padding-top で疑似的に調整してやってたわ
ありがとう
- 105 ：Name_Not_Found：2023/09/06(水) 12:31:57.86 ID:???.net
- >>103
すまんscroll-paddingだったわｗ
overflow:clip;は親に設定しても子をposition:sticky;にできる（親がhiddenだと子はstickyの基準点を見失う）
厳密にはいろいろ違うんだけどhiddenの上位互換みたいな感じ
- 106 ：Name_Not_Found：2023/09/06(水) 12:53:16.71 ID:???.net
- CSSのみでアンカーリンクのスクロールが滑らかにできるのに
いまだに昔書いたJQueryを使いまわしてる
- 107 ：Name_Not_Found：2023/09/06(水) 13:33:15.44 ID:???.net
- cssのスクロールビヘイビアは速度がいじれるようになるまでは
スムーススクロールはjsだなあ
そもそもスムーススクロール要らん派だけど要望は多い
- 108 ：Name_Not_Found：2023/09/06(水) 13:35:09.53 ID:???.net
- なるほど、scroll-beheivorでの欠点をscroll-paddingで補えばCSSだけで完結できるわけか
- 109 ：Name_Not_Found：2023/09/06(水) 13:35:38.72 ID:???.net
- ああ、たしかにイージングは欲しいね
- 110 ：Name_Not_Found：2023/09/07(木) 01:49:29.45 ID:???.net
- >>100
自分も全然最近じゃないけど、display: contents かなー
直下の要素じゃなくてもgridに振り分けられるのがえらい便利だった
- 111 ：Name_Not_Found：2023/09/07(木) 10:48:14.19 ID:UAGv2jDr.net
- CSSでのスムーススクロール使ったサイトが増えてきたからか独自にJavaScript使ってスムーススクロール実装したサイト見ると違和感覚えるときあるな
懐かしい感じというかなんというか
CSSに任せられることはCSSでやってしまう方がシンプルでいい気がする
- 112 ：Name_Not_Found：2023/09/07(木) 11:32:09.08 ID:???.net
- >>111
speedが遅い😭
- 113 ：Name_Not_Found：2023/09/07(木) 12:41:04.67 ID:???.net
- >>112
遅いってページ内移動の速度のこと？
cssだと速度はブラウザ依存だと思うが特に遅いとは思わないけどな
これ以上速くしてもページ内移動だと分かりにくくなるかなと
それなら最初からスムーススクロール使わないって選択するかな
- 114 ：Name_Not_Found：2023/09/07(木) 13:32:24.71 ID:???.net
- >>113
見た目上というかeasingというべきかな
距離が短いときも長いときも同じ時間で割られるので
短い時に異常にゆっくりになる
- 115 ：Name_Not_Found：2023/09/09(土) 14:57:01.91 ID:???.net
- flexでもgridでもgapが使えるの最高すぎる
- 116 ：Name_Not_Found：2023/09/09(土) 16:31:00.55 ID:???.net
- gap最高だよね！超便利 なぜなかったか不思議なくらい
- 117 ：Name_Not_Found：2023/09/09(土) 18:45:24.00 ID:???.net
- なにこの良スレ
- 118 ：Name_Not_Found：2023/09/09(土) 19:11:42.35 ID:???.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：2023/09/09(土) 19:35:25.38 ID:???.net
- grid-template-column: repeat(3, 1fr);
- 120 ：Name_Not_Found：2023/09/09(土) 20:20:45.75 ID:???.net
- >>119
書きそびれたけど、最大文字数によっては子要素が２つになったり５つになったりするんですよねえ
- 121 ：Name_Not_Found：2023/09/09(土) 20:24:25.64 ID:???.net
- auto-fillかauto-fit好きな方
- 122 ：Name_Not_Found：2023/09/09(土) 20:31:29.72 ID:???.net
- grid便利そうなんだけど覚えきれない
ジェネレーターで使ってやるぐらいだわ
偉いなお前らは
- 123 ：Name_Not_Found：2023/09/09(土) 21:50:56.10 ID:???.net
- auto-fit大好き
- 124 ：Name_Not_Found：2023/09/10(日) 00:28:44.28 ID:???.net
- flexboxしか使わんけどgrid必要な場面がまったくない
- 125 ：Name_Not_Found：2023/09/10(日) 03:20:37.16 ID:???.net
- auto-fillやauto-fitはflex-wrapでは代替がきかないな
grid-areaもorderにはできないことができる
display:contentも組み合わせれば大体のデザインはワンソースでできる
- 126 ：Name_Not_Found：2023/09/10(日) 05:50:08.75 ID:???.net
- >>124
PC時は
左に画像、右に見出しとリード
SP時は
上から
見出し、画像、リード
これのためだけにgrid使ってる
- 127 ：Name_Not_Found：2023/09/12(火) 13:16:44.22 ID:ZyApT9EM.net
- チェックボックスを用いてフィルタリングが出来るフォームを作ろうとしています。
□全部 □円形 □四角形 □青色 □緑色
とチェックボックスが並んでおり、その下には
丸くて青色・四角くて青色・丸くて緑色・四角くて緑色
・・・のオブジェクトが並んでいて、チェックボックスにチェックを入れる事で該当のオブジェクト以外がhiddenになるようなイメージです。
実装自体は出来そうなのですが、挙動をどうするかで悩んでおりアドバイスを頂きたいです。
例えば「円形」「四角形」
の両方にチェックを入れた時、挙動としては
（１）円形かつ四角形のオブジェクトを可視化
（２）円形のオブジェクトと四角形のオブジェクト、および円形かつ四角形のオブジェクトを可視化
のいずれが適切というか、ユーザから見て自然でしょうか。
（上の例では円形と四角形しか無いですが、実際には両方をあわせ持つオブジェクトもあるものと想定して頂きたいです）
- 128 ：Name_Not_Found：2023/09/12(火) 14:47:08.43 ID:???.net
- 自分は2
- 129 ：Name_Not_Found：2023/09/12(火) 14:52:45.66 ID:???.net
- 個人的には2だが逆の人いるんだよな
orかandかのラジオボタンも作っちゃえば
- 130 ：Name_Not_Found：2023/09/12(火) 17:22:16.78 ID:???.net
- >>127
俺も 2
- 131 ：Name_Not_Found：2023/09/12(火) 19:02:35.63 ID:???.net
- 自分は1
hiddenにしていくなら1が自然だと思う
絞り込み検索って書いておいてくれるとなお嬉しい感じ
2の挙動は初期状態が表示件数ゼロで項目を足していく時に使うのが自然に感じる
- 132 ：Name_Not_Found：2023/09/14(木) 13:06:02.38 ID:aPP30ZSe.net
- 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分した大きさとなるようにしたいです。
https://o.5ch.net/21xso.png
- 133 ：Name_Not_Found：2023/09/14(木) 13:48:54.86 ID:???.net
- dが固定ならefはcalc使えばよさそうだけど
tableだとダメとかあるんかな
- 134 ：Name_Not_Found：2023/09/14(木) 14:04:55.94 ID:???.net
- >>132
<col>を用意してそれにwidthを指定したらよいのでは
- 135 ：132：2023/09/14(木) 15:05:02.01 ID:???.net
- colタグの存在を初めて知りました。
calcを用いた指定と合わせて試してみたのですが、やり方や考え方が間違っているんでしょうか…
https://codepen.io/Nickey-the-looper/pen/MWZoPJv
- 136 ：Name_Not_Found：2023/09/14(木) 16:40:54.34 ID:???.net
- grid使うとか他にもっと良い方法があるのかもしれないけど、とりあえずtable使うということで
・tableの最上段にダミーでtr1行追加
・更にbと同一幅のセルを左から4番目に追加
・最上段だけvisibility: collapse;で不可視化（hiddenだとレイアウトからも除去されるので）
ってのはどうでしょう？
https://jsfiddle.net/dumov8ng/
- 137 ：Name_Not_Found：2023/09/15(金) 01:14:20.28 ID:???.net
- Bootstrap で出来ないの？
- 138 ：Name_Not_Found：2023/09/15(金) 04:02:19.83 ID:9yhdlK5+.net
- 列数を増やしてしまえ
- 139 ：Name_Not_Found：2023/09/15(金) 04:07:26.56 ID:???.net
- あとは行にtable追加するとか
昔はよくやってたけど今はもっと便利な方法があるのかな
- 140 ：Name_Not_Found：2023/09/15(金) 04:58:56.21 ID:???.net
- みんな>>132の説明でどんなテーブルかわかるん？
俺全然わかんねえや…
- 141 ：Name_Not_Found：2023/09/15(金) 08:31:34.98 ID:???.net
- 一番下のお絵かきの画像
- 142 ：132：2023/09/15(金) 16:21:00.96 ID:???.net
- >>136さんと138さんの方法で出来ました！
大変助かりました、ありがとうのざいます。
gridはよくわからなかったので勉強してみます。
>>137
まさにbootstrap使ってるんですが、gridレイアウトを使ったらどうかということでしたかね？
- 143 ：Name_Not_Found：2023/09/15(金) 16:24:10.05 ID:???.net
- なぜgridはflexに負けたのですか？
- 144 ：Name_Not_Found：2023/09/15(金) 17:02:01.69 ID:???.net
- >>141
あー、分かる人にはなんか表示されてるのか
納得
- 145 ：Name_Not_Found：2023/09/15(金) 17:06:03.89 ID:???.net
- >>143
別に勝ち負けないじゃん？
flexの出始めと一緒で、使えるようになった人から使っていく流れっしょ
- 146 ：Name_Not_Found：2023/09/15(金) 17:33:04.16 ID:???.net
- というか今でもflex使うけど
単に横一列縦一列に並べるなら絶対flexのが早いし
- 147 ：Name_Not_Found：2023/09/15(金) 18:45:00.12 ID:???.net
- >>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/
- 148 ：Name_Not_Found：2023/09/15(金) 21:31:12.70 ID:???.net
- <div id="hoge">
<ul>
<li>文１</li>
<li>文２</li>
<li>文３</li>
</ul>
</div>
#hoge > ul li {
・・・
}
でW3C CSS検証かけると
#hoge > ul li 文法解析エラーが発生しました [empty string]
とエラーになってしまいます。
何がいけないのでしょうか？
CSS（表示）としては正常に働いています。
- 149 ：Name_Not_Found：2023/09/15(金) 22:26:35.76 ID:???.net
- 今となってはflexとgridなしは考えられないな
昔はflexなしでTableレイアウトをcssで再現してたけど無理があったよね
- 150 ：Name_Not_Found：2023/09/15(金) 23:09:19.85 ID:???.net
- >>148
#hoge > ul li {
background : #f00;
}
はエラー無しで通るから、どこかでミスタイプしてたりしない？
- 151 ：Name_Not_Found：2023/09/16(土) 01:37:35.45 ID:???.net
- gridがflexよりも優秀な時ってどういう時があるの？
- 152 ：Name_Not_Found：2023/09/16(土) 02:13:25.20 ID:???.net
- 少し上読めば？
- 153 ：Name_Not_Found：2023/09/16(土) 02:28:55.38 ID:???.net
- >>152
たぶん同じ質問繰り返して荒らしてるだけだと思う
- 154 ：Name_Not_Found：2023/09/16(土) 21:04:55.77 ID:???.net
- >>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はエラーなしです。
- 155 ：Name_Not_Found：2023/09/16(土) 21:29:04.44 ID:???.net
- >>154
コピペしたけど↓は通ったよ
https://jigsaw.w3.org/css-validator/validator
- 156 ：Name_Not_Found：2023/09/16(土) 22:10:26.63 ID:???.net
- >>154
もしかしてcss-validator.org使った？
正解はこっち https://jigsaw.w3.org/css-validator/
- 157 ：Name_Not_Found：2023/09/16(土) 22:57:43.87 ID:???.net
- https://css-validator.org/validator.ja.html
で直接入力（元ソースコピペ）、オプションをCSS3にしてます。
ここでなくてもいいのですがどこかのブログか何かで紹介されててブックマークしたのを昔からそのまま使ってるだけです。
154をそのまま貼ると同様エラーになります。
>>156
そこと何が違うのでしょうか？
- 158 ：Name_Not_Found：2023/09/16(土) 23:58:24.80 ID:???.net
- 古くて機能してない
そこじゃなくていいなら使うな
- 159 ：Name_Not_Found：2023/09/17(日) 00:02:03.02 ID:???.net
- >>157
border-radiusでempty stringを吐くバグがあるらしいね
https://www.w3.org/Bugs/Public/show_bug.cgi?id=11975
border-radiusをなくしたらエラーでなかったよ
- 160 ：159：2023/09/17(日) 00:04:07.33 ID:???.net
- 原因ってことで回答したけれども
まっとうなほうを使うようにするのがお薦め
- 161 ：Name_Not_Found：2023/09/17(日) 00:10:22.20 ID:???.net
- バリデーターやツールはW3Cの本家サイトから辿った方が無難だね
Validators and tools | Developers | W3C
https://www.w3.org/developers/tools/
- 162 ：Name_Not_Found：2023/09/17(日) 14:11:21.66 ID:???.net
- コンテンツのヘッダ部分にposition: sticky を適用して、スクロールしてヘッダ部分が固定されてるとき、その背後に隠れてる部分(文字とか)をぼかして表示させたいのですが、どうしても効きません
やってるのは、
ヘッダ部分にposition:sticky、塗りつぶしで適当な透明度の背景、
backdrop-filter: blur(5px)
です。
背後に文字などが来たときに、その文字をぼかしたいです。
イメージとしてはWeb twitterのヘッダ部分にみたいな感じです。
スマホだとちゃんと見れないかもですが、検証用の簡易的なコードです。
https://jsfiddle.net/tb62nuxh/
実際には、固定されてるかどうかをJSで処理し、必要に応じてスタイルを適用します。
- 163 ：Name_Not_Found：2023/09/17(日) 14:26:05.21 ID:???.net
- .header {
position: sticky;
top: 0px;
-webkit-backdrop-filter: blur(3px);//Safari
backdrop-filter: blur(3px);
}
- 164 ：Name_Not_Found：2023/09/17(日) 14:38:50.16 ID:???.net
- 最新のSafariでもまだベンダプリフィクス要るのよね…
- 165 ：Name_Not_Found：2023/09/17(日) 15:23:24.95 ID:???.net
- chromeだと動くからsafariで検証してたってことか
- 166 ：Name_Not_Found：2023/09/17(日) 18:46:28.15 ID:???.net
- あれ、すみません
>>162のリンクだと途中の内容だったみたいで、保存済みのほうが↓です
https://jsfiddle.net/tb62nuxh/2/
>>163の内容だと -webkit～のが足りなかったぐらいだったぐらいでそれも追加したのですが、やはり、ぼかし表現にはなりませんでした。
PC版Chrome(116)で確認してます。
何か他に必要でしょうか？
- 167 ：Name_Not_Found：2023/09/17(日) 19:22:33.11 ID:???.net
- >>166
opacity入れると効かないので外して、代わりにbackground-colorを#000aぐらいに指定
- 168 ：Name_Not_Found：2023/09/17(日) 19:37:42.81 ID:???.net
- opacityだめなんだね
rgbaで指定するのがよいのかな
- 169 ：Name_Not_Found：2023/09/17(日) 19:58:27.43 ID:???.net
- >>167
あぁ、ありがとうございます！
opacityダメなのは盲点でした…
ドキュメントでは「少なからず透明にして」とあったのでopacity付けてしまいました。
- 170 ：Name_Not_Found：2023/09/18(月) 01:41:29.02 ID:???.net
- ちょっとスレ違いなのかもしれないんですが…
横スクロールのゲームの攻略記事を作るにあたって、横に長いステージをキャプチャしたものを掲示したいです。
その方法として、今のところ横スクロール可能なiframe的な要素の中に横長の画像を配置する想定ですが
この方法が本当にベストなのかがわからず、他に良い方法があったら教えていただきたいです。
具体的にどの程度の長さになるかはまだ作成していないためわからないです。
- 171 ：Name_Not_Found：2023/09/18(月) 02:12:45.85 ID:???.net
- >>168,169
rgbaの方が透明度を把握しやすいかもね
自分はお手軽に短縮hexでやっちゃうことが多いけど
>>170
連続していることを優先するなら想定どおりの形、閲覧性を優先するなら適当なエリアで分割して縦に並べるかな
マウスで横スクロールは両手使わないとだし…
- 172 ：148：2023/09/18(月) 10:31:00.56 ID:???.net
- >>156,159
具体的にありがとう。
他にも手前と背景が同じ色などどうでもいいエラー出されてたのですが全て一気にエラーなしになりました。
>>161
まさかあんな紛らわしいページが存在してるとは想像もしませんでした。今後そうします。
ありがとう。
- 173 ：Name_Not_Found：2023/09/19(火) 21:47:17.97 ID:???.net
- >>132
tableを入れ子にすりゃかんたん
d,e,fを一つのテーブルにしたらいいよ。
- 174 ：Name_Not_Found：2023/09/19(火) 21:52:50.73 ID:???.net
- >>173
>>147
> あとはダミー追加したくなかったら、あまり推奨はされてないけどtableの中にtableをネストしてもイケる
> https://jsfiddle.net/q48phobx/
- 175 ：Name_Not_Found：2023/09/20(水) 03:42:06.35 ID:???.net
- defのあとにまたabcdefが続くような構造だと
入れ子にしたらむちゃくちゃになる
- 176 ：Name_Not_Found：2023/09/20(水) 14:48:36.98 ID:???.net
- お題に無い話を勝手に足されても困る
- 177 ：Name_Not_Found：2023/09/20(水) 14:57:13.99 ID:???.net
- パっと見だとそもそもa d c部分はテーブルですらない
- 178 ：Name_Not_Found：2023/09/20(水) 16:12:09.27 ID:???.net
- ちょっと何言ってるか分かんない
- 179 ：Name_Not_Found：2023/09/20(水) 16:18:11.65 ID:???.net
- Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される - GIGAZINE
ttps://gigazine.net/news/20230920-webkit-safari-17-0/
- 180 ：Name_Not_Found：2023/09/20(水) 16:27:25.24 ID:???.net
- TwitterでiOS17のSafariでフォントの太さがーって騒いでるね
- 181 ：Name_Not_Found：2023/09/20(水) 19:25:50.13 ID:???.net
- 次のようなcssがあります。
#hoge_1:checked ~ #target_1 {
省略
}
このhoge_nとtarget_nはコンテンツのボリュームに応じて動的に増減し、nの部分は連番になっています。
それらの要素全てに上記のようなcssを適用したいのですが、どのように書くのがよいでしょうか？
- 182 ：Name_Not_Found：2023/09/20(水) 19:34:36.77 ID:???.net
- https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
数字限定とかでなくてもいいなら、属性セレクタ使えばいいんじゃないかな
[id^="hoge_"] でid属性がhoge_で始まるもの全てになる
- 183 ：Name_Not_Found：2023/09/21(木) 13:49:59.57 ID:???.net
- コンテナクエリって使い道がイマイチわからん
- 184 ：Name_Not_Found：2023/09/21(木) 13:54:10.80 ID:???.net
- 「こういうのあったらなあ」と思う瞬間は何度もあったのにいざ出来たら使い道に迷うものたち
@container
@layer
:scope
- 185 ：Name_Not_Found：2023/09/22(金) 14:15:55.45 ID:GQ+SUbJe.net
- 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>
- 186 ：Name_Not_Found：2023/09/22(金) 16:22:43.24 ID:???.net
- そういう場合は
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" を使用してカルーセルを初期化しない場合は、自分で初期化する必要があります。
とのことなので、ボタン押さないとフリック出来ないというのは、この属性が無くて初期化されてなかったとか？
- 187 ：185：2023/09/23(土) 02:27:06.04 ID:f5iOHgtl.net
- >186
レスありがとうございます。
この属性は元々はサンプルに従って同様に設定していたのですが、設定していると
「prev」または「next」ボタンを一度押下すると自動的に画像が切り替わり続ける状態になる
という挙動を見せ、自動では動いてほしくなかったため除外した経緯があります。
おそらく>185に書いた問題とは関係ないのではないかと思っています。
- 188 ：Name_Not_Found：2023/09/23(土) 06:28:56.05 ID:???.net
- >>187
実機じゃなくシミュレータで確認しててdata-bs-interval="false"に設定してあるから
シミュレータでは自動再生しないんだけど、実機では自動再生するの？
それじゃ同じタグにdata-bs-ride="carousel"に加えてdata-bs-slide="false"を追加するとどうなる？
- 189 ：Name_Not_Found：2023/09/24(日) 19:12:05.18 ID:xZzXY+Iq.net
- 質問です
<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/
- 190 ：Name_Not_Found：2023/09/24(日) 19:22:28.27 ID:???.net
- できません
- 191 ：Name_Not_Found：2023/09/25(月) 14:53:29.68 ID:???.net
- IE11が亡くなった今だからこそ
使ってる／使いたいおすすめCSSを教えて！
transform使わずにscale、translate、rotateが地味に便利
- 192 ：Name_Not_Found：2023/09/25(月) 16:41:05.06 ID:???.net
- 文字リンクにtitle属性(補足情報の表示)を書いていますが、タブレットで見たときに表示されなくて困っています。
かわりにページにテキストエリアを置いて、リンクをクリックした時に補足情報を表示したいです。
調べてもなかなか情報が出てこないのでどなたか教えてください。
表示したい補足情報は20文字前後です。
- 193 ：Name_Not_Found：2023/09/25(月) 18:12:55.34 ID:???.net
- >>192
ツールチップを表示させたいってこと？
HTMLでポップアップ(ツールチップ)させる方法(スマホ対応) | オレDEV.com
ttps://dev.ore-shika.com/post/css-tooltip/
- 194 ：Name_Not_Found：2023/09/25(月) 19:22:12.53 ID:???.net
- >>193
スマホ表示ならできそうですね、ツールチップで調べてみます。
ありがとうございます。
- 195 ：Name_Not_Found：2023/09/26(火) 20:04:00.18 ID:???.net
- ツールチップは一見簡単だが自動的な位置適正にこだわるとけっこう面倒だからこれ使っちゃってるわ
https://jqueryui.com/tooltip/
HTML+CSSでこれよりいいの見たことない
JS組み込む必要あるのが難点
- 196 ：Name_Not_Found：2023/10/01(日) 12:43:45.64 ID:???.net
- https://wikiwiki.jp/postmodern/
- 197 ：Name_Not_Found：2023/10/07(土) 02:43:14.60 ID:umF+3V+1.net
- 質問なんですが、画像をズームさせる機能をつけて
Firefoxだと画面内に収まるように表示されるのにchromeだとウインドウからはみ出すの、何が原因ですか？？
- 198 ：Name_Not_Found：2023/10/08(日) 01:52:00.06 ID:???.net
- 自動で収集されてるんだとは思うんですが、海外の怪しい通販サイトのソースに自分のサイトの文章が無意味に引用されてるっぽいんですけど、これって防ぐ手立てないんですか？
- 199 ：Name_Not_Found：2023/10/08(日) 01:58:42.63 ID:???.net
- 公開されてる以上防ぐのは不可能
ドメインからサーバーが特定できれば大元に通報するなりできるけど
大体はサーバー会社も外国の訳わからん所だからな
- 200 ：198：2023/10/08(日) 03:21:43.16 ID:???.net
- ですよね。なんかセキュリティ面で致命的なミスなり欠陥なりあるのかなあとも悩みましたが、まあそういうものだと思って諦めます
- 201 ：Name_Not_Found：2023/10/14(土) 09:28:38.28 ID:???.net
- https://i.imgur.com/kJUPURh.jpg
家族等などにも紹介してプラス\4000をゲットできます
tk..tk [あぼーん用]
- 202 ：Name_Not_Found：2023/10/14(土) 16:39:32.23 ID:K05jjQAy.net
- ｢あいうえお【ここで改行】かきくけこ｣と書いた場合、｢お｣の直後に半角スペースが１個挿入されて改行されてしまう。
これを防ぐ方法は？
- 203 ：Name_Not_Found：2023/10/14(土) 16:52:17.07 ID:K05jjQAy.net
- 訂正
【ここで改行】ってのは、ソースコード上の改行であって、改行命令ではない。
だから、｢あいうえお かきくけこ｣っていう半角スペース込みの出力になってしまう。
- 204 ：Name_Not_Found：2023/10/14(土) 16:56:20.78 ID:???.net
- <br>使ったらダメなの？
- 205 ：Name_Not_Found：2023/10/14(土) 17:06:12.84 ID:???.net
- 正規表現で改行コードぶちこめないなら無理
- 206 ：Name_Not_Found：2023/10/14(土) 17:06:46.58 ID:???.net
- 「ここで改行」は<br>の意味かと思ったけど
エディタ上での改行ってことか
- 207 ：Name_Not_Found：2023/10/14(土) 17:11:07.62 ID:???.net
- エディタなら閉じタグの変なところで改行するとかコメントアウトするとか色んな小技が編み出されてきたが
そんなことしなきゃいけない時はHTML設計がおかしい
- 208 ：Name_Not_Found：2023/10/14(土) 17:28:30.34 ID:???.net
- >>202
改行しない
- 209 ：Name_Not_Found：2023/10/14(土) 20:31:38.17 ID:???.net
- ソースコード上は改行したいけど、出力は改行したくないってこと？
- 210 ：Name_Not_Found：2023/10/15(日) 01:25:33.56 ID:???.net
- あいうえお<!--
-->かきくけこ
- 211 ：Name_Not_Found：2023/10/15(日) 02:38:18.97 ID:n/jmxEKA.net
- >>209 その通り
>>210 おぉ、その手があったか！ でも、何か汚い感じするｗ
- 212 ：Name_Not_Found：2023/10/15(日) 04:02:15.10 ID:???.net
- 昔からこれでやってんだよ
実際クソ汚い
テーブルコーディングとかと同レベルの古代遺物
嫌ならソースでは改行しないかCSSで無茶しろ
- 213 ：Name_Not_Found：2023/10/15(日) 04:02:32.95 ID:???.net
- vscodeなら幅指定で見た目だけ改行が設定で可能
もちろん改行コード入れずに
- 214 ：Name_Not_Found：2023/10/15(日) 12:16:52.93 ID:???.net
- 例えばチェックボックスのON/OFFとかで、ある要素の表示/非表示を切り替えたい場合、あらかじめ非表示(display:none)のスタイルを定義しておいて、Javascriptで要素に対して非表示用のクラスを付けたり外したりするのが良くあると思うのですが、
100行とかあるテーブルのなかで個々の50行の各要素が非表示に該当するような場合、
前述のように50個の要素に対して非表示クラスを付けたり外したりするほうが良いのか、
100行の内容を書き出す時にあらかじめ識別用のクラスを付けておいてから、チェックボックスのON/OFFに合わせて非表示用のスタイルそのものを追加、削除するのが良いのか、どちらが良いとかありますか？
50個じゃなく、仮に100,500個とかになった場合でのパフォーマンスへの影響を気にしてます。
(イメージとしては商品一覧を表示し、「売り切れを非表示する/しない」みたいなチェックボックスです)
- 215 ：Name_Not_Found：2023/10/15(日) 13:33:07.24 ID:???.net
- >>214
classのつけ外しなんて数千でもたいした負荷にならん
見た目の話ならどっちでもいいが
状態としてチェックボックスがチェックされているかどうかなのだから一つずつ管理すべき
もし「チェックボックスが全てチェックされている」とは別に「中身がすべてチェックされている」という状態を用意しているなら親要素などで管理するべきだが
- 216 ：Name_Not_Found：2023/10/15(日) 13:36:03.20 ID:???.net
- 付け外ししたいのはチェックボックスじゃなくて要素のほうか
それにしても要素一つ一つで管理すべき
例えばシリーズA、B、Cと数種類のグループがあって中身の組み合わせが大した数じゃないなら親要素の状態で管理してもいいが
- 217 ：Name_Not_Found：2023/10/15(日) 14:10:45.39 ID:???.net
- >>214
個々の要素に手を入れる場合は、一度に全部やるんじゃなくて表示分だけ処理した方がいいね
自分なら売り切れや在庫未入荷のクラスをDBからの出力時につけて、表示制御は親のクラスを切り替える形にするかな
- 218 ：Name_Not_Found：2023/10/15(日) 15:52:54.90 ID:???.net
- ありがとうございます。基本的には個々の要素にクラス付与ということで良いのですね。
>>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')
ということなのでしょうか？？
- 219 ：Name_Not_Found：2023/10/15(日) 22:57:20.44 ID:???.net
- >>218
そうそう、そんな感じ
それが唯一の正解って訳じゃないので、自分の実装しやすい方法でいいと思うよ
- 220 ：Name_Not_Found：2023/10/15(日) 23:19:54.82 ID:???.net
- 自分なら売り切れ商品は非表示ではなく
phpでDBから引いてくるときにDOM自体除外するなあ
- 221 ：Name_Not_Found：2023/10/16(月) 02:07:40.13 ID:???.net
- 取り扱ってすらいないのかわからない状態にするってこと？
- 222 ：Name_Not_Found：2023/10/16(月) 03:23:13.80 ID:???.net
- 見た目だけじゃなくてDOMも消すって話
売り切れも含むみたいなチェックがオンなら売り切れ中であることを明示して再生成する
- 223 ：Name_Not_Found：2023/10/16(月) 03:40:07.94 ID:R+2RS1w5.net
- ##.style_td:has-text(ビーム):style()
##[class="style_td"]:has-text(ビーム):style()
↑これらが同じ効果を与える環境です
class値に~=や^=で制御し、適用されるテキストを差別化するのは慣れているのですが、
class値が全く同じで「ビーム」単体のみではなく「ビーム砲」や「拡散ビームなんちゃら」等、ビームという単語を含む一文すべてに反応してしまう現状
:has-text()が"この文字列を含む"という効果なので当然の結果です
それを、~=のように"この文字列だけ"や^=のように"この文字列から始まるものだけ"と指定する方法はないでしょうか？
よろしくお願いいたします
- 224 ：Name_Not_Found：2023/10/16(月) 07:46:21.62 ID:???.net
- >>220
俺もこれだな
diaplay none付けて非表示にする商品は最初からHTMLに出力しない
どれだけSEOに効果あるのかは分からないけどHTMLのデータ量が少ない方がCWVのスコアがいいしね
- 225 ：Name_Not_Found：2023/10/16(月) 13:01:06.23 ID:???.net
- >>223
CSSに:has-textなんて疑似クラスは無いのでスレ違いだし、よく分からんので意図通りに動くかは知らんが
()内で正規表現使ってダメなら、adblock系のスレで質問した方がいいんじゃないかと
- 226 ：Name_Not_Found：2023/10/16(月) 15:20:19.80 ID:???.net
- has擬似クラスはいつになったらFirefoxで使えるようになるんだろ
- 227 ：Name_Not_Found：2023/10/16(月) 15:28:01.51 ID:???.net
- :hasみたいなのあればいいな（jsのcladdList.containsみたいなことやりたいな）としょっちゅう思ってたはずなのに
実の所 :not と :isで事足りているのはある
- 228 ：Name_Not_Found：2023/10/16(月) 18:42:33.88 ID:UcrE7pLb.net
- 皆さんでしたら、一つのタグ内である特定の文字列だけを色変更する場合、どのように記述しますか？
例えば
〜.com##.style_td:has-text(ビーム):style(color:#00ccff!important;)
とすると、そのサイトのclass値がstyle_tdのタグ内でビームという文字列を含んだ場合、現状ではタグ内にあるビーム以外の文字列も全部#00ccffカラーへ置き換えられます
「ビームという文字列が含まれたstyle_td」が:style()の対象にされるため、です
それを、ビームの部分だけ#00ccffカラーに変更したい
- 229 ：Name_Not_Found：2023/10/16(月) 20:04:57.54 ID:???.net
- だからそれcssじゃねーだろ
失せろ
- 230 ：Name_Not_Found：2023/10/16(月) 21:02:25.00 ID:???.net
- いつものスレチｸｿに構うな
- 231 ：Name_Not_Found：2023/10/16(月) 23:05:55.10 ID:???.net
- displayつながりならよくね？
結局パフォーマンス問題でレンダリングさせるさせないに行き着くわけだし
- 232 ：Name_Not_Found：2023/10/17(火) 00:40:37.80 ID:???.net
- NGしてて見えないのかもしれないが、>>223,228みたいなのはAdBlockスレでやる話やね
Web制作でのCSSの話じゃないし
- 233 ：Name_Not_Found：2023/10/22(日) 14:26:43.83 ID:???.net
- borderのdashedって
破線の長さ、間隔をCSSで設定することはできませんよね？
Figmaが線の「高度な設定」内で破線と間隔指定できるので
なにか対策あるのかと思いまして
- 234 ：Name_Not_Found：2023/10/22(日) 14:42:39.15 ID:???.net
- border-styleじゃ無理なのでbackground-imageで再現するみたいだよ
- 235 ：Name_Not_Found：2023/10/22(日) 14:50:26.07 ID:???.net
- >>234
ありがとうございます！
やっぱりそうなんですね ひと手間かけるんですね 角丸どうしよう
- 236 ：Name_Not_Found：2023/10/22(日) 14:55:40.34 ID:???.net
- >>233
figmaでできるなら
figmaの開発者モードでどんなCSS吐き出してるか見ればよいのでは
- 237 ：Name_Not_Found：2023/10/26(木) 15:05:26.31 ID:???.net
- >>236
レスついてたの気がつきませんでした
開発者モードでは
border: 1px dashed var(--Grey, #666);
となっているだけで、破線と間隔指定の記載は見当たらないのです
- 238 ：Name_Not_Found：2023/10/26(木) 16:59:37.95 ID:???.net
- >>237
CSS Trick – Customized Dashed or Dotted Border
https://kovart.github.io/dashed-border-generator/
- 239 ：Name_Not_Found：2023/10/26(木) 17:11:43.99 ID:???.net
- >>238
わーーー、すごい！！ありがとうございます！！
border imgではなく
background-imageで作るんですね
ブックマークします
- 240 ：Name_Not_Found：2023/10/26(木) 21:29:14.47 ID:???.net
- SVG使うならダッシュストロークの長さを制御して順に描画するアニメーションも面白いよ
>>236,237
figmaの表示はcanvasにwebGLで描画してるぽいので、そのまま持ち込むのは難しそう
- 241 ：Name_Not_Found：2023/10/27(金) 22:33:26.73 ID:???.net
- 低レベルな質問をさせて下さい
拡張子を.htmlとして作成したファイルを、クロムなどで開くとブラウザ表示されると
思うのですが、タグで囲わず例えば「練習」とだけ書いても見られるんです
これはheadタグやbodyタグ内に「練習」と書いて見るのと
意味的には何が違うのでしょうか？
- 242 ：Name_Not_Found：2023/10/27(金) 23:54:17.45 ID:???.net
- >>241
ブラウザが補完してbody内のテキストとして扱われてる
そのファイルを開いて開発者ツールで要素の状態見れば納得できると思うよ
- 243 ：241：2023/10/28(土) 00:11:19.08 ID:???.net
- >>242
マジですか
目から鱗です
ありがとうございます
- 244 ：Name_Not_Found：2023/10/28(土) 13:11:07.93 ID:???.net
- 239です
>>238さんに教えていただいたサイトだと丸点線ボーダーが半分削れちゃっていましたが
svgを%指定、svgに点線指定すればインラインSVGをposition:absoluteで配置でレスポンシブ対応で丸点線ボーダーができました！
>>240さんのアニメーションできるってアドバイスも気づきのきっかけになりました 合わせてお礼申し上げます
- 245 ：Name_Not_Found：2023/11/01(水) 16:36:25.68 ID:???.net
- そろそろpopover API使ってみよかなって思ったら、これもまだFirefox対応してないのか…
:has()もそうだし、使えないままのプロパティ多いと非対応枠にポイッとされちゃうぞ
- 246 ：Name_Not_Found：2023/11/09(木) 19:38:40.24 ID:???.net
- デスクトップ版「Firefox」の開発が「Git」に一本化へ、「Mercurial」を諦める
https://forest.watch.impress.co.jp/docs/news/1545389.html
Mozillaは11月6日（米国時間）、デスクトップ版「Firefox」の開発を「Git」に一本化すると発表した。
- 247 ：Name_Not_Found：2023/11/12(日) 22:12:04.95 ID:???.net
- 知り合いから今運営しているHPがだいぶ古いからリニューアルしてって頼まれたんですが、見てみたらカラーミーで作ってあるショップでした。コーディングで作りたかったのですが、自分で作ったhtmlを既存サイトのトップに表示させる方法もわからず、かと言ってカラーミーのテンプレでは思い描くサイトにはほど遠く。自作サイトにカラーミーの商品ページだけリンクさせようかとも思ったけど、カラーミーのシステムである「マイアカウント」とかも厄介で…。皆さんだったらどうしますか？知り合いの制作会社では凄い勉強してカラーミー専用の言語も学んで0からショップをコーディングできるらしいですが、自分は正直そこまで理解出来そうにないです。
- 248 ：Name_Not_Found：2023/11/12(日) 22:49:39.45 ID:???.net
- Woocommerceでつくりなおす
- 249 ：Name_Not_Found：2023/11/12(日) 23:16:26.05 ID:???.net
- ありがとうございます。WPのプラグインですかね？良い知恵を頂き大変感謝しております。全く新しいカートという事ですね。既存のカラーミーショップに結構な会員登録してる購入者がいるのですが、移行してもらう他ないですかね〜(^-^;
- 250 ：Name_Not_Found：2023/11/13(月) 00:36:36.76 ID:???.net
- Tiktok LiteでPayPayやAmazonギフトなどに交換可能な4000円分のポイントをプレゼント中！
※既存Tiktokユーザーの方はTiktokアプリからログアウトしてアンインストールすればできる可能性があります。
1.SIMの入ったスマホ・タブレットを用意する
2.以下のTiktok Liteのサイトからアプリをダウンロード（ダウンロードだけでまだ起動しない)
https://lite.tiktok.com/t/ZSNfGY43n/
3.ダウンロード完了後、もう一度上記アドレスのリンクからｱﾌﾟﾘへ
4.アプリ内でTiktokで使用してない電話番号かメールアドレスから登禄
5.10日間連続チェックインで合計で4000円分のﾎﾟｲﾝﾄゲット
ポイントはPayPayやAmazonギフト券に交換可能です！
家族・友人に紹介したり、通常タスクをこなせば更にポイントを追加でゲットできます。
- 251 ：Name_Not_Found：2023/11/13(月) 01:22:42.20 ID:???.net
- カラーミーに既存客いるなら移動なんて絶対に無理
あとトップページを大幅に変えたらSEO下がる可能性もある
というよりも仕事で受けてるならカラーミーくらいやり倒せば？
このくらいできないならWordPressだろうが他のEC系カスタマイズも無理だろ
そもそもhtmlだけで何とかできそうと思ってはいけない
それぞれのシステムに合わせてページ毎のロジックの学習は必須
- 252 ：Name_Not_Found：2023/11/13(月) 02:40:40.49 ID:???.net
- >>250
プチ稼ぎだけど、やる気が出てきた
- 253 ：>>247：2023/11/13(月) 14:07:08.36 ID:NJab6j04.net
- 分かりましたぁ！勉強してきます！さーせんしたぁ！！！
- 254 ：Name_Not_Found：2023/11/13(月) 19:45:18.76 ID:???.net
- 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 %}
- 255 ：Name_Not_Found：2023/11/13(月) 20:08:06.35 ID:???.net
- ルビキチ死ね
- 256 ：Name_Not_Found：2023/11/13(月) 20:27:22.13 ID:???.net
- >>250
これはやるべきだな
- 257 ：Name_Not_Found：2023/11/13(月) 21:21:00.55 ID:???.net
- ありがとうございます。カラーミーが月3,000円でカート機能的に十二分なので、「どこでもカラーミー」って奴を用いて新規サイトにカートを貼り付けて対応しようかなと今思ってます。カートから従来のカラーミートップへ飛ばないようにする&新規TOPに飛ばしてみたいな…愚策ですかね…(T . T)
- 258 ：Name_Not_Found：2023/11/14(火) 16:21:52.40 ID:gKDaMAaV.net
- すみません！CSSでどうも上手くいかないので質問させてください
同じ位置に、複数のテキストを順番にフェードイン・フェードアウトさせて、
最後に画像をフェードインさせて固定させたいのですが、どうすれば良いでしょうか？
- 259 ：Name_Not_Found：2023/11/14(火) 16:26:38.06 ID:???.net
- jQueryやな
- 260 ：Name_Not_Found：2023/11/14(火) 16:45:21.54 ID:???.net
- 同じ位置に重ねてテキスト（複数）と画像を設定
一番最初
animation-duration:1s;
animation-delay: 0s;
二番目
animation-duration:1s;
animation-delay: 1s;
三番目
animation-duration:1s;
animation-delay: 2s;
ってanimation-delayの数値を変える
- 261 ：Name_Not_Found：2023/11/14(火) 17:09:52.76 ID:???.net
- >>259
CSSだけじゃ厳しいですか？
>>260
ありがとうございます！
よろしければですが、同位置に表示させる方法を教えていただけないでしょうか‥‥
なおレスポンシブなページなので相対的に指定しなければいけません
- 262 ：258：2023/11/14(火) 17:14:16.13 ID:???.net
- あ、ID出ないのですねこの板
私は>>258,261です。
テキストと図形を表示させる位置はdivのセンターです
- 263 ：Name_Not_Found：2023/11/14(火) 17:17:38.31 ID:???.net
- Gridで重ねてもいいし、position:absoluteで重ねてもいいよ
- 264 ：258：2023/11/14(火) 17:27:47.94 ID:???.net
- >>263
ヒントありがとうございます！やってみます
- 265 ：258：2023/11/14(火) 17:57:08.89 ID:???.net
- 動きと表示位置については、何とか出来ました！
ただ、#ffffffの文字なのに真っ白にならないんです
#ffffffになるのはほんの一瞬だからでしょうか？
アニメーションのopacity: 1になる間の秒数って設定出来ないでしょうか？
- 266 ：258：2023/11/14(火) 18:02:38.42 ID:???.net
- 何度も申し訳ありません。
ease-in-outやらcubic-bazie()やら色々試してみましたが、ダメでした
アニメのタイミングの問題ではないのかもしれません
画像はちゃんと真っ白になるんだけどなあ
難しいですね‥‥
- 267 ：Name_Not_Found：2023/11/14(火) 18:07:16.99 ID:???.net
- @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の設定しだいで計算通りにいきません
- 268 ：258：2023/11/14(火) 18:23:31.14 ID:???.net
- >>267
なんとこんな技が！！
本当にありがとうございます😭
自分もいつか他の人に恩返し出来るよう頑張ります！
- 269 ：Name_Not_Found：2023/11/15(水) 09:52:45.87 ID:???.net
- 他人に恩返しすんな
- 270 ：Name_Not_Found：2023/11/16(木) 02:02:58.87 ID:???.net
- 最後まで頭が残念な子だったな
- 271 ：Name_Not_Found：2023/11/29(水) 23:10:59.54 ID:???.net
- :local-linkって知ってた？
これ使えばメニューなどでcurrentの効果をCSSだけで簡単に作れるよね？
- 272 ：Name_Not_Found：2023/11/30(木) 02:26:37.44 ID:???.net
- ブラウザが対応すれば
- 273 ：Name_Not_Found：2023/12/02(土) 03:30:11.71 ID:???.net
- 他人に恩返し、良いじゃん
中国では大金持ちに助けてもらって自分が成功した場合、また他の貧しい者を救えって考えがある
受けた恩を本人へ返せるならごもっともだけど、世界規模で見たらとても良い考えだと思うよ
共産思想だのマルクス主義自体は好きじゃないけどね
- 274 ：Name_Not_Found：2023/12/02(土) 03:56:05.07 ID:???.net
- 半月前の書き込みにレスするな
- 275 ：Name_Not_Found：2023/12/11(月) 19:25:29.25 ID:???.net
- 本ではHTMLファイルのインデントがスペース2つになっているのですが、
自分で書くときはスペース4つでもいいですか？
- 276 ：Name_Not_Found：2023/12/11(月) 19:45:15.88 ID:???.net
- お好きにどうぞ
2つ、4つ、タブなど宗教戦争になるから自分の信じる道を。
- 277 ：Name_Not_Found：2023/12/11(月) 19:48:46.66 ID:???.net
- いいよ
- 278 ：Name_Not_Found：2023/12/11(月) 20:26:56.79 ID:???.net
- インデントしなくてもよい？
- 279 ：Name_Not_Found：2023/12/11(月) 20:51:37.57 ID:???.net
- よい
- 280 ：275：2023/12/11(月) 22:24:05.10 ID:???.net
- 分かりました
レスくれた方、ありがとうございました
- 281 ：Name_Not_Found：2023/12/12(火) 01:07:35.95 ID:???.net
- 俺は3派
- 282 ：Name_Not_Found：2023/12/12(火) 04:06:19.83 ID:???.net
- 最近のエディタはその辺の事情酌んで事後の扱いが自由になってるから助かる
俺はTab派
- 283 ：Name_Not_Found：2023/12/18(月) 12:41:23.37 ID:???.net
- HTMLの表示に何のフォントが使われているかを確認するためにWhatFontという
ブラウザの拡張を入れたのですが、フォントがserifやsan-serifの場合にそれが
実際に何のフォントなのかを確認する方法はあるでしょうか?
本来論理的なフォント名にしてそういう詳細にこだわらないというものなのでしょうが、
その他のフォントとの兼ね合いやOS等による違いを一応把握しておきたいのです
- 284 ：Name_Not_Found：2023/12/18(月) 12:46:29.15 ID:???.net
- chromeのdevツールのComputedの一番下にRendered fontsがあるじゃろ
- 285 ：Name_Not_Found：2023/12/18(月) 13:38:00.36 ID:???.net
- firefoxも開発ツールの右ペインにフォントタブがある
- 286 ：Name_Not_Found：2023/12/20(水) 00:23:13.63 ID:???.net
- Firefox121、規定で:has()有効になったね
- 287 ：Name_Not_Found：2023/12/21(木) 16:48:14.74 ID:???.net
- >>284 >>285
できました、どうもありがとうございます
- 288 ：Name_Not_Found：2023/12/22(金) 14:38:48.61 ID:???.net
- 画像にcssでfilter drop-shadowで影をつける際に
影だけ乗算を適用させることってできますか？
- 289 ：Name_Not_Found：2023/12/22(金) 21:40:19.52 ID:???.net
- drop-shadowとmix-blend-mode用に::beforeで同サイズのblockを画像の下に重ねるとか？
乗算ならberforeのblockにbackground-color: white;入れとくといいかも
- 290 ：Name_Not_Found：2023/12/22(金) 22:02:28.83 ID:???.net
- 画像が矩形じゃなくて透過で形通りの影を乗算にしたいとかなら無理じゃねーかな
- 291 ：Name_Not_Found：2023/12/22(金) 22:08:07.38 ID:???.net
- 矩形の画像ならdivの背景にしておいて、後ろに乗算で同サイズの擬似要素を追加すればできる
背景抜いた画像は擬似要素のcontentに同じ画像を指定すればいける
ただしサイズ調整が利かないのでレスポンシブ使用には厳しい
手間の割に効果は薄いので、自分なら乗算は使わずそれっぽく見える透明度に調整するかな
イラレとかだとデフォが乗算になってるだけで、デザイナーがどうしても乗算を要求するってケースは少ないし
- 292 ：Name_Not_Found：2023/12/23(土) 10:02:36.22 ID:???.net
- 288です
ありがとうございます！ おっしゃる通り矩形ではなく透明のあるpng画像です
擬似要素に同じ画像ってのは考え付かなかったです
それでできるか試してみます！
- 293 ：Name_Not_Found：2023/12/24(日) 15:43:39.93 ID:???.net
- filter dropshadowをかけた要素内でposition fixedが効かなくなる
バグ（？）に初めて出会った
SafariだけOKでChrome、Edge、FFがNG
Safariの挙動が正しくないのかな
- 294 ：Name_Not_Found：2023/12/24(日) 20:49:00.67 ID:???.net
- ホントだ
ChromeもFirefoxも、親にfilter使った途端に子がabsoluteの挙動になるね
これはWebkitの方が正しいんでない？
- 295 ：Name_Not_Found：2024/01/02(火) 01:34:59.85 ID:???.net
- >>293
https://developer.mozilla.org/ja/docs/Web/CSS/position
>固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって
>定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filterの
>何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、
>その場合は祖先が包含ブロックとしてふるまいます。
まあいつもの通りでSafariが悪い
- 296 ：Name_Not_Found：2024/01/02(火) 19:30:52.27 ID:???.net
- 開発側にとっては謎仕様やな
- 297 ：Name_Not_Found：2024/01/02(火) 22:07:47.20 ID:???.net
- 謎でもないと思うぞ
transformやらが親要素に効いてるのに子要素がfixedだと、親とは全く無関係な位置に配置されちゃうから
transformの効果をどう処理したらいいのか解釈があいまいになっちゃうだろ
そういうややこしいことが起こらないように、fixedさせたいならなるべくbody直下に置いておけという
仕様になってもそれは妥当なんじゃないか
- 298 ：Name_Not_Found：2024/01/03(水) 01:39:06.29 ID:???.net
- fixed要素はルート直下の設置がいいのは同意だけど、filterやtransformで動作が変わるってのは納得いかないな
Webkitの実装の方が直感的だと思うわ
まあその辺は散々議論された上でこの仕様なんだろうけど
- 299 ：Name_Not_Found：2024/01/03(水) 14:00:05.52 ID:???.net
- 初歩的な質問ですみません
画像の位置とテキストの位置ってどうやって調整するんですか？
どこかと揃えたいんじゃなくて位置を変えたいです。お願いします
- 300 ：Name_Not_Found：2024/01/03(水) 14:51:01.83 ID:???.net
- position:absolute;
で自由に配置しよう！
- 301 ：Name_Not_Found：2024/01/03(水) 16:42:47.31 ID:gZE/gVdw.net
- >>300できました！！！すごい！ありがとうございます！！本当に助かりました！
- 302 ：Name_Not_Found：2024/01/03(水) 17:00:34.36 ID:gZE/gVdw.net
- >>300
すみませんposition:absolute;ってテキストには使えないんですか？
- 303 ：Name_Not_Found：2024/01/03(水) 17:00:35.35 ID:gZE/gVdw.net
- >>300
すみませんposition:absolute;ってテキストには使えないんですか？
- 304 ：Name_Not_Found：2024/01/03(水) 17:18:42.76 ID:???.net
- >>303
divなりspanなり、タグでテキストを囲えばいい
- 305 ：Name_Not_Found：2024/01/03(水) 19:36:57.25 ID:gZE/gVdw.net
- 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
- 306 ：Name_Not_Found：2024/01/03(水) 19:41:14.33 ID:???.net
- ゴールがわからないから答えようがない
こういうサービスでコード張って
https://jsfiddle.net/
目指す形を画像で出そう
- 307 ：Name_Not_Found：2024/01/04(木) 03:17:55.09 ID:???.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;
}
で想定のデザインなのかな？
- 308 ：Name_Not_Found：2024/01/04(木) 08:01:31.68 ID:Zt3WiyEq.net
- >>306 ありがとうございます！
>>307 ハイ！
- 309 ：Name_Not_Found：2024/01/04(木) 08:47:05.98 ID:Zt3WiyEq.net
- >>307
やってみたらすべてのテキストが左上に集まりました…何が原因なのでしょうか？
- 310 ：Name_Not_Found：2024/01/04(木) 09:55:06.28 ID:???.net
- imgurに完成予想図、
ソースをjsFiddleにアップしないと伝わりにくいよ
https://imgur.com/
https://jsfiddle.net/
- 311 ：Name_Not_Found：2024/01/10(水) 16:38:53.35 ID:ubfcGzUb.net
- >>309です！ホームページ完成しました！本当にありがとうございます！
すみません、スレの趣旨とは外れてしまいますが、皆さんのおすすめのレンタルサーバーは何ですか？
学生であまりお金がないです。期間はとりあえず1年ほどを考えています。
- 312 ：Name_Not_Found：2024/01/10(水) 16:48:15.62 ID:ubfcGzUb.net
- 今考えているのはロリポップ、桜のレンタルサーバー、エックスサーバーです
- 313 ：Name_Not_Found：2024/01/10(水) 16:56:09.73 ID:???.net
- どんな内容で何が目的のページか知らんけどただの静的サイトならスターフリーみたいな無料のでいいんじゃないの
- 314 ：Name_Not_Found：2024/01/10(水) 17:45:43.71 ID:???.net
- 今はプロバイダに無料のHPスペースついてない？
- 315 ：Name_Not_Found：2024/01/10(水) 19:00:05.58 ID:ubfcGzUb.net
- >>313静的サイトではないです！スターフリー調べてみました！候補に入れます！ありがとうございます！
- 316 ：Name_Not_Found：2024/01/10(水) 19:01:40.32 ID:ubfcGzUb.net
- >>314そうなんですか？wi-fiはプロバイダですか？
- 317 ：Name_Not_Found：2024/01/10(水) 19:03:39.48 ID:???.net
- (哲学)
- 318 ：Name_Not_Found：2024/01/10(水) 19:50:47.99 ID:???.net
- 一度思うままやってみればいい
うまくいかないときに学んだことは役に立つ
- 319 ：Name_Not_Found：2024/01/10(水) 20:33:28.55 ID:ubfcGzUb.net
- >>318はい！ありがとうございます！とりあえずやってみます！
- 320 ：Name_Not_Found：2024/01/14(日) 22:24:22.97 ID:???.net
- ページ内の1つもセグメント(div)に、複数のタイトル表示要素があり、そのタイトル要素をposition: sticky; (top: 0px)で
スクロールしても画面上部に固定されるというのをしたいです。
その際にすでに上部にstickyで固定されているタイトル要素がある状態で、スクロールで次のsticky要素が上部に来たとき、もともと固定されていた要素はそのまま、その直下に固定させるようにしたいのですが、この場合は 2番目のsticky要素の top で位置を調整しないと無理でしょうか？
上記のタイトル要素をtop: 0px で設定すると、2番目3番目のタイトル要素は1番目に重なって表示されます。
1番目がすでに固定状態にあるときに、2番目はそれに重ならないようにするにはどんなやり方がありますか？
- 321 ：Name_Not_Found：2024/01/14(日) 22:37:36.47 ID:???.net
- 親のセグメントにpadfing-topで一つめのstickyの格納場所を作っておく
- 322 ：Name_Not_Found：2024/01/15(月) 12:53:28.54 ID:???.net
- >>321
ありがとうございます。その場合、padingの高さはsticky要素の高さに会わせないといけないということですよね？
stickt要素の高さが可変の場合はjavascriptで調整するしかないですか？
- 323 ：Name_Not_Found：2024/01/15(月) 12:58:45.43 ID:???.net
- yes
- 324 ：Name_Not_Found：2024/01/16(火) 14:15:21.74 ID:TEvwQnne.net
- ドロップダウンメニューですがパソコンで見る場合マウスを合わせると下にサブメニューが出るのですが
スマホだとタップしないとサブメニューが出ません
そのときタップ扱いとなるため一番上にリンクを置いているとその下のサブメニューは一瞬表示されるのですが選ぶ前にタップした一番上のメニューに飛んでしまいます
長押しすれば飛ばずにサブメニューが開いた状態のまま選ぶことが出来るのですが、そのまえにブラウザののサブメニューが表示されるので消す作業が必要になります
iosも似たような感じですがさらに操作が煩雑になります
なにかスマートに動作させる方法はあるでしょうか？
旨く説明できずすみません
- 325 ：Name_Not_Found：2024/01/16(火) 14:30:51.32 ID:???.net
- SP時とPC時で動作を変える
- 326 ：Name_Not_Found：2024/01/21(日) 22:37:00.94 ID:???.net
- Web上のテキストボックスへの入力時、iPhone Safariが勝手にズームしてしまうで、それを抑止するためviewportの"maximum-scale=1.0"を設定していますが、これだとAndroid Chromeでピンチアウトによる拡大ができません。
ピンチアウトによる拡大はできるようにしつつ、iPhone Safariの勝手ズームを止める方法ありますか？
フォントサイズが16px以上なら拡大しないそうなのですが、レイアウトの関係でそこまでフォントサイズは大きくはできません。
- 327 ：Name_Not_Found：2024/01/22(月) 02:29:59.55 ID:???.net
- 逆に、iPhone Safariの勝手ズームを止めたらダメ！
既定の動きを勝手に変えたらダメ！
それは想定外で使いにくいサイト
それを使っている人は、その機能があるから使いやすいわけだから。
嫌なら、その機能をオフにするか、ブラウザを変えるはず
- 328 ：Name_Not_Found：2024/01/29(月) 18:56:57.94 ID:???.net
- https://maaengineerhouse.com/archives/1551
ここのサイトを参考にページ遷移しない送信ページを作ったのですが全然ページ遷移してしまいます
action="./test"は自分のメールURLにしてますが他に何が駄目なのかわからない状態です
わかる方教えて頂きたいです
- 329 ：Name_Not_Found：2024/01/29(月) 19:42:56.25 ID:???.net
- >>328
遷移するということはevent.preventDefault();まで到達してないのでスクリプトかidが間違ってる
そのページのnew formData(form)は間違いnew FormData(form)が正しい
フォームデータを送信できるのはhttp/httpsに対してだけ
どうしてもメールで受け取りたいなら自分のサーバー側で転送するか、EmailJSやStmpJSといった外部のサービスを利用する
- 330 ：Name_Not_Found：2024/01/30(火) 09:11:26.25 ID:???.net
- 今レスポンシブデザインの静的サイトを作るとして一番有用なツールは何になりますか？
ひと昔前だとDWだったと思うのですが最近はあまりおすすめされていないようです
習得も難しいです
HTMLとCSSの知識は一通りあります
先達のお知恵を拝借したいです
- 331 ：Name_Not_Found：2024/01/30(火) 09:39:29.57 ID:???.net
- エディタ？vscodeでいいよ
- 332 ：Name_Not_Found：2024/01/30(火) 10:09:09.43 ID:???.net
- >>330
VSCode一択です
- 333 ：Name_Not_Found：2024/01/30(火) 12:41:34.11 ID:???.net
- >>329
ありがとうございました
- 334 ：Name_Not_Found：2024/01/30(火) 12:54:03.01 ID:???.net
- >>331,332
エディタではないです
もうちょっとビジュアル的に操作できるものが良いです
- 335 ：Name_Not_Found：2024/01/30(火) 13:34:06.76 ID:???.net
- ない
- 336 ：Name_Not_Found：2024/01/30(火) 13:41:52.20 ID:???.net
- ないことはないだろうよ
- 337 ：Name_Not_Found：2024/01/30(火) 13:54:29.64 ID:???.net
- dwでいいのでは
- 338 ：Name_Not_Found：2024/01/30(火) 13:56:34.84 ID:???.net
- DWマスターしてたら仕事でweb会社に入った時に早くに通用しますか？
- 339 ：Name_Not_Found：2024/01/30(火) 14:54:15.32 ID:???.net
- いいえ
- 340 ：Name_Not_Found：2024/01/30(火) 22:15:55.69 ID:???.net
- >>334
WYSIWYGエディタはもう息してないので、素直にVSCode使った方がいいよ
- 341 ：Name_Not_Found：2024/02/03(土) 21:31:04.51 ID:???.net
- DWマスターしたレベルで使えるなら他のも普通に使えよう
- 342 ：Name_Not_Found：2024/02/04(日) 02:34:58.87 ID:???.net
- メモ帳→GL→DW→VSCodeときたけどVSCode快適だわ
使う人少ないだろうけどVisualStudioも意外と使いやすい
- 343 ：Name_Not_Found：2024/02/06(火) 07:56:02.65 ID:???.net
- メモ帳, 秀丸, FrontPage, Expression Web, DW(3日), VSCode
だな
- 344 ：Name_Not_Found：2024/02/06(火) 10:03:43.94 ID:???.net
- VSCodeでDWみたいにパパっとテンプレート読み込んで使えますか？
そういうプラグインやテンプレートありますか？
- 345 ：Name_Not_Found：2024/02/06(火) 16:50:37.79 ID:???.net
- >>342
VisualStudioのCSSのフォーマッタが好き
- 346 ：Name_Not_Found：2024/02/07(水) 00:03:49.74 ID:???.net
- >>344
自分で試したらいい
無料なんだし紹介ページも腐るほどある
どうしても訊きたいときはVSCodeスレへどうぞ
- 347 ：Name_Not_Found：2024/02/07(水) 08:36:48.23 ID:???.net
- どんな質問にも優しく答えるスレなんだからさぁ。。
わざわざ自分で試したらいいとか間抜けなレスしてんなよ
仕事もできねえやつなんだろうなぁ
- 348 ：Name_Not_Found：2024/02/07(水) 13:56:17.45 ID:???.net
- これは充分優しいぞ
ググって死ねで充分だからな
- 349 ：Name_Not_Found：2024/02/07(水) 17:09:43.43 ID:???.net
- >>347
どんな質問もじゃねーよスレタイ読め
- 350 ：Name_Not_Found：2024/02/07(水) 17:10:57.19 ID:???.net
- うるせいわw
- 351 ：Name_Not_Found：2024/02/07(水) 17:11:58.90 ID:???.net
- うるせいわじゃねーよマヌケ
ちゃんと謝っとけ
- 352 ：Name_Not_Found：2024/02/07(水) 17:12:32.55 ID:???.net
- 日本社会にはもっと優しさ要素が必要だよな
自分でやれとか言ってる場合じゃねえわ
共助を忘れるなよ
- 353 ：Name_Not_Found：2024/02/07(水) 17:13:13.91 ID:???.net
- スレ違いを許す優しさは要らない
- 354 ：Name_Not_Found：2024/02/07(水) 17:19:21.30 ID:???.net
- 正義マンはお呼びじゃないです by スレ利用者一同
- 355 ：Name_Not_Found：2024/02/08(木) 02:56:37.72 ID:???.net
- 結局のところ、自分が使いたい機能とか使い勝手が自分に合ってるかどうかなんて
本人にしか分からないから、とりあえずVSCodeが良さそうだってことが分かったのなら
ここでスレ違いな質問するよりも、自分でググって気になる機能拡張を片っ端から試した方が
回答を待つよりも速いだろう
- 356 ：Name_Not_Found：2024/02/08(木) 14:58:15.90 ID:sr5GdnpV.net
- 初心者です。
会社のcmsにHTMLを書いてページの調整をしているのですが、テーブルの罫線が付けられません。
表に黒い線(1重線)を引くのでいいのですが、薄い罫線として表示されてしまいます。
コードを書き、cmsのフォーマットの上では黒い罫線として表示されるのですが、プレビューや実装段階になると薄くなってしまいます。
(色の変更もフォーマット上では可能でした)
フォーマット的にHTMLのみ使えるのですが、CMSに邪魔されない(？)やり方はありますでしょうか？
<table border="2" table width="1550" style="height:560px; border-collapse:collapse margin;auto: border-color: black">
- 357 ：Name_Not_Found：2024/02/08(木) 15:50:19.81 ID:???.net
- >>356
書き方間違ってる
<table border="2" table width="1550" style=“height:560px; border-collapse:collapse; margin:auto; border-color:black;”>
これでやって効かなかった箇所に!importantを付ける
border-color:black!important;
てな具合に
- 358 ：Name_Not_Found：2024/02/08(木) 16:00:16.97 ID:???.net
- border:solid 1px #000;
- 359 ：Name_Not_Found：2024/02/08(木) 16:46:38.52 ID:sr5GdnpV.net
- >>357
>>358
回答ありです。
(セミコロンあたりは画像からのテキスト抽出故の誤変換でした)
cms上で
< table border="border: 1px solid #000!important" width="1550" style="height: 560px;">
(更新すると微妙に簡略化されます...)
の様に入れて見ましたが、薄い罫線のままでした。
border-color:black!important
も同様です。
何故だ...
- 360 ：Name_Not_Found：2024/02/08(木) 18:26:16.97 ID:???.net
- tableではなくthやtdにborderを設定しなさい
- 361 ：Name_Not_Found：2024/02/08(木) 19:12:47.47 ID:???.net
- デベロッパーツールで実際にあたってるスタイルは？
目に見えてる薄い線とやらが実はborderですらないかもしれん
- 362 ：Name_Not_Found：2024/02/09(金) 02:09:34.03 ID:???.net
- ただtableに外枠つけるなら<table width="1550" style="border:1px solid; height:560px;">でいいだろうけど
thtdがどうなってるかどうしたいのかがわからんと何も答えられん
- 363 ：Name_Not_Found：2024/02/09(金) 16:26:33.29 ID:CyOGOND3.net
- >>360
ありがとうございます！
tdの方に設定したら無事反映されました！
- 364 ：Name_Not_Found：2024/02/09(金) 21:42:35.43 ID:???.net
- 質問です。
stylebotでどのようにcssを書けばバナーとオンライブを非表示にできますか？
Chrome（64 ビット）Stylebot(拡張機能)
campaign.showroom-live.com/akb48_sr/#/
バナー（SHOWROOMバレンタイン2024キャンペーン for AKB48）
www.showroom-live.com/r/akb48_official
オンライブ
- 365 ：Name_Not_Found：2024/02/09(金) 23:50:18.01 ID:???.net
- それってバナーのリンク先URLを貼ってんの？
その書き方じゃどのページでどこを非表示にしたいのか分からんのだが、勝手にエスパーした上で質問するけど
それって、SHOWROOMのトップページの最上部にある各専用ページへのバナーのスライダー全体と
同じくトップページちょい下にある「#オンライブ」全体を非表示にしたいって話？
それともAKBに限定してバナー等を非表示にしたいって話？
それとも全く別の話？
- 366 ：Name_Not_Found：2024/02/10(土) 08:06:40.11 ID:???.net
- >>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を書けば良いでしょうか。
（ページを再読込するとミュートから始まったりので）
- 367 ：Name_Not_Found：2024/02/10(土) 08:09:26.57 ID:???.net
- cssにそんな機能はない
- 368 ：Name_Not_Found：2024/02/10(土) 14:47:32.48 ID:???.net
- 漏れは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
- 369 ：Name_Not_Found：2024/02/10(土) 14:59:34.83 ID:???.net
- こいついつもいるな
- 370 ：Name_Not_Found：2024/02/10(土) 15:14:25.72 ID:???.net
- ルビーキチガイはちゃんとルビーオンレイルズといつもの表記しろ
NGすり抜けるな
- 371 ：Name_Not_Found：2024/02/11(日) 04:03:12.28 ID:???.net
- 画面幅768~1000とかでスクロールバー出すのってどうなんだろう
iPadは良いけどPCで画面幅縮小した時とかのUIが良くないから避けるべき？
- 372 ：Name_Not_Found：2024/02/11(日) 06:12:59.17 ID:???.net
- ユーザー自身が拡縮する分は
こちらの想定外でいいと思う
- 373 ：371：2024/02/11(日) 14:01:26.32 ID:???.net
- サンクス
- 374 ：Name_Not_Found：2024/02/18(日) 14:35:58.17 ID:???.net
- 人の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;
}
}
- 375 ：Name_Not_Found：2024/02/18(日) 15:17:37.73 ID:???.net
- Aは同じセレクターの状態違いだとわかる
Bはもうsassの意味がないレベル
- 376 ：Name_Not_Found：2024/02/18(日) 15:21:09.49 ID:???.net
- ありがとうございます
SP作ってからPC版を作成ってクセが
個々にメディアクエリを書くより楽なもので
- 377 ：Name_Not_Found：2024/02/18(日) 15:32:08.15 ID:???.net
- メディアクエリをmixin化するのだ
ひとつセレクタがあったら
.hoge{
@include mixin.media(sp){
}
@include mixin.media(tab){
}
@include mixin.media(pc){
}
}
みたいにセットでコピペするようにすればいい
エディタのスニペットや独自emmetルールでショートカットで出力できるようにしておくとなおよし
- 378 ：Name_Not_Found：2024/02/18(日) 15:34:59.92 ID:???.net
- なるほどー
mixinを使うと元を修正するだけで済むから汎用性がますんですね
アドバイス助かります
- 379 ：Name_Not_Found：2024/02/18(日) 16:54:05.41 ID:???.net
- Scssは横幅毎にファイル分けてだけどおかしなやり方だったんかなぁ
- 380 ：Name_Not_Found：2024/02/18(日) 17:22:25.13 ID:???.net
- >>379
見通しがよければなんでもいいと思うけど
同じセレクターというか同じものを指す記述が何カ所にも登場するとそれだけでclass名の変更があったときなどに置き換える箇所が増えて変更に弱くなるよね
これは&使わない教にも言える
他方、親セレクタひとつ変えれば子孫や状態変化すべて変えられるような変更に強いコードは
hoge__fuga みたいなHTML上のセレクタそのもので全文検索しても見つからないので
hoge の中から探すか、ソースマップ必須になる
どちらが保守性が高いと言えるかはプロジェクトの規模やチームの特性によって変わりうる
- 381 ：Name_Not_Found：2024/02/18(日) 18:41:34.89 ID:???.net
- >>380
なるほど変更修正も考えて分かりやすくって事ですね
- 382 ：Name_Not_Found：2024/02/29(木) 18:15:32.28 ID:???.net
- 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要素と重ねる方法以外ありますか？
- 383 ：Name_Not_Found：2024/02/29(木) 18:40:08.35 ID:???.net
- >>382
hogeの中にインナーを作る
z-indexが インナー>hoge::afterになるようにする
というか影つけるだけなら疑似要素なんかいらなくて
hogeにbox-shadowであかんの
- 384 ：Name_Not_Found：2024/02/29(木) 18:44:44.39 ID:???.net
- ありがとうございます
after要素が透明ありのpngなんで、filterなんです
どうもz-indexへの愛と理解が足りてない。。
- 385 ：Name_Not_Found：2024/02/29(木) 18:48:52.34 ID:???.net
- 疑似要素にcontentでpngを入れてるなら素直にimgタグ書くべき
背景画像がpngという意味ならdrop-shadowきかない
- 386 ：Name_Not_Found：2024/02/29(木) 18:51:45.63 ID:???.net
- 背景パターンなのでpngをBGに使っています
filter drop-shadow自体は効くようですが
chromeで見ただけなので効かないのもあるんですか
検証します ありがとうございます
- 387 ：Name_Not_Found：2024/02/29(木) 19:11:48.32 ID:???.net
- お騒がせしました
after要素に問題なくdrop-shadowが付いてました
なにも書き換えてないと思うのですが
- 388 ：Name_Not_Found：2024/03/10(日) 12:29:31.95 ID:vNGHzsx+.net
- 3DCGのweb表示をしたいと考えています。
最初はThree.jsでやってたのですがGPU使用率が多く、試行錯誤して
今はmodel-viewerで試行錯誤しています。
model-viewerはモデルが動いてないとGPU使用率も0になるのでいいかとおもったのですが、
表示して暫く触らないと勝手にポインタが出てきてモデルを左右に振ってみせて、
動かせることを主張してきます。これのせいでGPU使用率が上がってしまいます。
この、勝手にポインタが出てくる仕様をOFFにできないでしょうか。
https://008.server-test.space/
- 389 ：Name_Not_Found：2024/03/10(日) 17:49:56.50 ID:???.net
- ドキュメント読んでみたけど、そんな設定無さげ
- 390 ：Name_Not_Found：2024/03/10(日) 22:18:22.81 ID:???.net
- >>388
interaction-prompt="none"でいいんじゃねえの？
https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-interactionPrompt
念のためググってみたら日本語情報も出てきたし
https://mawasu-blog.com/modelviewer_staging_cameras_api/
- 391 ：Name_Not_Found：2024/03/11(月) 00:12:36.42 ID:???.net
- >>389
ありがとうございます。お手数をお掛け頂いて感謝であります。
>>390
ワオ！すごい！まさに！そのブログもいくつか目を通したのですがそこは読み飛ばしてました。
感激であります！！！！１
- 392 ：Name_Not_Found：2024/04/05(金) 23:07:58.30 ID:???.net
- <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で色をつけるにはどのようなセレクタにしてやればいいんですか？
- 393 ：Name_Not_Found：2024/04/06(土) 00:06:24.81 ID:???.net
- >>392
.test tr > :first-child
- 394 ：Name_Not_Found：2024/04/06(土) 00:16:44.98 ID:???.net
- tr th:first-child,
tr tf:first-child{
}
- 395 ：Name_Not_Found：2024/04/06(土) 01:55:06.41 ID:???.net
- .test tr > *:first-child { }
外野だけど今までこうしてた
*省略していいんだ>>393さんくす
- 396 ：Name_Not_Found：2024/04/10(水) 22:37:09.78 ID:KnIusri3.net
- プロゲートというものをやってる初心者ですが
cssのactiveというコマンドで
position relative
top 7px
boxshadow none
と指定するものがあるんですが
これだと上に動くのか下に動くのかわかりにくくて
それならbottom7pxと何が違うのかと考えたりしてるんですが、どう考えたらいいですか？
質問わかりずらかったらすみません
お願いします
- 397 ：Name_Not_Found：2024/04/10(水) 22:53:50.13 ID:???.net
- ×コマンド→○疑似クラス
position: relative; ボックスの元の位置を基準に
top: 7px; 「上から」7pxにボックスを配置
bottom: 7px; 「下から」7pxにボックスを配置
- 398 ：Name_Not_Found：2024/04/10(水) 23:02:35.99 ID:KnIusri3.net
- >>397
ありがとうごさいます
擬似クラスですね間違えました
topは上から下に
bottomは下から上に動くんでしょうか？
- 399 ：Name_Not_Found：2024/04/10(水) 23:04:45.22 ID:???.net
- 動きじゃなくて距離
上辺を基準に7px離すならtop
- 400 ：Name_Not_Found：2024/04/11(木) 00:24:50.12 ID:???.net
- とりま、これでも読んだ方が早い
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はそれぞれボックスの内側方向が正の向きって憶えとけば
方向は間違わないかと
- 401 ：Name_Not_Found：2024/04/11(木) 00:46:41.61 ID:hmIzBk5l.net
- >>399
わかりました
ありがとうございます
>>400
理解しました
読んで勉強します
ありがとうございました
- 402 ：Name_Not_Found：2024/04/11(木) 07:57:46.10 ID:jTR8gzXc.net
- プロゲートの教材で画像のようにtop wrapperを作り背景を指定して、その中にcontainerをいれて中に
h要素、p要素をいれていくものがあるんですが
top wrapperの中にh要素やp要素を直接いれてはいけないんでしょうか？
containerという箱を間に挟む意味を教えて欲しいです
よろしくお願いいたします
- 403 ：Name_Not_Found：2024/04/11(木) 08:00:41.45 ID:???.net
- 画像
- 404 ：Name_Not_Found：2024/04/11(木) 08:07:48.13 ID:jTR8gzXc.net
- すみません忘れてました
https://i.imgur.com/8myqxfS.jpg
- 405 ：Name_Not_Found：2024/04/11(木) 08:18:31.89 ID:???.net
- wrapperがページの外枠そのものでcontainerがいわゆるコンテンツ幅ってやつや
wrapperとcontainerにそれぞれ別にpaddingなどが指定できるし
containerの幅を制限して中央寄せなどよくある
gridレイアウトなど使えばコンテナなしでもできたりするが難易度高いから今は言われた通り覚えたまえ
- 406 ：Name_Not_Found：2024/04/11(木) 10:49:36.60 ID:jFdHc6MY.net
- すみません、質問させてください！
分かりにくかったら申し訳ございませんが、例えば
<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行目以降はインデントされないので目的が達成されません
どういった方法が良いか、アイデア教えていただけないでしょうか？
- 407 ：Name_Not_Found：2024/04/11(木) 11:01:59.41 ID:9INmCpGN.net
- >>405
ありがとうございます
わかりました
今回貼った画像のようにwrapper部分に背景がなかったとしても、wrapperの中にcontainerをいれたほうがいいですか？
- 408 ：Name_Not_Found：2024/04/11(木) 11:36:34.62 ID:???.net
- >>407
考え方が逆
「wrapperの中にcontainerは必要か」
ではなく
「今はcontainerのスタイルの設定しているのにwrapperは必要か」
を疑問視するべき
いるいらないはそのうち勝手に判断できるようになる
- 409 ：Name_Not_Found：2024/04/11(木) 12:14:48.80 ID:9INmCpGN.net
- >>408
言い方を間違えました
言いたいことはそれでした
wrapperの必要性がちゃんとわかってなくて
背景がある場合はわかりやすいんですけど
とりあえず今はページの外枠とコンテンツ幅と覚えておきます
ありがとうございました
- 410 ：Name_Not_Found：2024/04/11(木) 12:42:32.26 ID:???.net
- >>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/
というわけで上記を応用すれば、お好みの位置で色々と調整できるはず
- 411 ：Name_Not_Found：2024/04/11(木) 13:04:26.27 ID:???.net
- >>410
詳しくありがとうございます！
しっかりと確認して実装してみます
本当にありがとうございます
- 412 ：Name_Not_Found：2024/04/12(金) 12:31:41.18 ID:UPNbcAUb.net
- 画像のようにh2の下に50px距離をあけたい場合
h2のpadding-bottomなのか
h2のmargin-bottomなのか
iconのpadding-topなのか
iconのmargin-bottomなのか
どれが適切なんでしょうか？
その辺がよく分かってなくて、なんとなく感覚で選んでいます
よろしくお願いします
https://i.imgur.com/eLzRvvs.jpg
- 413 ：Name_Not_Found：2024/04/12(金) 12:34:32.92 ID:UPNbcAUb.net
- >>412
一部文章間違えました
5行目iconのmargin-bottomなのかではなく
iconのmargin-topなのか、です
- 414 ：Name_Not_Found：2024/04/12(金) 12:48:30.99 ID:???.net
- 内側の余白はpadding
外側の間隔はmargin
縦並び要素のmarginが上か下かは宗教戦争になるから好きにしよう
- 415 ：Name_Not_Found：2024/04/12(金) 20:07:04.69 ID:rpIsvdQA.net
- >>414
ありがとうございます
- 416 ：Name_Not_Found：2024/04/12(金) 21:06:42.91 ID:rpIsvdQA.net
- 質問お願いします
この写真のようなサイトを作るという課題で
正解のコードが
heightが120の
paddingが40でした
ただ写真を見ると高さの合計が200でした
なのでheightを200にしてその内側の余白として
padding40と書いたのですが間違いでした
よく意味がわからないので教えてください
よろしくお願いします
https://i.imgur.com/pLNq31X.jpg
- 417 ：Name_Not_Found：2024/04/12(金) 21:12:07.81 ID:rpIsvdQA.net
- heightを200にして
paddingを40にすると
footerの高さが高くなってしまいます
- 418 ：Name_Not_Found：2024/04/12(金) 22:31:57.01 ID:???.net
- >>416
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing
- 419 ：Name_Not_Found：2024/04/13(土) 12:17:22.88 ID:prybyI30.net
- >>418
ありがとうございます
要素の構造についてまだちゃんと理解できていないから分からないと思うので読んで勉強してみます
- 420 ：Name_Not_Found：2024/04/16(火) 18:59:48.33 ID:???.net
- >>416
プロゲ懐かしいな、まだあったんだ
俺もwebはここからスタートして今では昔勉強したイタリア料理で年収2000万超えたよ
観光客相手に高単価なメニュー出してる
- 421 ：Name_Not_Found：2024/04/17(水) 01:35:18.35 ID:???.net
- 大量のGと職場が一緒の飲食は無理
- 422 ：Name_Not_Found：2024/04/18(木) 17:45:18.69 ID:???.net
- 質問させてください
下記URL先の画像のように作りたいです
画像を左右に設置することはできましたが、
緑色が左右の画像の間に左右の画像目いっぱいに幅を設定して置けませんでした
緑色の幅をフレキシブルにしたいですがそちらもできません…
どのようにすればよいのか教えて頂けませんでしょうか
宜しくお願いしますm(_ _)m
https://imepic.jp/20240418/637200
- 423 ：Name_Not_Found：2024/04/18(木) 17:48:48.43 ID:???.net
- display:flexを使えばいいよ
とりあえずググってみよう
- 424 ：Name_Not_Found：2024/04/18(木) 17:57:41.43 ID:???.net
- >>422
flex使えばいけるね
そういうのは専門学校の宿題か何か？
良かったら教えて
課題とかでそういうのが出てるの？
- 425 ：Name_Not_Found：2024/04/18(木) 18:24:24.43 ID:???.net
- レスありがとうございます、試してみたらできました！
フレキシブルを使った自由課題でした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;
}
- 426 ：Name_Not_Found：2024/04/18(木) 18:40:13.44 ID:???.net
- 並び順なのでfloat指定いらないよ
- 427 ：Name_Not_Found：2024/04/18(木) 19:34:52.11 ID:???.net
- >>425
自由課題か・・宿題とか課題とか嫌いだったな
高校生でそんなのやるわけないか、専門学校？
ちなみにオレンジボックスは共通の書き方にしてコード減らせるからやってみ
flex使えばfloatも使う必要無いよ、昔はfloatだったからそれが模範解答で出てきたら時代と教材がかなり古いと思う
- 428 ：Name_Not_Found：2024/04/18(木) 19:35:27.90 ID:???.net
- ひねくれてgridでやろうぜ
https://jsfiddle.net/15ufnjgk/
- 429 ：Name_Not_Found：2024/04/18(木) 19:39:17.33 ID:???.net
- grid警察だ！そこを動くな！
- 430 ：Name_Not_Found：2024/04/18(木) 21:02:16.18 ID:???.net
- gridは最終手段って感じ
これを使わなくて済むようなデザイン組んでほしいって思う
- 431 ：Name_Not_Found：2024/04/18(木) 21:35:37.87 ID:???.net
- gridはいいんだけど
orderやgrid-areaで順番をゴチャゴチャ変えないと成立しないスマホデザインとかはうんこ
スクリーンリーダーなどアクセシビリティ的にも良くない
- 432 ：Name_Not_Found：2024/04/20(土) 20:14:49.08 ID:???.net
- 以下のようなテーブルがあります。
実際にはこの三行を1グループとして複数グループが下に続いています。
┌┬┐ ここで、左側の行にカーソルをのせた時に
│├┤ ハイライトするようにしたいです。
│├┤ この時、カーソルを載せている右列だけでなく
└┴┘ 左の列もハイライトするようにするには
どうすればよいですか？
今はbootstrapを使っているのですが、
1行目のときしか左列がハイライトされなくて困っています。
- 433 ：Name_Not_Found：2024/04/20(土) 20:18:18.41 ID:???.net
- jqueryのほうが早いな
cssでやるのはちとつらいのでは？
- 434 ：Name_Not_Found：2024/04/21(日) 01:17:42.06 ID:???.net
- その3行ごとにtbodyで囲ってtbody:hoverでできそうではあるが、別の問題が発生しそう
- 435 ：Name_Not_Found：2024/04/21(日) 01:39:40.72 ID:???.net
- 質問です
個人経営の店ですが取引業者のサービスでホームページ作りました
業者のサービスはWordPressベースでｓｓｌ対応です
ただurlが業者の名前＆ディレクトリ以下に無機的な数字が続きビミョーです
お名前.comでドメインを用意してurl転送サービスでフレーム転送にしました
これでOKと思いきや設定したurlでホームページを表示してもssl対応になりません
個人情報を扱わないサイトですがセキュリティソフトが信用できないサイトとか警告が出ます
http → https のフレーム転送でssl対応にする方法は有りますか？
- 436 ：Name_Not_Found：2024/04/21(日) 04:05:19.54 ID:???.net
- 過去にやったの調べたら>>434と同じでtbody:hover{}してた
css的に問題はなかったしjQueryでtbodyを抽出しても問題なかった
でもこういうtbodyの乱用はどうなんだろうとは思うし、将来いきなりNGになるかもしれんよね
- 437 ：Name_Not_Found：2024/04/23(火) 18:19:08.99 ID:???.net
- 質問です
親要素にdisplay:flexを設定して
子要素1は左に配置
子要素2は右に配置したいです
どのように書けば実現できるでしょうか？
- 438 ：Name_Not_Found：2024/04/23(火) 18:23:49.00 ID:???.net
- <div class="parent">
<div class="child01">子1</div>
<div class="child02">子2</div>
</div>
.parent{
display:flex;
justify-content:space-between;
}
- 439 ：Name_Not_Found：2024/04/23(火) 18:40:47.01 ID:???.net
- >>438
ありがとうございます
その書き方は出でこなかったので勉強になりました
結果ですが子要素1と子要素2のサイズが違うこと？で子要素2の配置が真ん中やや右に表示されてしまいました
- 440 ：Name_Not_Found：2024/04/23(火) 19:00:41.67 ID:???.net
- 他のcssなければ子要素は同じサイズのはず
（子要素内の文字数一緒なので）
子要素2が真ん中より右ってのは他のCSSが影響してると思うよ
justify-content:space-between;
は子要素を均等に配置するなので
parentの左右にそれぞれピッタリ配置されてるはず
- 441 ：Name_Not_Found：2024/04/25(木) 16:35:17.89 ID:???.net
- JS使わなくてもよくなるのね
実装はよ！
Help us invent CSS Grid Level 3, aka “Masonry” layout
https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/
- 442 ：Name_Not_Found：2024/04/26(金) 22:09:29.47 ID:???.net
- ある WEB サイトに入力する場所が２つあるとして、其処に指定の値を入力した状態でそのサイトを開くには、どの様に書けば良いのでしょうか？
例えば ttp://www.aaa.com/bbb/ というサイトだとして、其処に、foo と bar が入力された状態でブラウザで開きたいのですが…
ttp://www.aaa.com/bbb/ だけを実行すると、入力欄は空のままで開かれますよね。
- 443 ：Name_Not_Found：2024/04/26(金) 22:38:58.37 ID:???.net
- >>442
サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
- 444 ：Name_Not_Found：2024/04/26(金) 22:48:01.15 ID:???.net
- >>443
> サイト側でクエリなりなんなりを反映する仕組みがないと無理やで
それを確かめるには、どんな事をすればいいのですか…？
- 445 ：Name_Not_Found：2024/04/26(金) 22:55:14.72 ID:???.net
- 自分でURLから何か受け取れるように実装したもの以外は基本的にありません
- 446 ：Name_Not_Found：2024/04/26(金) 23:23:36.71 ID:???.net
- chromeの何かのアドオンでそれができたような
- 447 ：Name_Not_Found：2024/04/27(土) 01:12:27.09 ID:???.net
- >>446
> chromeの何かのアドオンでそれができたような
サイト側で受け取る準備がされてなくても、入力した状態で開けるのですか？
それは欲しい…
- 448 ：Name_Not_Found：2024/04/27(土) 01:48:04.72 ID:???.net
- フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
- 449 ：Name_Not_Found：2024/04/27(土) 02:26:48.94 ID:???.net
- >>448
> フォームに初期値が入ってて欲しい、というシンプルな話では無いんだよね？
いやそれが希望です。
あるサイトに入力する場所があり、其処に指定した文字列を入力した状態でブラウザで開きたい、と…
例えば www.google.co.jp を実行すると検索する語句が入力待ちになりますが、
その欄に、検索する語句が入力された状態で開きたい、と。
グーグルなら、「ttps://www.google.co.jp/search?q=あいうえお」とやると、
「あいうえお」を入力して検索実行した後の状態で開きますよね。
別に実行後の状態でも、入力しただけで実行待ちの状態でもどちらでもいいのですが…
- 450 ：Name_Not_Found：2024/04/27(土) 02:40:46.56 ID:???.net
- それはgoogleがURLパラメータを受け取れるようにしてるからって話が>>443
そういう仕様で作られてないなら拡張機能で対応するかフォーム自動入力ツール使えばいい
自分でHTML書く話じゃないならスレ違いだから詳しくは該当スレでどうぞ
- 451 ：Name_Not_Found：2024/04/27(土) 03:57:51.25 ID:???.net
- 『html input 初期値』でぐぐって出てくる話じゃダメなん？
textだったらvalueに書いとく、てやつ
- 452 ：Name_Not_Found：2024/04/27(土) 04:04:58.92 ID:???.net
- 自分のサイトじゃなくて他人のサイトか
- 453 ：Name_Not_Found：2024/04/27(土) 16:47:28.19 ID:???.net
- 具体的に何のフォームに何を入力しておきたいの？
- 454 ：Name_Not_Found：2024/04/27(土) 20:14:56.34 ID:???.net
- 対象フォームに値を入力するJS書いてブックマークレットにしとけばいいんじゃね
- 455 ：Name_Not_Found：2024/04/27(土) 22:38:17.64 ID:???.net
- 掲示板に同じ書き込みしまくって荒らすんじゃないか？
- 456 ：Name_Not_Found：2024/04/28(日) 12:52:06.37 ID:VdqyuX+M.net
- <div class="test" style="background:#ff00ff">てすと</div>
のようにclassとstyleを混ぜて書くのはだめなんですか？
背景色だけperlやphpなどで入力された値にしたいので
- 457 ：Name_Not_Found：2024/04/28(日) 13:24:15.30 ID:???.net
- ダメなんてことはない
お好きにどうぞ
- 458 ：Name_Not_Found：2024/04/28(日) 13:41:30.39 ID:???.net
- >>456
ダメではないが古い
jsやphpならcss変数に値を格納できるから自分ならそれ使うな
- 459 ：Name_Not_Found：2024/04/28(日) 18:58:20.80 ID:???.net
- ロジック内で直接指定してあると後から面倒なことになるしなー
テーマみたいに値が決まってるならクラス切り替えた方がいいと思う
- 460 ：Name_Not_Found：2024/04/29(月) 03:15:20.52 ID:???.net
- <div class="test magenta">てすと</div>
- 461 ：Name_Not_Found：2024/05/01(水) 09:04:37.45 ID:???.net
- >>456
むしろそれでいい
- 462 ：Name_Not_Found：2024/05/18(土) 16:23:14.67 ID:+V0JB20F.net
- Bootstrao使っている人に質問です。フォントサイズが小さくないですか？
何も適用していない、1remの状態（fs-6）でも小さいし、
フォントサイズが16pxのクラスを作って適用しても小さく感じます
- 463 ： 警備員[Lv.1][新芽初]：2024/05/18(土) 20:19:28.97 ID:???.net
- 小さいと思ったこと無い
本家でサンプルDLして表示させても小さいっていうなら
ブラウザやOSの設定か、感覚の問題じゃね？
- 464 ：Name_Not_Found：2024/05/19(日) 00:26:49.17 ID:???.net
- 本家のサンプルは小さくないです。
なぜかCDNで読み込んで自サイトで見ると小さく感じます。
font-size-baseは16px（デフォルト）のままなんですが・・・
- 465 ：Name_Not_Found：2024/05/19(日) 01:18:17.15 ID:???.net
- 小さく感じるとか言われても分からんのだが
当該部分は何pxで表示されてんの？
開発者ツールで見りゃ分かると思うんだが
- 466 ：Name_Not_Found：2024/05/19(日) 09:43:23.97 ID:???.net
- >>465
16pxです。つまり変更していません。
それで、bootstrapのscssを読み込んで、
$font-size-base: 1.1rem;
にしたら本家と同じような文字サイズになります
これって私の環境なんですかね？
文字サイズが小さくなる環境ってあるのだろうか・・・
- 467 ：Name_Not_Found：2024/05/19(日) 09:53:36.75 ID:???.net
- だから開発者ツールで何pxなんだよ
- 468 ：Name_Not_Found：2024/05/19(日) 11:08:50.65 ID:???.net
- 変更してないので1remのままです。
- 469 ：Name_Not_Found：2024/05/19(日) 11:26:07.48 ID:???.net
- pxが算出されるだろ それを書けや
- 470 ：Name_Not_Found：2024/05/19(日) 13:05:18.18 ID:???.net
- >>468
1remは何pxで表示されてんの？って話
Chromeの開発者ツールでフォントが小さい部分のタグを選択した状態で
「計算済み」タブにある「Text」の下の「font-size」はpxで表示されてると思うけど
どうなってる？
- 471 ：Name_Not_Found：2024/05/19(日) 14:26:52.38 ID:???.net
- 前から疑問なのだが、この界隈に一定数いる
絶対に開発ツール開きたくないマンって何なん？
デバッグ時の最初の選択肢であり、実際一番有効な方法だと思うのだが
- 472 ：Name_Not_Found：2024/05/19(日) 16:10:56.39 ID:???.net
- 問題ある部分に何が効いて不具合が出てるのか
開発者ツール使えば、ある程度分かるのにねぇ
- 473 ：Name_Not_Found：2024/05/19(日) 19:41:15.52 ID:???.net
- >>470
16pxです。不具合は出ていません
最初に書きましたが、CDNを読み込んでも小さいです
- 474 ：Name_Not_Found：2024/05/19(日) 20:12:35.50 ID:???.net
- ページのズーム倍率下がってたりして
- 475 ：Name_Not_Found：2024/05/19(日) 20:30:02.99 ID:???.net
- あとは
ブラウザごとで違いが出るか？
スマホ、タブレット等ではどうなる？
フォントは何を使ってるのか？
そもそもbootstrapを使ったサイトは自作？テンプレート？
- 476 ：：2024/05/19(日) 21:02:23.53 ID:???.net
- >>474
俺もそれ書こうかと思ったけど、まさかね
- 477 ：Name_Not_Found：2024/05/19(日) 21:46:37.63 ID:???.net
- >>474
普通に100％です。
>>475
違いはでません。フォントも設定してないです。
Viteは使っていますが、vscodeでHTML作成して
CDNでbootstrapを読み込んだら、小さく感じました。
ここまで質問して思ったのですが、
自分の目の問題かもしれません。
ChatGPTやcopilotをよく使っているので、
あの文字サイズに慣れてしまったわけで、
他のサイトの文字を小さく感じるのかもしれません
- 478 ：Name_Not_Found：2024/05/19(日) 21:54:46.25 ID:???.net
- だから皆さん開発者ツールで何pxかって尋ねてるのでしょ
昔はブラウザのフォントサイズは14pxにしてたのだけど、
個人のHPを立ち上げた時は16px基準にしたらしばらく字が大きく感じ過ぎてなw
- 479 ：Name_Not_Found：2024/05/19(日) 22:07:49.90 ID:???.net
- >>477
だったら本家のサンプルファイルは同じ16pxなのに
そっちは小さくない（>>464）っていうのが意味不明
- 480 ：Name_Not_Found：2024/05/19(日) 22:25:37.96 ID:???.net
- >>479
Zの知能舐めすぎ
>>477なら、まともな知能があれば最初に行う、サンプルと自サイトの窓を横に並べて見比べる事もしてないんだろ
そういえば最近の連中はスマホから入るから複数の窓を同時に使うという感覚が無いと聞いたような気も
- 481 ：Name_Not_Found：2024/05/20(月) 07:50:46.02 ID:???.net
- >>480
デュアルディスプレイなので、見比べてはいます。
さすが全ての情報を開示して説明できないです。
自分が期待した答えは「◯◯だと小さくなる」
でしたが、まさか当たり前（HTMLやコンソールの確認など）
についても四の五の言われると思いませんでした
質問に答える気がなく、単にいじめてるだけじゃないですか
- 482 ：Name_Not_Found：2024/05/20(月) 07:52:40.77 ID:???.net
- お前らなんてAIに劣るんだから
AIにできない過去の経験を語るぐらいしかないのに
よくもなぁ、チクチク小姑みたいに突っ込んでくるのな
どうせこの後も難癖つけるんだろ？やってることが古いんだよ
- 483 ：Name_Not_Found：2024/05/20(月) 08:22:30.50 ID:???.net
- >>481
コードとかスクショとか、再現するための情報を出さずに「気がする」なんて曖昧なことしか書かなけりゃ、そりゃ基本的なとこからの確認になるわな
- 484 ：Name_Not_Found：2024/05/20(月) 08:25:52.37 ID:???.net
- >>481
求めている答えが得られない理由は「質問の仕方が悪い」「情報が足りない」「態度が悪い」のどれかよ
- 485 ：Name_Not_Found：2024/05/20(月) 08:27:20.65 ID:???.net
- >>482
じゃあさっくり答えてやれよ
できるもんならな
- 486 ：Name_Not_Found：2024/05/20(月) 08:30:03.36 ID:???.net
- 以前ここで聞いたら回りくどいもったいぶった教え方で本質的なことは隠して学習しろみたいな爺さんばかりで
ChatGPTに聞いたら爺さんのやり方の1000倍スマートなのを完璧に示してくれたことあったわ
- 487 ：Name_Not_Found：2024/05/20(月) 08:55:22.68 ID:???.net
- >>481
なら最初からその証拠を上げれば済んだ話だろ
つまり、2画面同時に並べて、両方とも開発者ツール開いた状態で、フォントの大きさが違うと主張する部分を選択して、Styleが見えてる状態で、スクショ
これがあればこれまでの全てのやりとりは必要なかったろ
そしてこれが出来ないんだから、出来ない程度の超初心者と見なされて当然
お前の根底に「僕が間違ってるわけがない」の超初心者あるあるがある点からも
本当にブラウザ/OS/フレームワーク/CDNのどれかにバグがあるのなら、
当たり前だが第三者が確認出来る証拠と再現方法を示す必要がある
だからまともな奴なら最初から上記スクショが出てくるんだよ
> 自分の目の問題かもしれません。
ああこいつは駄目だ、もう二度と相手にしないようにしよう、とリアルなら思われるよ
逆にこういうクズが無罪放免されてしまうから質が上がらなくて酷いままなのがネットだが
まあお前は(ビジネスに必要な、正しい意味での)コミュ障って奴だ
何を伝えれば相手に通じるか、まるで分かってないというね
最低限これだけ示せば誤解の恐れがない、というところまでは伝える必要があって、
言及してない部分は各自が想定する一番確率の高いもので補完されて当然
マヌケな事を書いてるからマヌケ扱いされてるのは至極妥当
話が進まないのはお前の問題
ああ一応言っておくと、
> 自分が期待した答えは「◯◯だと小さくなる」
俺らが想定してるのは、「お前の○○が間違ってるんだよ馬鹿タレ、小さくはならねえよボケ」だ
だから俺らはお前のどこが間違ってるか、間違い探しをしてて、
だからお前は「絶対に僕は間違ってないもん！！！」と俺らにも納得せざるを得ない証拠を出す必要があるわけ
そしてこれがないとバグレポートも出来ないだろ
お前は何から何まで、本当に何も分かってない
だから話が進まない
- 488 ：Name_Not_Found：2024/05/20(月) 09:48:37.06 ID:???.net
- その具体例を思い出せない爺さん
- 489 ：Name_Not_Found：2024/05/20(月) 11:43:52.65 ID:???.net
- box-sizing: border-box;はheightをpxで指定すると効くけど
height:auto;にしたら効きませんでした。
どうすればheight:autoでも効きますか？
- 490 ：Name_Not_Found：2024/05/20(月) 11:51:22.83 ID:???.net
- 効いてるよ
- 491 ：Name_Not_Found：2024/05/20(月) 16:04:56.44 ID:???.net
- widthやheightってautoにするとborder-boxは無視されるんじゃなかったっけ？
- 492 ：Name_Not_Found：2024/05/20(月) 17:50:15.31 ID:???.net
- されないが
- 493 ：Name_Not_Found：2024/05/20(月) 21:59:13.05 ID:???.net
- 試してみれば分かるがされる
- 494 ：Name_Not_Found：2024/05/20(月) 23:35:02.52 ID:???.net
- なにをもってborder-boxが無視されると言ってるの
border-boxの仕様のほうを勘違いしてんじゃないの
- 495 ：Name_Not_Found：2024/05/21(火) 00:38:39.02 ID:???.net
- 確認したけど効いてるね
見た目は同じになるはずだけど、getComputedStyleを使ってheight/widthを取得するとちゃんとborderの分の差が出るよ
- 496 ：Name_Not_Found：2024/05/21(火) 01:15:11.17 ID:???.net
- 開発ツールでは無視されてるように見えるだけってこと？
- 497 ：Name_Not_Found：2024/05/21(火) 08:08:52.71 ID:???.net
- 見えない
- 498 ：Name_Not_Found：2024/05/21(火) 08:39:10.30 ID:???.net
- 「box-sizing: border-boxが効いていない」と思うのであれば、なにか認識が食い違っているのではなかろうか
box-sizingとheight: autoに対する自分の認識はこう
box-sizing: border-box;
height: auto;
border: 10px solid red;
こうスタイルを指定した要素は「子要素がボーダーの内側に収まる」ようになるので
計算済みのheightは「子要素によって計算される高さ+20px(上下のボーダー)」
になる
box-sizing: content-boxにすると「子要素がボーダーの内側に収まる」のは変わらないけど「ボーダーが高さの計算に入らなくなる」のでその分小さくなる
- 499 ：Name_Not_Found：2024/05/21(火) 08:59:36.33 ID:???.net
- 「height:autoだと子要素がボーダーの内側に収まるように計算される」のはbox-sizingの指定では変わらんので、画面上の見た目も開発者ツールの計算済みタブの図で表示される数値も変わらん
これが「効いていない」ように見えているだけではないかな……
- 500 ：Name_Not_Found：2024/05/21(火) 11:21:04.55 ID:???.net
- 質問です
以下のコードにpic1を上下中央揃い、
テキスト１が改行してheightが広くなっても画像が上下中央揃いになるようにしたいです
どのようにすれば上手くできるでしょうか？
[HTML]
<div id="main">
<div id="acmenu">
<dl>
<img src="pic1">
<dt>テキスト１</dt>
<dd>
本文１
</dd>
</dl>
<dl>
<dt>テキスト２</dt>
<dd>
本文２
</dd>
</dl>
<dl>
<dt>テキスト３</dt>
<dd>
本文３
</dd>
</dl>
</div>
</div>
- 501 ：Name_Not_Found：2024/05/21(火) 11:22:55.10 ID:???.net
- [CSS]
#main {
width: 500px;
margin: 80px auto;
position: relative;
#acmenu {
dl {
border-top: 1px solid gray;
counter-increment: question;
margin: 0;
&:last-of-type {
border-bottom: 1px solid gray;
}
dt {
cursor: pointer;
font-size: 1rem;
line-height: 1;
position: relative;
display: block;
padding: 15px 8px 12px 64px;
&.active {
font-weight: bold;
}
}
dd {
display: none;
margin-bottom: 16px;
padding: 12px 24px 16px;
background: #f7f7f9;
border: 1px solid gray;
border-radius: 8px;
}}}}
- 502 ：Name_Not_Found：2024/05/21(火) 11:28:51.29 ID:???.net
- >>500
><dl>
><img src="pic1">
><dt>テキスト１</dt>
dl直下にimgはダメ
- 503 ：Name_Not_Found：2024/05/21(火) 11:43:27.91 ID:???.net
- >>502
ありがとうございます、そうだったんですね！
どのような感じで書けばよいのでしょうか…？
- 504 ：Name_Not_Found：2024/05/21(火) 13:26:20.98 ID:???.net
- >>502
ありがとうございます、解決しました！
- 505 ：Name_Not_Found：2024/05/21(火) 15:28:13.23 ID:???.net
- >>498-499
横からだけど、なるほど分からん、と一瞬思ったが
height:autoだと、content-boxでもborder-boxと同じく「ボーダーの内側に収まる」という前提でheightが計算されているから
content-boxのコンテンツ領域の数値はborder-boxの数値と同じになるって考えたら理解できた（何言ってるのか分かりにくいとは思うが）
というか開発者ツールでマウスオーバーで表示されるフローティングボックスだけ見ちゃってて、計算済みタブの方でheightに差が出てるの見落としてたわ
解説ありがとう、勉強になりました
- 506 ：Name_Not_Found：2024/05/23(木) 14:52:59.88 ID:pd9pga9F.net
- （１）beforeはaaa:beforeのように:が１つの場合で書いてあったりaaa::beforeのように
:が２つで書いてあったりするところがあるけど違いはありますか？
（２）style="aaa:before"のようにstyleの中でbeforeは使えますか？
- 507 ：Name_Not_Found：2024/05/23(木) 15:00:35.12 ID:???.net
- >>506
1 違いはない :hoverなどの疑似クラスと区別するため推奨される記法
2 できない
- 508 ：Name_Not_Found：2024/05/23(木) 15:02:18.54 ID:???.net
- >>506
コロンひとつでも問題なく動いちゃうけど
擬似要素は二つ書くことになってます
htmlのstyleでは擬似要素を書くことができません
- 509 ：Name_Not_Found：2024/05/23(木) 15:17:31.11 ID:???.net
- 擬似要素のコロン1つはCSS2.1までの互換のために残ってるだけなので使わない方がいい
- 510 ：Name_Not_Found：2024/05/28(火) 01:22:52.49 ID:???.net
- WindowsPC版のChromeの拡張機能のstylusで、youtube画面の不用な機能の非表示などをカスタマイズしています。
ミニプレイヤーを無効にしたく、以下の定義の追加でミニプレイヤーのボタンは非表示にできたのですが、
#movie_player .ytp-right-controls button.ytp-miniplayer-button {
display: none !important;
}
タッチパネルが付いてるPCだと、動画再生エリアをタッチしながら下へスワイプすると、
ミニプレイヤーに切り替わってしまう事が判りました。
この動作を無効化したいのですが、方法がありましたら教えてください。
所々、style="touch-action: 〜"のような属性がページ内にあるのでこの辺りが怪しいと思ってるのですが、
どうしたらいいかまでに至ってません。
- 511 ：Name_Not_Found：2024/05/29(水) 06:53:07.62 ID:???.net
- ここはWeb制作板です
- 512 ：Name_Not_Found：2024/05/29(水) 13:43:44.80 ID:???.net
- 回答しないつもりなら黙っとればええのに
ChatGPT4o曰くCSSの適用だけでは不十分でTampermonkeyでjavascriptも使えだとさ
- 513 ：Name_Not_Found：2024/05/29(水) 13:47:56.88 ID:???.net
- >>512
板違い消えろ
- 514 ：Name_Not_Found：2024/05/29(水) 13:51:48.83 ID:???.net
- 板違いなのかな？どこで質問したらいいですかね
CSSとかに詳しそうだったのこの板ぐらいしか見当たらんのだけど
- 515 ：Name_Not_Found：2024/05/29(水) 13:52:27.76 ID:???.net
- <div><a></a><div><div></div></div></div>
となってる塊全体を指定するにはどうしたらいい?
- 516 ：Name_Not_Found：2024/05/29(水) 13:55:23.82 ID:???.net
- 割とこの話って外人のサイトでも大した情報出てなくて困ってるんだよね
>>1読んでこのスレなら大丈夫そうかなーと思ったらまさか自治厨に煽られるとは
ちょっとでも仕方ねー調べてやっか的な心は芽生えなかったかね？
- 517 ：Name_Not_Found：2024/05/29(水) 14:01:25.70 ID:???.net
- >>515
一番最初のdivを指定すればいいんじゃない？
classつけたほうがわかりやすいね！
- 518 ：Name_Not_Found：2024/05/29(水) 14:07:15.10 ID:???.net
- 他にも関係ないdivはいっぱいあって
この並びになってるとこだけ抜き出したい
- 519 ：Name_Not_Found：2024/05/29(水) 14:07:34.73 ID:???.net
- >>518
classをつけよう
- 520 ：Name_Not_Found：2024/05/29(水) 14:09:39.06 ID:???.net
- 他人が書いてるのでclassは付けられません
- 521 ：Name_Not_Found：2024/05/29(水) 14:10:49.38 ID:???.net
- パターンマッチを知らんと見えるが
このパターンになっていたらというような条件はCSSでは書けない
残念だったね
- 522 ：Name_Not_Found：2024/05/29(水) 14:10:57.48 ID:???.net
- 状況としてはスクレイピングしていて、特定のデータを抜き出す為のセレクタの書き方
- 523 ：Name_Not_Found：2024/05/29(水) 14:13:31.96 ID:???.net
- >>522
板違い消えろ
- 524 ：Name_Not_Found：2024/05/29(水) 14:16:37.05 ID:???.net
- 脊髄反射すぎね？100歩譲って今日だけおかしなのが暴れてるとしようか
- 525 ：Name_Not_Found：2024/05/29(水) 14:19:22.27 ID:eZz6URnG.net
- <div class="aaa">aaa1</div>
<div class="aaa">aaa2</div>
<div class="aaa">aaa3</div>
このように子要素はないけど
class="aaa"の２番目（つまりaaa2）の部分だけbackground-color:#ffff00とするには
どのようにセレクタを指定すればいいんですか？
- 526 ：Name_Not_Found：2024/05/29(水) 14:20:42.80 ID:???.net
- おさらいしよう
ローカルルール
>扱う話題
> HTML、CSSなどのサイト制作の技術
> JavaScript、VBScriptなどのクライアントサイドプログラム
> Webサイトの運営および管理についての情報交換・雑談
> 2chでは荒らし依頼はできません
>板違いな話題
> ネット上の事象の観察→『ネットwatch』
> レンタルサーバー、ドメイン→『レンタル鯖』
> HPの宣伝、ネットするだけで儲かる話等→『宣伝掲示板』
> CGI、Perl、PHPなどのサーバサイドプログラミング→『WebProg』
> Flash制作→『FLASH・動画』
> アフィリエイト、ネット広告の話題→『Web収入』
> アダルトサイトの制作関連→『ウェブマスター』(21禁)
このスレ
>ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
>類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
- 527 ：Name_Not_Found：2024/05/29(水) 14:24:11.98 ID:???.net
- >>525
何番目のタグとか大雑把に指定できたと思う
0オリジンならdiv[1]とかそんなだったかと(うろ覚え)
- 528 ：Name_Not_Found：2024/05/29(水) 14:28:01.57 ID:???.net
- 能力を超えるものは板違い
- 529 ：Name_Not_Found：2024/05/29(水) 14:32:59.50 ID:???.net
- まあ匿名じゃ所詮このレベルだよな
本当に解決したいなら技術系SNSで聞いた方がいいよ
- 530 ：Name_Not_Found：2024/05/29(水) 14:35:42.28 ID:???.net
- chat-GPTにまず聞け
このスレでちゃんと回答が出てくる耳タコ質問系なら一発で解決する場合が多い
- 531 ：Name_Not_Found：2024/05/29(水) 15:02:15.53 ID:???.net
- chat-GPTにレガシーサイトのソースを完全書き換えさせようと試みたけどまだ無理だわ
- 532 ：Name_Not_Found：2024/05/29(水) 15:25:47.21 ID:???.net
- 最初はパターンマッチだったんだよな
まだpythonよりperlが主流な頃
bs4がいけてるよ、findよりもselectがいけてるよ、という流れなのに、
また原始的な方法に戻らないといけない
- 533 ：Name_Not_Found：2024/05/29(水) 16:50:27.16 ID:???.net
- ほんとゴミ人間は板違いすら認識できないのは、同じ人間ではないわな
猿がキーボード叩いてそうw
- 534 ：Name_Not_Found：2024/05/29(水) 16:55:12.72 ID:???.net
- 相手が知らなくて自分が知ってることを回答して気持ちよくなりたいんだから、
知らないこと聞くような奴は来るんじゃない
- 535 ：Name_Not_Found：2024/05/29(水) 17:04:16.85 ID:???.net
- >>525
class名ごとにカウントできる仕組みにアップデートまだー
- 536 ：Name_Not_Found：2024/05/29(水) 17:10:28.08 ID:???.net
- >>534
知らないんじゃなくてnthセレクタじゃ無理だからjs使わないとできないんだぞ池沼
- 537 ：Name_Not_Found：2024/05/29(水) 17:53:52.12 ID:???.net
- >>525
aaaクラスしかないのなら
.aaa:nth-of-type(2) {
background-color:#ffff00;
}
で問題ない
- 538 ：Name_Not_Found：2024/05/29(水) 18:10:41.31 ID:???.net
- >>515
バカみたいだけど
div:not([class]):has(> a) {
}
これで一応選択はできるよ
- 539 ：Name_Not_Found：2024/05/29(水) 18:29:51.22 ID:???.net
- これいいな
同じ<a>を何度も選択しないのがいい
これで荒く拾っておいて、あとは条件に合わないのを弾けば十分使える
1階層まではパターンが書けるのか
- 540 ：Name_Not_Found：2024/05/29(水) 18:50:10.33 ID:???.net
- div:has(> a + div)
これで完全なものが得られた
- 541 ：Name_Not_Found：2024/05/29(水) 19:37:36.95 ID:???.net
- >div:not([class]):has(> a) {
>div:has(> a + div)
これに限った話じゃないけど1週間でも1ヶ月でも後で読んで何のことか判るものなの？
セレクタってもっと記述的に書けませんか？
- 542 ：Name_Not_Found：2024/05/29(水) 19:40:27.90 ID:???.net
- 保守性を考えるならclassを振るべき
classがいじれないとかいうバカ案件にはこういう邪道をやるしかない
- 543 ：Name_Not_Found：2024/05/29(水) 19:43:29.93 ID:???.net
- コメントでも書いとけ
- 544 ：Name_Not_Found：2024/05/29(水) 23:09:23.75 ID:???.net
- :has()なんて使ったことなくて、CSSでは無理と発狂しちゃうおじいちゃんは、
div:has(> a + div) なんて何してるか全く分からないだろうな
- 545 ：Name_Not_Found：2024/05/29(水) 23:11:28.55 ID:???.net
- 何故か質問する側の厨房が親切な回答者の威を借りてマウントするスレ
- 546 ：Name_Not_Found：2024/05/29(水) 23:14:44.82 ID:???.net
- :is :not :where :hasなんてスレで頻出なのに
>>544は何が悔しくていじけているのかわからない
- 547 ：Name_Not_Found：2024/05/29(水) 23:19:02.91 ID:???.net
- ほぞがw
あり得ないほどほぞが噛まれているwww
しかも速攻で
CSSは無駄に奥が深いので、迂闊に無理とか言っちゃ駄目だぞ
- 548 ：Name_Not_Found：2024/05/29(水) 23:29:58.95 ID:???.net
- 板違いを指摘された子が荒らしに進化したパターンかな
- 549 ：Name_Not_Found：2024/05/29(水) 23:31:16.15 ID:???.net
- たまに発生するキチガイやルビキチをNGするためにこの板にもワッチョイあればいいのに
- 550 ：Name_Not_Found：2024/05/29(水) 23:35:12.82 ID:???.net
- 板違いだと思っちゃう子は基準レベル以下なんよな
絡まない方がいいよ
- 551 ：Name_Not_Found：2024/05/29(水) 23:37:22.97 ID:???.net
- >>514
まだ冷静
>>516
キレはじめ
- 552 ：Name_Not_Found：2024/05/29(水) 23:38:19.52 ID:???.net
- >>550
もうキレちゃってなぜか質問キッズなのに回答へのお礼もなく荒らすことしか頭にない
- 553 ：Name_Not_Found：2024/05/29(水) 23:42:00.88 ID:???.net
- 次から次へとほぞが
なかなかの良問だったみたいだな
- 554 ：Name_Not_Found：2024/05/29(水) 23:45:41.49 ID:???.net
- 真面目な話
更新でコンテンツ増減したり順番が変わったりラッパーが増えたりするのに
意地でもclass付けずにパズルみたいな疑似クラス使ってるオナニーコードはたまにある
- 555 ：Name_Not_Found：2024/05/30(木) 01:53:59.28 ID:???.net
- ブロック対策には有効
- 556 ：Name_Not_Found：2024/05/30(木) 06:45:36.63 ID:???.net
- >>554
そういうの引き継ぎたくないわー
絶対やだわー
- 557 ： 警備員[Lv.39]：2024/06/03(月) 19:29:43.52 ID:???.net
- 育成
- 558 ：Name_Not_Found：2024/06/05(水) 13:53:13.15 ID:???.net
- 専ブラのsikiのCSS触ってみてるけどワケワカメ
- 559 ：Name_Not_Found：2024/06/05(水) 14:19:00.19 ID:???.net
- 今どきCSSを手で書くってどういう時?
- 560 ：Name_Not_Found：2024/06/05(水) 20:33:04.75 ID:???.net
- chatGPTにでも書かせるの？
- 561 ：Name_Not_Found：2024/06/06(木) 12:03:07.13 ID:???.net
- コピペで済むことしかやらないんじゃね
- 562 ：Name_Not_Found：2024/06/06(木) 20:45:14.87 ID:???.net
- 手打ちしちゃだめなの…？入力補助機能使うっていう意味？
- 563 ：Name_Not_Found：2024/06/07(金) 16:08:33.73 ID:???.net
- Ruby on Rails 7 のデフォルトのCSS フレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
CSSが分からない香具師は、
Bootstrap, Bulma, Tailwind などのレスポンシブ・フレームワークを使えばよい
- 564 ：Name_Not_Found：2024/06/07(金) 16:27:51.12 ID:???.net
- ルビキチしね
- 565 ：Name_Not_Found：2024/06/08(土) 00:59:40.17 ID:???.net
- >>564
今時、透明あぼんしてないの？
- 566 ：Name_Not_Found：2024/06/08(土) 01:26:18.02 ID:???.net
- あぼんしててもしね
- 567 ：Name_Not_Found：2024/06/09(日) 00:16:31.26 ID:???.net
- <style>
#test{
display:flex;
list-style:none;
align-items:center;
}
</style>
<ul id="test">
<li>aaa</li>
<li>bbb</li>
<li>aaa<br>bbb<br>ccc</li>
</ul>
これだと全てのliが縦の中央揃えになってしまうけど
最初のliだけ縦の中央揃えにするにはどうやればいいんですか？
ulのalign-items:centerを削除して
#test li:nth-child(1){align-items:center}とやっても効かなかったです
- 568 ：Name_Not_Found：2024/06/09(日) 00:39:57.45 ID:???.net
- >>567
#test li:first-child { align-self: center; }
- 569 ：Name_Not_Found：2024/06/09(日) 08:31:24.31 ID:cfJ6pxYN.net
- >>568
ありがとうございます
- 570 ：Name_Not_Found：2024/06/16(日) 21:59:14.87 ID:???.net
- インラインの CSS を上書きするにはどうしたら？
- 571 ：Name_Not_Found：2024/06/16(日) 22:06:05.82 ID:???.net
- !important
- 572 ：Name_Not_Found：2024/06/16(日) 22:13:54.23 ID:???.net
- ゴメン。
インラインに既に !important が入ってる場合です。
- 573 ：Name_Not_Found：2024/06/16(日) 22:39:49.54 ID:???.net
- インラインのimportantは詳細度が最高なので同じくインラインでしか上書きできない
jsで削除するくらいしかない
- 574 ：Name_Not_Found：2024/06/16(日) 22:59:48.91 ID:???.net
- ありがと。
そうか、CMS 側でもう決め打ちってことなのね。
- 575 ：Name_Not_Found：2024/06/17(月) 02:12:51.62 ID:???.net
- <thead>には絶対に<th>を使わなくてはいけないという規格等はありますか？
- 576 ：Name_Not_Found：2024/06/17(月) 03:59:09.64 ID:???.net
- 無い
- 577 ：Name_Not_Found：2024/06/17(月) 06:49:56.24 ID:???.net
- ありがとうございます安心しました
なるべく早くtabl;eタグ使わずに済むように精進します
- 578 ：Name_Not_Found：2024/06/17(月) 09:50:04.83 ID:???.net
- そういうの『html 入れ子』でググれば出てくるよー
- 579 ：Name_Not_Found：2024/06/17(月) 16:21:59.87 ID:???.net
- https://jsfiddle.net/m84csfn3/
↑こんな感じでsubgridを使ってレイアウトしたのですが、
3つ目のcard-item内に注釈を追加することになった場合、
ベストな方法を教えてください。
grid-row: span 3;を4にすると注釈がないカードに無駄な空きスペースが生まれるのを回避したいです。
- 580 ：Name_Not_Found：2024/06/17(月) 17:01:16.89 ID:???.net
- >>578
ありがとうございます
親子関係で問題が無ければ親孫に影響しないという考えでいいのでしょうか
今回の件では<thead><tbody><tfoot>の子は<tr>であり、<tr>の子は<th><td>だから<thead>に<td>を使っても影響なし
- 581 ：Name_Not_Found：2024/06/17(月) 17:43:18.30 ID:???.net
- >>579
card-item内はgridじゃなくflexにしたら？
- 582 ：Name_Not_Found：2024/06/17(月) 18:02:03.36 ID:???.net
- >>581
ありがとうございます
注釈をabsoluteにして〜とかいろいろ試してみたのですが
flexのほうが楽そうですね
- 583 ：Name_Not_Found：2024/06/17(月) 21:16:14.74 ID:???.net
- >>580
そうだよー
- 584 ：Name_Not_Found：2024/06/17(月) 22:25:32.04 ID:???.net
- >>579
gridでやるならsubgrid使わずに:has()でgrid-template-rowsの指定を分けるかなー
https://jsfiddle.net/a2x0rLfu/
まーでもflex使う方が楽ね
- 585 ：Name_Not_Found：2024/06/18(火) 02:52:54.93 ID:???.net
- >>583
ありがとうございます！
- 586 ：Name_Not_Found：2024/06/18(火) 13:24:01.41 ID:???.net
- そういう注釈の入れ方はデザイン的にどうよは別問題かな？ｗ
- 587 ：Name_Not_Found：2024/06/19(水) 03:10:47.57 ID:???.net
- そういうデザイン指定なら再現するしかないさー
- 588 ：Name_Not_Found：2024/06/19(水) 23:35:47.89 ID:???.net
- ゆいまーるさー
- 589 ：Name_Not_Found：2024/06/20(木) 15:02:17.10 ID:???.net
- nth-chlidのof構文っていつから使えてたの？
便利ね
- 590 ：Name_Not_Found：2024/06/20(木) 15:31:49.35 ID:???.net
- >>589
去年の5月にfirefoxが対応してモダンブラウザ埋まった
- 591 ：Name_Not_Found：2024/06/20(木) 15:33:20.01 ID:???.net
- ありがとう！
地味に嬉しい
- 592 ：Name_Not_Found：2024/06/21(金) 03:10:38.05 ID:???.net
- <br>を連続で使ってはいけない理由って結局何なんでしょうか
空白行用のcss？がわからなくて、ここ3行空けたいなとか写真の間に説明入れたい時とか多用しちゃってます
今の所不具合出てないのですがやめたほうが良いのでしょうか
- 593 ：Name_Not_Found：2024/06/21(金) 09:21:15.53 ID:NqoZZWrQ.net
- 段落の行間をあけるとかだったらcssでやるべきだけれど
単純にｎ空白行をというのなら使っちゃ駄目ということは無い
ただしレスポンシブでその空白行が見苦しくならないことが前提で
- 594 ：Name_Not_Found：2024/06/21(金) 09:21:38.77 ID:???.net
- 使っていけない理由は何もありません
1行分丸々空いちゃうのでデザイン的に使い勝手が悪いというだけで
- 595 ：Name_Not_Found：2024/06/21(金) 10:17:44.56 ID:???.net
- 使ってはいけないというのはどこの情報？
- 596 ：Name_Not_Found：2024/06/21(金) 10:45:22.27 ID:???.net
- 文書は文書、空白は空白
文書の一部である改行は段落を変えることであって空白にすべきではない
文書をコピペするとなぜか改行が3つついているとかクソでしかない
- 597 ：Name_Not_Found：2024/06/21(金) 12:11:51.12 ID:???.net
- とりま、サルワカでも読んどけ
HTMLで改行する方法：brとpタグの使い分け方は？
ttps://saruwakakun.com/html-css/reference/br
- 598 ：Name_Not_Found：2024/06/21(金) 12:42:33.89 ID:???.net
- >>592
空行を入れるなら段落が変わるのでp要素でマークアップすべき、という論理構造上の問題。
https://momdo.github.io/html/text-level-semantics.html#the-br-element
- 599 ：Name_Not_Found：2024/06/21(金) 21:51:44.76 ID:???.net
- display:gridに移行しろって話もあるけどまだflexとinline-boxで戦えるの？
- 600 ：Name_Not_Found：2024/06/21(金) 22:07:08.92 ID:???.net
- >>599
inline-boxはこれ以上、流行るも流行らないもないし覚えるならflexだけで十分
gridは、一部が未だ押してるけど、おそらくこのまま広まらないまま終わるのかな
- 601 ：Name_Not_Found：2024/06/21(金) 22:25:53.02 ID:???.net
- subgridで覚醒したぞ
便利すぎる
- 602 ：Name_Not_Found：2024/06/21(金) 23:32:31.35 ID:???.net
- 移行じゃなくて追加やね
お手本は取っつき悪いけど、実際はきっちりtemplate指定しなくても使えるし、flexと同じぐらい便利
覚えないでいるのはもったいない
- 603 ：Name_Not_Found：2024/06/23(日) 19:57:17.98 ID:???.net
- 終了までお早めに。
https://i.imgur.com/7YUfB6L.jpg
- 604 ：Name_Not_Found：2024/06/24(月) 00:36:29.30 ID:???.net
- flexboxで
画像 見出し
テキスト
のような形からスマホだと
見出し
画像
テキスト
のようになるデザインがよくあるのですが、
この場合、当方はスマホ用の見出しを用意してdisplay:noneで出し分けしているのですが、
同じhtmlが二つになるため、良くないのではと思っています。
皆さんはどのようにしているのでしょうか？
- 605 ：Name_Not_Found：2024/06/24(月) 00:39:09.32 ID:???.net
- >>604
grid-template-areasでPCとSPの配置変える
なんならSPはdisplay無指定（block）でPCだけgridにすることもある
- 606 ：Name_Not_Found：2024/06/24(月) 00:40:47.94 ID:6zRY5YVb.net
- ↑わかりにくいかもですが、
見出しとテキストは同じdivに入っているようなイメージです
- 607 ：Name_Not_Found：2024/06/24(月) 00:43:52.19 ID:???.net
- >>605
早速ありがとうございます！
gridはまだ学習していないので想定にありませんでした…
これを機にgridにも触れてみたいと思います
- 608 ：Name_Not_Found：2024/06/24(月) 09:35:38.20 ID:???.net
- flexでもorderプロパティ使えばPCとSPでコンテンツの配置変更は簡単よ
- 609 ：Name_Not_Found：2024/06/24(月) 10:00:56.32 ID:???.net
- gridが意味不明すぎてorderで長く頑張ってたが
二重になるよりはマシとはいえレスポンシブに対応するためだけのグルーピングdivが必要になったりしてたので
いまはgridやな
- 610 ：Name_Not_Found：2024/06/24(月) 10:37:18.50 ID:???.net
- flex=VHS
grid=ベータ
- 611 ：Name_Not_Found：2024/06/24(月) 10:45:25.21 ID:???.net
- dvdやろ
- 612 ：Name_Not_Found：2024/06/25(火) 04:04:10.98 ID:???.net
- GitHub Pagesで営業マンの日報システムを無料公開できると喜んでいました
従業員10人以下で手書きの代わりにとりあえず簡単にデジタル化という目論見だったのですが…
（質問1）
入力フォームをグーグルスプレッドシートに送くるつもりでしたが
これだとソースコードにAPIもあるしシートのURLもあるので
悪意があれば勝手に改ざんできるということですよね？
（質問2）
ログイン画面も作れない（擬似的につくってもやはりidとpassがソースに書いてある）しどうするのがよいのでしょうか？
素人なので認証サーバーを経由して、などあまり難しいことはわかりませんがデータはcsvにしてメールで送信して、
あとは自動でExcelなどに取り込むとかでしょうか？
- 613 ：Name_Not_Found：2024/06/25(火) 07:38:29.01 ID:???.net
- 次の方、質問どうぞ
- 614 ：Name_Not_Found：2024/06/25(火) 18:40:09.91 ID:???.net
- >>612
ここはHTML/CSSの記述に関する質問に答えるスレですので、
特定のWebサービスの構築に関する質問はスレ違いですね…
- 615 ：Name_Not_Found：2024/06/25(火) 18:50:07.99 ID:???.net
- >>612
Googleフォームでええんちゃう？
- 616 ：Name_Not_Found：2024/06/25(火) 21:10:57.85 ID:???.net
- Web系板なのに答えられないのか？
- 617 ：Name_Not_Found：2024/06/25(火) 21:59:20.25 ID:???.net
- Web系板なら、無関係なスレで質問してもいいのか？
- 618 ：Name_Not_Found：2024/06/26(水) 11:09:11.47 ID:???.net
- Webだから無関係とは言えない
- 619 ：Name_Not_Found：2024/06/26(水) 11:26:01.97 ID:???.net
- 関係ないわ
- 620 ：Name_Not_Found：2024/06/26(水) 11:45:03.20 ID:???.net
- >>616
>>618
わかってるみたいだから答えてあげればいいのに
- 621 ：Name_Not_Found：2024/06/27(木) 01:40:46.37 ID:???.net
- 回答するとしたらGitHub使わないで全てGoogleのサービス使えばいいだけ
- 622 ：Name_Not_Found：2024/06/27(木) 03:18:21.13 ID:???.net
- 社員番号とパスで制限つけたフォームページ作ってファイルを吐き出すだけの単純なことなのか
どうしてもスプレシート使わなくちゃいけないのか
具体的な内容がわからんから誰も代替案を出せないし他スレへの誘導すらできない
前者でフォームデザインやcssでわからない事があればここで聞けばいい
そうでないならスレチ
- 623 ：Name_Not_Found：2024/06/27(木) 14:30:21.65 ID:???.net
- GitHub pagesもHTMLとCSSで作られてるんだからケチ臭いこと言わないで答えてやれよ
どんな質問にも優しく答えるスレなんだろ？
- 624 ：Name_Not_Found：2024/06/27(木) 15:02:55.41 ID:???.net
- まだ荒らしよるんか
- 625 ：Name_Not_Found：2024/06/28(金) 06:08:04.50 ID:???.net
- >>607
glidもflexも覚えりゃ便利なのでマスターすべし二刀流
- 626 ：Name_Not_Found：2024/06/28(金) 15:45:02.75 ID:p4R0jnlD.net
- link rel="canonical"で質問です。
毎年1回タイトルの○○年だけを変えて新規の記事をアップしています。
タイトルの年以外と各表題(h2)は同じですが、内容＝本文は毎年違います。
以前書いた記事のhref=は
(1)毎年そのままでいいでしょうか？
hage2021.html：href="https://hoge.com/hage2022.html"
hage2022.html：href="https://hoge.com/hage2023.html"
hage2023.html：href="https://hoge.com/hage2024.html"
hage2024.html：なし
(2)全て最新年に毎年書き換えるべきでしょうか？
hage2021.html：href="https://hoge.com/hage2024.html"
hage2022.html：href="https://hoge.com/hage2024.html"
hage2023.html：href="https://hoge.com/hage2024.html"
hage2024.html：なし
- 627 ：Name_Not_Found：2024/06/28(金) 18:16:46.19 ID:???.net
- >>626
スパマーは死んでくれ
- 628 ：Name_Not_Found：2024/06/28(金) 18:46:29.44 ID:qxaAyTO6.net
- >>626
> タイトルの年以外と各表題(h2)は同じですが、内容＝本文は毎年違います。
内容の異なるページなので(1)も(2)もcanonicalの誤用
検索エンジンに無視されていると思われます
実際に検索して要確認
SEO的なcanonicalの役割は
内容が変わらないページが重複インデックスになり
ペナルティを防ぐ為のです
例えば
https://hoge.com/hage2022.html"
https//hoge.com/hage2022.html"
https://www.hoge.com/hage2022.html"
http://www.hoge.com/hage2022.html"
が重複インデックスになりペナリティを防ぐために
canonicalに以下のように指定して重複インデックスを防ぐものです
https://hoge.com/hage2022.html"
- 629 ：Name_Not_Found：2024/06/28(金) 20:10:09.09 ID:???.net
- >>627
は？何がスパマー？
>>628
ずっと(2)の方法で全てインデックスされ、かつ全て検索上位に来てます。
その意味で、その行は無視されていたのですね。
別で正規化と「重複」ページには使用していて、
また最新年だけヒットしてくれればいいので（といってnoindexではない）「類似」ページとしていましたが誤用だったのですね。
ありがとう。
- 630 ：Name_Not_Found：2024/06/28(金) 23:03:13.12 ID:???.net
- ちなみに「類似」ページには間違いないです。
それがgoogleの言う「類似」とは違うのかもしれませんが。
その点で各ブログの例はどれも参考になりませんでしたので。
- 631 ：Name_Not_Found：2024/06/29(土) 03:55:57.54 ID:???.net
- GoogleはSEOの評価方法変えすぎ
- 632 ：Name_Not_Found：2024/06/29(土) 04:59:55.98 ID:???.net
- SEOはスレチ
- 633 ：Name_Not_Found：2024/06/29(土) 09:55:05.73 ID:uCt6ztZ4.net
- スレチでもない
head内に書く
<link rel="canonical" href="正規ページURL">
の意味を語っている流れなので
- 634 ：Name_Not_Found：2024/06/29(土) 10:15:18.95 ID:???.net
- >>633
SEOはスレチ
- 635 ：Name_Not_Found：2024/06/29(土) 15:40:44.17 ID:???.net
- 頑固だね
- 636 ：Name_Not_Found：2024/06/29(土) 18:40:53.51 ID:???.net
- <link rel="canonical" href="正規ページURL">
正規ページURLだけではないけどな
以前からそんな厳密だった？
もっとざっくりしてた気が
重複させたくないページでも使ってたような
正しい記述か否かは631に関係してくるのでスレチではないな
むしろ評価のためなので関係性高い
- 637 ：Name_Not_Found：2024/06/29(土) 21:42:10.21 ID:???.net
- SEOはスレチ
- 638 ：Name_Not_Found：2024/06/30(日) 01:18:32.35 ID:???.net
- スレチにすると過疎るじゃん
- 639 ：Name_Not_Found：2024/06/30(日) 19:32:35.34 ID:???.net
- やたらSEO嫌う人って自分のが上位に来たことないんだろうな
正しい記述とSEOの関連性を理解してないから
- 640 ：Name_Not_Found：2024/06/30(日) 20:24:52.03 ID:???.net
- ↓こっちでやりたまえ
【SEO】Google対策 パート84【Google】
https://mevius.5ch.net/test/read.cgi/hp/1567608679/
- 641 ：Name_Not_Found：2024/07/01(月) 17:32:16.22 ID:???.net
- いや誰もそこ行くほどの話してないからｗ
- 642 ：Name_Not_Found：2024/07/01(月) 18:19:31.96 ID:???.net
- >>641
SEOはスレチ
- 643 ：Name_Not_Found：2024/07/01(月) 20:41:37.64 ID:???.net
- とりあえずNGに入れといた
- 644 ：Name_Not_Found：2024/07/02(火) 02:53:21.99 ID:???.net
- >>643
スレチ
- 645 ：Name_Not_Found：2024/07/02(火) 20:57:03.56 ID:???.net
- >>642
スレチ
- 646 ：Name_Not_Found：2024/07/25(木) 18:14:11.86 ID:???.net
- 古いキーボード
https://i.imgur.com/cmjjdKf.jpeg
176 KB
新着レスの表示
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver.24052200