■ このスレッドは過去ログ倉庫に格納されています
HTML/CSS のどんな質問にも優しく答えるｽﾚ 50
- 1 ：Name_Not_Found：2022/02/25(金) 16:42:48.40 ID:H+CdGnmu.net
- https://mevius.5ch.net/test/read.cgi/hp/1636434627/
- 2 ：Name_Not_Found：2022/02/25(金) 17:38:33.31 ID:???.net
- PENIS
- 3 ：Name_Not_Found：2022/03/01(火) 22:11:44.85 ID:N5cvT1fd.net
- まったくの初心者です。
いま社員バイトのみんなが手書きしたり会社PCにあるエクセルファイルに入力してる日報を、
在宅の人も共通にできるようweb上で入力してもらう仕組みを作ろうとしています。
年末までに完成させるよう、勉強しています。
お聞きしたいのですが、ユーザーに自由文字列を入力してもらうのはinput type=textしかないのでしょうか？
エクセルのシートで縦に50個くらい並んでるセルに入力してもらってるのですが、これをwebページ（html文書）にするなら、
input type=textを50個書き連ねておくものなんでしょうか？
tableで表を作っておくとしても、その表内で入力を受け付けるなんてありえないですよね？
やはり、input type="text"を並べて、そのひとつひとつに名前を付けておかないと処理できないと考えてよいでしょうか？
エクセルだと、VBAで、カウントしながらループで全行を走査してたのですが。
- 4 ：Name_Not_Found：2022/03/01(火) 22:23:24.29 ID:???.net
- inputで合ってる
改行含めた複数行に対応させたいならtextarea
でも、ExcelをWebで使えるようにするだけなら
業務用のGoogleアカウント作るor作ってもらってスプレッドシート共有の方が楽じゃないかな？
- 5 ：Name_Not_Found：2022/03/01(火) 22:27:03.81 ID:???.net
- >>3
ワークシートっぽい入力ができるように作るとおもう
初心者とのことなので正直かなり難易度が高いんじゃないかな
たとえばこんな感じ
handsontableのデモ(ちなみに仕事で使うなら有償)
https://handsontable.com/docs/demo/
フリーでもあるだろうけど結局html+cssだけじゃなくて
javascriptの知識も必要になるんじゃないかな
- 6 ：Name_Not_Found：2022/03/01(火) 22:28:01.19 ID:???.net
- >>4
ありがとうございました！
グーグルスプレッドシートというアイデアはありませんでした。
会社のお金と時間でwebプログラムの勉強ができるならラッキーだと思ってたので。
ほんと、ありがとうございました。
- 7 ：Name_Not_Found：2022/03/01(火) 22:30:11.92 ID:???.net
- >>5
ありがとうざいました！
たしかにこれを使いこなせたら、エクセルからwebシステムに見た目そっくりのまま移行できそうですね。
- 8 ：Name_Not_Found：2022/03/02(水) 01:35:48.82 ID:???.net
- Sassからコンパイルする所まで理解し、
BEMやFlocssの命名は迷いなくていい利点も何となくわかってきたところですが、
しかしいくつもCSSファイルを細分化する必要性があるかわかりません。
大規模サイトならメリットあるのはわかるが
LPや名刺サイト系でもブロック別にCSS分割沢山するものですか。
- 9 ：Name_Not_Found：2022/03/02(水) 03:19:46.77 ID:???.net
- >>8
FLOCSSなどの命名ルールにはそれぞれ設計者がどれくらいの規模、と想定してるから
まず規模に見合う設計を選ぶべきだが
こういうルールというのは他の人が同じ規則に準じて把握・推測できることに意味がある
極端に言えば自分しか更新しないならなんでもいい
慣れ親しんだ設計がやりやすいのであれば必要に応じてコンパクトにすればいいんだよ
フォルダじゃなくて_foundation.sassや_component.sassみたくまとめたり
プロジェクトとコンポーネントはどっちかしか使わず細分化をやめるとかね
- 10 ：Name_Not_Found：2022/03/02(水) 22:20:23.66 ID:???.net
- >>3
ちょっと古いけど、Stefanov のReact の入門書がある。
table タグで、Excel を真似た、whinepad という表アプリを作る
Github に、whinepad3 のデモもある
Reactビギナーズガイド ――コンポーネントベースのフロントエンド開発入門
Stoyan Stefanov, 2017
https://www.oreilly.co.jp/books/9784873117881/
Stefanov のGithub
https://github.com/stoyan/reactbook
ただし、React, Vue.js, Electron などは、Ruby on Rails などを使う人が使う、
プロのウェブ系開発者向きのアプリだから、難易度は高い
- 11 ：Name_Not_Found：2022/03/03(木) 19:13:14.50 ID:???.net
- >>1 テンプレ
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 49
https://mevius.5ch.net/test/read.cgi/hp/1636434627/
■関連スレ
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
- 12 ：Name_Not_Found：2022/03/04(金) 12:28:01.89 ID:???.net
- タグを閉じ忘れても、後方に影響しない方法ってありでしょうか？
例えばワードプレスの記事内で閉じ忘れが発生した場合、sidebarやfooterのテンプレートにも影響しちゃいますね。
今はブロックエディタだからんなこともないのかしら。
- 13 ：Name_Not_Found：2022/03/04(金) 13:00:17.41 ID:???.net
- >>12
> 方法ってありでしょうか？
あるでしょうか？なら省略可能なタグ以外は無い
閉じ忘れないようにしたいなら、エディタに機能拡張でも入れて自動的に閉じてもらえ
あとはWordPressスレでやれ
WordPress（ワードプレス）その28
https://mevius.5ch.net/test/read.cgi/blog/1461783816/
WordPressの困った人のスレ 5
https://mevius.5ch.net/test/read.cgi/hp/1643627327/
- 14 ：Name_Not_Found：2022/03/04(金) 15:35:39.82 ID:???.net
- firefoxってfont family効かないんでしょうか？
おま環でしょうか？
- 15 ：Name_Not_Found：2022/03/04(金) 17:53:56.96 ID:???.net
- >>14
Firefoxがこの世に出た時からサポートしてるfont-familyが効かないと思うか？
とりあえず書き方間違ってないか確認しろ
font-family - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/font-family
- 16 ：Name_Not_Found：2022/03/04(金) 18:26:42.39 ID:???.net
- ブラウザで一回表示してChromeだと検証（デベロッパーツール）とかで
自分の思うように動いてないところがどう解釈されてるか見たほうがいいよ
まあかかってないってことはブラウザに無視されたとかそんなのだろうけど
- 17 ：Name_Not_Found：2022/03/04(金) 18:36:18.96 ID:???.net
- chromeだとちゃんと効きますからね
書き方の間違いではないかと、、、
- 18 ：Name_Not_Found：2022/03/04(金) 18:38:20.91 ID:???.net
- 検証ツールみても横線で消されていることはないですね
importantしてみても駄目です
他のスタイルは適用されるので、セレクタの間違いではないようです
- 19 ：Name_Not_Found：2022/03/04(金) 18:45:22.69 ID:???.net
- クロスドメインになるwebフォントとか？
- 20 ：Name_Not_Found：2022/03/04(金) 18:48:23.07 ID:???.net
- とりま値込みで当該箇所のCSSコピペしてみ
- 21 ：Name_Not_Found：2022/03/04(金) 19:02:29.86 ID:???.net
- 超基本的な質問で恐縮なのですが調べてもわからないので助けてください・・
https://ekitan.com/transit/route/sf-2590/st-2856?sfname=東京&stname=東神奈川&sfcomp=1&sf=2590&st=2856&dt=20220304&tm=1855&sr=0&ic=1&rp=0&tu1=1&tu2=1&tu3=1&dc=1&tp=0&cv=0&cs_flg=0
上記のようなページから運賃データなどをスクレイピングしたいのですが、その中で
<div class="payment-method ek-payment" data-ek-ic-type="2" data-ek-fare-ic="473" data-ek-fare="480" data-ek-fare-icr="946" data-ek-fare-r="960"></div>
このような記述において、意味としては「div」タグ、そこにclass属性があり、そのクラス名が「payment-method ek-payment」
ここまではわかるのですが、「data-ek-fare-ic="473" data-ek-fare="480"」
この部分は何に当たるのでしょうか？ ここの記述を手掛かりにスクレイピングしたり、ここのデータ自体を取得したいのですが、
タグやクラス名で指定しても取得できません
- 22 ：Name_Not_Found：2022/03/04(金) 19:18:26.41 ID:???.net
- すみません allow page choice fontの設定でした(´・ω・`)すまん、、、
- 23 ：Name_Not_Found：2022/03/04(金) 19:27:43.96 ID:???.net
- >>21
datasetでぐぐった？
- 24 ：Name_Not_Found：2022/03/04(金) 20:01:39.69 ID:???.net
- >>23
ありがとうございます！ これです！ attrsで取得できました！！
お手数おかけしました
- 25 ：Name_Not_Found：2022/03/05(土) 22:51:49.04 ID:???.net
- >>9
遅くなりましたがご回答ありがとうございます
小規模サイトでひとりで構築するなら自由に…ということですね
1ページ完結名刺サイト、LPサイトだと、昔みたいに、
reset、base、customizeのファイルくらいしかいらないと思ってしまうんだけど
今時の作り方じゃないから、同業者から見ると格好悪いのかなと気になっています
- 26 ：Name_Not_Found：2022/03/05(土) 23:35:08.71 ID:???.net
- Bootstrap でも使ってみれば？
- 27 ：Name_Not_Found：2022/03/05(土) 23:38:32.99 ID:???.net
- 使わなくていい
- 28 ：Name_Not_Found：2022/03/06(日) 11:44:04.81 ID:???.net
- https://jsfiddle.net/bgegg/g0vw3qn7/1/
codeタグを使ってもレンダリングされるんですが、ソースコードをそのまま表示させる方法はありますでしょうか？
htmlとjavascritp、cssなどのソースを使います。
- 29 ：Name_Not_Found：2022/03/06(日) 11:52:51.36 ID:???.net
- pre
- 30 ：Name_Not_Found：2022/03/06(日) 12:10:26.51 ID:???.net
- pre使っても駄目ですね
- 31 ：Name_Not_Found：2022/03/06(日) 12:11:29.36 ID:???.net
- ありません
<を<に置換しましょう
- 32 ：Name_Not_Found：2022/03/06(日) 12:13:41.70 ID:???.net
- 置き換えずにやる方法ってないんですかね？
textareaくらいですか？
- 33 ：Name_Not_Found：2022/03/06(日) 12:54:27.04 ID:???.net
- とりあえず「html シンタックスハイライト」でググれ
- 34 ：Name_Not_Found：2022/03/06(日) 13:05:11.96 ID:???.net
- https://code-kitchen.dev/html/code/#code%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88
- 35 ：Name_Not_Found：2022/03/06(日) 13:10:19.22 ID:???.net
- >>32
手動置き換え面倒ならjsの文字列としてhtmlを入れて
replaceを2回かけるミニプログラムでも書いておけばいいんじゃないの？
- 36 ：Name_Not_Found：2022/03/06(日) 13:33:47.48 ID:???.net
- https://jsfiddle.net/s81v2wna/
- 37 ：Name_Not_Found：2022/03/06(日) 13:50:59.59 ID:???.net
- >>32
たいていはうまくいってしまうけど正しくはtextarea内もべたで書く時は特殊文字を置換しないとだめよ
- 38 ：Name_Not_Found：2022/03/06(日) 13:55:59.87 ID:???.net
- >>35
置き換えないとだめなんですねこれ
ありがとうございました
簡易的になのでtextareaでもokでしょうか？
>>36
- 39 ：Name_Not_Found：2022/03/06(日) 17:45:32.21 ID:???.net
- ちょっと何言ってるか分からない
- 40 ：Name_Not_Found：2022/03/07(月) 01:04:34.02 ID:???.net
- >>28
ソースを別ファイルにしてもよければ
<iframe src="./hoge.txt"></iframe>
とか
- 41 ：Name_Not_Found：2022/03/07(月) 05:44:22.27 ID:???.net
- >>1乙
- 42 ：Name_Not_Found：2022/03/07(月) 09:35:26.87 ID:???.net
- bootstrap5で、modal-headerに右寄せした閉じるボタンをつけたいのですが、
もっとスマートな書き方はありますでしょうか。
text-endなどでbuttonが右寄せにならないので困って以下みたいな書き方になりました
<div class="modal" style="max-width:80%; height:80%;">
<div class="modal-content" id="sample-modal">
<form class="form-horizontal">
<div class="modal-header" >
<div class="aligin-keep float-end">
<div class="row">
<button type="button" class="btn-close" @click="close()" aria-label="Close">
</button>
</div>
</div>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<a class="btn btn-outline-secondary" data-dismiss="modal">戻る</a>
</div>
</form>
</div>
</div>
---css---
.aligin-keep {
width: 99%
}
- 43 ：Name_Not_Found：2022/03/07(月) 11:59:57.61 ID:???.net
- >>40
ありがと
素直にワードプレスにします(´・ω・`)
無料ブログはつらい
- 44 ：Name_Not_Found：2022/03/07(月) 13:20:44.02 ID:???.net
- >>42
右寄せにならないのはmodal-headerがflexboxになってて、justify-contentがspace-betweenになってるから
モーダルのヘッダー部分にタイトルとか入れないなら、<div class="row">の前にダミーで<h5></h5>とか入れるか
もしくはmodal-headerのclassにjustify-content-endを入れれば右寄せになるんじゃない？
- 45 ：42：2022/03/07(月) 14:53:42.58 ID:???.net
- >>44
なるほど、参考にさせていただいてもうちょい試行錯誤してみます！
ありがとうございました！
- 46 ：Name_Not_Found：2022/03/09(水) 21:52:16.65 ID:???.net
- https://imgbox.com/73H4GsmU
画像をfloat leftで寄せて、文字を回り込ませているのですが、文字と画像の余白はpaddingもマーディンも効きません
何を使うといいんでしょうか？
- 47 ：Name_Not_Found：2022/03/09(水) 22:22:48.64 ID:???.net
- imgにつけたらどうよ
- 48 ：Name_Not_Found：2022/03/09(水) 22:40:50.70 ID:???.net
- こうやるんじゃあ
https://jsfiddle.net/6qh380m9/
マーディンって言い方かっこよくて笑った
- 49 ：Name_Not_Found：2022/03/10(木) 06:39:55.37 ID:???.net
- >>47
>>48
あっ ありがとう(´・ω・`)
- 50 ：Name_Not_Found：2022/03/13(日) 21:51:11.88 ID:???.net
- Webページで日付表示の指定方法があったら教えてください
目的には「2022-03-13」などと指定しておいて
ブラウザの言語指定に基づいて
米国語のブラウザでは「Mar. 13, 2022」
日本語のブラウザでは「2022/03/13」などと
自動的に日付表示させる方法があったら教えてください
- 51 ：Name_Not_Found：2022/03/13(日) 22:18:59.97 ID:???.net
- JavaScriptでブラウザの言語判定して日本語なら～英語なら～で表示させないと無理では？？
- 52 ：Name_Not_Found：2022/03/14(月) 01:09:16.70 ID:???.net
- >>51
かなり面倒みたいですね
Javascriptで検索したらtoLocaleDateStringってのがヒットしました
組み込めるかどうか検討してみます。
- 53 ：Name_Not_Found：2022/03/16(水) 11:55:21.32 ID:acpOVR1E.net
- -webkit-overflow-scrollingっていつのまにか不要になっていた(デフォルトで慣性スクロールが効くようになった)んですね
全然知らんかった もう書く必要ないのか
- 54 ：Name_Not_Found：2022/03/16(水) 14:16:56.42 ID:???.net
- Autoprefixer使ってるから、その辺はあまり気にしなくなった
- 55 ：Name_Not_Found：2022/03/16(水) 14:19:33.14 ID:???.net
- って、Autoprefixer関係無い話だったｗ
- 56 ：Name_Not_Found：2022/03/16(水) 20:32:48.96 ID:???.net
- cssなんですが、
例えば
.h1 {
color: #FFF;
}
@media screen and (max-width: 768px) {
h1 {
color: #FFF;
}
}
上記のように、基本のCSSに加えてモバイル向けのメディアクエリも設定する場合、基本のCSSの方には
@media screen and (min-width: 769px)
とかつけた方がモバイルの方は描画が速くなったりするのでしょうか？
基本のCSS適用後にメディアクエリでモバイル用CSSで上書きされるのと、
基本とモバイル用のそれぞれでメディアクエリ適用有無の判定が行われるのと、
どちらがよりよいのでしょうか。
- 57 ：Name_Not_Found：2022/03/16(水) 21:31:06.89 ID:???.net
- >>56
排他の方が早いが4G回線でも体感できないくらいの差しかない
- 58 ：Name_Not_Found：2022/03/16(水) 23:54:37.72 ID:???.net
- web制作の学習を始めた初心者です。
インプレス社から出版されている「Sassの教科書」で
学習しているのですが利用環境を整えるためのインストール作業で手間取っています。
Node.jsをインストールした後npmコマンドを用いてセットアップ済みの環境を
インストールしていくのですがnpm installコマンドを実行しても
インストールがされません。エラー表記があまりに多くどこを見ればよいかも
わからない状態です。
原因究明のためにはエラー内容をコピペしたほうがいいでしょうか？
自分でも意味があまりわかっておらず不明な説明かもしれませんが
どなたか回答いただければ
- 59 ：Name_Not_Found：2022/03/17(木) 00:39:50.64 ID:???.net
- 今時はvscodeの拡張でコンパイルする方が簡単よ
- 60 ：Name_Not_Found：2022/03/17(木) 01:13:55.94 ID:???.net
- 何だか分からんがnode.jsインストールと同時に
既にnpmもインストールしちゃったとか？
- 61 ：Name_Not_Found：2022/03/17(木) 02:37:07.01 ID:???.net
- Node.js をインストールしたら、パッケージマネージャーのnpm も付いている。
パッケージマネージャーのyarn は、
npm でインストールするのではなくて、OS に直接インストールする
コマンドプロンプトで、
where node
C:\Program Files\nodejs\node.exe
where npm
C:\Program Files\nodejs\npm
C:\Program Files\nodejs\npm.cmd
where yarn
C:\Program Files (x86)\Yarn\bin\yarn
C:\Program Files (x86)\Yarn\bin\yarn.cmd
C:\Program Files (x86)\Yarn\bin\yarn.js
次に、VSCode をインストールして、
拡張機能・Live Sass Compiler をインストールすると、
それが依存している、同じ作者のLive Server もインストールされる
Live Serverは、HTML ファイルをwatch して、編集して保存したら、ブラウザを自動更新する
Live Sass Compiler のwatch機能は、
コードエディタ下部の「Watch Sass」をクリックして、
Sassファイルの変更を監視して、自動的にコンパイルする
タスクランナーのgulp で、Sassファイルをwatchするのと同じ
- 62 ：61：2022/03/17(木) 02:37:41.33 ID:???.net
- 「Sassの教科書」は、漏れも読んでいるけど、2017年の本だから、
今では、VSCode の拡張機能で、簡単に出来る
ただし、本格的にプロジェクトを作って制作するなら、
npm, gulp, npm scripts などで、タスクを定義して使う
- 63 ：61：2022/03/17(木) 06:17:13.02 ID:???.net
- ただし、Live Sass Compiler は、
@import の代わりの新構文、@use, @forward に対応していないらしい
その場合は、他の拡張機能を探すか、
gulp, npm scripts で、Dart Sass を使うかする必要がある
SASSは、Ruby Sass, node-sass(LibSass)は廃止で、Dart Sassへ移行する
- 64 ：Name_Not_Found：2022/03/17(木) 16:04:52.74 ID:???.net
- 全く回答になっていない件
- 65 ：Name_Not_Found：2022/03/17(木) 16:45:39.27 ID:???.net
- このキモい句読点はいつもKENTAとかいうYouTuber？をステマしてるやつだな
- 66 ：Name_Not_Found：2022/03/17(木) 19:59:47.23 ID:???.net
- >>57
遅くなったけれどありがとう
0.1秒表示が早いだけでもかなりの影響があると聞いていたのでとことんやるべきかと思ったのですが、それを踏まえてもなおそこまではやらんでもというレベルなのでしょうかね
もうやり尽くした、あとはこれくらいしか...となったら突き詰めてみるくらいで考えてみることにします
- 67 ：Name_Not_Found：2022/03/17(木) 20:05:30.55 ID:???.net
- >>66
究極的にはセレクタの長さとかまで言い出すことになるからな
minifyしときゃなんでもいいよ
- 68 ：Name_Not_Found：2022/03/17(木) 20:18:16.87 ID:???.net
- もう誰も気付かないどころか、自分でも体感的には
全く気付かない誤差レベルの自己満足の世界だな
- 69 ：Name_Not_Found：2022/03/17(木) 21:02:54.20 ID:???.net
- 58です。
vscodeの拡張機能でコンパイルできるのですね。
回答してくださった方々ありがとうございました。
- 70 ：61：2022/03/18(金) 05:51:43.67 ID:???.net
- >>63
に書いたけど、
新しい構文、@use, @forward に対応した、VSCode の拡張機能があるらしい
【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方
https://yumegori.com/vscode-dart-sass-setting
- 71 ：Name_Not_Found：2022/03/18(金) 18:20:40.00 ID:???.net
- chromeのインスペクタでcssの編集出来なくなってないですか？
vivaldiなんですけども、どないしたらいいですかね
- 72 ：Name_Not_Found：2022/03/18(金) 18:54:21.76 ID:???.net
- chrome使え
- 73 ：Name_Not_Found：2022/03/18(金) 19:17:29.30 ID:WYm/bNId.net
- WordPressのCSSの変更を試みています。
ブログで長い縦スクロールのサイト。
上部にメインメニューでプルダウンメニューが有ります。
そのプルダウンメニューにはたくさんのメニュー項目があります。
しかしそのメニューはブラウザのウィンドウの高さを超えることができません。
メニュー要素の高さを3000pxとかにしてもブラウザのウィンドウの高さでカットされています。
縦へのスクロール量はどんなに多くなっても良いので、
メニュー要素の高さは全表示させたいです。
とは言え、メニューの高さ以上にページ自体の高さはありますが。
どうやったら、メニューの高さを設定した数値に保てるでしょうか？
- 74 ：Name_Not_Found：2022/03/18(金) 19:50:13.97 ID:???.net
- どっかにoverflow:hiddenあるんじゃないの
- 75 ：Name_Not_Found：2022/03/19(土) 03:29:27.58 ID:???.net
- 昔frontpageを使っていたときはテーブルの列を消そうと思ったらwordやexcel感覚で列選択して消していたけど
最近はvscodeとか使っていると列を消したいときはソースを行ごとに触るしかないの？
html貼り付けて列のタグを削除とかできるサイトとかあれば便利そう
- 76 ：Name_Not_Found：2022/03/19(土) 08:49:38.02 ID:???.net
- そんなあなたにDreamweaver
- 77 ：Name_Not_Found：2022/03/19(土) 09:39:55.60 ID:???.net
- >>76
サブスクは勘弁して
- 78 ：Name_Not_Found：2022/03/22(火) 18:52:07.02 ID:???.net
- ブログをやっているのですが
ブログタイトルにh1
記事タイトルにh2が使われているテンプレートを使っているのですが、
記事本文で見出しタグを使う場合h1から使うのかh3から使うのかどちらが正しいでしょうか
初心者なので変なこと書いてたらすいません
- 79 ：Name_Not_Found：2022/03/22(火) 19:18:55.46 ID:???.net
- ページ内でhの連番が飛んでなければh3
- 80 ：Name_Not_Found：2022/03/22(火) 20:00:03.97 ID:???.net
- 書籍などの目次（見出し／小見出し）をイメージするとわかりやすいよ
h3
- 81 ：Name_Not_Found：2022/03/22(火) 21:19:53.65 ID:???.net
- ありがとうございます
書き込んだあとに思ったけどテンプレートできっちり書いてくれてるなら記事本文では下手にhtml記述しないほうがいいような気もしました
- 82 ：Name_Not_Found：2022/03/24(木) 14:24:20.89 ID:???.net
- 質問です
自分が作ったHTMLの中の、
あるフォントで指定した日本語部分を
そのフォントがインストールされていない他人の端末で表示したときに
豆腐文字で表示されますでしょうか、
それとも便宜的に別のフォントで表示されますでしょうか？
また、自分がフォントを指定しなければ、この問題は回避されますでしょうか？
よろしくおねがいします
- 83 ：Name_Not_Found：2022/03/24(木) 14:40:38.99 ID:???.net
- font-familyの優先順位に従う
何も指定してない場合ブラウザやOSの仕様による
- 84 ：Name_Not_Found：2022/03/24(木) 15:56:19.24 ID:Ngjr/wSZ.net
- CSSフレームワークって使わないで書くのが普通なんですか？
たくさんフレームワークあって別の人があとから修正することを考えたらいちいちそのフレームワークの学習コスト取らせるのは現実的ではないから、という理由でしょうか？
- 85 ：Name_Not_Found：2022/03/24(木) 16:11:02.08 ID:???.net
- はい？
- 86 ：Name_Not_Found：2022/03/24(木) 16:16:18.21 ID:???.net
- 基本を知ってればフレームワークは応用にすぎん
学習コストうんぬんを考えるのはそういうレベルの人材
- 87 ：Name_Not_Found：2022/03/24(木) 19:29:13.00 ID:???.net
- ちんちんシュッ！シュッ！シュッ！
- 88 ：Name_Not_Found：2022/03/24(木) 19:43:32.45 ID:wA0UfBbL.net
- うんこプリッ
- 89 ：Name_Not_Found：2022/03/24(木) 20:04:14.98 ID:???.net
- CSSフレームワーク使ってる人はHTML/CSSで書ける
ウェブアプリなんか作る人がそっちよりも機能実装の方に力入れたいからフレームワークを使うんだと思う
- 90 ：Name_Not_Found：2022/03/25(金) 01:46:02.15 ID:???.net
- ほぼ、Bootstrap。
少数派が、Tailwind, Bulma
CSS フレームワークを使わないと、まず無理。
まともに作るのに、とんでもなく時間が掛かる
responsive とか、様々な場合を考えないといけない。
バグを排除できない
- 91 ：Name_Not_Found：2022/03/25(金) 02:04:03.01 ID:???.net
- このキモイ句読点はもしかしてサロンコピペ荒らし野郎か
- 92 ：Name_Not_Found：2022/03/25(金) 18:29:56.04 ID:???.net
- vivaldiなんですが、インスペクタからcssの編集が出来なくなることがあります。
ヘッダーにcssファイルへのリンクがあり、そのリンク先にcssが記述されています。
しかし、ヘッダまでしか追えていないので編集できんのです
chromeは問題ないです
- 93 ：Name_Not_Found：2022/03/25(金) 19:17:28.91 ID:???.net
- (´・∀・｀)ﾍｰ
- 94 ：Name_Not_Found：2022/03/25(金) 19:28:55.41 ID:???.net
- 直りやすた
- 95 ：Name_Not_Found：2022/03/27(日) 03:51:28.87 ID:???.net
- 有名どころのサイトなので明言したくないんですが
ページをスクロール等操作していた際に<style id="xxxというのがいきなり現れるのはどういう仕組みなんでしょうか
それを出てくる前に塞いでおきたくてheadやbodyを調べたんですが、id=に続く文字列はどこにも見つかりません
訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか
- 96 ：Name_Not_Found：2022/03/27(日) 04:18:47.31 ID:???.net
- >>95
ある程度わかるけど
そのstyleタグの前後をきちんと書かなきゃ
- 97 ：Name_Not_Found：2022/03/27(日) 04:56:27.91 ID:???.net
- JavaScript, jQuery などでプログラミングして、スクロール位置で判断する
例えば、100 スクロールされて、scrollTop が、100になったら、
id="xxx" の要素を作って、どこかの要素に追加して、
そのid="xxx"の要素に、jQueryで、スタイルを付ける
$( '#xxx' ).css( 'color', '#f00' );
- 98 ：Name_Not_Found：2022/03/27(日) 05:22:17.72 ID:???.net
- >訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか
これはどういう意味なんだろう
- 99 ：Name_Not_Found：2022/03/27(日) 08:14:32.49 ID:???.net
- >>98
なんだろうね
- 100 ：Name_Not_Found：2022/03/28(月) 12:21:12.41 ID:???.net
- このフォント知っている人いますか？
http://imepic.jp/20220328/442500
- 101 ：Name_Not_Found：2022/03/28(月) 12:51:03.90 ID:???.net
- 源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント ? デザインのブログ
ttps://flopdesign.com/blog/font/5146/
- 102 ：Name_Not_Found：2022/03/29(火) 01:41:13.49 ID:???.net
- >>101
ありがとうございます！ずっと探してました！
- 103 ：Name_Not_Found：2022/03/29(火) 15:26:47.37 ID:???.net
- サイトのソースを見ると
> style.css?ver=202203270623
とかクエスチョンの後に数字が付くものがあります。
これって何ですか？
アクセスする度にそのユーザー用のCSSを動的に一時的に生成しているってことですか？
- 104 ：Name_Not_Found：2022/03/29(火) 15:34:26.86 ID:???.net
- >>103
それはそのCSSのアドレスを処理してるサーバー側次第じゃ
静的なCSSと単なるパラメータなのかもしれないし
完全動的にCSSを返す仕組みでその判断に使ってる文字列かもしれないし
そのアドレス対して
?以降ないCSSまでのアドレスで中身がわかるか
日付ぽい数字をいじって中身が変わったの返すか
と見比べてみりゃいい
- 105 ：Name_Not_Found：2022/03/29(火) 15:36:15.96 ID:???.net
- 1) style.css?ver=202203270623
2) style.css
3) style.css?ver=202202010900
こういう話ね
- 106 ：Name_Not_Found：2022/03/29(火) 15:55:03.50 ID:???.net
- リロードするたびに数字が変わる場合は
ただのキャッシュ対策
- 107 ：Name_Not_Found：2022/03/29(火) 16:53:16.09 ID:???.net
- キャッシュ対策いいかげん改善されないのかね
php使えない環境が面倒すぎ
- 108 ：103：2022/03/29(火) 19:57:39.70 ID:???.net
- 皆さんありがとうございます。
ブラウザやPC変えても、
ver以降の数値は変わらないようですね。
適当な数値を手入力しても内容に変化はありませんね。
- 109 ：Name_Not_Found：2022/03/29(火) 22:10:14.05 ID:???.net
- キャッシュ対策だね
スーパーリロードとかしなくてもいいやつ
- 110 ：Name_Not_Found：2022/03/30(水) 02:16:26.19 ID:???.net
- ある広告表示をデベロッパーツールなどで消そうとしても、該当する要素を削除してみた途端にすぐに要素が復活します
こうやって広告などを無限に呼び出す場所はどうやって検出してどう止めればいいのでしょうか？
- 111 ：Name_Not_Found：2022/03/30(水) 03:21:30.39 ID:???.net
- jsで生成してんだろう
- 112 ：Name_Not_Found：2022/03/30(水) 06:58:30.55 ID:???.net
- 100個ぐらいのJavaScript(JS)を解析しないといけない。
他人のサイトの解析なんて、無限に時間が掛かる
ブラウザで、JS を使わないように設定できるかな？
- 113 ：Name_Not_Found：2022/03/30(水) 07:34:05.27 ID:???.net
- >>112
ブラウザの設定でスクリプトの禁止できたような
- 114 ：Name_Not_Found：2022/03/31(木) 13:35:05.87 ID:???.net
- ChromeでQuick Javascript SwitcherってのでJSのON／OFFさせてるよ
- 115 ：Name_Not_Found：2022/04/01(金) 14:09:01.74 ID:mRFv6Faa.net
- URL貼り付けていい
- 116 ：Name_Not_Found：2022/04/01(金) 17:58:53.98 ID:26d9NCWV.net
- ブログスキンとはどのようなことですか。
恐れいりますが、回答はテキストでください。URLだけではかえって焦点が絞り切れない
- 117 ：Name_Not_Found：2022/04/01(金) 18:12:28.38 ID:???.net
- 服の衣装替えみたいなもん
- 118 ：Name_Not_Found：2022/04/01(金) 18:12:57.86 ID:???.net
- ムーミン谷にくる人ね
- 119 ：Name_Not_Found：2022/04/01(金) 18:17:22.87 ID:z6Ae0s2B.net
- 質問です。
<p>〜<br />〜<p/>のような１つの文章の塊が途中で<br />されている場合の文章で、<br />改行後の行頭を1字下げしたいのですが、どうすればいいのかわかりません。
html
<p>むかしむかしあるところに</p>
<p>おじいさんとおばあさんがいました</p>
css
p{text-indent: 1em;}
と書いてあるとして、
html
<p>むかしむかしあるところに<br />
おじいさんとおばあさんがいました</p>
と修正しました。（文章は質問用の例文です）
しかし、CSSのインデント指定が p{text-indent: 1em;} なので、２行目「おじいさんとおばあさんが〜〜」が行頭下げされていません。
調べたところ、２行目以降も行頭下げする方法として、
p {
padding-left:1em;
text-indent:-1em;
}
が出てきましたが、これは１行目の先頭が記号であるなど、文頭が１字下げされていない場合に使うものでした。
<p>〜<br />〜<p/>の場合はどうすればいいでしょうか？
普通に２行目以降も<p></p>するしかないのでしょうか？
- 120 ：Name_Not_Found：2022/04/01(金) 18:32:46.78 ID:???.net
- https://qumeru.com/magazine/23
なんかしっくりこないね
- 121 ：Name_Not_Found：2022/04/01(金) 18:53:33.20 ID:???.net
- 面倒だから全角スペース入れちゃえば
- 122 ：Name_Not_Found：2022/04/01(金) 19:00:05.70 ID:z6Ae0s2B.net
- >>120
試してみます。
>>121
それも考えたのですが、SigilというツールでKndle本を制作しています。
コードはできるだけ最適なものにしたいのです。
- 123 ：Name_Not_Found：2022/04/01(金) 19:05:58.17 ID:???.net
- できるだけ最適なものをと考えるなら
それこそ行頭字下げする場合はPタグで統一した方がよくね？
- 124 ：Name_Not_Found：2022/04/01(金) 19:11:29.98 ID:???.net
- >>123
それな
字下げされているということは段落が違うんだからbrを入れてるのがおかしい
- 125 ：Name_Not_Found：2022/04/01(金) 19:12:10.18 ID:???.net
- そうやね
>>119のなんとかやりたいであろう
<p>むかしむかしあるところに<br />
おじいさんとおばあさんがいました</p>
を簡単なhtml書いてブラウザに表示させてデベロッパーツールで見てみればいいが
cssを引っ掛ける場所がpとbrだけでbrで切られた後半のテキストには
何もないんだわ
jsならテキスト要素を探せるんだがねえ
- 126 ：Name_Not_Found：2022/04/01(金) 19:25:15.50 ID:z6Ae0s2B.net
- >>123
最初はそうしていたのですが、ある部分（場面転換の部分）で空白行をつくろうとしたところ、
空白行が<br />や<p><p/>でやるのはよくないと出てきまして。
通常は段落のマージン（例 p{margin-bottom: 1em;}）でやるものだと。
しかし私は
html
<p>むかしむかしあるところに</p>
<p>おじいさんとおばあさんがいました</p>
css
p{text-indent: 1em;}
としているので、<p><p/>の段落のマージンを広げると
全行の間隔が開いてしまうことになります。
そこで調べた末に >>119 の質問に至りました。
質問を変えますが、下記１〜４行の文章があるとして、
１ <p>むかしむかしあるところに</p>
２ <p>おじいさんとおばあさんがいました</p>
３ <p>おじいさんはやまへしばかりに</p>
４ <p>おばあさんはかわへももをとりにいきました</p>
２行目と３行目の間にだけ空白行をつけたい場合、
どうするのがスマートでしょうか？
- 127 ：Name_Not_Found：2022/04/01(金) 19:34:05.59 ID:???.net
- <p>ほげほげ</p>
<p class="hoge">ふがふが</p>
.hoge{
margin-top: 1em;
}
- 128 ：Name_Not_Found：2022/04/01(金) 19:40:25.79 ID:???.net
- 上で言ったcssを引っ掛けるとは
>>127
のような話
インデント下げのcssを引っ掛けたいタグにクラス名書いてやればいいだけだし
そのためにはbrぶった切りでは厳しい
- 129 ：Name_Not_Found：2022/04/01(金) 19:40:32.03 ID:???.net
- 紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
どうしてもやりたいなら
<section>
<p>むかしむかし</p>
<p>おじおば</p>
</section>
とか
<p>
<span>むかしむかし</span>
<span>おじおば</span>
</p>
- 130 ：Name_Not_Found：2022/04/01(金) 19:41:36.89 ID:???.net
- >>127
空白行が必要なpタグの前（または後）にマージン設定するパターンですね。勉強になります。今のところ最終手段としています。
- 131 ：Name_Not_Found：2022/04/01(金) 20:50:08.92 ID:???.net
- 久々にhtml4のサイト触っているけど、
昔はhtml5は吐きそうだったけど、今見るとhtml4のほうがうげぇってなるわ
- 132 ：Name_Not_Found：2022/04/01(金) 21:11:21.02 ID:???.net
- webってC/C++でやった醜態をまたやらかしたイメージしかないんだよな
僕の考えた最強のライブラリとかああいうの
- 133 ：Name_Not_Found：2022/04/01(金) 21:47:54.24 ID:???.net
- test
- 134 ：Name_Not_Found：2022/04/02(土) 01:25:10.75 ID:???.net
- > 紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
これな
Webサイトは出版とは違うんだと考えを改めた方がいい
- 135 ：Name_Not_Found：2022/04/02(土) 01:32:10.29 ID:???.net
- Webでやるなら先頭1文字をデカくするドロップキャップの方が見栄えはいいかな
- 136 ：Name_Not_Found：2022/04/02(土) 02:04:14.09 ID:???.net
- そもそも
text-indent: 0;
padding: 1rem;
とかじゃあかんの？
- 137 ：Name_Not_Found：2022/04/02(土) 02:05:31.46 ID:???.net
- いや、padding-left: 1rem; か
- 138 ：Name_Not_Found：2022/04/02(土) 02:30:46.43 ID:???.net
- そもそも字下げは文節で区切る場合に使用で段落毎に使うものではない
- 139 ：Name_Not_Found：2022/04/02(土) 03:20:32.19 ID:???.net
- >>136
質問者の説明がわかりづらくてみんな一瞬それ思い浮かべたと思うけど
よく読むとそれだと下げたくないところも下がるってこと
- 140 ：Name_Not_Found：2022/04/02(土) 16:26:36.32 ID:???.net
- 英語のマニュアルを翻訳していて、斜体(italic)を全角でも斜体にしたいのですが、
span+transformするしかなさそうなのでコンポーネント化して独自タグ<nana>を作ってみようかなと思います(バルーンを出すタグは作ったことあるので
でも面倒ですし、何か他に上手い方法ってありませんか？
- 141 ：Name_Not_Found：2022/04/02(土) 16:27:58.52 ID:???.net
- >>140
なさそう → 二、三ページぱっと見て見つからなかった
- 142 ：Name_Not_Found：2022/04/02(土) 17:28:37.24 ID:???.net
- >>140
単純にcssに書いて <span class="i"> でいけた
- 143 ：Name_Not_Found：2022/04/03(日) 00:36:53.74 ID:???.net
- フォントに斜体があるかどうかだから
（あるならiタグでいける）
transformが無難じゃね
- 144 ：Name_Not_Found：2022/04/03(日) 01:03:44.44 ID:???.net
- Web編集で文字が斜体にならないときの理由と２つの対応方法
ttps://web-365.biz/made_in_wordpress/webfont-how-to-italic
- 145 ：Name_Not_Found：2022/04/03(日) 08:25:19.48 ID:???.net
- テーブル内に複数の画像を横に並べて自動で画像が左スクロールし
各画像の左端がテーブルの左端に来たら５秒間スクロールし
５秒過ぎたら自動でスクロール再開これを繰り返す
このようなのはcssで作ることはできますか？
できるならどうやればいいんですか？
- 146 ：Name_Not_Found：2022/04/03(日) 08:29:50.40 ID:???.net
- jsじゃだめなの？
- 147 ：Name_Not_Found：2022/04/03(日) 08:38:05.80 ID:???.net
- アニメーション機能でそういう画像のスクロールはあったような
- 148 ：Name_Not_Found：2022/04/03(日) 17:04:19.20 ID:6lXmEp/A.net
- すいませんもしわかれば教えていただきたいのですが
ドリームウィーバーを使っておりまして
フォント単位のremを使用するとブラウザプレビューは正しく表記されるのですが
ドリの画面上のフォントサイズがデカく表示されてしまいます。差異がない表示にしたいのですが何か良い方法はないでしょうか
- 149 ：Name_Not_Found：2022/04/03(日) 17:39:04.25 ID:???.net
- ドリームウィーバー使ったことないから分からないけどremはブラウザの標準フォントサイズを基準に決まるので
bodyにfont-size:10pxにしてremをemにするとかかなあ
例えばpタグで囲んだ文字を1.6em（16px）にしたり見出しを4.8em（48px）とか共通にできるのでは？
- 150 ：Name_Not_Found：2022/04/03(日) 18:08:32.88 ID:???.net
- ブラウザプレビューできるんならドリームウィーバーのプレビューなんか使うな
- 151 ：Name_Not_Found：2022/04/04(月) 01:57:49.15 ID:???.net
- ちんちんシュッ!シュッ!シュッ!
- 152 ：Name_Not_Found：2022/04/04(月) 18:06:53.29 ID:???.net
- 声高にドリームウィーバー！
- 153 ：Name_Not_Found：2022/04/04(月) 20:22:29.03 ID:???.net
- デザインビューだけに適用できるcssの設定があったと思うけど
具体的にどうするかは忘れたし
今も残ってる機能なのかはわからない、、
- 154 ：Name_Not_Found：2022/04/04(月) 20:48:04.13 ID:???.net
- このフォントは何ですか？
初めてみました。
http://imepic.jp/20220404/589040
- 155 ：Name_Not_Found：2022/04/04(月) 21:11:32.79 ID:???.net
- マルチ
- 156 ：Name_Not_Found：2022/04/04(月) 23:34:26.70 ID:???.net
- Google「フォント ゴシック 割れ」
- 157 ：Name_Not_Found：2022/04/04(月) 23:35:27.24 ID:???.net
- HTML/CSS無関係定期
- 158 ：Name_Not_Found：2022/04/05(火) 00:40:46.31 ID:???.net
- >>156
ありがとうございます！
>>155
死ね
- 159 ：Name_Not_Found：2022/04/05(火) 01:43:23.80 ID:???.net
- >>158
死ね
- 160 ：Name_Not_Found：2022/04/05(火) 02:05:27.90 ID:???.net
- 質問のマルチポストは5chでは忌み嫌われているのでやめましょう
ましてやフォントの質問はスレ違いです
- 161 ：Name_Not_Found：2022/04/05(火) 19:27:38.72 ID:???.net
- 阿部寛が自身のホームページに言及「非常にシンプルで気に入っています」
https://news.livedoor.com/article/detail/21952256/
- 162 ：Name_Not_Found：2022/04/06(水) 13:08:12.72 ID:???.net
- ニュース見てホームページ観に行ったけど
確かにシンプルやったwインターネット黎明編って感じ
- 163 ：Name_Not_Found：2022/04/06(水) 14:50:46.55 ID:???.net
- その黎明期に作ったファンサイトが公式化したからね
同事務所の名取裕子のサイトも同じ黎明期designにしてる
- 164 ：Name_Not_Found：2022/04/06(水) 18:24:31.40 ID:???.net
- >>154
マルチポスト乙
- 165 ：Name_Not_Found：2022/04/06(水) 19:04:31.87 ID:???.net
- >>162
Win98の時代を思い出すぜ
テーブルでレイアウトとか普通にやってた時代か
- 166 ：Name_Not_Found：2022/04/06(水) 20:48:37.99 ID:???.net
- いまだにリニューアルできない顧客の
table>tr>tdのタグ内でコンテンツ書いて埋めてるわ
- 167 ：Name_Not_Found：2022/04/07(木) 01:43:04.89 ID:???.net
- >>166
テーブルレイアウトとはtdのなかにtable作ってその中にtable作っていく作法だぞ
- 168 ：Name_Not_Found：2022/04/07(木) 14:33:13.69 ID:aUZMCrk6.net
- 一応スレもある
【爆速】阿部寛のHPから学ぶweb制作【SEO】
https://mevius.5ch.net/test/read.cgi/hp/1604434549/
- 169 ：Name_Not_Found：2022/04/07(木) 18:22:36.43 ID:???.net
- >>167
もちろんそれ
それやってるぞー、FrontPageで
タグ打ちなんてやってられん
html4なのに、htmlタグの上にdtdのxhtmlって書いているだが昔何も知らずに俺が貼り付けたと思うが、特に不具合は起きないのこれ？
- 170 ：Name_Not_Found：2022/04/07(木) 22:23:02.58 ID:???.net
- テーブルレイアウトっていうとcolspan rowspan駆使してたようなやつだな
- 171 ：Name_Not_Found：2022/04/09(土) 01:49:35.46 ID:???.net
- そうそう、もうspanしまくりよ
- 172 ：Name_Not_Found：2022/04/09(土) 04:13:16.72 ID:???.net
- ｽﾊﾟﾝ!ｽﾊﾟﾝ!
- 173 ：Name_Not_Found：2022/04/09(土) 04:19:16.15 ID:???.net
- ﾊﾟﾝﾊﾟﾝ! ｽﾊﾟﾊﾟﾝ！
- 174 ：Name_Not_Found：2022/04/09(土) 05:11:13.24 ID:???.net
- ﾁﾝﾁﾝｼｭｯ!ｼｭｯ!ｼｭｯ!
- 175 ：Name_Not_Found：2022/04/09(土) 13:29:29.80 ID:???.net
- 質問です、
html5のvideoタグでプレイヤー画面の映像とプレイヤーコントロール(下部コントロールではなく画面クリックで再生停止する方)の間にhtmlを仕込むことはできますか？
やりたいことはプレイヤーの上にhtmlコンテンツを重ねながらプレイヤー画面をクリックで再生停止をコントロールできるようにしたいです。
- 176 ：Name_Not_Found：2022/04/09(土) 13:41:57.49 ID:???.net
- jsで動画のon/offをコントロールしたらできる
- 177 ：Name_Not_Found：2022/04/09(土) 15:38:13.69 ID:???.net
- >>176
やはりjsで仕込むしかないですか
プレイヤー上に再生の三角マークとか複数のdivなどの要素が重なってるのでどれが再生停止のコントロールに紐づいてるのか分かりませんがcssで上手い具合に重なりの順序変えたりすればいけるのかなとか思ってました...
- 178 ：Name_Not_Found：2022/04/09(土) 15:57:43.16 ID:???.net
- pointer-events:none
- 179 ：Name_Not_Found：2022/04/09(土) 17:14:07.45 ID:???.net
- 生のcssはiframeやobjectの中身にはアクセスできんよ
pointer-eventsなどで包括要素ごと操作禁止とかなら制御できるが
- 180 ：Name_Not_Found：2022/04/09(土) 21:21:02.89 ID:???.net
- ありがとうございました
pointer-events:none で対応できました
不勉強でこんな便利なのが追加されてたとは知りませんでした......
これを機会に脳内のアップデートしておきます
- 181 ：Name_Not_Found：2022/04/10(日) 00:48:45.79 ID:???.net
- ふつうに知識のアップデートどいいでしょ、何だよ脳内のアップデートって
- 182 ：Name_Not_Found：2022/04/10(日) 00:51:22.72 ID:???.net
- どっちでもいいだろ
- 183 ：Name_Not_Found：2022/04/10(日) 06:47:10.09 ID:???.net
- 今のネットって古い書き方のジャンク情報とかも溢れてるからきついよな
無駄に広帯域の回線契約してジャンク情報の中からあたり情報探す
時間とか考えるとまとめてある本買ったほうがいいまでの時代になってしまった
- 184 ：Name_Not_Found：2022/04/10(日) 07:20:06.39 ID:???.net
- >>183
Qiita「今日はこういう事例を投稿します・・・おぉっとここでトラブル発生、うまくいかないので次回へ続く」
みたいな情報はなんとかして欲しい
- 185 ：Name_Not_Found：2022/04/10(日) 07:42:51.48 ID:???.net
- >>184
ほんと
- 186 ：Name_Not_Found：2022/04/10(日) 09:14:14.46 ID:???.net
- クソ記事クソサイトはChromeの拡張機能で検索結果に出てこないようにしてる
イラッとしたら登録
二度と出会わなくて済むし収益への貢献も防げる
沙汰していくべき
- 187 ：Name_Not_Found：2022/04/11(月) 01:19:04.58 ID:???.net
- サイトNG機能は全ブラウザに既定であって欲しい
- 188 ：Name_Not_Found：2022/04/11(月) 01:49:25.32 ID:???.net
- naverまとめはドメインごと当時ブロックしてた
- 189 ：Name_Not_Found：2022/04/11(月) 09:56:59.93 ID:???.net
- コメント欄あるだろ
古いって書きまくってこいよ
- 190 ：Name_Not_Found：2022/04/11(月) 17:58:27.21 ID:???.net
- >>189
そんなゴミページを相手にする時間がもったいない
- 191 ：Name_Not_Found：2022/04/11(月) 19:54:28.60 ID:???.net
- コメントも承認されないだけだろう
野次っても意味ない
- 192 ：Name_Not_Found：2022/04/13(水) 08:30:43.07 ID:???.net
- H1：野菜の紹介
section>H2：根菜類
ul>li>figure>img 写真
figcaptionにタマネギ、説明にpタグで○○と入れたい時
タマネギって何のタグ使えば良い？
H3は見出しだからちょっと違う感じがするような・・
セマンティック的には何が良いんだろう
- 193 ：Name_Not_Found：2022/04/13(水) 10:58:49.71 ID:???.net
- ｄｌタグでdtがタマネギでddに説明でもいいだろう
- 194 ：Name_Not_Found：2022/04/14(木) 00:38:44.56 ID:???.net
- dlあんま使ったことない
これ便利そう
- 195 ：Name_Not_Found：2022/04/14(木) 00:52:58.60 ID:???.net
- めんどくせーから全部Div
どうせH3以下と他タグの構造なんてSEOに影響しないし
グーグルも大して判定しない
- 196 ：Name_Not_Found：2022/04/14(木) 09:33:48.07 ID:???.net
- でも同業者にソース見られてこいつレベル低いなｗとか思われる
- 197 ：Name_Not_Found：2022/04/14(木) 10:04:24.08 ID:???.net
- 綺麗にタグ書いても別にいいことないんだよな
どこかの案件に入ろうとする時に断られるかもしれないけど
- 198 ：Name_Not_Found：2022/04/14(木) 10:28:22.63 ID:???.net
- divの入れ子って昔良く見た景色だが
今見ると狂気に見える
- 199 ：Name_Not_Found：2022/04/14(木) 10:29:54.44 ID:???.net
- >>195
そういう問題じゃなくなんか気持ち悪くならないか？
性格の問題かねえ
- 200 ：Name_Not_Found：2022/04/14(木) 10:44:50 ID:???.net
- tableよりマシじゃね
エンジニアが書くと全部divになる
classにスタイルつけるから要素はなんでもいいんだよな
- 201 ：Name_Not_Found：2022/04/14(木) 10:57:47 ID:???.net
- >>197
綺麗な方がスパゲッティで書くよりは視認性上がるしメンテも楽だ
- 202 ：Name_Not_Found：2022/04/14(木) 10:58:31 ID:???.net
- こういう解説いいね
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
https://coliss.com/articles/build-websites/operation/css/about-css-layout-algorithms.html
- 203 ：Name_Not_Found：2022/04/14(木) 11:04:15 ID:???.net
- >>201
テンプレートエンジン使うと視認性気にならないよ
- 204 ：Name_Not_Found：2022/04/14(木) 11:26:42 ID:???.net
- 馬鹿そうなコードは見てるだけでもバカが伝染しそうとか？ｗ
- 205 ：Name_Not_Found：2022/04/14(木) 11:48:03.22 ID:???.net
- >>202
コリスさん？
- 206 ：Name_Not_Found：2022/04/14(木) 13:32:12.40 ID:???.net
- >>195
今はそうでも後からSEOも基準変えるかもしれないからやはりコードは綺麗に書く
- 207 ：Name_Not_Found：2022/04/14(木) 14:54:16.51 ID:???.net
- >>202
ここら辺の理解ないままテケトーに書いてるやつ多すぎ
- 208 ：Name_Not_Found：2022/04/14(木) 15:13:04.05 ID:???.net
- 俺も適当
- 209 ：Name_Not_Found：2022/04/14(木) 17:36:06.47 ID:???.net
- >>200
15年前から脳の成長が止まっている子かな？
- 210 ：Name_Not_Found：2022/04/15(金) 00:17:48.42 ID:9hOR2zg0.net
- 質問失礼します
最近Webサイトを制作し、GoogleSearchConsoleを使用し始めたのですがカバレッジでリダイレクトエラーが発生します
基本的に公開したいページが
https://ドメイン/サブディレクトリ/
だとすると、リダイレクトエラーが発生するurlが
https://ドメイン/サブディレクトリ
となります
リダイレクトの確認も行いましたが原因が分かりません
これはhtmlでの内部リンクが原因だったりするのでしょうか？
スレチでしたらすいません
- 211 ：Name_Not_Found：2022/04/15(金) 04:08:04.10 ID:???.net
- tableタグを使わずに表ってつくれるの？
- 212 ：Name_Not_Found：2022/04/15(金) 04:33:11.59 ID:???.net
- 作れるよ
- 213 ：Name_Not_Found：2022/04/15(金) 11:28:47.58 ID:???.net
- test
- 214 ：Name_Not_Found：2022/04/15(金) 21:47:59.82 ID:???.net
- >>210
サチコはHTML/CSSと関係ないから下記で聞いた方が良さそう
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
- 215 ：Name_Not_Found：2022/04/16(土) 02:39:25.63 ID:72RxKsAn.net
- laravelで2chのような掲示板を作っており
レスを投稿すると
文章の長さによって表の列縦幅を変動させて背景色の長さを文章の長さまでに変更したいのですが
すべての行の背景色の長さが一番長い文章に統一されてしまいます。
これを改善したいのですがどうしたらいいでしょうか？
それとうまく説明できなくて申し訳ありません...
- 216 ：Name_Not_Found：2022/04/16(土) 08:13:33.01 ID:???.net
- イメージ画像とかないの？
- 217 ：Name_Not_Found：2022/04/18(月) 09:55:26 ID:???.net
- どうなんだろこれ？
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
https://zenn.dev/kagan/articles/1aa466bb6ef8eb
- 218 ：Name_Not_Found：2022/04/18(月) 10:11:20.18 ID:???.net
- どうとは？
- 219 ：Name_Not_Found：2022/04/18(月) 11:41:23.03 ID:???.net
- 銅じゃないが
- 220 ：Name_Not_Found：2022/04/18(月) 18:36:40 ID:???.net
- どうしょうもないな
やり方はそれぞれでコレをやんなきゃダメというわけでもないし
- 221 ：Name_Not_Found：2022/04/21(木) 20:24:29.62 ID:???.net
- ul li でグリッドレイアウトっぽくリスト表示したいのですが、その時の子要素の横幅を単位毎に伸長させる方法ってないですかね？わざわざ内容を確認しながらクラスを指定するしかないですかね……？（なるべく楽したい）具体的には以下のように表示させたいです。
表示したいhtml：
<ul><li>あああ</li><li>いいい</li><li>ううう</li><li>えええええ<!-- 横幅２単位使いたい --></li><li>おおお</li><li>かかかか<!-- 横幅２単位使いたい --></li><li>ききき</li></ul>
表示例（理想）：ウィンドウの横が長い場合には３カラムレイアウト
・あああ ・いいい ・ううう
・えええええええ ・おおおおお<-理想
・かかかか ・ききき <-理想
ウィンドウの横が短い場合は２カラムレイアウト
・あああ ・いいい
・ううう
・えええええ
・おおお
・かかかか
・ききき
やったこと：
ul { display: flex; flex-wrap: wrap; min-width: 9em; max-width: 14em; column-gap: 1em; }
ul > li { flex: none; min-width: 3em; margin-left: 1em; position: relative; }
ul > li:after { content: '・'; left: -1em; position: absolute; }
結果：ウィンドウの横が長い場合
・あああ ・いいい ・ううう
・えええええ ・おおおおお<-min-widthのおかげでwrapするが表示が残念
・かかかか ・ききき <-min-widthのおかげでwrapするが表示が残念
ウィンドウの横が短い場合
・あああ ・いいい
・ううう <-min-widthのおかげでwrapする
・えええええええ<-min-widthのおかげでwrapする
・おおお <-min-widthのおかげでwrapする
・かかかか <-min-widthのおかげでwrapする
・ききき <-min-widthのおかげでwrapする
- 222 ：Name_Not_Found：2022/04/21(木) 22:17:32.60 ID:???.net
- >>221
誤字脱字あると結果がおかしくなって混乱するから
正しいソースを↓に貼ってくんない？
https://jsfiddle.net/
- 223 ：Name_Not_Found：2022/04/21(木) 22:34:01.98 ID:???.net
- ちょっと何言ってるか分かんないから
理想型の画像も作ってくれ
- 224 ：221：2022/04/22(金) 02:09:01.65 ID:???.net
- >>221です。
>>222-223
222のサイトを使って見せたいもの作れたんだけど、どうやったらここに貼れるんですか？
スクショ貼れって話だったりします？
- 225 ：221：2022/04/22(金) 02:11:37.62 ID:???.net
- >224
runとかsaveってボタン見落としてました。
必死にローカルで作ってぺたぺたしてた……
※resultってあるのに自動で変わらんなぁとか思ってましたわ(;・∀・)
https://jsfiddle.net/1gao8x4j/
- 226 ：Name_Not_Found：2022/04/22(金) 15:45:27.08 ID:???.net
- 内容に合わせて個別にクラス指定するかjavascript使わないと
CSSだけで汎用性持たせるのは無理じゃね？
- 227 ：Name_Not_Found：2022/04/22(金) 15:48:43 ID:???.net
- 思ったようなのが見つからないときはjsで目的の物を実装しておいて
後でゆっくりCSSでできるか調べるのも手よ
- 228 ：221：2022/04/22(金) 20:00:14 ID:???.net
- >>226
やっぱり無理かな？
無理なら無理で諦めようとは思ってます。
※妥協大事
>>227
js使えば何とかできるけどそこまで手間暇かけたくなくてね……
※２～４カラム対応でjsでそこまで書くの面倒で……
まあ、提示したやつで妥協しますわ。
相談にのってくれてありがとうございました。
- 229 ：Name_Not_Found：2022/04/23(土) 16:28:07.82 ID:???.net
- <style>〜</style>の部分はデザインを変えたいhtmlタグ部分より下に書いても問題ないんですか？
- 230 ：Name_Not_Found：2022/04/23(土) 16:30:31.72 ID:???.net
- 試して見れば
だめだったら爆発するわけじゃないんだし
- 231 ：Name_Not_Found：2022/04/23(土) 16:31:10.23 ID:???.net
- >>229
大丈夫だよ
- 232 ：Name_Not_Found：2022/04/23(土) 16:43:10.89 ID:???.net
- 動くけどbody内のstyleはひっそり非推奨になったから気をつけて
- 233 ：Name_Not_Found：2022/04/23(土) 16:46:17.24 ID:???.net
- まあ色々試す場合はいじってるタグの近くにstyle置いて
確定したら上か外部に移動やな
- 234 ：Name_Not_Found：2022/04/23(土) 23:54:36 ID:???.net
- もう何年かしたら
html内にだららららーと表示されたりするのだろうか、、
- 235 ：Name_Not_Found：2022/04/24(日) 00:59:01.42 ID:???.net
- body内だめになったんか？
一時期bodyないに入れろってなってなかった？
- 236 ：Name_Not_Found：2022/04/24(日) 03:50:36.67 ID:???.net
- >>235
入れるべきではないが動く
↓
入れてもいい
↓
やっぱ入れないで 動くけど
と変遷してる
入れるべき、になったことはない
- 237 ：Name_Not_Found：2022/04/24(日) 04:29:42.31 ID:???.net
- 入れるべき
はないわなｗ
プログラムやってるともうちょいなんとかしたいが
- 238 ：Name_Not_Found：2022/04/25(月) 01:12:33 ID:???.net
- Scssのif文て全く使う機会ないんだが実際便利な使い道ってある？
静的な文書で条件ってのもなんか微妙な気が
- 239 ：Name_Not_Found：2022/04/25(月) 02:07:54 ID:???.net
- roop内の分岐は？
特定のカウンタごとで結果を変えるとか
- 240 ：Name_Not_Found：2022/04/25(月) 03:22:34.18 ID:???.net
- >>238
変数にいらん値を入れるとerror吐くようにするとか
目視でやったほうが早かったりするから自己満足やね
- 241 ：Name_Not_Found：2022/04/25(月) 10:08:09.13 ID:6Gb9KuO2.net
- https://popo-design.net/template/demo/simple-corp/subpage.html
このカラム２を６つ並べて、７つ目を作ったときに１つ目の下に自動的に入るようにするにはどうすればよいのでしょうか？
よろしくお願いいたします。
- 242 ：Name_Not_Found：2022/04/25(月) 12:47:29 ID:???.net
- 単純に折り返すだけでいいならdisplay:flex;を指定してる親要素に
flex-wrap: wrap;
を追加
- 243 ：Name_Not_Found：2022/04/25(月) 13:06:10 ID:???.net
- cssのネイティブの変数が最新のWPやBootstrap5でもう実装されちゃってんのな
しかしscssの変数の方が圧倒的に文字数少なくて済むが使い分けどうすんのこれ、、
そのうちscssはやっぱりいらなくなりましたってなりそうだしなー
- 244 ：Name_Not_Found：2022/04/25(月) 13:54:24 ID:???.net
- カスタムプロパティ実装すんのはブラウザの仕事やろ、wpやらBootstrapは関係ないやん。Sass変数と違ってカスケーディングの対象だし全くの別モンやで。
- 245 ：Name_Not_Found：2022/04/25(月) 14:22:02 ID:???.net
- >>243
ネストできるようになったらいよいよいらないかな
minifyやプレフィクサーのためになんらかのコンパイル自体は残るだろうけど
- 246 ：Name_Not_Found：2022/04/25(月) 14:29:00 ID:???.net
- >>242
ありがとうございます。
やってみたところ、１行目は６つなんですが、
２行目以降が５つにしかならないんです……
- 247 ：Name_Not_Found：2022/04/25(月) 15:27:05 ID:???.net
- >>246
3行以上あるの？だったらCSSに
.col:nth-of-type(6n+1) {
margin-left: 0;
}
を追加
他に影響が合ったり効かないようなら、クラス名等は環境に合わせて工夫して
- 248 ：Name_Not_Found：2022/04/25(月) 17:35:31 ID:6Gb9KuO2.net
- >>247
で、できました！
ありがとうございます！
- 249 ：Name_Not_Found：2022/05/02(月) 00:16:50.00 ID:???.net
- scssの質問です
#hoge1{
.module1{
font-size:120%;
color:red;
}
}
#hoge2{
.module1{
font-size:120%;
color:red;
}
}
を
こんな感じのイメージでセレクタをまとめて書きたいのですが、
#hoge1{
.module1, @at-root #hoge2 .module1{
font-size:120%;
color:red;
}
}
どう書いたらよいでしょうか？（@extendとかにするはナシで）
- 250 ：Name_Not_Found：2022/05/02(月) 00:37:35.59 ID:???.net
- その例だと親セレクタカンマで解決しちゃう
- 251 ：Name_Not_Found：2022/05/02(月) 00:40:34.66 ID:???.net
- エスパー予測すると
インターポレーション #{$this} とかでぐぐってみて
- 252 ：Name_Not_Found：2022/05/02(月) 01:10:29.14 ID:???.net
- >>250
確かに。。例が悪かった・・・
聞きたいのは、#hoge1の内容がもっと巨大であって、その中の1部だけを別の箇所でも汎用クラス的に使いまわしたいケース。
例では、#hoge1の中身を全部#hoge2でも使いたいわけではなく、あくまで#hoge1の中の.module1だけを#hoge2でも使いたい。
ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
#hoge1{
.module1, @at-root #hoge2 .module1{
@extend .module1;
}
- 253 ：Name_Not_Found：2022/05/02(月) 01:12:38.70 ID:???.net
- >>251
すまん、ググったがちょっとわからない、、
インターポレーションは演算しないようにする為のものじゃないの？
- 254 ：Name_Not_Found：2022/05/02(月) 01:13:43.47 ID:???.net
- なんとしてもそのネストでやりたい理由がわからんが
mixin化するか大人しくその装飾をコンポーネントとみなして一つclass作るかなあ
- 255 ：Name_Not_Found：2022/05/02(月) 01:15:56.59 ID:???.net
- >>252
ごめんこれ間違い
>ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
↓
ちなみにこれだと@at-root書いても#hoge1の中にはいっちまうのだな・・
- 256 ：Name_Not_Found：2022/05/02(月) 01:18:44.01 ID:???.net
- >>254
まあ普通にそうなるよね。ありがとう
一度完成したサイトで一部分を切り出して別の場所で臨時的に使いたい
ってケースなんだが、どうやったらcssの構造崩さずにラクできるかなと思い、、
- 257 ：Name_Not_Found：2022/05/05(木) 04:30:03.39 ID:oU2izk1U.net
- https://www.free-css.com/assets/files/free-css-templates/preview/page210/piccolo/pages/gallery-6col.php
このサイトのIllustrationやDesign、Videoなどをクリックすると、それに対応したものが
自動で移動するっていう動作を勉強したいのですが、なんというキーワードで検索したら良いでしょうか？
よろしくおねがいします
- 258 ：Name_Not_Found：2022/05/05(木) 14:31:24.02 ID:???.net
- >>257
ソート、フィルタリングだね。
この辺り
https://www.webdesignleaves.com/pr/plugins/filtering-component-with-css.html
https://yiotis.net/filterizr/#/
https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/6-2-2/6-2-2.html
- 259 ：Name_Not_Found：2022/05/05(木) 23:23:05.73 ID:???.net
- すみません質問させてください
htmlの要素の検証とかEdgeのWebキャプチャの機能使って画像保存したりしたのってサイトの管理者にはわかりますか？
- 260 ：Name_Not_Found：2022/05/05(木) 23:43:10.23 ID:???.net
- 分かりませんが、仮にバレたところで何か問題でも？
- 261 ：Name_Not_Found：2022/05/06(金) 00:02:38.87 ID:???.net
- >>260
ありがとうございます
画像保存禁止のページでその辺使ってしまってバレたらヤバイとなりました
- 262 ：Name_Not_Found：2022/05/06(金) 00:07:43.25 ID:???.net
- バレてもなんもないよ
そんなこと気にしてるとウイルスに感染しましたスパムに引っかかるよ
- 263 ：Name_Not_Found：2022/05/06(金) 00:45:50.87 ID:FMKyUWnB.net
- >>262
ありがとうございました
まだちょっと不安ですがなんとか落ち着こうと思います
- 264 ：Name_Not_Found：2022/05/06(金) 20:01:52.98 ID:???.net
- 保存禁止なんて勝手に言ってるだけやからな
- 265 ：Name_Not_Found：2022/05/10(火) 12:43:51.21 ID:???.net
- よくソースコードを表示してあるサイトでtextareaの背景が１行ごとに色が変わって横のしましま模様になっているの見かけるけど
これみたいにtextareaの背景色を１行ごとに変えるにはどうすればいいんですか？
<textarea style="background:#ff00ff">
aaa
bbb
ccc
</textarea>
のようにやっても単色でしか塗りつぶせないので
- 266 ：Name_Not_Found：2022/05/10(火) 12:47:00.16 ID:???.net
- >>265
その目的とするサイトの目的の箇所の上で右クリックして
検証じゃだめなの？
- 267 ：Name_Not_Found：2022/05/10(火) 12:47:35.89 ID:???.net
- 右クリック禁止してなきゃブラウザ上でまる見えよ
- 268 ：Name_Not_Found：2022/05/10(火) 12:56:10.58 ID:???.net
- >>266
見てもよくわからなかったっす
- 269 ：Name_Not_Found：2022/05/10(火) 12:57:53.78 ID:???.net
- 初歩的な話だがCSSは分かる？
- 270 ：Name_Not_Found：2022/05/10(火) 12:58:25.22 ID:???.net
- >>268
現物のソースタグじゃなくて害と箇所にかかってるCSSを見ないと
タグに対するCSSの情報も見れるでしょ
- 271 ：Name_Not_Found：2022/05/10(火) 12:58:41.84 ID:???.net
- 害と箇所ｘ
該当箇所
- 272 ：Name_Not_Found：2022/05/10(火) 13:13:40.22 ID:???.net
- >>269
わかるよ
>>270
今はPCないのであとで見てみる
- 273 ：Name_Not_Found：2022/05/10(火) 13:39:47.80 ID:???.net
- web界隈はサンプルソースだらけなので参考の仕方を覚えておくといいよ
- 274 ：Name_Not_Found：2022/05/10(火) 16:17:56.61 ID:???.net
- そんなもん別にweb界隈に限ったことじゃないけどなｗ
- 275 ：Name_Not_Found：2022/05/10(火) 17:34:35.01 ID:???.net
- >>265
ああいうのはtextareaじゃなくてcontentEditable=trueにした要素でしょ
- 276 ：Name_Not_Found：2022/05/10(火) 20:52:07.87 ID:???.net
- >>265
textarea内の行数を認識させるのは普通には無理なはず。
ちなみにこういうのはtextareは使ってないよ。
http://www.netyasun.com/syntaxhighlighter/index.html
- 277 ：Name_Not_Found：2022/05/10(火) 21:01:02.98 ID:???.net
- こういうの初心者にもわかりやすくて良い説明
いざという時に使える13のHTML&CSS Tips集
https://pulpxstyle.com/html-css-tips01/
- 278 ：Name_Not_Found：2022/05/11(水) 00:15:02.81 ID:???.net
- 申し訳ありません、間違ったスレへ投稿してしまったようなのでこちらへマルチさせてくださいm(vv)m
--------------
昔、youtubeの個別ページにおいてサイドへRecommended for youがひたっすら記載されていた時代
www.youtube.com##span[class="ytd-video-meta-block"]:has-text(Recommended for you)
的な記述で全部削除していました
最近それらの仕様削除を知り、ならば他のサイトで気に入らないテキスト語句を上記の部分入れ替えで使おう！と試すものの、有効とならず
用途はあるサイト内において、テキストを一括削除することです
この上記記述に過不足または間違いがあるのでしょうか？よろしくお願いしますm(vv)m
- 279 ：278：2022/05/11(水) 00:31:15.22 ID:???.net
- ふと、spanの部分を変更したら自己解決できました
仕様の根本を無理解のままコピペ運用すると、こういう面で苦労しますね
失礼しました
- 280 ：Name_Not_Found：2022/05/11(水) 10:14:38 ID:???.net
- >>277
知らないのが多かった
サンクス
- 281 ：Name_Not_Found：2022/05/12(木) 22:56:12.15 ID:???.net
- Youtubeの登録チャンネル画面からショート動画を消そうと試みましたが全く不完全です
www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has(#video-title[title~="#shorts"])
www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has-text(/#short/i)
どのようにしたらショート動画を非表示に出来るでしょうか
- 282 ：Name_Not_Found：2022/05/12(木) 23:53:07.15 ID:???.net
- 広告ブロックか何だか知らんけど、hasの中は
ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]
とかじゃダメなの？
- 283 ：Name_Not_Found：2022/05/13(金) 01:15:40.93 ID:???.net
- すっぽん食べるとギンギンになるって本当ですか(´・ω・｀)？
- 284 ：Name_Not_Found：2022/05/13(金) 01:23:48.25 ID:???.net
- 本当です
- 285 ：Name_Not_Found：2022/05/13(金) 11:30:42.37 ID:???.net
- >>282
その記述だとサムネイル上のショート動画のマークだけ消えました
サムネ自体は非表示になりません 難しい
- 286 ：Name_Not_Found：2022/05/13(金) 12:49:30.31 ID:???.net
- >>283
スッポンの生き血もいいけどハブ酒とかもかなり効くぜ
まあこの手のゲテモノ関連は得てして精力剤としてのものだ
- 287 ：Name_Not_Found：2022/05/13(金) 13:34:32.27 ID:???.net
- >>285
いや、それ書き方間違ってない？
chrome、firefoxのuBlock Originで動作確認出来てるけど、こう書けって話なんだが
www.youtube.com##ytd-browse[page-subtype="subscriptions"] ytd-grid-video-renderer.ytd-grid-renderer.style-scope:has(ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"])
- 288 ：Name_Not_Found：2022/05/13(金) 14:00:21.02 ID:???.net
- 広告ブロッカーだと未だsafariしかサポートしてない:has()に対応してるんだな
- 289 ：Name_Not_Found：2022/05/13(金) 18:40:19.01 ID:???.net
- >>287
出来ました！
そうですね確かにhasの中って書いてあったのに私が記述間違ってましたありがとう
- 290 ：Name_Not_Found：2022/05/18(水) 10:31:13 ID:???.net
- viewportについて質問させてください。
横幅1366px幅の固定幅サイトに、以下のタグを追記しました。
結果は
・スマホで表示すると、画面に合わせてサイトが縮小された状態で表示されました
・解像度が低いデスクトップPC(1280 * 768)は、ChromeでF11の全画面表示でも横スクロールが表示されました
MDNのサイト(https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts)では、「多くのモバイル端末やブラウザーが全画面モードである場合、ビューポートは画面全体です。」と記載があったのできれいに表示できるかと思ったのですが出来ませんでした。
上記metaタグの場合、デスクトップ上のブラウザ上ではどのように振る舞うものでしょうか。
また、モバイル端末でのみ有効なのでしょうか。
- 291 ：Name_Not_Found：2022/05/18(水) 10:34:34 ID:???.net
- タグ抜け出ました…
<meta name="viewport" content="width=1366, user-scalable=yes">
- 292 ：Name_Not_Found：2022/05/18(水) 10:37:46.15 ID:???.net
- デスクトップとモバイルで拡大縮小も動作違うしなあ
デスクトップは素材単位で拡大縮小するのでレイアウト崩れしまくるけど
モバイルはレンダリング結果を画像を拡大縮小するようにレイアウト崩れなしでいける
この辺の差がありそう
- 293 ：Name_Not_Found：2022/05/18(水) 12:01:17.94 ID:???.net
- そこの部分の説明のビューポートはあくまでもブラウザ内の表示領域という意味でmeta viewportでどうふるまうかとはちがくね？
- 294 ：Name_Not_Found：2022/05/19(木) 12:01:40.28 ID:???.net
- >>283
顔文字には教えん
- 295 ：Name_Not_Found：2022/05/21(土) 18:43:29.43 ID:???.net
- レコメンド広告だけ大量に表示しまくる方法ってありますか
暇な時あれ眺めてると掘り出し物とか出来てき好きなんですが・・・
- 296 ：Name_Not_Found：2022/05/26(木) 11:29:46.61 ID:???.net
- CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
https://coliss.com/articles/build-websites/operation/css/large-small-dynamic-viewports.html
- 297 ：Name_Not_Found：2022/05/28(土) 19:04:05.03 ID:???.net
- 自分が触っているサイトが
inputにフォーカスが当たると青い枠が出るんだけど、
cssや直書きhtmlに 疑似クラスのfocusも、プロパティのoutlineも無いんだけどなぜかわからん・・・
ラジオボタンも中心が青いし、inputに作用していることは間違いないんだけどどこに書いてそう？
- 298 ：Name_Not_Found：2022/05/28(土) 20:23:19.94 ID:???.net
- ん？user agent stylesheetの話？
- 299 ：Name_Not_Found：2022/05/28(土) 20:44:32.75 ID:???.net
- >>297
開発者ツールで目的の要素や周辺のスタイル適用がどう変化してるか見てみよう
cssでないならスクリプトでやってるかもね
- 300 ：Name_Not_Found：2022/05/28(土) 21:50:37.26 ID:???.net
- >>298
始めて名前は聞いたけどそれっぽい
firefoxなら青枠、edgeなら黒枠、inputの背景はクリーム色になる
ie11なら特に装飾無し
もともと13年ぐらい前のphpで、cssの行頭には
* {margin: 0;padding: 0;}
これしか書いていなかった
firefoxで、おなじみ開発ツールではその色などは :focus-visibleにすると青枠が出るけど
継承とかには出てこないけど、ブラウザが変わるとuser agent stylesheetからの継承とか出るみたいね
結局はreset.cssみたいなので消えるということか
13年前はフロント周りはhtml4の殻に閉じこもっていたなぁ
- 301 ：Name_Not_Found：2022/05/29(日) 15:11:59.58 ID:???.net
- div内にflexのulを作って、liならべてwrapする時
例えばliのwidth:50%って
ul.col2 li {width:50%}
ul li.col2 {width:50%}
どっちが正解？
- 302 ：Name_Not_Found：2022/05/29(日) 16:25:13.43 ID:???.net
- 正解はない
liにいちいちclassをつけて管理するか
wrap要素で管理するか
- 303 ：Name_Not_Found：2022/05/29(日) 16:52:15.37 ID:???.net
- >>302
サンクス、デファクトスタンダードみたいなのが存在するかと思ってた
liの数が多いからwrapper要素に指定します
- 304 ：Name_Not_Found：2022/06/01(水) 14:01:14.05 ID:???.net
- ちょっとjsも含んでしまいますがtext-decoration:none;でリンクの下線が消えません。
<style>
#test{
text-decoration:none;
background:#ff00ff;
}
</style>
<ins id="haichi"></ins>
<スクリプト>
let haichi_elm = document.getElementById("haichi");
let a_elm = document.createElement("a");
a_elm.id = "test";
a_elm.href = "./test.html";
a_elm.innerHTML = "テストリンク";
haichi_elm.appendChild(a_elm);
</スクリプト>
何でリンクの背景色は変わったのに下線は消えないんでしょうか？
どうすれば下線を消せますか？
- 305 ：Name_Not_Found：2022/06/01(水) 16:33:51.47 ID:???.net
- ここでも見ればいいんじゃない
ttps://qumeru.com/magazine/150
hは自分でつけてね
ていうか、Googleで「text-decoration none 効かない」って検索したらトップに出てきたんだけど
- 306 ：Name_Not_Found：2022/06/01(水) 16:38:42.97 ID:???.net
- 読み込み順の問題とか？
- 307 ：Name_Not_Found：2022/06/01(水) 16:49:21.39 ID:???.net
- そのtestってidはaタグ(アンカータグ)にかかってんの？
親要素や子要素にかかってても下線消えないらしいけど。
仕事だからもういくわ。
また夜に来るよ。
- 308 ：Name_Not_Found：2022/06/01(水) 17:08:13 ID:???.net
- #haichiにもtext-decoration: none;
- 309 ：Name_Not_Found：2022/06/01(水) 20:49:21.17 ID:???.net
- >>307
アンカータグです
- 310 ：Name_Not_Found：2022/06/01(水) 20:55:37 ID:???.net
- >>308
おれもこれで消えた
理由は何でか分からん
- 311 ：Name_Not_Found：2022/06/01(水) 20:59:50 ID:???.net
- >>308
それにもtext-decoration: none;したら下線消えました
でも何でaタグだけにtext-decoration: none;しても下線消えなかったのかな
- 312 ：Name_Not_Found：2022/06/01(水) 21:00:41 ID:???.net
- >>305
見たけど解決はしませんでした
- 313 ：Name_Not_Found：2022/06/01(水) 21:14:23 ID:???.net
- わかった<ins>がだめなんだ<div>にしたらそのまま消える
- 314 ：Name_Not_Found：2022/06/01(水) 21:24:24 ID:???.net
- 役に立たなかったか。すまん
解決したならよかった
- 315 ：Name_Not_Found：2022/06/01(水) 21:46:40.26 ID:???.net
- 主要なブラウザのデフォルトCSSではinsにtext-decoration: underline;が指定されてる
だから、元のCSSでもa要素の下線は消えてたけど、insの方は消えてなかったって話
試しにinsにテキスト入れてみりゃ分かる
- 316 ：Name_Not_Found：2022/06/01(水) 21:50:08.22 ID:???.net
- プロが来た
- 317 ：Name_Not_Found：2022/06/01(水) 21:53:33.51 ID:???.net
- insってなに
- 318 ：Name_Not_Found：2022/06/01(水) 22:02:10.40 ID:bVPpNF9s.net
- insタグなんか初めて聞いたのじゃ
戦前には無かったからのぅ
- 319 ：Name_Not_Found：2022/06/01(水) 22:14:47.96 ID:???.net
- 殆どのブラウザで初期からサポートされてるタグだよ
<ins> - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/ins
性質上、delタグよりも使う人は少ないよね
- 320 ：Name_Not_Found：2022/06/01(水) 23:52:17.15 ID:???.net
- 初学者ですが、このスレ勉強になるね。
- 321 ：Name_Not_Found：2022/06/02(木) 00:03:16.62 ID:???.net
- insなんてタグ初めてしったわ
HTML系の本かれこれ10年以上何十冊も読んでるけど
出てきたことない
辞典には一応のってるな
- 322 ：Name_Not_Found：2022/06/02(木) 00:44:58.94 ID:???.net
- アドセンスコードでinsタグ使われているから存在は知ってた
- 323 ：Name_Not_Found：2022/06/10(金) 12:41:03.53 ID:???.net
- divの中にある要素（画像やテキストやボタンなど）をdivの幅に合わせて
縮小拡大するにはどうすればいいんですか？
- 324 ：Name_Not_Found：2022/06/10(金) 12:45:48.34 ID:???.net
- width: 100%;
height:auto
- 325 ：Name_Not_Found：2022/06/10(金) 14:43:14.21 ID:Y/BlBpdu.net
- height:autoっていつも忘れるけど
inhelitしてるんだろうか
- 326 ：Name_Not_Found：2022/06/10(金) 14:49:44.05 ID:???.net
- デフォルトで auto
変なもの継承してる可能性があるから一応書く癖つけたほうが楽
- 327 ：Name_Not_Found：2022/06/10(金) 14:53:01.74 ID:???.net
- Google PageSpeed Insights用にimgに固定値入れるようになったから
autoつけるようにしてるね
- 328 ：Name_Not_Found：2022/06/10(金) 14:57:07.99 ID:???.net
- heightで継承？
- 329 ：Name_Not_Found：2022/06/11(土) 17:06:35.70 ID:???.net
- こんにちは。
ページネーションなしで画面に表示しきれないテーブルを表示したとします。
そのテーブルの任意の行（画面からはみ出て表示されない行）を表示するようにジャンプしたい場合、htmlだけでやる手段はあるでしょうか。
（各行にアンカーを埋め込む？）
あるいは Javascriptが必要でしょうか？
- 330 ：Name_Not_Found：2022/06/11(土) 18:54:12.29 ID:???.net
- ページ内移動をhtmlとcssだけでやりたいとなると、方法としては
基本的にアンカーリンクだけじゃない？他に何かあったっけ？
- 331 ：Name_Not_Found：2022/06/11(土) 22:13:51.81 ID:0z5Unk3gb
- 2ちゃん初カキコさせていただきます。
有名なサイトのCSS、jsを見ると大概インデントが無かったり詰まってたりしますが、
あれには理由があるのでしょうか。
ググりましたが分かりませんでした。
どなたか教えてくださると幸いです。
- 332 ：Name_Not_Found：2022/06/11(土) 22:20:33.25 ID:0z5Unk3gb
- あ、これ5ちゃんコピースレでしたね。
向こうに書いてきます
- 333 ：Name_Not_Found：2022/06/11(土) 22:21:54.89 ID:???.net
- 5ちゃん初カキコさせていただきます。
有名なサイトのCSS、jsを見ると大概インデントが無かったり詰まってたりしますが、
あれには理由があるのでしょうか。
ググりましたが分かりませんでした。
どなたか教えてくださると幸いです。
- 334 ：Name_Not_Found：2022/06/11(土) 22:44:07.52 ID:???.net
- >>333
コレの話？
Minify（ミニファイ）とは何か？圧縮方法とJS・CSSの軽量化のメリットを解説
ttps://ssaits.jp/promapedia/technology/minify.html
- 335 ：Name_Not_Found：2022/06/11(土) 22:49:44.80 ID:???.net
- minify
- 336 ：Name_Not_Found：2022/06/12(日) 00:01:23.39 ID:???.net
- それです。
ありがとうございます。
minifyと言うのですね。
- 337 ：Name_Not_Found：2022/06/13(月) 21:44:19.29 ID:mVV3FM0W.net
- メニューをfixedで固定してグローバルメニュー表示にしてハンバーガーにするのクッソ難しいわ
わけわからん
- 338 ：Name_Not_Found：2022/06/13(月) 21:44:53.78 ID:mVV3FM0W.net
- なんとなくコピペでできはするけど他のCSSに速攻で干渉してイライラする
- 339 ：Name_Not_Found：2022/06/13(月) 22:21:58.98 ID:???.net
- 基本的なことを聞いてしまい恥ずかしいのですが…。
<details>タグを使用しようとしたとき、指定されていたフォントサイズではなく大きく表示されてしまったため、
サイズを指定しようとしたときに<details＞タグが無効化されてしまいました。
CSSで<details>タグを使用した際のフォントサイズを指定すると良いのでしょうか？
どなたかやさしく教えてもらえると嬉しいです
- 340 ：Name_Not_Found：2022/06/13(月) 22:29:18.45 ID:???.net
- はい
- 341 ：Name_Not_Found：2022/06/13(月) 22:32:20.90 ID:mVV3FM0W.net
- 妥協してabsoluteで済ませた
fixed難しすぎるだろこれ・・
- 342 ：Name_Not_Found：2022/06/13(月) 22:46:42.02 ID:???.net
- >>339です 解決いたしました お目汚し失礼いたしました
- 343 ：Name_Not_Found：2022/06/14(火) 12:35:20.97 ID:???.net
- ulのnth-childってliにしか効かないんですか？
- 344 ：Name_Not_Found：2022/06/14(火) 12:43:57.39 ID:???.net
- ulにはli以外入れちゃいけないからそうなるね
- 345 ：Name_Not_Found：2022/06/14(火) 16:10:57.12 ID:???.net
- cssはマークアップ的に正当かどうかは検証しないのでulの子であればli以外であっても効く
- 346 ：Name_Not_Found：2022/06/14(火) 18:31:01.52 ID:???.net
- li:nth-child(3)とか書いてたらliにしか効かない
li削除して:nth-child(3)だけにすればli以外でも効く
- 347 ：Name_Not_Found：2022/06/15(水) 16:36:58.94 ID:Csrza33o.net
- 質問よろしいでしょうか？
<textarea style="white-space:pre-wrap;">【装備】 \n【立ち回り】</textarea>
で改行して以下のように表示したいのですが、できません。
【装備】
【立ち回り】
こんなふうに改行されません。
【装備】【立ち回り】
どなたかお力添えをお願いできないでしょうか？
- 348 ：Name_Not_Found：2022/06/15(水) 17:19:11 ID:???.net
- /nでなく
- 349 ：Name_Not_Found：2022/06/15(水) 17:24:21 ID:???.net
- 書き込むと消えてしまうのか
こう
https://jsfiddle.net/cs84dhvL/
- 350 ：Name_Not_Found：2022/06/15(水) 18:50:22.45 ID:???.net
- htmlでは一般的なエスケープシーケンス表記は使えないのでHTMLエンティティで
\nは＆#10;や＆NewLine;(＆も半角)、もちろん347の\rな＆#13;でも問題ない
textareaの中身なんかは実際に改行しちゃってもいいし
- 351 ：Name_Not_Found：2022/06/15(水) 19:14:39.64 ID:???.net
- 横からだけど、あんまりやったことなかったから勉強になった
- 352 ：Name_Not_Found：2022/06/16(木) 13:51:52.03 ID:UVqwXAbN.net
- 皆さん、ありがとうございました。
とりあえず
が一番良さそうです。
感謝いたします。
- 353 ：Name_Not_Found：2022/06/16(木) 13:59:57.83 ID:???.net
- 消えてる消えてるｗ
- 354 ：Name_Not_Found：2022/06/18(土) 16:56:55.45 ID:???.net
- 10年以上の前のサイトで
box-sizingをborder-boxに変えた時にグシャっとレイアウトが崩れるとき
どのあたりのパラメータから直していけば良い？
- 355 ：Name_Not_Found：2022/06/18(土) 17:24:02.48 ID:???.net
- そらborderとpaddingよ
だがそもそも崩れるなら無茶な上書きすべきではない
- 356 ：Name_Not_Found：2022/06/18(土) 17:28:08.18 ID:???.net
- ありがとう、作り手がdiv10階層入れ子だらけで＆css4000行とかで
content-boxで作られているからびっくりするぐらい崩れる
触りたく無いけど、開発ツールでグシャったものをなんとかborder-boxで立て直したくなるね
- 357 ：Name_Not_Found：2022/06/19(日) 00:27:05.45 ID:???.net
- 100px*100pxのDivを100px*50pxにして上半分と下半分で分割して表示することて出来ますか？
- 358 ：Name_Not_Found：2022/06/19(日) 00:30:38.66 ID:???.net
- できますよ
- 359 ：Name_Not_Found：2022/06/19(日) 00:31:21.51 ID:???.net
- IEが死んでくれたので
だいぶ楽になりますね
- 360 ：Name_Not_Found：2022/06/20(月) 12:39:14.14 ID:???.net
- transform:scaleについてですけど幅1000pxのdivがあって
ウインドウの幅が1000px以上の時はdivの表示拡大率1.0（transform:scale(1.0)）
ウンドウの幅が1000px未満の時はウインドウの幅に合わせた拡大率にしたい
例えばウインドウの幅が500pxのときは拡大率0.5、250pxのときは0.25というようにするには
どうやったらできますか？
- 361 ：Name_Not_Found：2022/06/20(月) 13:54:09.29 ID:???.net
- メディアクエリ
- 362 ：Name_Not_Found：2022/06/20(月) 18:49:36.60 ID:???.net
- scale()はcalc使えるけどvwとかは入れても動かないんだっけ？
だったらjavascriptかな？
- 363 ：Name_Not_Found：2022/06/20(月) 21:14:03 ID:d+bmcBX0.net
- widthに応じてfont-sizeを無段階で変わることってできたっけ？
メディアクエリを細かくするしかない？
- 364 ：Name_Not_Found：2022/06/20(月) 21:40:56.50 ID:???.net
- そこはwidthじゃなくviewportに応じて、とかでしょ
とりあえず、これでも読んでみるといい
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html
- 365 ：Name_Not_Found：2022/06/20(月) 21:54:08.12 ID:???.net
- >>363
vw
- 366 ：Name_Not_Found：2022/06/20(月) 22:35:06.47 ID:d+bmcBX0.net
- >>364
すごいな、こんなのあるのか
たしかにやりたいことはこれだわ
>>365
すまん、ちょっとわからん
- 367 ：Name_Not_Found：2022/06/21(火) 18:37:20.48 ID:???.net
- 今リモートでプログラミング勉強してるんですが、WordPressから入るとゆー珍しい方針のようで、今やっとHTMLとCSSの段階になりしました。が、さっぱり理解出来なくて。
ググれば答えは出てくるのですが、応用がまったくきかない状態でお手上げです。
でも諦めたくないんです！！
何かオススメのいい勉強の方法ありませんか！？
- 368 ：Name_Not_Found：2022/06/21(火) 19:25:50 ID:???.net
- 君はプログラムに興味があるんだからこんなとこに来てはいけない
- 369 ：Name_Not_Found：2022/06/21(火) 22:06:50.68 ID:???.net
- そういや
問題発生→ググる→解決→ばんざいオレすげー（理解はしてない）
でやってきてるな自分
これでいいと思ってたｗ
- 370 ：Name_Not_Found：2022/06/21(火) 22:32:07.19 ID:???.net
- とりあえずシンプルなHTMLテンプレートでも拾ってきて全体の構造をざっくりと理解するのと
セットになってるCSSを眺めて、分からないとこを端から調べるとか？
あとはVSCode入れてなければインスコして、HTMLとCSS関係の機能拡張入れておいて
ググりながらテンプレ丸写しでもいいから、ひたすら自分で書く
ついでにemmetも一緒に憶えとくとコーディングが楽だけど、それはある程度憶えてからでもおｋ
- 371 ：Name_Not_Found：2022/06/22(水) 01:06:44.57 ID:???.net
- >>370
ありがとう！とにかくやってみる！
- 372 ：Name_Not_Found：2022/06/22(水) 01:21:05.18 ID:???.net
- WPからやるって完全にサロン餌食じゃないか
- 373 ：Name_Not_Found：2022/06/22(水) 01:49:19.46 ID:???.net
- 昔ウェブデザイナーを名乗るやつに
ここのh3はinline-blockで付箋みたいにしたらどう？
って言ったらなんすかそれ？みたいなこと言ってたな
無料テーマでポチポチ入力するだけのセットアップすらできない奴だったな
- 374 ：Name_Not_Found：2022/06/22(水) 01:51:29.79 ID:???.net
- 念のためだがinline-block知らんってことね
- 375 ：Name_Not_Found：2022/06/22(水) 02:11:29.79 ID:???.net
- その手の装飾系しか教えんサロンや講座もあるからなー
CSSやHTML解ってないのにそこだけ教えて意味ねーってやつ
- 376 ：Name_Not_Found：2022/06/22(水) 05:15:53.38 ID:???.net
- 個人的にはwp触れる謳うんならプラグインの負荷を下げるためにfunction.phpを少し書くぐらいやって欲しいところ
- 377 ：Name_Not_Found：2022/06/22(水) 12:46:00.24 ID:???.net
- functions.phpは割とコピペだけでもイケるとはいえ、多少はphpの知識も必要だし
初心者向け講座だったら、まぁやらんだろうね
講師の立場で時間と金のこと考えたら、別講座にして金取ろうってなりそう
- 378 ：Name_Not_Found：2022/06/23(木) 02:03:52.14 ID:???.net
- 下手におしえて元のphp破壊されても困るし
- 379 ：Name_Not_Found：2022/06/30(木) 18:25:33.02 ID:???.net
- transform:scaleで縮小したときにできる余白を詰めるにはどうすればいいですか？
- 380 ：Name_Not_Found：2022/06/30(木) 18:57:04.40 ID:???.net
- 余白の外側も同じ様に縮小
- 381 ：Name_Not_Found：2022/06/30(木) 19:56:56.88 ID:???.net
- >>380
無理
- 382 ：Name_Not_Found：2022/06/30(木) 21:17:06.40 ID:???.net
- 条件出せや
- 383 ：Name_Not_Found：2022/07/01(金) 18:14:29.37 ID:???.net
- とりあえず「tranceform scale 余白」で検索してみては
概要掴めば質問の具体性も増すと思う
- 384 ：Name_Not_Found：2022/07/10(日) 11:12:17.34 ID:qwkAp6hq.net
- CSS設計の部分を体系的に学ぶ方法や、そういった知識や技術の資格ってなにがありますか？
- 385 ：Name_Not_Found：2022/07/10(日) 11:31:30.61 ID:???.net
- 資格はない
- 386 ：Name_Not_Found：2022/07/10(日) 11:36:42.01 ID:???.net
- ベンダー資格は探せばあるけど取らないといけない資格は無いよ
学び方は実践で学ぶか模写コーディングでもしてみたら？
- 387 ：Name_Not_Found：2022/07/10(日) 15:58:35.72 ID:qwkAp6hq.net
- コーディングは実務経験があるので、基礎設計の方もそろそろしっかり学びたかったので
色々ググるしかないかな
- 388 ：Name_Not_Found：2022/07/11(月) 01:27:24 ID:???.net
- >>387
本ならCSS設計完全ガイドがおすすめ
CSS設計の教科書って本もあるけど
内容が古すぎるのとBEM推しなんで
だいぶ今の時代と合わなくなってきてる
- 389 ：Name_Not_Found：2022/07/11(月) 06:40:53.07 ID:???.net
- >>384
この分野ってまだまだ資格とかそういうものは無いね
フォトショやイラレも資格とかできればいいのにこの辺日本は後進国
- 390 ：Name_Not_Found：2022/07/11(月) 06:43:37.44 ID:???.net
- >>388
CSSは進歩も早く環境もめまぐるしく変わるから
今の時代じゃもはや書籍では情報が追いつかない感がある
ネットで情報漁る方が有益だね
- 391 ：Name_Not_Found：2022/07/11(月) 06:44:48.78 ID:???.net
- >>387
コーディング経験あって基礎設計わかんないもんなの？
どういうレベルの実務経験なのかその辺がわかんないとアドバイスしづらい
- 392 ：Name_Not_Found：2022/07/11(月) 13:17:43.99 ID:???.net
- スキルのあるヤツはネットだけで充分かもしれんが、初心者は
「何が分からないのかが分からない」「何が有益な最新情報なの？」
なんて人が多い
だから取っかかりとして、なるべく最近に出たレビューで評価の高い
それなりの情報量で全体像が分かる幅広くまとまった本でも読んで
後は行き当たりばったりで必要な最新情報をネットで漁った方がいい
- 393 ：Name_Not_Found：2022/07/11(月) 13:25:04.41 ID:???.net
- でもコーディング実務経験あるから・・・
- 394 ：Name_Not_Found：2022/07/11(月) 13:56:44.62 ID:???.net
- 実務経験つってもピンキリだからなぁ
みんなそれぞれ分かったつもりでも、実は分かってなかったりするかもしれない
そこの確認と不足してる部分を学び直したいって事だろ？
そもそもCSS設計について体系的に1つにまとまった、ある程度の情報量がある日本語のサイトなんてある？
リファレンスとしてHTML Living StandardとかMDNとかは便利だけど、そういうのとはまたちょっと違うしなぁ
- 395 ：Name_Not_Found：2022/07/11(月) 14:24:10.50 ID:CWsn8tpc.net
- 375です
コーティングはフリーで10年くらい
他者に引き継ぐ時、多人数で作業する場合のわかりやすい、CSSの設計、命名や書き方をあらためて棚卸しの意味も含めて学び直したいとおもってるところで
コレ！っていうのがないのでは、、というのはうっすら感じており
結局のところ、納品するファイル群に運用活用ルールテキストを明文化して持つのが、、今のところ良いのかと思ってます
フレームワークはあまりあまり使わないけど、そういうものも解決になるのかも
>>388
書籍あたってみますサンクス
- 396 ：Name_Not_Found：2022/07/11(月) 14:45:51.27 ID:???.net
- MDNに準拠した違反の無いコードならなんでもいいわけで
CSSの命名規則なんて結局ユーザーが作ったものに過ぎない
FLOCSSだってdart sassのuseに最適化するとなるとまた手間が変わってくるし
- 397 ：Name_Not_Found：2022/07/11(月) 14:47:57.32 ID:???.net
- >>395
気持ちはよくわかるが
「ルール決めて運用でカバー」かな
- 398 ：Name_Not_Found：2022/07/11(月) 15:28:14.99 ID:???.net
- Tailwind CSSとか言ってみる
- 399 ：Name_Not_Found：2022/07/12(火) 00:55:16.80 ID:???.net
- まぁだからBEMとか生まれてくるんだろうけど
それも数人で最初運営してても人が入れ替わってくうちに崩れてくるからな
会社でマニュアル作るしかないけど
全うな会社だったら既にあるだろうし
今の時点で無いってことはWEBに関して後進的な企業だろうから
手間隙かけてリファレンス作ったとしてそれがお賃金うあ評価に繋がるかといったら……
数人でコーディングしてりゃ必ずブチあたる問題だけど
問題解決してないってことはその会社ではそれがお賃金にならんから誰もやらんってことよ
- 400 ：Name_Not_Found：2022/07/12(火) 06:21:40.87 ID:???.net
- 1人アスペルガーがいて独自路線で突き進むのはほんとやばいわ
指摘すると発狂するし
- 401 ：Name_Not_Found：2022/07/12(火) 09:26:58 ID:???.net
- 案件によってレギュレーション変わったりするもんだし、、
- 402 ：Name_Not_Found：2022/07/12(火) 23:23:11.06 ID:???.net
- レギュレーション使うにもそれなりに知識いるからな
知識のない奴や中途半端にコードかじった程度のやつに
レギュレーション与えて作らせると後々とんでもないコードになってるとかあるし
コーディング技術ってほんとピンキリで個人の技量見極められるリーダーいないと詰む
- 403 ：Name_Not_Found：2022/07/13(水) 00:31:40.92 ID:???.net
- Ruby on Rails なら、
SASS のBootstrap, Bulma, Tailwind とか、BEM(MindBEMding)
- 404 ：Name_Not_Found：2022/07/13(水) 01:10:32.28 ID:???.net
- >>403
黙れ
- 405 ：Name_Not_Found：2022/07/14(木) 17:04:15.77 ID:???.net
- ⚪︎×の表現ってaltとかどうしたらいいんだろう？
「まる」って書くか？
- 406 ：Name_Not_Found：2022/07/14(木) 17:11:49.38 ID:???.net
- 画像のaltならそのまま⚪︎×
- 407 ：Name_Not_Found：2022/07/14(木) 17:15:55.64 ID:???.net
- htmlをコピペした時、画像のとこはaltで置き換えられるから
それに合わせて適切な文字列を入れればok
テキストが不要な装飾画像なら
alt=“”にしてもいいんだし
- 408 ：Name_Not_Found：2022/07/14(木) 17:40:39.94 ID:PZZiitGk.net
- HTML5 Audio Playerについて質問はここでいいんでしょうか？
それとも適当適切なスレがあるんですか？
- 409 ：Name_Not_Found：2022/07/14(木) 18:20:06.80 ID:???.net
- 初歩的な質問かもしれませんが、教えてください。
長文で文字を起こした時に、ブラウザ幅の限界となって自然と改行されてしまう文字。つまり自らが改行を起こすHTMLタグを使用せずに生まれてしまった改行への対処法等はありますでしょうか。
例えば、
あいうえおかきくけこさしすせそ
の文章があったとして、一文字目は空白を入れ、左寄せで文字を記入していた際に、上記のような現象が合わさると
あいうえおかきくこさ
しすせそ
のような、文字列が揃わなくなる場合はどうすれば良いでしょうか？
- 410 ：Name_Not_Found：2022/07/14(木) 18:58:50.04 ID:???.net
- >>408
既に備わってる機能を非表示にしたり表示したいのならaudio要素に属性を設定するだけ
uiとかプレイヤーの色とか色々カスタマイズしたいならjs
https://mevius.5ch.net/test/read.cgi/hp/1478002550/
>>409
https://i.imgur.com/HmRDzMt.jpg
https://i.imgur.com/5Ud82yv.jpg
- 411 ：Name_Not_Found：2022/07/14(木) 19:03:34.31 ID:???.net
- >>406、>>407
よくあるサービスの機能比較表の中で出てくる記号だから空はまずいと思うんだけど、記号をそのまま入力しとくのがいいのかね
でも⚪︎×って文字が色々あるしどれが正確なのかとか、内容に合わせて「可能・不可能」とか「対応・非対応」とか言葉を入れてあげた方が親切かなとか思って
- 412 ：Name_Not_Found：2022/07/14(木) 19:34:59.37 ID:???.net
- 大きなお世話な気もするけど
やってあげたいなら好きにすれば、としか
- 413 ：Name_Not_Found：2022/07/14(木) 20:31:54.89 ID:???.net
- >>410
ありがとうございます
- 414 ：Name_Not_Found：2022/07/16(土) 10:32:31.13 ID:???.net
- 一般人には目障りなだけよのう
- 415 ：406：2022/07/21(木) 22:59:39.83 ID:BjwPTpA/.net
- https://codepen.io/joshbader/pen/GqXbVZ
↑
このサイトのプレイヤーを形、色、ボタンの有無など多少はいじれたんですが
それ以上はちょっと知識がなくて困っています
やりたい事は、早送りボタンを次曲(NEXT)に変え
ソース(mp3)はhtmlに記述したいんです
もうひとつ
ｈ1に曲名を出せますが、そこにファイル名(mp3)を表示させたいです
今のままだと曲が変わった時にそのままになってしまいます
ご教示よろしくお願いします、他に頼れる所がないので・・
- 416 ：Name_Not_Found：2022/07/22(金) 15:27:29.73 ID:???.net
- >>409
ブラウザのサイズに合わせて、自動的に改行してくれる方が便利
もし改行しなかったら、
スクロールバーが表示されて、一々スクロールしないと読めなくなってしまう
こういうサイトは有り得ない
- 417 ：Name_Not_Found：2022/07/22(金) 16:08:54 ID:???.net
- >>409
1行しかない時はセンタリング、複数行になる時は左寄せ、ていうのならできるけど、、
- 418 ：Name_Not_Found：2022/07/22(金) 17:19:58 ID:???.net
- 「いちばんやさしいWeb3の教本」、ほとんどの説明が間違えてるのでマジで頭がクラクラする。
あの「インターネットマガジン」を出していたインプレスが作った書籍だと考えると、感慨深い…
https://twitter.com/PCM3324/status/1550012746116173824
(deleted an unsolicited ad)
- 419 ：Name_Not_Found：2022/07/22(金) 23:58:18.67 ID:???.net
- インプレスの本はハズレが多いよ
デザイン系も微妙なの多い
- 420 ：Name_Not_Found：2022/07/23(土) 04:32:20 ID:???.net
- 概念系はオライリーが良かったりする？
- 421 ：Name_Not_Found：2022/07/23(土) 17:53:58.46 ID:???.net
- 拡張機能のstylusなどを使って
画像のimg alt=""の内容を読み込んで
その画像の下に表示させる方法を教えてください
- 422 ：Name_Not_Found：2022/07/23(土) 18:17:58.10 ID:???.net
- javascriptでどうぞ
- 423 ：Name_Not_Found：2022/07/23(土) 18:27:16.33 ID:???.net
- stylusでは難しいのですか？
javascriptを勉強します
- 424 ：Name_Not_Found：2022/07/23(土) 20:15:06.29 ID:???.net
- 使う機能拡張としてはTampermonkeyとかそっち系の話だね
stylusはサイトごとにCSSを上書きするだけだし
CSSだけじゃ特定の箇所を読み込むって時点で無理
- 425 ：Name_Not_Found：2022/07/23(土) 20:34:13.97 ID:???.net
- imgには::after疑似要素使えないもんなぁ
- 426 ：Name_Not_Found：2022/07/23(土) 21:49:51.53 ID:???.net
- attr()じゃ取れないか
- 427 ：Name_Not_Found：2022/07/24(日) 00:57:32.94 ID:???.net
- altじゃなぁ
キャプションじゃダメなのか
- 428 ：Name_Not_Found：2022/07/24(日) 01:51:27.87 ID:???.net
- キャプションにするって話だと、ユーザースクリプトでHTML書き換えるしか
- 429 ：Name_Not_Found：2022/07/24(日) 02:35:43.26 ID:???.net
- >>423
こういうこと？用途が分からん
jsならjsスレ
https://i.imgur.com/AxJXN2R.jpg
- 430 ：Name_Not_Found：2022/07/24(日) 06:04:51.63 ID:???.net
- hasでできたらよかったのにねぇ
- 431 ：Name_Not_Found：2022/07/24(日) 20:33:15 ID:???.net
- 学校やめました。
理由は本気でWeb3を極めようと思ったからです。
親と先生にめちゃくちゃ止められたけど、絶対俺ならTCP/IPやHTTPを独占から解放できるって言ってなんとか説得しました。
今日から毎日72時間「いちばんやさしいWeb3の教本」を読みます。
これからよろしくお願いします。
- 432 ：Name_Not_Found：2022/07/24(日) 21:26:38.27 ID:???.net
- ふざけないで
- 433 ：Name_Not_Found：2022/07/24(日) 21:49:50.71 ID:???.net
- >>431
おっさん寒すぎてキモい
- 434 ：Name_Not_Found：2022/07/25(月) 01:20:00.01 ID:???.net
- >>415
>>410でも書いたけどjsスレへ
mp3に関してはhtml側に書いたのをqueryselectorallかelementsclassname辺りで引っ張ってきて既存jsに組み込みと既存jsの一部改修。バニラjsならnodelistだから注意
previous,next機能はwebに転がってるソースを関数化して組み込めばいい
分からないなら実力以上のことをやろうとしてるから勉強し直した方がいい
内容が面倒だしスレチだからこれ以上答えるつもりないけど優しい人なら答えてくれるかもね
+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
- 435 ：Name_Not_Found：2022/07/25(月) 16:46:13.47 ID:2g6w4J2c.net
- wordpressに表を入れて横の画面縮小してもレイアウト崩れないようにしたくて
https://sayaka-m.com/5412/
をそのままやってみたけど、結局できない。
どういうことだろう？
- 436 ：Name_Not_Found：2022/07/25(月) 17:56:46.50 ID:???.net
- 横スクロールさせたらええやん
もしくは項目を折り返さないようにするとか
- 437 ：Name_Not_Found：2022/07/25(月) 21:49:59.92 ID:???.net
- 自分で書いたコードも示さずに、どういうことだろう？は
さすがにエスパーじゃないと無理
- 438 ：406：2022/07/25(月) 23:58:13 ID:CH4u17o4.net
- >>434
next機能は転がってる物で置き換えればなんとかなりそうですが
ファイル名表示は自分には無理そうです
わざわざありがとうございました、ちょっとづつ勉強していきます
- 439 ：Name_Not_Found：2022/07/26(火) 03:15:35.38 ID:???.net
- >>435
スクロールさせたい要素を包括する直近の要素にoverfow
折り返したくない要素にwhite-space
・競合してる
・word-breakとかword-wrapとかoverflow-wrapとか適用されてる
・width周りでへんなことしてる
・スタイル適用する要素間違ってるか書き忘れてるか記述ミス
どれか
https://i.imgur.com/QvWcYee.jpg
- 440 ：Name_Not_Found：2022/07/27(水) 12:36:46.14 ID:???.net
- ニュースなど記事サイトを見てると、
最初連なった文章内で、
単語とかが虫食いのようにバラバラに表示されるサイトがあります。
あれって何ですか？
- 441 ：Name_Not_Found：2022/07/27(水) 13:45:48.86 ID:UmReAZWr.net
- >>440
どんな状態かよくわからないけど、ウェブフォント使ってると和欧で違うフォントで、読み込めた方から表示されるようなことはあるかも、、
- 442 ：Name_Not_Found：2022/07/27(水) 14:27:12.19 ID:???.net
- >>440
意味わからんすぎるけどスクショで見てみたい
- 443 ：Name_Not_Found：2022/07/27(水) 17:14:27.13 ID:yTHi1+E/.net
- <p class="has-vivid-red-color has-text-color has-huge-font-size">
にborder-bottom: solid 1px red; もいれたいのですが、どう記述したらよいですか？
- 444 ：Name_Not_Found：2022/07/27(水) 17:31:03.52 ID:???.net
- <p class="has-vivid-red-color has-text-color has-huge-font-size" style="border-bottom: solid 1px red;">
- 445 ：Name_Not_Found：2022/07/27(水) 19:27:26.76 ID:???.net
- >>442
スマホでなりやすいです。
たとえば
意味わからんすぎるけど で見てみたい
遅れて
意味わからんすぎるけどスクショで見てみたい
と表示されますね。
- 446 ：Name_Not_Found：2022/07/27(水) 19:48:26 ID:???.net
- ラグとかでもなく？
デザイン上でわざとそうしてるようなの？
- 447 ：Name_Not_Found：2022/07/27(水) 19:55:02.39 ID:???.net
- ソース上で消えてる部分が別のタグで括られてたりするの？
- 448 ：Name_Not_Found：2022/07/27(水) 20:14:00.00 ID:UmReAZWr.net
- その表示遅延はなにか良い効果ありそうなの？
- 449 ：Name_Not_Found：2022/07/27(水) 20:17:06.54 ID:???.net
- スペースでの調整が詰まってしまいました。
書き直し。
ex)
意味わからんすぎるけど で見てみたい
意味わからんすぎるけどスクショで見てみたい
スクショの文字幅は保ってます。
- 450 ：Name_Not_Found：2022/07/27(水) 20:19:52.38 ID:???.net
- 例になるサイトでも出してくれないことには何とも言えないわな
サーバー要因なのか、おま環なのか、作成者の意図的なものなのか
- 451 ：Name_Not_Found：2022/07/27(水) 20:20:58.70 ID:???.net
- >>449
回答としては
webフォント読み込みが原因
fontdisplayがデフォルトのautoだとblockを優先して
chromeとfirefoxは読み込み完了か3秒経過するまでテキストが非表示になる
safariは読み込み完了まで非表示になる
- 452 ：Name_Not_Found：2022/07/28(木) 09:58:12.57 ID:???.net
- CSSのセレクタで指定しているブロック？セクション？の呼び方って何でしょうか
h1{}
↑このひとかたまりの呼び方です
- 453 ：Name_Not_Found：2022/07/28(木) 10:12:33.87 ID:???.net
- h1 {
↑セレクタ
font-size:
↑プロパティ
2em;
↑バリュー
}
- 454 ：Name_Not_Found：2022/07/28(木) 10:18:16.45 ID:???.net
- 行
- 455 ：Name_Not_Found：2022/07/28(木) 10:25:59.06 ID:???.net
- >>453-454
「行」で良さそうですね、ありがとうございました
- 456 ：Name_Not_Found：2022/07/28(木) 14:37:30.28 ID:???.net
- まぁ、セレクタだな
行はおじさん組織向け
- 457 ：Name_Not_Found：2022/07/28(木) 15:14:05.97 ID:???.net
- viewportを1280pxで固定しててスマホで見切れるって何が原因なの？
ヘッダー以外はwidth100%の画像…
- 458 ：Name_Not_Found：2022/07/28(木) 15:23:48.53 ID:???.net
- まずコードを貼ろう
- 459 ：Name_Not_Found：2022/07/28(木) 17:13:34.72 ID:Fgn+aCqp.net
- 行、って初めて聞いた
セレクタ{プロパティ:値、、、}
のセットを「行」と呼ぶん？
- 460 ：Name_Not_Found：2022/07/28(木) 17:30:21.45 ID:???.net
- >>459
猛虎弁やめようよ
よりにもよってコーダーが特定の地域でしか通用しない糞みたいな言葉遣いするのはやめようよ
- 461 ：Name_Not_Found：2022/07/28(木) 17:38:24.24 ID:Fgn+aCqp.net
- はて？
- 462 ：Name_Not_Found：2022/07/28(木) 18:12:33 ID:???.net
- セレクタ＋宣言ブロック
- 463 ：Name_Not_Found：2022/07/28(木) 18:42:47 ID:???.net
- 呼び名がないなら普通に何行目って言えばいいだけでしょ
- 464 ：Name_Not_Found：2022/07/28(木) 19:43:01.90 ID:???.net
- セレクタと宣言ブロックをあわせてルールセットでしょ
- 465 ：Name_Not_Found：2022/07/28(木) 19:56:36.92 ID:???.net
- 質問です
サイトを作ったのですが、縦に長くなるとスクロールバーの分コンテンツが横に少し縮小されます
これを無効にするにはどうすれば良いでしょうか？
- 466 ：Name_Not_Found：2022/07/28(木) 22:56:28.10 ID:???.net
- >>460
なにこのキチガイ
- 467 ：Name_Not_Found：2022/07/29(金) 03:50:52.16 ID:???.net
- >>460
なんやねんこいつ
キモすぎやろw
頭ムシ湧いてんちゃう？
- 468 ：Name_Not_Found：2022/07/29(金) 08:20:12.01 ID:XvUMpWRA.net
- そうよね
ルールセットだよな
用語として明示的に使わないから曖昧になってた汗
- 469 ：Name_Not_Found：2022/07/29(金) 08:26:02.65 ID:???.net
- 会話の中でルールセトが～なんて言う場面が思いつかないが
- 470 ：Name_Not_Found：2022/07/29(金) 09:24:36.53 ID:???.net
- 会話の中でなら○○要素のスタイルを～って言うな何より伝わりやすい
- 471 ：Name_Not_Found：2022/07/29(金) 10:22:23.60 ID:XvUMpWRA.net
- 日本語わかる、オフショア現地ディレクタとかとチャットするときなんかは、正しい用語使いたいかも
- 472 ：Name_Not_Found：2022/07/29(金) 12:14:50.54 ID:???.net
- あんまりルールセットって使わないよな
とりあえず拾ってきた
https://www.fom.fujitsu.com/goods/pdf/webcreator/fpt1418-1.pdf
- 473 ：Name_Not_Found：2022/07/29(金) 12:21:09.34 ID:???.net
- 状況相手関係なく何行目に書かれているこれが(もしくはこのファイルのh1のスタイルが、とか)って伝えるのが一番わかりやすいもん
- 474 ：Name_Not_Found：2022/07/29(金) 15:14:29.27 ID:???.net
- >>465
分かる方いますか？
- 475 ：Name_Not_Found：2022/07/29(金) 16:08:15.40 ID:???.net
- ちなみにレスポンシブの対応はどう設定してるの？というかしたいの？
- 476 ：Name_Not_Found：2022/07/29(金) 16:34:02.52 ID:XvUMpWRA.net
- viewportとかも知りたいかも
- 477 ：Name_Not_Found：2022/07/29(金) 16:36:00.48 ID:???.net
- >>475
レスポンシブではスクロールバーが常時表示されませんし縮尺も変わることはないです
PCのブラウザでウィンドウの大きさを変えるなどして、スクロールバーが出る状態になるとスクロールバー分自動で縮尺が変わる感じです
分かりにくい説明ですみません
- 478 ：Name_Not_Found：2022/07/29(金) 16:41:07.72 ID:???.net
- レスポンシブ対応はしてないって事？
- 479 ：Name_Not_Found：2022/07/29(金) 16:46:50 ID:???.net
- viewportは
<meta name="viewport" content="width=device-width, initial-scale=1">です
PCサイトでのみスクロールバーが常時表示されのですが、レスポンシブは関係ありますかね？
最近勉強始めたので変なところがあればすみません
- 480 ：Name_Not_Found：2022/07/29(金) 18:28:06.53 ID:???.net
- スクロールバーって縦？横？
- 481 ：Name_Not_Found：2022/07/29(金) 18:31:51.82 ID:???.net
- 情報少なすぎて
- 482 ：Name_Not_Found：2022/07/29(金) 18:31:53.51 ID:???.net
- 縦の右端にでるものです
- 483 ：Name_Not_Found：2022/07/29(金) 23:25:01.35 ID:???.net
- ブラウザの右にスクロールバーが出るなら縦方向にページが続いているという事だよ
*{}にbox-sising:border-boxとかmargin:0とかpadding:0入れても出る？
- 484 ：Name_Not_Found：2022/07/30(土) 09:12:01.18 ID:???.net
- >>482
何がやりたいかよく分からないから想像でレスするけど、
●PCで常時表示されているy軸スクロールバーをコンテンツの縦幅に合わせて表示/非表示にしたい？
・481の内容を試してみる。競合しそうなら!importantもつける
・overflow: scroll, overflow-y: scrollが適用されてないかを確認
・position, top, bottom, transformで要素を画面外に飛ばしてないかを確認
・z-index, visibilityを適用した要素や擬似要素の内、画面外に隠れた要素がないかを確認
・jsで生成した要素が画面外で暴れてないかを確認。特にjqueryのライブラリ周り
●PCでスクロールバーが表示されることによってコンテンツ領域が横に17px縮むのを防ぎたい？
・width: calc(100% + 17px)
●スクロールバーの機能はそのままで表示だけ消したい？
・UIデザイン面であまり宜しくない。それでもやるなら↓
※スクロールバーの代わりにスクロール出来ることを示す代替案の実装は必須
・https://i.imgur.com/MPCwy5I.jpg
・https://i.imgur.com/yGYmi9c.jpg
- 485 ：Name_Not_Found：2022/08/01(月) 04:54:28.04 ID:???.net
- なんか↑みたいな組み方とsass？できてないとこっから先厳しいんかな
cssでしかやってこなかったから自信なくなるわ組み方は凄い参考にはなるけど
- 486 ：Name_Not_Found：2022/08/01(月) 05:18:09.84 ID:???.net
- あとよかったらsassの変数使わずにcssの変数使ってる理由を聞きたい頼んます
- 487 ：Name_Not_Found：2022/08/01(月) 23:00:00.79 ID:???.net
- 普通は、SASS でしょ。
たぶん説明の都合上、CSS 変数を使っただけじゃないの？
一部、SASSで計算できない式もあるけど
- 488 ：Name_Not_Found：2022/08/02(火) 00:27:00.79 ID:???.net
- >>486
出来るか出来ないかで言えば出来た方が良い
jsfiddleだとcalc関数内でSASS/SCSSの変数が効かなかったから今回はCSSの変数使ったけど普段はSCSSの変数使ってる
ただ、JSと組み合わせなきゃ計算できないケースがあって、そういう時はCSSの変数使ってる
ビルド後だと変数も参照できないしね
- 489 ：Name_Not_Found：2022/08/02(火) 07:05:28.42 ID:LCob4Nix.net
- 文字の一部の色を変えるにはどうすればいいんですか？
例えば「語」という漢字の言の部分を黄色、五の部分を緑、口の部分を青というようにしたいです。
- 490 ：Name_Not_Found：2022/08/02(火) 07:15:17.70 ID:LCob4Nix.net
- それと文字の一部を表示するにどうすればいいですか？例えば「語」といい漢字が幅100pxだとして左から○pxまでを表示とかできれば映画の字幕ように徐々に文字を表示できるので
- 491 ：Name_Not_Found：2022/08/02(火) 15:24:49.14 ID:TuiCHZK9.net
- <div>
</div>
上記の中にCSSじゃなくて直接タグに下記を入れたいです。
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
よろしくお願いします。
- 492 ：Name_Not_Found：2022/08/02(火) 17:19:08.58 ID:???.net
- >>489
どういう文字かにもよるが「語」だったら例えば
https://jsfiddle.net/g1L0x6jt/
>>490
これでもどうぞ
左から流れるようにテキストを表示するCSSアニメーションサンプル | ONE NOTES
https://1-notes.com/css-display-text-in-a-flowing-manner-animation/
- 493 ：Name_Not_Found：2022/08/02(火) 17:22:11.28 ID:???.net
- >>491
インラインで疑似要素は使えないんじゃね？
- 494 ：Name_Not_Found：2022/08/02(火) 17:33:45.87 ID:???.net
- >>492
conic-gradientをこんな時に使うのか！天才だね！
- 495 ：Name_Not_Found：2022/08/02(火) 19:10:41.13 ID:???.net
- >>494
でも使える文字が限定されるから、あまり汎用性無いしねぇ
文字列の途中で使うなら、色分けされた文字を重ねるよりは使いやすいけども
- 496 ：Name_Not_Found：2022/08/02(火) 19:24:28.49 ID:???.net
- フォントによって範囲変わりそうだからwebフォントも欲しくなるけど
使い方がおもしろいね
- 497 ：Name_Not_Found：2022/08/02(火) 21:02:04.69 ID:???.net
- >>484
>>●PCでスクロールバーが表示されることによってコンテンツ領域が横に17px縮むのを防ぎたい？
・width: calc(100% + 17px)
これでした！細かくありがとうございました！
- 498 ：Name_Not_Found：2022/08/03(水) 09:28:11.19 ID:F0xCRVca.net
- >>493
ヤフオクの商品説明でインラインに入れないと駄目なんです。
同じことをインラインでやるにはどうしたらいいですか？
- 499 ：Name_Not_Found：2022/08/03(水) 09:48:39 ID:9jvHSMMw.net
- <div class=”scroll”>
</div>
表を作って上記で表を囲み、CSSで下記を記載すれば通常は大丈夫です。
でもヤフオクではcssが使えないです。
どう記載すればいいですか？
表が崩れないようにしたいです。
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
- 500 ：Name_Not_Found：2022/08/03(水) 09:59:56 ID:???.net
- >>498
疑似要素でなくても使えるscrollbar-colorとかscrollbar-widthってプロパティがある
但し、Firefoxでしかサポートされてない
そもそも>>491はFirefoxとiOSのSafariでは動作しないんだが、そこは気にしないの？
- 501 ：Name_Not_Found：2022/08/03(水) 10:31:34 ID:???.net
- styleタグもjavascriptも使えないんじゃ無理だな
firefox以外は諦めた方がいい
- 502 ：Name_Not_Found：2022/08/03(水) 10:42:54 ID:???.net
- ヤフオクの商品説明欄で変なことしようとしないの
- 503 ：Name_Not_Found：2022/08/03(水) 13:06:18.74 ID:???.net
- 制限のある環境で表が崩れるのを解消したいのなら
文字数を削ったり表を複数に分けて情報量を減らす等を考えたらどうかね
- 504 ：helpme：2022/08/03(水) 19:41:21.50 ID:bnl/H4E1.net
- 指定したhtmlを任意の文字に置換するブックマークレット下さい
作りはしましたが事故りまくりました。
javascript:var searchKeyword = window.prompt("番号","");void((function(){var d=document;d.HTML.innerHTML=d.HTML.innerHTML.replace(/data-parent-thread=""/g,'data-parent-thread="+searchKeyword+"');}))
- 505 ：Name_Not_Found：2022/08/03(水) 20:01:34.85 ID:???.net
- Bootstrap5を使用している人教えて下さい。
5からボタンのフォーカス時のスタイルの扱いがかわりました。ボタンにフォーカスがある場合はフォーカス時のスタイルが維持されるようになりました。
なので、クリックするたびにJSでbtn-primary とbtn-outline-primaryを付け替えるような実装をしても即座にスタイルがかわりません。
vuejsなどでリアクティブにクラスを変更するような処理もクラスは変わっているのに優先度の高いフォーカス時のスタイルが優先されてしまいこまっています。
フォーカスがあたっていても付け替えたクラスのスタイルを即座に反映させたい場合、どのようにすればいいでしょうか？
付け替えたクラスの優先度を上げるとかフォーカス時のスタイルを無効にするとかするしかないでしょうか。
特に複数のチェックボックスをボタン形式で表示している箇所がクリックしてチェック外してもボタンのスタイルが即座に変わらず困っています。
- 506 ：Name_Not_Found：2022/08/03(水) 20:10:25.18 ID:???.net
- こういうこと？
ボタンを無効化させる意図がよく分からんけど
https://i.imgur.com/Nf7k076.jpg
- 507 ：Name_Not_Found：2022/08/03(水) 20:10:38.08 ID:???.net
- スレ間違えたすまん
- 508 ：helpme：2022/08/03(水) 20:55:24.18 ID:bnl/H4E1.net
- >>504
自分では出来ませんでした。
- 509 ：Name_Not_Found：2022/08/05(金) 04:32:35.57 ID:???.net
- 単純な質問ですいません
"aline-items"ってなんです？
- 510 ：Name_Not_Found：2022/08/05(金) 06:44:19.47 ID:???.net
- align-itemsの誤字だろうなー
- 511 ：Name_Not_Found：2022/08/05(金) 09:10:08.96 ID:???.net
- alineってどこの女よ！
- 512 ：Name_Not_Found：2022/08/05(金) 09:54:38.45 ID:1B0B0mAS.net
- 素人が「スクロールバーの機能はそのままで表示だけ消したい」を自力で構築してみたよ
間違ってるかもしれないが、こんな感じ
<head>
<style>
::-webkit-scrollbar {display:none;}
</style>
</head>
- 513 ：Name_Not_Found：2022/08/05(金) 13:40:57.66 ID:???.net
- >>512
firefoxでも動くようにして
- 514 ：Name_Not_Found：2022/08/05(金) 13:49:52.09 ID:???.net
- scrollbar-width: none;
- 515 ：Name_Not_Found：2022/08/05(金) 14:07:08.86 ID:???.net
- >>514
IEでもお願い！
- 516 ：Name_Not_Found：2022/08/05(金) 14:32:53.70 ID:???.net
- IEは四十九日も過ぎたんだからもういいだろ
- 517 ：helpme：2022/08/05(金) 17:48:55.74 ID:U6wol5UU.net
- 指定したhtmlを任意の文字に置換するブックマークレット下さい
- 518 ：Name_Not_Found：2022/08/05(金) 17:56:14.30 ID:???.net
- ブックマークレットはスレチだよ
- 519 ：helpme：2022/08/05(金) 19:29:43.73 ID:U6wol5UU.net
- >>518
どのブックマークレットのスレってどこですかね？
- 520 ：Name_Not_Found：2022/08/06(土) 15:55:47.41 ID:OP7dI5K4.net
- ド素人がウェブサイトの改良を担当することになってしまいました
ホームページビルダー20を使っています
ページ上方にヘッダー、下にフッター、左にサイドメニュー、右にメイン画面を表示
という構成でウェブページを作りたくて、
ヘッダーとフッターとサイドメニューは全ページで共通化したいです。
その場合、ifameを使うのと、
ホームページビルダーのリンクメニュー（サイト共通メニュー）を使うのと、
どちらが良いですか？
それぞれのメリット・デメリットを教えてください。
最初はPHPでincludeするとか、jQueryを使ってみる等考えたのですが、うまくいきませんでした…
iframeは、以前は非推奨だったようですが、HTML5になってから非推奨ではなくなったと聞いています
営業面は全く考えなくて良いです
- 521 ：Name_Not_Found：2022/08/06(土) 18:34:38.13 ID:???.net
- その中だとincludeが正解
両者のメリットは保守に携わる人にサプライズを届けられる
デメリットは保守に携わる人がサプライズを受けることになる
一応共通パーツをiframeにする記事もある
https://qiita.com/tsmd/items/e7c8ccf1accdb2d7f35a
includeが分からないのならphpスレ
こんな感じに組む
https://i.imgur.com/5geTMza.jpg
- 522 ：Name_Not_Found：2022/08/06(土) 19:05:19 ID:???.net
- それはさすがにド素人にはハードル高いだろうなぁ
- 523 ：Name_Not_Found：2022/08/06(土) 19:51:57.23 ID:???.net
- 必ずホームページビルダー20を使うことが前提の質問なのか？
あとド素人ということだけどiframeやjavascriptやPHPがクラインアント側の処理なのかサーバーサイド側の処理なのかもわからないレベルなのだろうか
- 524 ：Name_Not_Found：2022/08/06(土) 20:29:25.79 ID:???.net
- ビルダーのリンクメニューとiframeの比較っていう質問からしても
そういうは分からないんじゃない？
- 525 ：Name_Not_Found：2022/08/06(土) 20:43:19.27 ID:???.net
- >>523
メモ帳とかでHTMLを記述すれば編集できることは知っていますが、
完成物をホームページビルダー経由以外でサーバーへアップする方法を知らないです
それ以外にFTPソフト等は入ってないです
新しいソフトをインストールする場合には文書を作ってボスの印を押して、さらに上の組織に申請して許可を取らないといけません
文書自体を作ることは簡単ですが、実際に許可が降りるかどうかは不明
「既にホームページビルダーでアップロードできるんだからそれ使え」で却下される可能性はあります
パスワードも知りませんし、上の組織も頻繁に異動があるので最悪誰も把握してない可能性もあります
PHPがサーバー側の処理であることは知っています
iframeはたぶんクライアント側
javaはよく分かりません
ただ、PHPについてはそれ以外に知ってることはほとんど無いです
iframeで組んだことはあります
- 526 ：Name_Not_Found：2022/08/06(土) 20:46:42.05 ID:IxMekEqP.net
- ポームページビルダー使ってるだと？
ハゲとるんか？
そんな老人が使う古いツールは今は誰も使っていない。
- 527 ：Name_Not_Found：2022/08/06(土) 20:59:39.24 ID:???.net
- >>525
ビルダーについて否定的なレス多いけどまさにそうで、
独自の組み方するからメンテナンス性が最悪で長期的な事考えたらリスクしかない
ソフトに頼り切りってのもリスク
まあこの内容をオブラートに包んで稟議行きやね
FTP使うならwinscpならSFTPにもSCPにも対応してるからこのソフトを挙げればいい
何が言いたいかっていうとビルダー文化マジでやめてくれ
- 528 ：Name_Not_Found：2022/08/06(土) 21:02:18.42 ID:???.net
- >>526
上の組織が選定したソフトがコレなんで、他のソフトは基本使えないと思います
私は選定に携われる立場にはありません
上に意見を伝えることは可能ですが、採用される可能性は低いです
ウチ以外の組織だと本当に老人が保守してるところもあるので
前に所属してた組織では、60歳のおじいちゃんがウェブサイトを保守してました
とはいえ意見を言うだけならタダなので、
ホームページビルダーではなくウェブサイト制作にオススメのツールがあれば教えていただけると今後の参考になります
- 529 ：Name_Not_Found：2022/08/06(土) 21:08:13.06 ID:???.net
- と思ったら、早速>>528がオススメのツールを挙げてくれていましたね
ありがとうございます
フリーソフトっぽいので、予算を消費することも無さそうです
後は上の許可が取れるかどうかと、パスワードを教えてもらえるかどうかですが…
…ちなみにWinSCPはド素人でも扱えますか？
ウェブサイトの保守点検は私ではなく、私よりもPC使えない人が担当するんですが
iframeとかjavascriptとかPHPとかincludeとかSCPとかFTPとか、そういう単語を何も知らない人が担当します
- 530 ：helpme：2022/08/06(土) 21:12:34.94 ID:CZE6yndP.net
- >>518
ブックマークレットスレってどこですか？
- 531 ：Name_Not_Found：2022/08/06(土) 21:25:45.66 ID:???.net
- >>530
近いのはjsスレ。でも多分相手にされない
理由は自分の代わりに組んでくれって内容だから
>>521みたいな殊勝な人なら答えてくれるかもね
てか画像おじphpも書けんのかw
- 532 ：Name_Not_Found：2022/08/06(土) 21:46:45.41 ID:???.net
- >>529
ワークフローとか作らないと厳しい感じはするけど作ったそれも併せて提案すればいいんでね
- 533 ：Name_Not_Found：2022/08/06(土) 21:59:10.94 ID:???.net
- 知識のない人たちが今後もホームページビルダーで管理していくという前提で
iframeとホームページビルダーのリンクメニュー（サイト共通メニュー）のどちらがいいかというならiframeがいい気がする
ホームページビルダーのリンクメニュー（サイト共通メニュー）の機能はjavascriptも一緒に生成してそうで、
仮にメモ帳などでのファイルの直接編集をする必要がある場合などは知識のない人には編集は厳しそう
iframeの方は基本htmlだけで完結すると思うので、javascriptの知識ない人でもファイルの直接編集に対応できそう
ただし、どちらの方法を採用するかは今後のサイトの運用（保守）も含めて考えた方がいい
iframeとホームページビルダーのリンクメニュー（サイト共通メニュー）の2つの方法で実際に作ってみて、
作られた物に対して何か変更を入れるときに、知識のない人たちにとってどちらの方法で作った方が対応しやすいのかを考慮する
そのうえでiframeとホームページビルダーのリンクメニュー（サイト共通メニュー）のどちらを採用するか決めてもいいと思う
- 534 ：Name_Not_Found：2022/08/06(土) 22:06:11.53 ID:???.net
- 勘違いしてるかもしれないので一応
winscpやSFTPはウェブサイトを作るツールじゃなくてサーバーにアップロードするためのツールだからね
- 535 ：Name_Not_Found：2022/08/06(土) 22:06:51.71 ID:???.net
- そういう状況だと自分ならVSCodeでファイル作って
アップロードだけビルダーでやらせるけど、そもそもの話に戻ると
素人が保守管理すること考えたら>>533だよなぁ
- 536 ：Name_Not_Found：2022/08/06(土) 22:16:45.59 ID:OP7dI5K4.net
- >>533
ありがとう、両方作ってみます
>>534
勘違いしてました
SFTPがアップロード等の通信用語であることは知ってましたが、
WinSCPもそのためのツールだとは知らなかったです（まぁ、今日初めて知ったツールなので当然ですが）
ちなみにホームページビルダー以外で、HTMLを編集するのに良いツールって何かあるのでしょうか？
有料無料問いません。もしあるなら今後のためにも知っておきたいです
- 537 ：Name_Not_Found：2022/08/06(土) 22:30:26.84 ID:OP7dI5K4.net
- あと、今後知識のない素人がウェブサイトを更新していくと仮定した場合、
PHPが使われたページで更新していくのは厳しい、という結論で良いでしょうか？
- 538 ：Name_Not_Found：2022/08/06(土) 22:38:05.08 ID:???.net
- >>536
いろいろありすぎるけど、、、
メモ帳のようなものだと
TeraPad
Notepad++
サクラエディタ
EmEditor
のようなテキストエディタとか
もっと高機能だと
Visual Studio Codeとか
ホームページビルダーと同じようなツールのAdobeのDreamweaverとか
- 539 ：Name_Not_Found：2022/08/06(土) 22:50:52.32 ID:???.net
- >>537
PHPの知識がない素人がPHPを使ったページを更新していくのは無理だと思う
- 540 ：Name_Not_Found：2022/08/06(土) 22:57:59.34 ID:???.net
- >>534
間違ったwinscpはツールだけどSFTPは通信用語ね
- 541 ：Name_Not_Found：2022/08/06(土) 23:27:26.45 ID:OP7dI5K4.net
- >>538
ありがとうございます。各ツールのことを調べてみます
>>539
やはりそうですか。
PHPについては個人的に勉強するとして、今回は>>533の方法でいくことにします
- 542 ：Name_Not_Found：2022/08/07(日) 03:05:38.60 ID:???.net
- >>531
趣味の範囲。本業はデザインとフロントだからサーバサイドはあんまり分からん
小規模のシステムとかは個人で受注してやってる
まあなんだ。散々言われてるホームページビルダーは俺もやめてほしい
iframeで共通化するくらいなら最初からベタ書きでいい
その方が保守性がいい
- 543 ：Name_Not_Found：2022/08/07(日) 03:37:44.25 ID:???.net
- >>542
ヘッダーとフッターは一度書いたら弄らないのでベタ書きでも良いと思いますが、
サイドメニューがベタ書きなのはさすがにマズくないですか？
もしメニュー内容を変更したい場合、全ページのサイドメニューを書き換えなきゃなりませんし
実際に更新忘れが頻発しており、挙句の果てにはページによってサイドメニューの内容が異なる始末です
そもそも私にウェブサイト改良の話が来たのも、ド素人保守担当とボスから
「サイドメニューを変更する時に全ページ更新しなきゃいけないのがミスの温床だから何とかしてくれ」と言われたからですし
（一応、「私もほぼゼロからの勉強ですし、本来の業務と並行になるので数ヶ月はかかりますよ」とは言ってあります）
もちろん、>>539と見解が違って
「PHPの知識がない素人でもPHPを使ったページは問題なく更新していけるよ」
という話であれば、是非ともPHPを勉強して組んでいきたいところではありますが
ホームページビルダーよりもその方が良さそうなのは私レベルでも理解はできます
- 544 ：Name_Not_Found：2022/08/07(日) 04:26:49.77 ID:???.net
- >>543
経緯はまあ色々あるんだろう
まあ簡潔に書くわ
各パーツを共通化したい
・画像の通りにincludeしてください（最適解
・それができない場合 -> iframe使わずベタ書きにしてください
・ベタ書きが出来ない -> もう保守ぶっ飛ばしてiframe使ってくださいURL参考にしてね
稟議云々は上で書かれてたから一々書かんけどそれも無理ならビルダー使えばいい
んでサイドメニューが頻繁に変わること事態まずいよね。デザイン設計からおかしいよね
もう好きにして
- 545 ：Name_Not_Found：2022/08/07(日) 14:18:47.58 ID:???.net
- https://www.ufret.jp/
このサイトの楽譜ページ右クリックやドラッグできないんだけどできるようにするにはどうしたらいいですか？
- 546 ：Name_Not_Found：2022/08/07(日) 15:10:38.61 ID:IX1hHBsU.net
- >>544
サイドメニューの更新がミスの温床になる、そういう設計がおかしいからこれから改良しようという話であって、
当たり前ですが改良後は更新が頻繁にならないように設計します
しかしどんなに上手く設計しても更新ゼロにすることは無理です
頻繁でなくとも数年に1回はサイドメニューの更新が必要になる可能性はあります
仮に3年後にサイドメニューを更新する場合、私は異動で今の組織を離れています
ですので、私がいなくなっても、何の知識もないド素人でも更新できる形でなければなりません
PHPを使うのが最適解であるなら、可能な限りその最適解を取りたいですが、
問題は「全く知識のないド素人が、PHPが使用されているウェブサイトを更新していくことが可能かどうか」です
>>539は無理だとおっしゃっていますけど、実際のところどうなんですか？
もし>>539の言うとおりであれば、ベタ書きに気持ちが傾いています
前の組織では素人なりにiframeでサイトを構成していたんですけど、私が異動した後にサイドメニューの更新があって、
新たに追加されたメニューをクリックすると、メイン画面ではなくサイドメニューにコンテンツが表示されるというミスをやってましたし
どのみちiframeを使った場合のサイドメニュー更新も、作業回数は少なくなりますがリスクはありますからね
「サイドメニューの更新はほとんど必要なくなるように作ったけど、
もしサイドメニューの更新が必要な時は面倒だけど全ページ書き換えてね」
と伝えておけば…まぁ忘れられても、さすがにド素人でも全ページの更新が必要なことはそのうち気付くとは思うので。
その辺、マニュアルも作っておくことにします。たまに更新という程度なら大丈夫だと信じることにします。
他の方のご意見としても、「ベタ書きも選択肢に加えるなら、iframeで構成するよりはベタ書きの方が良い」
という結論で良いでしょうか？
- 547 ：Name_Not_Found：2022/08/07(日) 15:11:53.21 ID:???.net
- >>545
とりあえずuBlock Origin等の広告ブロッカーを入れてみる
- 548 ：Name_Not_Found：2022/08/07(日) 15:22:35.42 ID:???.net
- >>546
全くの素人ができるように外注するのは無理なん？
作業時間を考えると素人が作るほうが時間がかかるし人件費は高くつくよ
- 549 ：Name_Not_Found：2022/08/07(日) 15:43:05.07 ID:???.net
- >>547
すでにいれてる
- 550 ：Name_Not_Found：2022/08/07(日) 15:59:55.67 ID:???.net
- 個人的には全ページベタ書きで抜け漏れ発生させるよりは
iframeで更新させた方が間違いは少ないと思うなぁ
php？環境作らなきゃローカルで即プレビューできない時点で
素人にやらせるとか無理だね
マニュアル作るにしろ手順や解説が複雑化すれば間違いが多くなる
条件考えれば最適解でも何でも無い
- 551 ：Name_Not_Found：2022/08/07(日) 16:02:03.91 ID:???.net
- >>549
うちの環境だと広告ブロッカーで右クリックもドラッグも可能だが
設定とかフィルターとかいじってみたら？
- 552 ：Name_Not_Found：2022/08/07(日) 16:05:22.12 ID:???.net
- おまえらいつまで「インターネット老人会社」のコンサルやっとんねん、もうええやろw
- 553 ：Name_Not_Found：2022/08/07(日) 16:31:23.72 ID:???.net
- >>551
それトップページだと思う。楽譜のページができない
https://www.ufret.jp/song.php?data=94157
- 554 ：Name_Not_Found：2022/08/07(日) 17:13:59.55 ID:???.net
- 1日数レスしかつかないスレで10超えるなんて珍しいこともあるもんだ
ほぼスレチだけどw
- 555 ：Name_Not_Found：2022/08/07(日) 18:07:40.19 ID:???.net
- >>548
外注はまず承認が下りないと思います
少なくとも県内の同種の組織で外注しているというのは聞いたことないです。あっても少数派かと
人件費については気にしなくていいです、残業代が一切出ないことが公的に認められている職場なので
コレ書くだけで何の職場か、分かる人もいるかも知れませんが
今後ド素人に引き継ぐ際、PHPでは無理という意見が多数派ですね
iframeを使うかベタ書きにするかは人によって見解が異なるようなので、
ウェブサイトの保守・更新の担当者に、
iframeで作ったものとベタ書きで作ったもの、
どちらが更新をやりやすいか、ド素人目線の意見を伺うことにしようと思います
- 556 ：Name_Not_Found：2022/08/07(日) 19:30:13.72 ID:???.net
- >>553
そのページで右クリックできてるよ
chromeでもfirefoxでも
- 557 ：Name_Not_Found：2022/08/07(日) 19:36:09.09 ID:???.net
- >>553
ちなみにだけど、右クリック出来ない云々はjavascriptとかでやってると思うので
完全にスレ違いな
- 558 ：Name_Not_Found：2022/08/07(日) 20:48:40.07 ID:???.net
- >>556
まじか、Uブロックの雪フィルターでは無理やねんな
- 559 ：helpme：2022/08/07(日) 22:08:03.93 ID:Mn+zLDrz.net
- >>531
自己解決しました！回答ありがとうございます。
- 560 ：Name_Not_Found：2022/08/08(月) 02:26:05.61 ID:???.net
- 流れ豚切りですまんが、とりあえずHTML6いつ出るの？
- 561 ：Name_Not_Found：2022/08/08(月) 02:39:07.18 ID:???.net
- そんなものはない
- 562 ：Name_Not_Found：2022/08/09(火) 23:44:12.11 ID:???.net
- ウェブ系は、無料のVSCode を使え。
Microsoft 製だから、絶対に承認できるはず
プロなら、Ruby on Rails などで、部分テンプレート・Partial を使うけど、
本格的なサーバープログラミングだから無理でしょう
初心者は、YouTube で有名な雑食系エンジニア・KENTA のRailsサロンなどに入って、
半年でポートフォリオを作って転職していく
- 563 ：Name_Not_Found：2022/08/09(火) 23:47:27.16 ID:???.net
- あ、そういう話じゃないんで初心者騙す嘘話とか結構です
- 564 ：Name_Not_Found：2022/08/10(水) 02:52:56.04 ID:???.net
- カルト宗教が勧誘で騙くらかす口調だなｗ
- 565 ：Name_Not_Found：2022/08/10(水) 03:06:22.07 ID:???.net
- 「絶対に承認できる」という謎ワード
- 566 ：Name_Not_Found：2022/08/10(水) 04:16:27.33 ID:???.net
- WEB制作板はKENTAで透明あぼーんしとけば間違いない
- 567 ：Name_Not_Found：2022/08/10(水) 09:55:46.39 ID:CkzM/nXu.net
- よろしくお願いします。
chromeで5chを見るとき、ページのズームを拡張機能の「stylus」で指定すると、スレッドのアンカー？レス番へのポップアップが表示されません。
ブラウザのズーム倍率を変えるとポップアップは表示されるのですが、ページごとに設定するのは大変なので、stylusで一括設定したいのですが、どうすればいいでしょうか？
今は
html{
zoom: 1.25 !important;
}
と記述して、ページのズームだけはできています
- 568 ：Name_Not_Found：2022/08/10(水) 13:22:00.61 ID:???.net
- Stylusでのズームだと座標の計算がずれるみたい
設定＞デザイン＞ページのズーム で常に拡大しておけば
拡大したくないページも大きいままになるけど
- 569 ：Name_Not_Found：2022/08/10(水) 15:04:00.71 ID:???.net
- chromeはドメインごとに個別にズーム設定できるけど、それじゃアカンの？
- 570 ：565：2022/08/10(水) 17:45:13.36 ID:CkzM/nXu.net
- レスありがとうございます
chromeのサイトごとの設定で「5ch.net」を設定しても、核板（例えばここmevius.5ch.net）の設定には反映されないので面倒です
スタイルシートで一括でできないかと思ったけどだめでしょうか
- 571 ：Name_Not_Found：2022/08/10(水) 18:32:35.59 ID:???.net
- chromeではズームさせたいページでズームしたら、次にそのページ開いてもズームされた状態で開かれるし
設定上も5ch.netじゃなくてmevius.5ch.netで設定が残るけど、そういうことじゃないの？
- 572 ：Name_Not_Found：2022/08/10(水) 18:35:51.20 ID:???.net
- ブラウザのドメイン事のsettingやな
stylusで一括指定できる
- 573 ：565：2022/08/10(水) 19:34:41.94 ID:???.net
- レスありがとうございます。
>>571
それは理解していますが、
いろんな板に行くたびにわざわざズームしなくてすむようにドメインで一括で指定したいんです。
>>572
>>567に書きましたが、stylusで設定するとレス番へのポップアップが表示されないので、される方法ないかと思いまして。。
- 574 ：Name_Not_Found：2022/08/10(水) 20:30:31.71 ID:???.net
- >>573
ポップアップがbody基準で座標指定されてるっぽいので
body以下の拡大したいdivにzoom指定すればイケるんじゃない？
たとえば
.thread {
zoom: 1.25 !important;
}
とか
上手く行かないとこは、各要素で個別にfont-sizeいじるとかで
対応すれば他の板・スレでも大体イケる
- 575 ：571：2022/08/10(水) 21:48:13.06 ID:???.net
- >>574
ご教示のコードでうまく表示されました、ありがとうございます。
書き込む前に少し要素で試してたんですが、どれも違ったようです。
cssよくわかってないので助かりました！
- 576 ：Name_Not_Found：2022/08/10(水) 23:03:13.27 ID:???.net
- 5ch は古くてバグだらけで、めちゃめちゃ。
今時どこでもUTF-8 で、shift-jis を使っているサイトなど無いだろ
ページを拡大表示したら、×印を押せなくなるとかw
どうやったら、こういうページを作れるのか、逆に聞きたい
リンクもめちゃめちゃ。
正しいリンクにならない
&; みたいな文字実体参照が入ったり
- 577 ：574：2022/08/10(水) 23:07:40.52 ID:???.net
- 5ch で、ページを拡大表示したら、
右側の広告の下へ、文字が潜り込んで読めないとか
どうやったら、こんなクソなサイトを作れるのか、聞きたいw
- 578 ：Name_Not_Found：2022/08/10(水) 23:41:11.46 ID:???.net
- 5chで広告なんて見たこと無いけど、言ってる内容からするとz-indexかかっているんだろうね
拡大したらレイヤーの下に潜ってしまうのはしゃーない
- 579 ：Name_Not_Found：2022/08/10(水) 23:59:06.21 ID:???.net
- そんなに5ｃｈ見るなら専ブラ使えで終わっちゃう話だし
誰もそんなに困ってないから直す気なんか無いよな
- 580 ：Name_Not_Found：2022/08/11(木) 00:43:58.72 ID:???.net
- 専ブラ知らないんだろうな・・・
- 581 ：Name_Not_Found：2022/08/11(木) 08:19:07.37 ID:???.net
- cssの疑似要素でwhite-space:pre-wrap;を設定し、content内で改行したいんですが
content: "ABC\ADEF";
のDEFを次の行に改行したい場合、"\AD"を回避する方法をご教授ください
- 582 ：Name_Not_Found：2022/08/11(木) 12:49:48.39 ID:???.net
- 手っ取り早いのは\Aの後ろに半角スペース入れる
- 583 ：Name_Not_Found：2022/08/11(木) 13:04:23.11 ID:???.net
- \00000A
- 584 ：Name_Not_Found：2022/08/11(木) 14:23:01.29 ID:???.net
- "ABC\A""DEF"
- 585 ：Name_Not_Found：2022/08/11(木) 17:16:47.91 ID:???.net
- >>582 581 582
どの方法でも対応できました
ありがとうごさいます。
- 586 ：Name_Not_Found：2022/08/13(土) 10:23:06.11 ID:PHisC1YJ.net
- <div class="wrap">
<div class="box">ボックス</div>
</div>
wrapとboxクラスにwidth:100px指定している状態で、
boxクラスにbox-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
として、ドロップシャドウのような効果を適用しました。
すると、boxクラスの両端が欠けてるような表示になります。
box-shadowをつけたことで、wrapクラスの横幅を超えているからですが、
超えても表示させる方法はないでしょうか？
widthのサイズを広げる以外で良い方法があれば教えてください。
- 587 ：584：2022/08/13(土) 10:41:20.03 ID:???.net
- すみません、撤回します。
wrapクラスにoverflow: hidden;を指定したのが影響していました
- 588 ：Name_Not_Found：2022/08/17(水) 08:21:58.44 ID:???.net
- transform:scaleを使って自動的にウインドウの幅に合わせて拡大縮小させる方法はありますか？
- 589 ：Name_Not_Found：2022/08/17(水) 11:49:47.22 ID:???.net
- transform:scaleを是が非でも使いたいわけでもなければ
何をしたいかを明確にしたほうが正解に近づくよ
- 590 ：Name_Not_Found：2022/08/17(水) 13:28:57.60 ID:???.net
- js使えばできるけどtransform使う意味は全くない
- 591 ：Name_Not_Found：2022/08/18(木) 17:50:42.71 ID:???.net
- サイト上に埋め込み動画を表示して、サイトの背景色と動画の背景色とを合わせたいのですが、ブラウザのアドオンを使ってスポイト抽出した場合とスクショをとってフォトショで抽出した場合とで色が異なり、どちらを背景にしてもうまく馴染みません
また他の人に試してもらったら微妙に違うカラーコードになったようです(ディスプレイの違いによるものですかね？)
ベタ塗り背景なので抽出した位置が悪いとかでもないと思うんですが、動画とCSSで綺麗に合わせるのは難しいでしょうか？
- 592 ：Name_Not_Found：2022/08/18(木) 18:07:24.89 ID:???.net
- >>591
別に難しくない
その場合だとアドオンのほうが信頼性は高い
スクショで色が変わるのがpngじゃなく変なjpgになってるとか何かおかしい
- 593 ：Name_Not_Found：2022/08/18(木) 18:12:36.56 ID:???.net
- 動画ファイルをローカルアプリで開いてスクショ→スポイト抽出した色をCSSで背景に設定としたところ、やはりブラウザで見ると微妙に境目ができました
ただ、その部分をスクショしてスポイト抽出してみると、CSS部分も動画部分も同じカラーコードなんです
これはディスプレイの発色によるものでどうしようもないような気がしてきました
- 594 ：Name_Not_Found：2022/08/18(木) 18:37:04.75 ID:Xl13zcwC.net
- 動画をhtmlに埋め込んで、それをキャプチャとったらどう？
Youtubeで適当な動画でそれで試してうまく行ったよ
ただ、試した動画のサムネールが動画の色とずれてるから再生させないと色がずれてた
- 595 ：Name_Not_Found：2022/08/18(木) 18:37:22.16 ID:???.net
- 動画の端に1pxのゴミ入ったりしてない？
今回の件とは違いそうだけど以前作成してもらった動画に問題があって
書き出しし直してもらった事が過去にあったよ
圧縮前の劣化してない動画の色をスポイトしてみるとか
- 596 ：Name_Not_Found：2022/08/18(木) 18:39:49.88 ID:???.net
- スポイトで同じならカラーコーディネートの問題だから気にしなくていい
- 597 ：Name_Not_Found：2022/08/18(木) 18:41:24.96 ID:???.net
- >>593
動画再生支援部分のモニタ出力時に補正かかってるのかもしれんね
動画の色は環境の違いによって補正かかったり動画に埋め込まれてる色空間やフルレンジ/リミテッドレンジの情報無視する場合があるのでまぁほどほどに
- 598 ：Name_Not_Found：2022/08/18(木) 18:47:05.66 ID:???.net
- >>594
それをやったのが589の最初のとこですね
表示されたものを1.ブラウザのアドオンで抽出する、2.スクショしてフォトショで抽出する の2パターンで色を取って背景に設定してみましたが、どっちも境目が見えました
動画ファイルを見せられればいいのですが、仕事で扱うものなのでそういうわけにもいかず。。
>>595
出力時の問題もあったりするんですね
こういう問題があるなら背景で馴染ませるようなデザインはなるべく避けた方が良さそうですね
- 599 ：Name_Not_Found：2022/08/18(木) 18:50:17.64 ID:???.net
- >>597
専門的すぎてなかなか理解が追いつきませんが、CSSでどうにかできる範疇を超えているということはわかりました😭
ありがとうございます
- 600 ：Name_Not_Found：2022/08/20(土) 11:37:17.71 ID:???.net
- すみません、AFNスレでお尋ねしたのですがレスがつかないので
こちらで重複してお尋ねします。どなたか助けて下さいませ。
１．このページをブラウザで開く
https://afngo.net/afnpacific/Daegu
２．画面スクロールして一番下、「AFN Tokyo」をクリック
３．すると画面は次のURLに遷移する
https://afngo.net/radio/Tokyo
４．上記ページ「AFN Tokyo」をブラウザのお気に入りに登録する
５．ところがお気に入りから「AFN Tokyo」 (https://afngo.net/radio/Tokyo)を開いても
なぜか「AFN GO undefined」というページになっちゃう (AFN Tokyo が呼び出せない)
上記１のページを経由せず、いきなり「AFN Tokyo」ページを開くためのURLが欲しいのですが
一体どうすれば希望通りのURLを得られるでしょうか？
- 601 ：Name_Not_Found：[ここ壊れてます] .net
- しらん
- 602 ：Name_Not_Found：2022/08/20(土) 13:44:15.37 ID:???.net
- > なぜか「AFN GO undefined」というページになっちゃう (AFN Tokyo が呼び出せない)
chrome、firefox、edgeで試したが、そうはならない
おま環だろうが、いずれにしろスレ違い
- 603 ：Name_Not_Found：2022/08/20(土) 15:35:16.92 ID:???.net
- >>600
オレ環もブックマークしたら同じ？？？
afngo以外で聞いているので問題なしだけれど
- 604 ：Name_Not_Found：2022/08/20(土) 16:40:46.72 ID:???.net
- >>600
ほんとだ、うちでもその不思議な現象が再現する！(うちも「おま環」なのか？ｗ)
原因わからんしスレチでもあるんだろうけど、どこで訊けばいいのかもわからん
すまんこ
- 605 ：Name_Not_Found：[ここ壊れてます] .net
- スクリプトでページ遷移したように見せかけてるけど直に開かれた時の事は考えてない作りなんじゃね？
- 606 ：Name_Not_Found：2022/08/20(土) 17:54:57.22 ID:???.net
- reactで作られてるってのがヒントだな
でもまぁ、無理なんじゃないかね
とりあえずピン留めして開きっぱなしにすればブラウザ再起動してもイケる
- 607 ：Name_Not_Found：2022/08/20(土) 18:15:18.70 ID:???.net
- Operaだと普通に https://afngo.net/radio/Tokyo プレイヤーページが開かれるな
reactで生成しててもそのURLが変わる事はなはずなのでそのページが開かれないとおかしい
ブックマークのURL確認してみ
- 608 ：Name_Not_Found：2022/08/20(土) 18:20:13.21 ID:???.net
- firefox developer edition 104.0b10でも問題なし
- 609 ：Name_Not_Found：2022/08/20(土) 19:45:49.78 ID:???.net
- >>607
いや、Operaだろうが何だろうが普通に https://afngo.net/radio/Tokyo プレイヤーURLが開かれる
しかしそのページを開いたのにAFN GO undefinedとなるからおかしい、と言ってるんだろ？
>>608
開発版Firefoxだと https://afngo.net/radio/Tokyo を直接開いてもAFN Tokyoが聞けるのか？
- 610 ：Name_Not_Found：2022/08/20(土) 22:04:10.24 ID:???.net
- >>609
すみません、俺があほでした・・・
- 611 ：Name_Not_Found：2022/08/21(日) 00:35:38.29 ID:???.net
- スレチなのもそうだけどスレで聞くよりまず先に
公式サイトには聞いたのだろうか？
- 612 ：Name_Not_Found：2022/08/21(日) 05:48:16.24 ID:???.net
- >>600
3 で、Cookie を見たら、2つ保存されていたので、
その値でアクセスOK と判別されているのかも
5 からアクセスすると、Cookie の値がサーバーに登録されていないので、拒否されるとか？
例えば、Ruby on Rails で作っているようなプロなら、
あらゆるページで、URL を保存される事を考えて、
アクセスOK ならリダイレクトする
逆に、認証トークンなどで認証している場合は、アクセスできないようにする
こういう設定を、routing と言う。
つまり、プログラマーが悪い。バグ
- 613 ：610：2022/08/21(日) 06:10:47.85 ID:???.net
- Edge なら、F12 開発者ツールで、
アプリケーションタブ > ストレージ > Cookie
>>612
修正
3 で、Cookie を見たら、2つ保存されていた。
次に、5 で、Cookieを見たら、同じ値が2つあった
つまり、Cookieで判別していない。
このアプリは、前ページがどこから来たかで、判断しているのだろう
どの道、プログラミングのバグ
- 614 ：610：2022/08/21(日) 06:15:41.89 ID:???.net
- Ruby, Selenium WebDriver などでは、ブラウザの自動操作ができる
ページA へ移動して、そこで特定のボタンを押して、ページB へ移動するとか
iMacros で出来るかも知れないけど、漏れは知らない
- 615 ：Name_Not_Found：2022/08/21(日) 12:54:09.91 ID:???.net
- >>611
じゃあお前が公式サイトに聞いて答えをみんなに教えてくれよｗ
- 616 ：Name_Not_Found：2022/08/21(日) 12:56:08.17 ID:???.net
- >>612
要するにサイト側のバグということで桶？
おま環とか言ってた奴も勘違いということで桶？
- 617 ：Name_Not_Found：2022/08/21(日) 14:25:40.11 ID:???.net
- 例の人に絡んだり、糞しょーもない煽りレスとか
このスレの初心者かな？
- 618 ：610：2022/08/21(日) 17:53:31.72 ID:???.net
- サイト側のバグ。プログラマーが悪い
例えば、Ruby on Rails の本には書いてある
ユーザーがサイト内のすべてのページを、お気に入りに保存して、
そこからアクセスする場合も、逐一考えなければならない
もし認証が必要なら、ログインページへリダイレクトするとか、
そういう処理・routing も考えなければならない
- 619 ：Name_Not_Found：2022/08/21(日) 18:14:47.19 ID:???.net
- このruby信者の文章気持ち悪すぎる
- 620 ：598：[ここ壊れてます] .net
- 皆さん、どうも有り難うございました！
自分でも何となく「サイト自体の方が怪しい」とは感じており期待薄ではあったのですが
ひょっとして呼び出し元URLに何らかの引数？など与えたら希望する「AFNTokyo」が
一発呼び出しできるんじゃないか？などと思いお尋ねした次第です。
残念ながら「サイト側のバグ」であることは明白で、しかも私の質問もスレチのようですから
今回の質問はここで一旦おしまいとさせていただきます。今後は公式サイトにバグ修正を
依頼するメールを送ってみるつもりです。
スレチにも関わらず、結局沢山の方々に色々とお手間を取らせてしまいました。
どうもすみませんでした、そして本当に有り難うございました。
- 621 ：Name_Not_Found：[ここ壊れてます] .net
- バグではなく意図的である可能性も無きにしも非ず
基本的にコンテンツ直リンって、嫌われるイメージある
- 622 ：Name_Not_Found：[ここ壊れてます] .net
- みなさんコーディングってどれくらいの速さでやるんですか？
独習100時間目くらいなんですが今日このサイトのコーディングに8時間かかってしまった(o´Д`)
https://webdesigner-go.com/engbody/
- 623 ：Name_Not_Found：2022/08/21(日) 19:41:29.70 ID:???.net
- >>596
8時間って1人日でしょ 上出来では
- 624 ：598：2022/08/21(日) 19:43:10.82 ID:???.net
- >>622
食事指導に「なし」と「無し」が混在してる
- 625 ：Name_Not_Found：2022/08/21(日) 21:03:31.71 ID:???.net
- 上出来ですか、良かった
鬼集中してやったので終わったらフラフラでした
コーダーを職業にしたらエコノミー症候群になりそう笑
- 626 ：Name_Not_Found：2022/08/21(日) 22:43:22.99 ID:???.net
- >>620
AFN聞いている一人として
おれ環ではAFN360の時もプレイヤーページをいきなりお気に入れてもダメだった
AFN Goもそれに合わせた「仕様です」ということかもしれない
お気に入りに入れられる勝手サイトで聞いた方が手っ取り早い
- 627 ：Name_Not_Found：2022/08/22(月) 07:49:58.03 ID:???.net
- >>624
あ、本当だ
- 628 ：Name_Not_Found：2022/08/22(月) 21:23:16.72 ID:???.net
- 画像をドラッグすると禁止アイコンとやや縮小された画像が表示されるけど
これらを表示しないようにするにはどうすればいいんですか？
- 629 ：Name_Not_Found：2022/08/22(月) 21:40:13.94 ID:???.net
- ulとliで画像を横並びにして画像間の間隔を30pxにしたものをウインドウの幅に合わせて
拡大縮小させる方法は？
zoomが一番いいんでしょうか？
- 630 ：Name_Not_Found：2022/08/22(月) 21:49:47.91 ID:???.net
- このあいだのzoomマンか？
- 631 ：Name_Not_Found：2022/08/22(月) 22:33:01.74 ID:???.net
- ファイヤーフォックスだけ使えないけどzoomが一番いい
transform:scaleだと縮小すると画面いっぱいにならない
無駄な余白もできちゃうから
- 632 ：Name_Not_Found：2022/08/22(月) 22:51:18.26 ID:???.net
- zoomってそんな使い勝手よいか？
- 633 ：Name_Not_Found：2022/08/23(火) 01:41:53.53 ID:???.net
- 悪い
- 634 ：Name_Not_Found：2022/08/23(火) 06:00:42.63 ID:???.net
- zoomはtransform:scaleより全然使いかっていいよ
- 635 ：Name_Not_Found：2022/08/23(火) 06:33:15.19 ID:???.net
- zoomマン自演するな
- 636 ：Name_Not_Found：2022/08/23(火) 06:34:26.84 ID:???.net
- 非標準のゴミプロパティ推してるやつなんなんだ
- 637 ：Name_Not_Found：2022/08/23(火) 14:23:55.98 ID:???.net
- >>629
その条件で何故zoom？
https://jsfiddle.net/5xcd8t2g/
- 638 ：Name_Not_Found：2022/08/23(火) 20:50:45.81 ID:???.net
- tailwindマジうんち
web標準の一部機能に未対応とか独自のビルドシステムや文法とか時代に逆行してるだろ
- 639 ：Name_Not_Found：2022/08/23(火) 21:36:49.52 ID:???.net
- しかもtailwindでよろ！っていうクライアントが出現し始めてる
bootstrapよりうざい
- 640 ：Name_Not_Found：2022/08/24(水) 01:04:37.21 ID:???.net
- 俺もtailwind反対派だけどtwitterの人に@applyは互換性もなく思想に反してるんじゃないのみたいにしつこく聞いてたらブロックされたわ
- 641 ：Name_Not_Found：2022/08/24(水) 08:15:11.62 ID:DzgI8cgc.net
- >>637
画像だけでなく、画像間の幅やテキストなどもウインドウ幅におさまるように縮小したいから
画像だけ小さくなっても画像間が30pxのまんまだとバランスとれないし
- 642 ：Name_Not_Found：2022/08/24(水) 08:39:35.74 ID:???.net
- 条件後出し、マジ嫌われるから止めような
- 643 ：Name_Not_Found：2022/08/24(水) 08:49:01.70 ID:???.net
- レスポンシブ化にzoomを使おうなんて発想が有り得ない
- 644 ：Name_Not_Found：2022/08/24(水) 08:51:14.78 ID:???.net
- そもそも非推奨プロパティだから使うな
- 645 ：Name_Not_Found：2022/08/24(水) 09:13:40.59 ID:???.net
- vwでも使えば
- 646 ：Name_Not_Found：2022/08/24(水) 09:46:24.04 ID:???.net
- >>641
で、何故その条件でfirefoxで動作しないzoom？
せめて最新ブラウザ全てで動作するプロパティ使おうよ
https://jsfiddle.net/1zdutsfw/
- 647 ：Name_Not_Found：2022/08/24(水) 10:33:02.79 ID:???.net
- このスレの奴らって実力は全然ねえのなｗ
ケチつけられる粗を探して見下すだけ
- 648 ：Name_Not_Found：2022/08/24(水) 10:38:49.28 ID:???.net
- 泣くなよzoomマン
- 649 ：Name_Not_Found：2022/08/24(水) 11:25:12.00 ID:DzgI8cgc.net
- >>645
vwだと希望する幅にならないから
つまりpxできっちり指定したものを縮小させたいんだよ
- 650 ：Name_Not_Found：2022/08/24(水) 12:17:07.08 ID:???.net
- >>649
vwもpx数を元に設定できるよ
もしかして目分量で設定してる？
- 651 ：Name_Not_Found：2022/08/24(水) 12:28:55.53 ID:???.net
- px to vwとかでぐぐれ
計算機もあるしmixin関数もゴロゴロ見つかる
- 652 ：Name_Not_Found：[ここ壊れてます] .net
- いや、ここは>>647先生に任せてみよう
先生！お願いします！
- 653 ：645：[ここ壊れてます] .net
- >>652
いや、俺もこのスレの一員だから実力は全然ねえよｗ
ケチつけられる粗を探して見下しただけ
- 654 ：Name_Not_Found：[ここ壊れてます] .net
- >>646
横だがありがとう
clamp関数便利だね
知らずにメディアクエリで個別設定して制御してたわ
- 655 ：Name_Not_Found：[ここ壊れてます] .net
- >>654
ジェネレーター便利だよ
WEB GENERATOR | WEB GENERATOR
https://web-generates.com/
Fluid-responsive font-size calculator
https://websemantics.uk/tools/responsive-font-calculator/
- 656 ：Name_Not_Found：2022/08/24(水) 13:37:58.38 ID:???.net
- >>653
だったら煽るだけのヘタレ先生は黙って見下しオナニーでもしてて
- 657 ：Name_Not_Found：2022/08/24(水) 13:41:47.39 ID:???.net
- >>655
情報ありがとう
でも外部ツールで固定値算出すると修正する時にぱっと見で数値が分かりづらいのと
数値を修正する時が面倒だからSCSSで計算式を残すようにしてるわ
他の人は固定値算出してるのかな？
- 658 ：Name_Not_Found：2022/08/24(水) 14:00:29.57 ID:???.net
- >>657
紹介しといて何だけど、基本的に自分も計算式は残すｗ
が、手っ取り早く使いたい様な場合と使い分けだね
- 659 ：Name_Not_Found：2022/08/24(水) 14:19:40.84 ID:???.net
- >>658
補足もありがとう
認識ズレてなくてよかった
- 660 ：Name_Not_Found：2022/08/24(水) 18:48:14.76 ID:???.net
- >>657
sassのmixinでやるに決まってる
- 661 ：Name_Not_Found：2022/08/24(水) 19:00:17.49 ID:???.net
- そういう話？
- 662 ：Name_Not_Found：[ここ壊れてます] .net
- functionとmixin作っておけば計算式はそこにある
コードはfunc.pxToVw(50)とかになるから50pxをvwにしたいのだとすぐわかる
何の問題もない
- 663 ：Name_Not_Found：2022/08/25(木) 22:14:27.62 ID:???.net
- >>631
transform:scaleで出来る。ただしscaleに与える値を動的に求めるのはcssのcalcじゃ無理
そこでJavaScriptでscaleの値をセットすればzoomもどきができる
当然、Windowsのサイズに動的に追従できてFirefoxでも問題なく動作している
この方法の良いところはtransformのブロックの中の要素を気にせずにzoomもどきができること
- 664 ：Name_Not_Found：2022/08/25(木) 22:27:34.47 ID:???.net
- vwでいいじゃん定期
jsいらんよ
- 665 ：Name_Not_Found：2022/08/25(木) 23:36:35.59 ID:???.net
- 30pxにしたいのかしたくないのかよくわからないし
- 666 ：Name_Not_Found：2022/08/27(土) 18:33:34.70 ID:???.net
- divの中に２つののdivがあってdisplay:table-cellを使うと横並びになっちゃうけど
display:table-cellを縦並びにするにはどうすればいいの？
- 667 ：Name_Not_Found：2022/08/27(土) 18:51:32.24 ID:???.net
- できない
- 668 ：Name_Not_Found：2022/08/27(土) 19:02:37.61 ID:???.net
- >>664
vwじゃ不都合な時がある
例えば幅１００px高さ２５０pxの画像と幅３００px高さ２５０pxの画像を
それぞれwidth:10vwにすると幅１００pxの画像の方がでかく表示されちゃうから
- 669 ：Name_Not_Found：2022/08/27(土) 19:03:53.09 ID:???.net
- >>666
親のdivをdisplay:flexにしてflex-direction:columnにする
子のdivがtable-cellでないといけない理由はなんだろ？
- 670 ：Name_Not_Found：2022/08/27(土) 19:56:41.15 ID:???.net
- >>669
table-cellの方がflexより綺麗に枠におさまるのと
vertical-alignを使えるから
- 671 ：Name_Not_Found：2022/08/27(土) 20:14:49.54 ID:???.net
- >>670
縦の中央揃えもしたいってこと？
それならflexでもできるよ
- 672 ：Name_Not_Found：2022/08/28(日) 00:21:26.38 ID:???.net
- それなら子のdivをflexにしてalgin-items指定する方がいいかもね
親に余分な指定しなくても縦に並ぶし
- 673 ：Name_Not_Found：2022/08/28(日) 00:23:40.17 ID:???.net
- align-itemsのtypoですよって念のため
- 674 ：Name_Not_Found：2022/08/28(日) 11:09:20.47 ID:???.net
- >>668
まず前提条件としてどういう形にしたいのかを出そう
後出し条件もやめよう
そしてcssの設定箇所を見直そう
- 675 ：Name_Not_Found：2022/08/28(日) 11:11:06.71 ID:???.net
- zoomマンは困ってて聞いてるんじゃなくてたぶん荒らしだよ
- 676 ：Name_Not_Found：2022/08/28(日) 11:44:34.28 ID:???.net
- 自力で漕ぎ着けた設定でTUEEEしたいんだと思う
それを荒らしというかだな
以後それっぽい人いたらスルーするよ
- 677 ：Name_Not_Found：[ここ壊れてます] .net
- HTML5のprogress要素を利用したいのですが、
min = 0
max = 100
として
value = 100
が代入されるとページいっぱいに進捗グラフが伸びてしまいます。
どの様にしたらサイズを読み込み時のままに100％表示が出来ますか？
- 678 ：Name_Not_Found：2022/08/29(月) 14:48:31.61 ID:???.net
- >>677
質問がおま環っぽいので取り下げます。
使ってるライブラリ内に書いてるのが原因ぽかったので
- 679 ：Name_Not_Found：2022/08/29(月) 15:40:30.08 ID:???.net
- >>677,678
状況再現できなくて回答躊躇してた……原因分かったならなにより
デフォルトで使う分にはいいけど、きっちり整形しようとするとめんどいねこの要素
- 680 ：Name_Not_Found：2022/08/29(月) 18:33:10.49 ID:???.net
- >>674
<style>
#image_set{
list-style:none;
display:flex;
background-image:url('./bg.png');
}
#image_set img{
width:10vw;
}
#image_set li{
margin-right:1vw;
}
</style>
<ul id="image_set">
<li><img src="./img1.png"></li>
<li><img src="./img2.png"></li>
<li><img src="./img3.png"></li>
</ul>
img1.pngは幅100px高さ250xの画像、img2.pngは幅200px高さ250px、img3.pngは幅300px高さ250pxの画像
これでウインドウサイズを変えると画像の大きさは変わるが
画像の高さが１＞２＞３の順になってしまう。しかも背景画像のbg.pngは縮小されない
これがvwの欠点なので一括縮小できるzoomがいいと思った。
- 681 ：Name_Not_Found：[ここ壊れてます] .net
- zoom使う要素がどこにもないんだが…
- 682 ：Name_Not_Found：2022/08/29(月) 20:13:06.94 ID:???.net
- 結論 zoomerは荒らし
- 683 ：Name_Not_Found：2022/08/29(月) 20:13:25.41 ID:???.net
- >>680
・画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる
・画像サイズがバラバラかつ点数が多いなら、object-fit使って同じ枠内に納めればレイアウト上もすっきりする
・間隔はjustify-contentのspace-aroundなりspace-betweenなりに任せれば考える必要もなく
・背景画像はbackground-size:coverなりcontainなりにしておけば相対比率で縮小される
- 684 ：Name_Not_Found：2022/08/29(月) 20:44:28.05 ID:???.net
- 条件が雑過ぎるから、これまでの条件も加味して適当に作ったけど
vw使っても全然できるよね
https://jsfiddle.net/vgh7xm5u/
- 685 ：Name_Not_Found：[ここ壊れてます] .net
- 例えば小説家になろうの
ncode.syosetu.com##.footerbookmark > li > a
に付与されているhrefにより、リンク動作とともに「javascript:void(0)」がマウスオーバーされてしまう現象
正常動作を保ちながらマウスオーバーのみ非表示にする方法はありませんか？
ネットではpointer-events:noneが目立ち、リンクそのものまで完全除去してしまう例ばかりでしてm(vv)m
- 686 ：Name_Not_Found：2022/08/30(火) 12:34:30.26 ID:???.net
- >>683
設計時の画像の幅はcssで取得できますか？
>>684
９で割っているけど９という値はどこから来たんですか？
- 687 ：Name_Not_Found：2022/08/30(火) 13:17:10.41 ID:???.net
- 以降zoomerを相手するやつも荒らし
- 688 ：Name_Not_Found：2022/08/30(火) 13:26:15.10 ID:???.net
- > ９で割っているけど９という値はどこから来たんですか？
要は>>683のコレ
> 画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる
calc((660 / 900) * 100vw)
画面幅900px時に660pxになるって意味
「どの画面幅の時に画像幅が250pxだったりmargin-rightが30pxになるよう設計してるのか？」が分からなかったから
仮に900pxとしただけで、そこは1280pxとか好きに変えてどうぞ
というわけで、もうzoomは諦めろ
- 689 ：Name_Not_Found：2022/08/30(火) 13:42:47.42 ID:???.net
- >>685
先ずその例に挙げられてるとこに辿り着けないのは自分だけ？
- 690 ：Name_Not_Found：2022/08/30(火) 14:08:03.28 ID:???.net
- >>689
その前に何が言いたいのか分からなかった……
- 691 ：Name_Not_Found：2022/08/30(火) 14:22:12.18 ID:???.net
- >>689
場所が分かった
各作品ページ内か目次の欄にある「ブックマークから削除 or ブックマークに追加」のボタン
モーダル表示によるワンクッションをいれる為にjavascript:void(0)でAタグによる動作を止めてるっぽいね
＞正常動作を保ちながら～とかマウスオーバーされてしまう～
この付近への理解が追いつかない
ソースを見る限り正常な動作してると思うんだよね
マウスカーソルを矢印のままにしたいとかなのかな？
- 692 ：683：2022/08/30(火) 14:46:52.41 ID:???.net
- リンク先の値表示で、ハイパーリンク上へカーソルを持っていくとブラウザ下方にステータスが表示されますよね
-----
ncode.syosetu.com##.footerbookmark:style(float:left!important;)
ncode.syosetu.com##.footerbookmark > li:style(height:20px!important; font-size:11px!important; line-height:20px!important; margin:2px 15px 2px 0px!important;)
ncode.syosetu.com##.footerbookmark > li > .add_bookmark:style(font-weight:normal!important; color:#aaaaaa!important; border-color:#eeeeee!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > .bookmark_delete_url:style(border-left:0px!important; background-color:#ffffff!important;)
ncode.syosetu.com##.footerbookmark > li > a:style(width:100px!important; padding:0px!important;)
-----
こんな感じで便利かつ邪魔にならない最適な表示位置へ変更したものの、無意味な「javascript:void(0)」ポップアップとカーソルポインタの重なりが絶妙にブラクラ状態となってしまい・・・
特定のハイパーリンクのみを、機能は維持しつつもステータス非表示に出来ないかなと
ブックマークのON/OFFは使いたいがいちいち表示される「javascript:void(0)」ポップアップを消したい
そんな願望ですm(vv)m
- 693 ：Name_Not_Found：2022/08/30(火) 15:10:50.79 ID:???.net
- というか、それはublockとかの広告ブロッカーの話？
- 694 ：Name_Not_Found：2022/08/30(火) 15:27:14.52 ID:???.net
- >>692
モーダル（ポップアップ）内のボタンを押した時に
JSでデータベースにアクセスするようにしてるからモーダルをスキップするのは諦めろ
Aタグどうこうだけじゃ無理だし君には手に負えない
- 695 ：Name_Not_Found：2022/08/30(火) 15:39:37.64 ID:???.net
- > 「javascript:void(0)」ポップアップを消したい
「ブックマークに追加」ボタンを押すことで表示されるモーダルを表示させずに
「ブックマークに追加」と「ブックマークを解除」を切り替えたいってこと？
ブックマークボタンの表示はモーダルのcloseボタンでページをリロードさせて切り替えてるし
いずれにしろjavascriptの話だからスレ違いだし、恐らく今使ってる機能拡張で対応するのは
無理じゃないかな
- 696 ：Name_Not_Found：2022/08/30(火) 16:51:24.39 ID:???.net
- >>694-695
リンク先のステータスを一括非表示とかであればどこかで何度も目にした記憶ですが、やはりリンク単一での処理は無理でしたか
助言有難うございました
- 697 ：Name_Not_Found：2022/08/30(火) 19:31:30.96 ID:I7IXLTks.net
- 課題で作ってるサイトのお気に入りボタンのハートをクリックした後に色付きにしたいのですがcssだけでできますかね？色付きのハートのボタンを画像化するしかないですか？
- 698 ：Name_Not_Found：2022/08/30(火) 19:45:12.00 ID:???.net
- ここで聞いたらカンニングじゃん？
- 699 ：Name_Not_Found：2022/08/30(火) 20:49:52.70 ID:???.net
- できるけどカンニングよくない
- 700 ：Name_Not_Found：2022/08/31(水) 00:33:01.93 ID:???.net
- >>697
CSSでできる
なにかのやり方を調べるスキルはこの先ずっと必要だから、自力でがんばれ
- 701 ：Name_Not_Found：2022/08/31(水) 00:48:20.19 ID:???.net
- 俺はハート型を書くことができない！
実装はアレとアレかなあ
- 702 ：Name_Not_Found：2022/08/31(水) 19:32:39.32 ID:???.net
- ハートをCSSだけで作ろうと思えば作れる
クリック後に色を反転させることもJS使わずにCSSだけで作ろうと思えば作れる
- 703 ：Name_Not_Found：2022/08/31(水) 21:13:19.20 ID:???.net
- 質問スレなんだからせめてチェックボックスとかヒントいれてもいいんじゃないの
なんか答え出すなって流れだから画像出さないけどさ
答えから学ぶことも大いにあると思ってる
学べない人は遅かれ消えるんだし
そこからjsに繋がってったらええやん
- 704 ：Name_Not_Found：2022/08/31(水) 22:12:58.68 ID:???.net
- 意地悪じゃなくて不正に荷担したらダメだろ
- 705 ：Name_Not_Found：2022/08/31(水) 22:43:29.52 ID:???.net
- 過保護画像おじvs放任主義（普通）
ﾌｧｲ
- 706 ：Name_Not_Found：2022/08/31(水) 22:44:56.30 ID:???.net
- 課題で とか誰も必要としてない情報を入れなければ回答得られたのにな
- 707 ：Name_Not_Found：2022/08/31(水) 22:53:33.93 ID:???.net
- 言わなくてもいいことの分別
って大事だよね
- 708 ：Name_Not_Found：2022/08/31(水) 23:02:33.18 ID:???.net
- まあ画像おじさんの言いたいことは分かるしその通りだと思うけど
教育する立場の人もいるだろうしその役割を奪っていいのかってのはある
同じ苦労をさせて無駄な時間をかけさせるのは本当に無駄でしかないし
ただみんな課題ってとこに引っかかってるだけじゃね
- 709 ：Name_Not_Found：2022/08/31(水) 23:15:01.30 ID:???.net
- できるかできないかのヒントは出したつもりだった
質問してくるぐらいやる気ありそうだし頑張ってほしいなと思ってみてたわ
- 710 ：Name_Not_Found：2022/08/31(水) 23:15:11.71 ID:???.net
- 課題
で一線引いたやつはいるだろうな
質問スレだから茶化すのも含め色々アウトだけど
- 711 ：Name_Not_Found：2022/08/31(水) 23:52:39.40 ID:???.net
- >>705
ﾌｧｲになるほど勢いねんだわこのスレっつーか板
スレの主題を無視すれば双方間違ったこと言ってねーし
かなC
- 712 ：Name_Not_Found：2022/09/01(木) 00:00:54.03 ID:???.net
- ちゅーても、ググって答え見つけるのも、ここで答え貰うのも大差無いからな
書きぶりからすると、そういうのも含めて成果物が出来上がればいいってだけの課題なんだろうし
ここで質問することを一概に不正と決めつけるのも見当違いのような
画像を別に用意して実装する方法は分かってるっぽかったし、別解があるのか？って程度の質問に
そんなに騒ぐ必要も無い
- 713 ：Name_Not_Found：2022/09/01(木) 00:10:14.32 ID:???.net
- ハートを環境依存文字でやると落第なのでしょうか
- 714 ：Name_Not_Found：2022/09/01(木) 00:17:58.43 ID:???.net
- 『cssだけでハート』ってぐぐれば
ちょうどいいの出てくんじゃん
- 715 ：Name_Not_Found：2022/09/01(木) 01:18:17.98 ID:???.net
- そういや子供の頃BASICでハート作ったなぁ
- 716 ：Name_Not_Found：2022/09/01(木) 01:29:31.17 ID:???.net
- ＞ハートを環境依存文字でやると落第なのでしょうか
そんなことで落第させるような学校は辞めてしまえ
- 717 ：Name_Not_Found：2022/09/01(木) 01:47:33.53 ID:???.net
- ↓の記事で紹介されている方法を組み合わせれば、HTMLとCSSだけで、画像を使わずにハートをクリックしたときに色を反転させることはできる
CSS | ハート型（Heart）の作り方
https://1-notes.com/css-shape-heart-design/
cssだけでトグルを実装する
https://zenn.dev/katoaki/articles/fcef72b6e16709
※HTMLの<label>を<input>要素に関連付ける方法を知っていることが前提
- 718 ：Name_Not_Found：2022/09/01(木) 01:53:40.67 ID:???.net
- 「cssだけでトグルを実装する」の例ではコンテンツの表示・非表示を切り替えているが
そうではなくて
「CSS | ハート型（Heart）の作り方」で作ったハートの背景色（background）を変えてあげればよい
- 719 ：Name_Not_Found：2022/09/01(木) 03:53:26.30 ID:???.net
- 質問の感じマルチポストしてるだろうし答えてあげてももう来ないだろうな
- 720 ：Name_Not_Found：2022/09/01(木) 08:24:28.34 ID:???.net
- cssのプロパティーを書く順番について
width,height,background,border,padding,margin,font-size
どの順番に書いた方がいいですか？
- 721 ：Name_Not_Found：2022/09/01(木) 09:29:01.24 ID:???.net
- >>720
csscombのstylelintに任せろ
- 722 ：Name_Not_Found：2022/09/01(木) 13:01:51.60 ID:???.net
- ulの中にある画像やテキストや背景などにそれぞれvwをつけてウインドウ幅に合わせて
縮小させるのは難しいので
ulだけにvwをつけてulの中の画像やテキストや背景も縮小することはできないんですか？
- 723 ：Name_Not_Found：2022/09/01(木) 13:54:52.22 ID:???.net
- >>720
MozillaやW3Cが推奨してるのは視覚順
Googleが推奨してるのはABC順
仕事ならグループ内の基準に合わせて
個人ならお好きにどうぞ
- 724 ：Name_Not_Found：2022/09/01(木) 14:17:42.09 ID:???.net
- >>722
>>684
- 725 ：Name_Not_Found：2022/09/01(木) 15:09:36.43 ID:???.net
- bootstrapで作ってて、
<a class="btn btn-light btn-lg fs-1 fw-bold" href="...">hoge</a>
みたいなコードが何個もあるんですが、
このクラスのセットをまとめてｃｓｓファイルに切り出したりってどうやったらできますか
- 726 ：Name_Not_Found：2022/09/01(木) 15:32:45.49 ID:???.net
- ブラウザの開発ツールから実際に適用されてるstyleをコピペ
もしくはcssファイル開いてセレクタで検索
- 727 ：Name_Not_Found：2022/09/01(木) 17:00:03.17 ID:???.net
- 同じコードが複数あるから「btn btn-light btn-lg fs-1 fw-bold」の部分を一つのクラスにして↓みたいなことをやろうとしているのならやめた方がいい
<a class="bd-btn" href="...">hoge</a>
ボタンのhoverやactive時のエフェクトが効かなくなると思う
- 728 ：Name_Not_Found：2022/09/01(木) 17:05:59.67 ID:???.net
- >>697 ありがとうございました。オンラインスクールの課題だったので軽い気持ちで質問してしまいました。ポートフォリオに載せる時はcssだけのやり方で実装したいと思います
- 729 ：Name_Not_Found：2022/09/01(木) 22:14:59.30 ID:???.net
- >>711
無視は草
いやだめだろそれw
>>728
軽い気持ちで質問していきゃいいよ
基本ここのおじは回答したい欲に飢えてるからw
回答を通して自分の引き出しの再確認って意味合いもあるしwin-winよ
- 730 ：Name_Not_Found：2022/09/01(木) 22:52:42.19 ID:???.net
- お題があると自分の再確認になるのは確かだね
- 731 ：Name_Not_Found：2022/09/01(木) 23:04:45.58 ID:???.net
- 質問があると回答おじ達の運動会が始まるから中々回答できねーわ
みんなこのくらいに帰ってるんだよな俺もたまには回答したいわ
- 732 ：Name_Not_Found：2022/09/02(金) 00:06:22.67 ID:???.net
- 再確認するまでもないはずの非推奨になって使わなくなったプロパティでそうだったっけ？ってのを確認したことはあるな
直近で言えばzoomとか
結局再確認ってとこに落ち着いたけど
※荒らす意図はない
- 733 ：Name_Not_Found：2022/09/02(金) 00:30:10.14 ID:???.net
- >>725
以下のように、JavaScript を使えば出来るけど、
HTML, CSS だけで出来るかどうかは知らない
例えば複数クラス、class="aa bb" は、
"aa bb"という文字列を、class属性に設定するだけ
<div id="xx" class="aa bb">ABC</div>
<div id="yy">おはよう</div>
// xx から、クラス属性を取得する
const cName = document.getElementById( "xx" ).className;
console.log( cName ); //-> "aa bb"
// yy のクラス属性に、"aa bb"を設定する
document.getElementById( "yy" ).className = cName;
結果
<div id="yy" class="aa bb">おはよう</div>
- 734 ：Name_Not_Found：2022/09/02(金) 03:15:24.19 ID:???.net
- いつもの人が、いつも以上に頓珍漢な回答をしてるな･･･
- 735 ：Name_Not_Found：2022/09/02(金) 04:16:44.27 ID:???.net
- クラス付与はcssじゃ無理
回答しようにもクラスをセットで云々ってトコにかすりもしないしこの回答でいいのかが分からんからエスパー気味になるけど
隣接兄弟要素に同じスタイルを付与したいとか、一つの要素を基準に別の要素にスタイルを当てたいって相談だったのなら
結合子を使って.A + .Bとか擬似クラスを使えば出来る
js自体は綺麗だし良いと思う
それぞれ画像みたいな感じ
正直回答がこれでいいのか自信がない
- 736 ：Name_Not_Found：2022/09/02(金) 04:17:59.71 ID:???.net
- 画像貼り忘れたけど自信ないしいいかすまん
- 737 ：Name_Not_Found：2022/09/02(金) 06:54:50.76 ID:???.net
- >>736
着地点俺もよくわからないし気にすんな
- 738 ：Name_Not_Found：2022/09/02(金) 13:04:29.52 ID:???.net
- <style>
#test{
width:100%;
height:300px;
background-image:url("./test.png");
background-size:cover;
}
</style>
<div id="test"></div>
背景画像の元のサイズは幅１２００px高さ８００pxとする
これでウインドウを縮小すると背景画像も縮小されるけど、背景画像の全体が表示されるので、背景画像の隠れた部分まで表示されてしまいます。
隠れた部分を表示せずに背景画像の比率も変えないでウインドウ幅に合わせて縮小するにはどうやればいいんですか？
なお背景画像は複数表示されてもOKです。
- 739 ：Name_Not_Found：2022/09/02(金) 13:19:29.34 ID:???.net
- ちょっと何言ってるか分からないけど、言葉通りの質問なら
例題が答えになってるという珍しいパターン
- 740 ：Name_Not_Found：2022/09/02(金) 14:12:13.70 ID:???.net
- ＞背景画像の隠れた部分まで表示されてしまいます。
隠れた部分が表示されないのでどうすれば表示されますか？なら分かるが
まさしく>>739だね
- 741 ：Name_Not_Found：2022/09/02(金) 14:24:58.40 ID:/RJw6LmJ.net
- >>738
高さ指定を下記の様に書き換えた時の動きが求める解ですか？
height: calc(100vw * 0.25);
- 742 ：Name_Not_Found：2022/09/02(金) 18:27:49.82 ID:???.net
- >>741
近い感じだけど
それだと背景画像がちょっと横に引き伸ばされちゃった
引き伸ばしはされないでウインドウ幅に合わせて縮小って感じにしたいです
- 743 ：Name_Not_Found：2022/09/02(金) 18:49:27.37 ID:???.net
- 例えば円の画像を背景にすると自動で下の図のように並ぶけど
この並んだ状態のまんまウインドウ幅に合わせて縮小ってことです
coverだと円が枠いっぱいに拡大されちゃうのでだめです
http://o.5ch.net/1zacc.png
- 744 ：Name_Not_Found：2022/09/02(金) 18:55:22.82 ID:???.net
- background-size:100% 100%;
のことか？
- 745 ：Name_Not_Found：2022/09/02(金) 18:55:47.70 ID:???.net
- 間違えた 100% auto
- 746 ：Name_Not_Found：2022/09/02(金) 19:10:53.54 ID:???.net
- background-size: contain; でもいいと思う
no-repeat をつけるかつけないかはお好みで
- 747 ：Name_Not_Found：[ここ壊れてます] .net
- >>744-745
それだな
- 748 ：Name_Not_Found：2022/09/02(金) 23:14:38.60 ID:???.net
- セクションの区切りの線を波線にしたいのですがイラレで波線をsvg形式で保存するっていうのはそのセクション前後の背景色込みのデータを保存すれば良いですか？
例えば白のセクションの次のセクションの背景を青にしたくてその青の線を波線にするにはどういうsvgデータを作成すれば良いのでしょうか？
- 749 ：Name_Not_Found：2022/09/02(金) 23:39:05.74 ID:???.net
- Custom Shape Dividers でぐぐってみて
- 750 ：Name_Not_Found：2022/09/03(土) 09:41:20.10 ID:???.net
- >>743
>>738 と同じ問の流れだとすると前提条件が違う
まさかzoomマン？
後出しで条件を変えて解答を否定するのは良くない
- 751 ：Name_Not_Found：2022/09/03(土) 09:52:18.83 ID:???.net
- >>748
“hr 背景画像 波線” でググる
背景色に影響されたくなかったらベクターの背景透過画像
- 752 ：Name_Not_Found：2022/09/03(土) 12:38:07.79 ID:???.net
- >>745>>749
試してみたけどちょっと思った通りと違いました。
>>745は横に引き伸ばされちゃって、>>749は比率が変わっちゃいました
cssは無理なのかな？JSでやるしかないのかな？
- 753 ：Name_Not_Found：2022/09/03(土) 12:38:33.21 ID:???.net
- >>749
>>751
ありがとうございます！
- 754 ：Name_Not_Found：2022/09/03(土) 13:00:00.03 ID:???.net
- >>752
アンカー間違ってそうだけど>>746も試してみた？
必要に応じて background-position や background-repeat もつけてね
- 755 ：Name_Not_Found：2022/09/03(土) 13:28:08.22 ID:???.net
- >>752
> 横に引き伸ばされちゃって
縮小はしたいけど、拡大はNGなの？
だったらメディアクエリのmin-widthで画像の最大幅を指定して
background-size: auto;を指定してやれば済む話だろ
- 756 ：Name_Not_Found：2022/09/03(土) 22:43:58.15 ID:???.net
- >>754
それでやったけど枠より大きい画像の場合縮小されてしまいました。
>>755
元の画像より拡大はしたくないです
- 757 ：Name_Not_Found：2022/09/03(土) 23:01:11.11 ID:???.net
- 背景画像が枠より大きい場合は図のように表示
ウインドウ幅を縮小するとをその状態のまんま背景画像を縮小って意味です。
coverやcontainだと枠からはみ出た部分も枠に入っちゃうんです。
枠からはみ出た部分は枠に入れたくなかったんですぅ。
http://o.5ch.net/1zasy.png
- 758 ：Name_Not_Found：2022/09/03(土) 23:01:24.10 ID:???.net
- >>756
だから>>745 + >>755でイケるじゃん
- 759 ：Name_Not_Found：2022/09/03(土) 23:05:17.82 ID:???.net
- >>757
height:300pxで固定じゃないのかよ
画像サイズも縦長になっちゃってるし
途中で条件変えるなよ
- 760 ：Name_Not_Found：2022/09/03(土) 23:49:36.91 ID:???.net
- >>757
ほれ。zoom要らないぞ？
https://jsfiddle.net/m9db30z6/
- 761 ：Name_Not_Found：2022/09/04(日) 00:05:08.98 ID:???.net
- >>757
zoomマン様
出来るけれどそれは単純じゃない
要件を小出しにしてきたのは良くない
その要件も背景の事しか書いていないけれど
前面の要素はどうするんだよとかツッコミどころがある
とにかく色々と解答を得たことにダメ出ししたままで全部投げは良くない
ダメな部分をどうすれば良いのか自分で応用案を考えるのが先だよ
- 762 ：Name_Not_Found：2022/09/04(日) 13:26:51.53 ID:xF1KZss9.net
- >>760
イイね
ちょこっと複数背景画像を指定して
ちょこっと手直しでイイ感じ
- 763 ：Name_Not_Found：2022/09/04(日) 14:34:31.67 ID:???.net
- また後出し要素が･･･
そんなに気軽に手直しできるかな？
- 764 ：Name_Not_Found：2022/09/04(日) 16:04:11.96 ID:???.net
- zoomerにかまうのやめよう
- 765 ：Name_Not_Found：2022/09/04(日) 17:25:19.19 ID:???.net
- zoomerはもう少し伝える努力をして欲しい
レス番の修正もそうだけど言ってる内容がちぐはぐな事が多いので
書き込む前に複数回見返す癖をつけようや
- 766 ：Name_Not_Found：2022/09/05(月) 23:46:37.97 ID:???.net
- <td>x
xと一致するときだけスタイルシートを適用したいのですが
<td class="hoge">と何百行と書くのを避けたいです
どのような指定方法がありますか？よろしくおねがいします
- 767 ：Name_Not_Found：2022/09/06(火) 00:41:04.97 ID:???.net
- ややスレチな回答になるけど、<td>は全部手打ち？
手打ちの場合はjavascriptで<td>内の該当文字のあるタグにclass名を付与する
PHP等による自動挿入の場合は、導入する時にclass名を自動で付与しよう
それ以外だと
<td>xが何列目に来るのかが固定の場合は
中身に対してではなく○番目のタグのような色変更はできるよ
設問の例だとどういう形になるのかな？
- 768 ：Name_Not_Found：2022/09/06(火) 00:55:10.85 ID:???.net
- 返信ありがとうございます
巨大なテーブルタグをツールで出力しました
<tr>と<td>がそれぞれ数百行あり、<td>xの出現はまちまちで規則性はありません
やりたいことは、<table class="hoge">として、特定の文字列の<td>にスタイルを適用したいのです
<td>xを<td class="hoge">xと律儀に置換するしか表現できないのでしょうか？
- 769 ：Name_Not_Found：2022/09/06(火) 00:56:17.61 ID:???.net
- >>766
・手打ちなら最後に正規表現使ってクラス付きのタグに一括置換
・動的テーブルなら出力時に条件設定してクラス付加
- 770 ：Name_Not_Found：2022/09/06(火) 01:07:16.95 ID:???.net
- jsで<table class="hoge">の中の<td>を全部取得してその中に特定の文字列がある<td>にクラスを付与するのかな
- 771 ：Name_Not_Found：2022/09/06(火) 10:49:23.82 ID:???.net
- >>768
ツールってどういうツール？
javascript？PHP？Excel等のローカル？
- 772 ：Name_Not_Found：2022/09/06(火) 14:08:42.09 ID:???.net
- >>768
CSSに内容によるセレクタはないので、どうしてもHTML上でクラス付加したくなければJS使うしかないね
ただ、もとのテーブルがツール管理なら出力後のHTMLをどう加工しても影響なくない？
クラス付加程度でソースの可読性は落ちないし、メンテ考えるとJSでの処理はおすすめしないなあ
- 773 ：Name_Not_Found：2022/09/06(火) 17:04:10.22 ID:???.net
- Ruby で正規表現で作ったら、
<td>xx も置換されてしまった
re = /<td>x/
replace = '<td class="hoge">x'
html = <<'EOT'
<td>x</td>
<td>xx</td>
EOT
dest = html.gsub( re, replace )
print dest
出力
<td class="hoge">x</td>
<td class="hoge">xx</td>
- 774 ：Name_Not_Found：2022/09/06(火) 20:03:37.10 ID:???.net
- rubyでやったことないけど、re = /<td>x(?=<)/ ならいけるんでない
- 775 ：771：2022/09/07(水) 00:47:53.91 ID:???.net
- 確かに、re = /<td>x(?=<)/
にすれば、<td>xx は置換されなかった
<td>x</td>
だけが置換された
- 776 ：771：2022/09/07(水) 01:02:56.22 ID:???.net
- これでも良かった。
re, replace 両方の末尾に、< を付ける
re = /<td>x</
replace = '<td class="hoge">x<'
- 777 ：766：2022/09/07(水) 08:10:48.16 ID:???.net
- みなさん親切に教えていただきありがとうございました
表を作るたびにjavascriptで指定するのは大変なので、ファイルサイズが1mbに倍増しましたがクラス付加にしました
.hoge a[href="URL"] { みたいな指定が内容に対してできないと分かってよかったです
ツールというのはwebツールでexcelデータをtableタグに置換しただけです（書き方が悪くてすみませんでした）
- 778 ：771：2022/09/07(水) 12:01:29.92 ID:???.net
- HTML パーサーを使うのなら、外側にid を付けるだけでも、処理する範囲を限定できる
例えば、id="tbl_1" の子(直下)のtr の子のtd
みたいに、構造が決まっていれば、正確に処理する範囲を限定できる
もちろん、もっと細かく、すべてのtr, td に、class を付けることも出来る。
要するに、正確に処理する範囲を限定できるかどうかが重要
<table id="tbl_1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
- 779 ：Name_Not_Found：2022/09/07(水) 12:28:50.47 ID:???.net
- javascriptとかruby使う必要あるか
出力されたHTMLをテキストエディタで開いて<td>xxx</td>を<td class="hoge">xxx</td>に一括置換すればいいだけなのでは
- 780 ：Name_Not_Found：2022/09/07(水) 13:38:22.59 ID:???.net
- >>777
画像なしで1MBはちょっと大きいね
ページを分割するか、外部データにして動的に少しずつ読み込む方が見る側に優しいかも
- 781 ：Name_Not_Found：2022/09/07(水) 20:28:33.73 ID:H3nxHm9n.net
- srcsetで
PC用画像の時にだけ効かせるCSS
スマホ用画像の時にだけ効かせるCSS
て書く方法あります？
<picture>
<source media="(max-width:750px)" srcset="SP.jpg">
<img class="hoge" src="PC.jpg">
</picture>
これだと.hogeはスマホの画像にも効いてしまう
mediaqueryで対応すれば解決自体はできるけど、上記の方法を知りたい
- 782 ：Name_Not_Found：2022/09/07(水) 21:12:05.96 ID:???.net
- なんでメディアクエリじゃ駄目なのかわからん
- 783 ：Name_Not_Found：2022/09/07(水) 21:23:26.96 ID:???.net
- >>781
pictureでまとめたものはsourceひっくるめて一つのオブジェクト扱いなので、クラス分けるのは無理
メディアクエリでSP用とPC用の定義を分けるのが最適解
- 784 ：Name_Not_Found：2022/09/07(水) 21:44:36.95 ID:???.net
- >>783すばらしい
ありがとう！
- 785 ：Name_Not_Found：2022/09/08(木) 07:34:50.40 ID:???.net
- >>766
jQueryなら1行でできるけどな。
$('td:contains:("x")').css('color','red');
jQuery使いたくないならjsの.includes() 使えばいい。
cssはテキストノードに関しては無理。 href="x"やvalue="x"など「属性」なら属性セレクタでできる
- 786 ：Name_Not_Found：2022/09/08(木) 12:39:01.58 ID:???.net
- ハイフンから始まるcssプロパティーってベンダープレフィックスだけですか？
- 787 ：Name_Not_Found：2022/09/08(木) 12:53:49.70 ID:???.net
- >>786
ハイフンハイフンで始まるカスタムプロパティ (CSS 変数)がある
- 788 ：Name_Not_Found：2022/09/08(木) 15:06:18.05 ID:???.net
- >>785
containsの後にコロン入ってるよ！
あとcss()よりaddClass()の方が使い勝手いいかも
- 789 ：Name_Not_Found：2022/09/08(木) 17:09:56.14 ID:???.net
- >>768
素のjsでもxpath使えばこんなもん
const result = document.evaluate('//table[@class="hoge"]//td[text()="x"]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (let i=0; i<result.snapshotLength; i++) { result.snapshotItem(i).classList.add("hage"); }
- 790 ：Name_Not_Found：2022/09/08(木) 18:06:13.83 ID:???.net
- >>788
そうなんよね
スタイル定義は意識してCSSに分離しとかないと、後々探し回る羽目になりがち
- 791 ：Name_Not_Found：2022/09/09(金) 12:40:19.85 ID:???.net
- >>788
>>790
同感
jQueryでCSSを設定しまくってたサイトの変更がめちゃ大変だった
- 792 ：Name_Not_Found：2022/09/09(金) 15:08:52.51 ID:???.net
- >>788
スマン コロンは後で気付いたわ
そう、cssメソッドなんて普段使わんよ。1行で簡潔できるのをわかりやすく示しただけ。
クラス付与が基本よな
- 793 ：Name_Not_Found：2022/09/09(金) 15:10:43.28 ID:???.net
- もうレスポンシブが主流なんだから
.css()なんて誰も使ってないから大丈夫だよ。
みんなわかってるって
- 794 ：Name_Not_Found：2022/09/09(金) 15:13:16.38 ID:???.net
- バニラのjsなんてコピペでもしないと覚えられないわ
jQueryならなんも見ないでも書けるし便利だからやめられん
- 795 ：Name_Not_Found：2022/09/09(金) 18:38:25.57 ID:???.net
- bootstrapもjquery排除したし無くて困る事は減りつつあるような気が
まぁ、アプリならvueとかreact使うだろうから余計に要らないのだが
- 796 ：Name_Not_Found：2022/09/09(金) 20:04:48.67 ID:???.net
- tableの左上と右上を丸くしたいのですがtableにborder-radiusを指定しても丸くなりません。border-collapseはseparateでborder-spacingは0で指定してます、
- 797 ：Name_Not_Found：2022/09/09(金) 20:13:31.60 ID:???.net
- 「table css 角丸」でググってみ
- 798 ：Name_Not_Found：2022/09/09(金) 21:07:41.16 ID:???.net
- >>796
テーブルのボーダーの上にセルのボーダーが被ってるんじゃね
該当部分のボーダーを消せば見えるようになるはず
table {
border-collapse: separate;
border-spacing: 0;
border-radius: 12px 12px 0 0;
border: 2px solid black;
margin: 0 auto;
min-width: 50vw;
}
td {
border: 2px solid black;
border-left: none;
border-bottom: none;
}
tr:first-of-type td { border-top: none; }
td:last-of-type { border-right: none; }
- 799 ：Name_Not_Found：2022/09/10(土) 00:18:18.49 ID:???.net
- >>798
ありがとうございます！できました～
- 800 ：Name_Not_Found：[ここ壊れてます] .net
- amazonのID：product-alert-grid_feature_divについて質問です
→例えばアマゾンの「パナソニック-ニュアンスグレー色-NA-F50B15-H-ビッグウェーブ洗浄「つけおきコース」でがんこな汚れも-「槽乾燥」コースで清潔に」
このIDは関連商品の広告バナーにも併用されているIDですが、純粋な商品警告に使用された場合、高確率で文字列が加わります
#product-alert-grid_feature_div > div > div.prodImageと後続の#product-alert-grid_feature_div > div > h2の間に改行を挟みたいのですが、displayやpositionの変更では上手くいきません
ハイパーリンクを伴うリンク画像の後に<br>タグを差し込むような感じで文字列を下方修正表示させる場合、どのように指定すれば良いでしょうか？
よろしくお願いしますm(vv)m
- 801 ：Name_Not_Found：[ここ壊れてます] .net
- 参考リンクはどうしてもNGワードやこのスレッドにはもう書けませんとなります
『NA-F50B15-H』でamazonを検索し、amazon直売の商品を選ぶことで最適な資料へ辿れる様子です
マケプレ商品の場合、汎用広告バナーが代わりに表示されますがIDそのものは生きています
お手間すみません
- 802 ：Name_Not_Found：2022/09/12(月) 00:39:01.74 ID:???.net
- background-imageでsvgを使うとき、base64でエンコードしなきゃいけないのは
IEのためだけでしたっけ？
- 803 ：Name_Not_Found：2022/09/12(月) 12:47:26.00 ID:???.net
- >>800
h2::before {content: "\A"; white-space: pre;}
- 804 ：Name_Not_Found：[ここ壊れてます] .net
- #productAlert_feature_div > div > div > h2::before {content: "\A"; white-space: pre;}
試しに導入したら様々な部分の表示がバグって、しかも他の正常なコードにまで悪さするようになりました
しかし、今まで.prodImage側のafterなどを追加で試行錯誤していましたがh2側のbeforeで指定することは盲点でしたね
今回は{content: "\A"; white-space: pre;} ←この部分がどうにも怪しいものの、助言有難うございました
- 805 ：ちなみに：2022/09/12(月) 13:32:02.02 ID:???.net
- #productAlert_feature_div > div:style(margin-bottom:0px!important; padding-top:5px!important;)
#productAlert_feature_div > div > .prodImage > a > img:style(height:60%!important; width:60%!important;)
#productAlert_feature_div > div > .unified_widget:style(margin-bottom:0px!important; padding-top:0px!important;)
#productAlert_feature_div > div > div > .prodImage > a > img:style(height:60%!important; width:60%!important;)
#productAlert_feature_div > div > div > h2:style(font-size:12px!important; font-weight:normal!important; line-height:15px!important;)
!#productAlert_feature_div > div > div > h2:nth-of-type(1)::before:style()
#productAlert_feature_div > div > div > ul:style(margin-top:5px!important; margin-bottom:5px!important;)
#productAlert_feature_div > div > h2:style(font-size:12px!important; font-weight:normal!important; line-height:15px!important;)
#productAlert_feature_div > div > ul:style(margin-top:5px!important; margin-bottom:5px!important;)
こんな感じで!部分を試行錯誤中です
参考画像を添付したいものの、うpろだ系のリンクは全部弾かれそうですのでコードのみの提示とさせていただきます
amazonは2019年以降増え始めた乱英数字によるアドレス強制変更が少なく、まだまだ扱い易いサイト構造
ただ、IDの下にIDを付け、用途別で常時切り替えるところが少し面倒
- 806 ：Name_Not_Found：2022/09/12(月) 14:12:28.16 ID:???.net
- くっそーマジファッキン
.prodImageにあるfloatが邪魔して無駄な空白を作ったり、float＋広告バナー＋本来の用途＋imgの縮尺変更＋staticなのにabsolute状態
これらが重なってどうしてもコンパクトかつスマートな表示になりませんわ
そもそも改行一つにせよ、普通のサイトはblockの付け外しなどで簡単に位置調整可能ですしorz
amazonが1か所に要素を詰め込みすぎな様子です
広告バナーを諦めて.prodImageそのものをカットします・・・スレ利用すみませんでした
- 807 ：Name_Not_Found：2022/09/12(月) 15:11:53.42 ID:???.net
- >>802
IE11対応と、CSS内で直接SVG属性を編集するためじゃないかな
ファイルからリンクする方が保守性はいいよね
- 808 ：Name_Not_Found：2022/09/12(月) 15:16:03.88 ID:???.net
- cssで背景色を変えたいけどhtml側にsvg書きたくない時とかはエンコード必要
- 809 ：Name_Not_Found：2022/09/13(火) 01:10:20.39 ID:???.net
- >>807
ありがとうございます！
IE滅んで良かったー
- 810 ：Name_Not_Found：2022/09/13(火) 12:38:11.48 ID:???.net
- >>808
base64じゃなくて引っかかる文字だけURLエンコードでいいっしょ
- 811 ：Name_Not_Found：2022/09/13(火) 20:29:00.45 ID:wdaZP6Kf.net
- 初心者です
HTMLにread onlyを外部ファイル(json)から取得した値でONOFFしたいのですが検索してもJavaScriptを使う方法しか出てこないです‥jsonを読む都合上JavaScript 使わずにHTML、CSS、vue.jsで実現する方法はありませんか？
- 812 ：Name_Not_Found：2022/09/14(水) 11:22:20.60 ID:???.net
- vue.jsつこてるやん
- 813 ：Name_Not_Found：2022/09/15(木) 12:02:33.99 ID:???.net
- そろそろ各質問スレへの誘導があってもいいと思う
ここのおじ達が何でもかんでも回答するからあっちもう息してない
+ JavaScript の質問用スレッド vol.126 + [転載禁止]©2ch.net
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
PHP質問・雑談スレ6【初心者お断り(ROM歓迎)】
https://medaka.5ch.net/test/read.cgi/php/1557652864/
- 814 ：Name_Not_Found：[ここ壊れてます] .net
- FigmaがAdobeによる買収に合意
https://www.figma.com/blog/a-new-collaboration-with-adobe/
- 815 ：Name_Not_Found：2022/09/16(金) 01:06:07.27 ID:???.net
- 雑談スレにageで書けよおう
- 816 ：Name_Not_Found：2022/09/20(火) 21:55:19.74 ID:???.net
- <style>
#test{
border:Solid 1px #0000ff;
width:500px;
height:100px;
position:relative;
}
#test2{
position:absolute;
list-style:none;
display:flex
}
#test2 li{
width:1rem;
background:#ff00ff;
margin-right:20px;
}
</style>
<div id="test">
<ul id="test2">
<li>aaa</li><li>bbb</li><li>ccc</li>
</ul>
</div>
liの幅を外枠のdivと同じ幅にしたいんですがwidth:1remとしても同じ幅になりませんでした。
remってルート要素を基準とするんだから1remで同じ幅になるんじゃないんですか？
- 817 ：Name_Not_Found：2022/09/20(火) 22:33:23.07 ID:???.net
- 外枠の幅1remにしてなくね
- 818 ：Name_Not_Found：2022/09/20(火) 23:00:16.28 ID:???.net
- つーか何言ってるかよく分かんない
外枠のdivってwidthが500pxの？
で、liをdivのwidthに合わせて500pxにしたいってこと？
だとすればremの意味と使い方が分かって無い気が
- 819 ：Name_Not_Found：2022/09/20(火) 23:02:40.72 ID:???.net
- remが基準にするのはフォント
ホントよ
- 820 ：Name_Not_Found：2022/09/20(火) 23:24:35.53 ID:???.net
- >>818
そのとうりです
>>819
rem対応ってフォントのみですか
- 821 ：Name_Not_Found：2022/09/20(火) 23:29:18.40 ID:???.net
- >>820
とりあえず、コレ読んでみるといい
CSS の値と単位 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units
- 822 ：Name_Not_Found：2022/09/21(水) 01:12:19.35 ID:???.net
- >>816
・remはルートのフォントサイズを基準にする単位なので、ボックスサイズの指定には不向き
・CSSに「親の親」の値を直接取得して利用する方法はない
・divの幅よりulの幅を大きくとって、その中にdivと同じ幅のliを横に並べたいなら、liのwidthに直接500pxを指定
・div幅=ul幅=li幅で縦に並べるなら100%指定ですむけど、positionとflex使ってるからｺﾚｼﾞｬﾅｲ予感
- 823 ：Name_Not_Found：2022/09/21(水) 09:18:15.86 ID:2QBGPuKv.net
- >>811
V-bind:readonlyで設定できました
スレチ申し訳ないです
- 824 ：Name_Not_Found：2022/09/21(水) 13:06:45.04 ID:???.net
- >>822
なるほどｃｓｓじゃ無理なんですね
まだｃｓｓは不完全なんだな
ｊｓでやるか
- 825 ：Name_Not_Found：2022/09/21(水) 13:19:05.87 ID:???.net
- >>824
設定の仕方が違うだけ
inline-block使ってみ
- 826 ：Name_Not_Found：2022/09/21(水) 13:58:28.89 ID:???.net
- >>824
CSSのせいじゃなくて、アプローチの方がおかしいと思われる
- 827 ：Name_Not_Found：2022/09/21(水) 15:47:12.72 ID:???.net
- つーか実際のところliって縦並びにしたいのかな？
>>816だとliは横並びだから500pxだとdivから盛大にはみ出すんだが
- 828 ：Name_Not_Found：[ここ壊れてます] .net
- わざわざabsoluteやflex入れてるしulはdivより広くしたいんじゃね
どういうレイアウトにしたいのかはっきり示した方が的確な助言がもらえるとは思う
- 829 ：Name_Not_Found：2022/09/21(水) 18:59:38.67 ID:???.net
- だね
フレームレイアウトを絵で書いてくれた方が完成にたどり着くの早そう
SP表示までにレイアウトが変わる場合はそれも添えとくとベター
- 830 ：Name_Not_Found：2022/09/21(水) 19:16:49.51 ID:???.net
- >>825
枠の中にulを収めたいわけじゃないです
>>827
横並びです
>>828
そうです
liの幅はdiv枠の幅で、liが２つ以上だとul全体はdivより大きくなるのは仕方ないです
- 831 ：Name_Not_Found：2022/09/21(水) 19:33:32.32 ID:???.net
- >>830
単純にdivとliに同じ幅を指定すればいいと思うよ
決め打ちなら同じ500px、ページ幅に合わせて可変するならvw使った値を入れる
あとはulのデフォルトマージンとパディングをクリアしとけば希望の形になるのでは？
- 832 ：Name_Not_Found：2022/09/21(水) 21:29:31.50 ID:???.net
- >>831
vwだと100vwにしたときbodyのmarginを０にしないとウインドウ幅から枠がはみ出してしまうので
外枠の幅は%がいいです。
そうするとliもvwを使わないということです。
- 833 ：Name_Not_Found：2022/09/21(水) 21:40:06.77 ID:???.net
- 後出し多いな……先に条件まとめた方がええで
- 834 ：Name_Not_Found：2022/09/22(木) 17:56:50.07 ID:???.net
- calc使えば
- 835 ：Name_Not_Found：2022/09/28(水) 10:29:35.47 ID:Y4GrquMW.net
- Tableのthにmarginを与えたいのですが仕様上不可能でしょうか？
thをdivで囲んでmarginを設定していますが余分なmargin が設定されてしまいます
thのmargin設定の代わりとしてborder-spacingを試してもダメでした
- 836 ：Name_Not_Found：2022/09/28(水) 12:25:20.20 ID:???.net
- thをdivで囲むのは構造上間違ってるので
見栄えの為に調整したいのならthの中にdivを入れて
中にいれたdivにthへ施したかった装飾を適用してみたらどうかな
- 837 ：Name_Not_Found：2022/09/28(水) 14:14:57.26 ID:KvtwyvLR.net
- >>836
ありがとうございます
Tableのborder-spacingの設定する場所間違っていて設定場所を変えるとうまく行きました
- 838 ：Name_Not_Found：2022/09/29(木) 12:23:37.18 ID:???.net
- tableでお知らせ表示したいのですがheight195pxをはみ出たらスクロールできるようにしたいのでtableにheight:195pxとoverflow:autoを指定しましたが、tdの高さ毎に高さが増えてスクロールバーも出てきません。
どうすればいいですか？
- 839 ：Name_Not_Found：2022/09/29(木) 13:33:45.48 ID:???.net
- >>838
どういうtableなのか分からないので、とりあえずコレでも読んでみよう
<table>: 表要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table#%E5%B7%A8%E5%A4%A7%E3%81%AA%E8%A1%A8%E3%82%92%E5%B0%8F%E3%81%95%E3%81%AA%E7%A9%BA%E9%96%93%E3%81%AB%E8%A1%A8%E7%A4%BA
- 840 ：Name_Not_Found：2022/09/29(木) 15:50:23.00 ID:???.net
- >>838
display:blockかdisplay:inline-blockを指定するといいよ……って>>839が解説そのものだった
- 841 ：Name_Not_Found：2022/09/29(木) 18:53:34.93 ID:???.net
- >>839
>>840
ありがとうございます！
- 842 ：Name_Not_Found：2022/09/29(木) 20:19:39.63 ID:???.net
- 解決したところでアレだけど、お知らせならテーブルよりリストの方が管理しやすいかもよ？
- 843 ：Name_Not_Found：2022/09/30(金) 15:16:41.39 ID:Mje+eiat.net
- cssの内容とブラウザを実測したときのピクセル数にズレがあるんですが、何がおかしいんでしょうか？
以下のサイトをchromeやEdgeで開くとこうなります
https://developer.mozilla.org/ja/docs/Web/CSS/width
https://i.imgur.com/qwkQ2IK.jpg
- 844 ：Name_Not_Found：2022/09/30(金) 15:59:13.70 ID:???.net
- うちではブラウザ関係無く問題無いし、おま環？
ブラウザでズームとかしてない？
- 845 ：Name_Not_Found：2022/09/30(金) 16:03:17.69 ID:???.net
- >>844
ブラウザもズームしてませんし、拡張機能とかそういうことでもないっぽいです
すべてのブラウザで同じことが起きます
これはスレチになりますかね？
- 846 ：Name_Not_Found：2022/09/30(金) 16:06:35.79 ID:???.net
- chromeでのスクショだけど問題無し
https://imgur.com/PDBCi1m
- 847 ：Name_Not_Found：2022/09/30(金) 16:21:54.09 ID:???.net
- このプレッシャー、ZOOMERか？
- 848 ：Name_Not_Found：2022/09/30(金) 16:30:52.96 ID:???.net
- ディスプレイ設定の表示スケールも100%？
- 849 ：Name_Not_Found：2022/09/30(金) 16:35:34.97 ID:lzsSrvyH.net
- キャッシュが残っている可能性は？
Ctrl +F5
- 850 ：Name_Not_Found：2022/09/30(金) 16:39:43.22 ID:???.net
- >>848>>849
ディスプレイ設定なども問題ないです
- 851 ：Name_Not_Found：2022/09/30(金) 16:55:17.24 ID:???.net
- 150pxのはずが180pxぐらいだから、多分どこかで1.2倍されてる
- 852 ：Name_Not_Found：2022/10/01(土) 02:46:56.70 ID:???.net
- OS側の設定じゃないの
- 853 ：Name_Not_Found：2022/10/01(土) 21:29:44.98 ID:???.net
- display:flex、高さをautoにしたdivの中に子要素を置いて
divの高さが自動で子要素の高さに合わせるようにしたいけど
うまくいきませんdisplay:flexでは無理なでしょうか？
- 854 ：Name_Not_Found：2022/10/01(土) 21:39:42.11 ID:???.net
- 再現しない
- 855 ：Name_Not_Found：2022/10/01(土) 22:00:17.63 ID:???.net
- >>853
普通なら子の高さに合わせて設定されるよ
子にpositionとか指定してあると崩れるけど、コード貼ってもらわないと原因はわかんないな
- 856 ：841：2022/10/01(土) 22:51:30.86 ID:???.net
- >>843
これですが
Firefoxだとまともに表示されたので、Chrome系？クロニウム？の場合にのみ私の環境で起きるようです
- 857 ：Name_Not_Found：2022/10/01(土) 23:41:48.85 ID:???.net
- >>856
機能拡張を全てオフにしても再現するの？
完全におま環で情報が少なすぎだし、他人が再現できない上にスレ違いだから
これ以上どうしようもない
- 858 ：Name_Not_Found：2022/10/02(日) 00:13:46.39 ID:???.net
- >>853
https://jsfiddle.net/bsLmdekq/
- 859 ：Name_Not_Found：[ここ壊れてます] .net
- >>856
・Chrome/Edgeのすべての拡張機能をオフにして起動しても結果は同じか
・Chrome/Edgeの設定→アクセシビリティ→ページのズーム の値は100%か
・Windowsの設定→システム→ディスプレイ→表示スケールの詳細設定 の値は正しいか
・Chrome/Edgeのショートカットを右クリック→プロパティ→互換性→高DPI設定の変更 の内容はオフか
・Chrome/Edgeで設定のリセットをしても結果は同じか
これ以上はソフトウェア板かWindows板のChrome/Edgeスレ案件やね
ちゃんと環境書いて質問しないと叩かれるかもなので注意
- 860 ：Name_Not_Found：2022/10/02(日) 12:35:06.88 ID:Ws3o/3Qz.net
- 自動幅より30px狭くしたいんだけど
width:calc(auto - 30px)としてもうまくできませんでした。
このやり方では間違ってますか？
- 861 ：Name_Not_Found：2022/10/02(日) 12:43:08.39 ID:???.net
- autoは数値ではないのでcalcの中に入れても計算しない
- 862 ：Name_Not_Found：2022/10/02(日) 12:43:36.23 ID:Ws3o/3Qz.net
- <div width:auto;height:200px;background:yellow>
<ul style="position:absolute;list-style:none;padding:0px;margin:0px">
<li>てすとおおおおおおおおおおおおおおおお</li>
</ul>
</div>
子要素にabsoluteがあると自動幅になってくれなくてdiv幅０扱いにされるけど
absoluteがあってもabsoluteがない場合のautoと同じ挙動にさせることはできますか？
- 863 ：Name_Not_Found：2022/10/02(日) 12:44:31.81 ID:Ws3o/3Qz.net
- >>861
そうなんですか
ありがとうございます
- 864 ：Name_Not_Found：2022/10/02(日) 12:52:24.40 ID:Ws3o/3Qz.net
- >>861
calcが無理なら他に自動幅より30px狭くする方法なありますか？
- 865 ：Name_Not_Found：2022/10/02(日) 13:22:20.59 ID:???.net
- >>860,862
https://jsfiddle.net/ に書こう
styleの記述ミスしてるよ
なるべくcssも使おう
あとは何を表現したくて30px狭くしたいの？
- 866 ：841：[ここ壊れてます] .net
- >>857>>859
スレチ了解しました
他のスレへ移動します
一応、レスを書いてくださった方に返答として以下を書きます
---
昨日きちんと表示されていたFirefoxを今開いたらChromeと同じ状態になってました。
一度はきちんと表示されていたのを確認したのですが。
・画面そのものの最大幅、高さをピクセル定規ツールで測ると1920、1080
・1920x1080の画像を1:1表示してみると、きちんと表示される
・vscode内にHTMLのプレビューを表示するツールを使い、150px 150pxの四角形を表示しても同じように表示される
i.imgur.com/ejqWHnY.jpg
・firefoxの設定のリセットを行ったが変わらず
Chrome,firefoxやwindowsの設定など、書いていただいた設定もすべて確認しましたが解消しませんでした。
i.imgur.com/SXLNLdy.jpg
i.imgur.com/CUC5R0I.jpg
(Chromeシークレットモードは拡張機能なし、Edgeやfirefoxには拡張機能インストールなし)
i.imgur.com/b8SRonr.jpg
- 867 ：Name_Not_Found：[ここ壊れてます] .net
- >>865
狭くして空いた部分に縦長のボタンを入れたい
- 868 ：Name_Not_Found：2022/10/02(日) 14:08:05.08 ID:???.net
- >>862
子要素がposition:absoluteの場合、親要素には必要な幅を直接指定するのが普通だと思うよ
その例だとabsoluteである必要性が見えてこないんだけど、子要素を動かしたりする予定があるの？
- 869 ：Name_Not_Found：2022/10/02(日) 16:41:17.82 ID:???.net
- >>866
> i.imgur.com/CUC5R0I.jpg
これ、Rulerのサイズからして画像の縮尺は100％みたいだけど
描画エリアだけじゃなくブラウザのUI自体も大きくなってるから
ブラウザ全体がデカくなってるっぽいね
ttps://i.imgur.com/IRNMQLd.jpg
とはいえスレチなので、レス不要
あとは移動先で頑張って
- 870 ：Name_Not_Found：2022/10/02(日) 17:00:01.79 ID:???.net
- >>862 >>867
それらの条件からすると、こういうのじゃダメなの？
https://jsfiddle.net/L4r8yken/
- 871 ：Name_Not_Found：2022/10/02(日) 19:05:25.83 ID:Ws3o/3Qz.net
- >>868
子要素を動かす予定はあります。
>>870
それでできましたー
でもflex: 1;ってどういう意味ですか？
- 872 ：Name_Not_Found：2022/10/02(日) 19:16:24.60 ID:???.net
- >>871
flexプロパティはflexアイテムの幅を一括指定するショートハンド
flex: 1;とした場合はflex: 1 1 0;または flex-grow: 1; flex-shrink: 1; flex-basis: 0;と同義
詳しくはこちらで
flex - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex
- 873 ：Name_Not_Found：2022/10/03(月) 16:12:18.89 ID:???.net
- <style>
#waku{
width:50px;display:flex;background:#00ff00;justify-content:center;
}
#ctr{
list-style:none;margin:0px;padding:0px;
}
#ctr li{
height:auto;margin:0px;padding:0px;background:#0000ff;
}
#ctr a{
font-size:8pt;background:#ffff00;text-decoration:none;color:orange;
}
</style>
<div id="waku">
<ul id="ctr">
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
<li><a href="./">●</a></li>
</ul>
</div>
ctrのliの余白を０にしたいけど、このようにやってもうまくいきません。
（青い部分が表示されなければいいです）
liのheightはautoにしたいです。どうすれば余白を０にできますか？
- 874 ：Name_Not_Found：2022/10/03(月) 16:29:44.55 ID:???.net
- >>873
フォントサイズの指定を#ctrに移して、line-height:1を追加すればいいよ
現状で余白が出るのは<li>タグの外の改行が影響してるせい
- 875 ：Name_Not_Found：2022/10/03(月) 18:29:35.93 ID:???.net
- #ctr aにdisplay: block;とかじゃダメなの？
- 876 ：Name_Not_Found：2022/10/03(月) 18:37:38.86 ID:???.net
- >>874>>875
どちらでもできました
ありがとうございます
- 877 ：Name_Not_Found：2022/10/03(月) 19:48:08.60 ID:l8DxzCix.net
- スケブみたいなイラストコミッションサービスを作りたいんだけど会員登録、決済機能のようなシステムの構築ってどこで調べればいいんだろう
- 878 ：Name_Not_Found：2022/10/03(月) 20:48:01.08 ID:???.net
- >>876
内容が複数行になる可能性があるならdisplay:blockのが融通きくね
- 879 ：Name_Not_Found：2022/10/04(火) 12:15:18.25 ID:+1IPjthN.net
- >>877
フレームワークとか
検索してみたら？ここではないよ
- 880 ：Name_Not_Found：[ここ壊れてます] .net
- 最近のAIの過ごさ見てると数年後にはコード書く必要無くなってるんじゃね？とか考えちゃうんですけどみなさんどう思います？
- 881 ：Name_Not_Found：2022/10/05(水) 10:11:31.45 ID:???.net
- それ言われて15年経ってる
- 882 ：Name_Not_Found：2022/10/05(水) 12:22:30.75 ID:K3i9fbJO.net
- デザイン関係は他社と差別化ができる前提で客の思い描いた物が100%反映できるなら取って変わる可能性ある
仮に完成しても使用料だの権利だので色んな企業が作るだろうしそれの保守運用でまた人が必要だしで言語は廃れても人は必要だろうね
- 883 ：Name_Not_Found：2022/10/05(水) 16:56:48.76 ID:???.net
- コードを書かなくても良いWYSIWYG系のエディターを使わされた事がある。
吐き出されるコードに癖があって、そのWYSIWYGエディターの範疇を逸脱する細工が求められて苦労した。
エンドユーザーがCMSのコンテンツを作る等には良いかもしれない。
- 884 ：Name_Not_Found：2022/10/06(木) 03:04:48.49 ID:???.net
- AI化一番すぐできそうでできないのがWEBデザインなんだろうな
昔もいろいろコード吐き出すやつあったけど
無駄な記述多くて使いもんにならんかった
今だと技術的には可能でもグーグルからクソコードですで弾かれたらそれで終わりだからな
手書きだろうとWPだろうとCMSｂｾろうとグーグャ汲ﾉOKもらえなｂｯりゃ意味ないｂﾌよ
そのャ`ューニングはｂ竄ﾁぱり人じゃｂﾈいとできないｂｾろう
- 885 ：Name_Not_Found：2022/10/07(金) 04:17:54.39 ID:B4JFIMcV.net
- テーブルっぽい表示を作っているのですが、デザインをどうすればいいのか迷っています。
下記を見て頂けると見ての通りなのですが、[有効なアカウントは下記をチェック]というタイトルが長いのに、実際のコンテンツ(？)は1個のチェックボックスだけです。
タイトルとコンテンツの幅が違いすぎて、表示に違和感があります。
https://liveweave.com/smPut9
こういう時に、違和感なく表示するにはどうすればいいでしょうか？
タイトルを複数行にする事も考えたのですが、それは回避したいです。
- 886 ：Name_Not_Found：2022/10/07(金) 12:44:49.10 ID:???.net
- デザインはさほど気にならないけど
見出しはもう少し文字を削って単語にできるよね？
必要ならテーブル外に注釈いれたらどうかな
それ以外はクリックできる範囲が小さいので
余白を含めるか、?有効などのテキストを入れてクリック範囲を広げたり
チェックしやすいようにしてあげると利用者に優しいかな
- 887 ：Name_Not_Found：2022/10/07(金) 18:00:02.73 ID:???.net
- table使わずに「っぽい表示」にしてるのは何故？
- 888 ：Name_Not_Found：2022/10/08(土) 18:08:55.34 ID:???.net
- 最低でもheight:30pxで子要素の高さに応じてheightが変化するようにするには
heightをどう設定すればいいですか？
- 889 ：Name_Not_Found：2022/10/08(土) 18:17:57.49 ID:???.net
- min-height : 30px;
- 890 ：Name_Not_Found：2022/10/08(土) 18:17:58.94 ID:???.net
- min-height
- 891 ：Name_Not_Found：2022/10/08(土) 18:40:37.90 ID:???.net
- min-heightじゃなくheightで設定したいならclamp()とかmax()使うとか
どういう状況で使いたいのかによるが、自分なら親じゃなく子に制限掛けるが
- 892 ：Name_Not_Found：2022/10/15(土) 09:10:00.31 ID:???.net
- clamp()なんて始めて知ったわ
またいつのまにこんなの出てるんだよ・・
- 893 ：Name_Not_Found：2022/10/15(土) 09:26:40.98 ID:???.net
- >>891みたいなので新しい情報が入ってくるから
このスレは眺めておく価値がある
さんくす
- 894 ：Name_Not_Found：2022/10/15(土) 19:45:02.18 ID:???.net
- その辺の新規実装って定期的な情報源あります？
IE消えて実用になったプロパティも多そうなので、巡回ルートに加えときたくて…
- 895 ：Name_Not_Found：2022/10/15(土) 20:14:08.75 ID:???.net
- >>894
コリスとか？
このスレでもたまに貼られる
- 896 ：Name_Not_Found：2022/10/16(日) 11:08:33.11 ID:???.net
- margin:autoで左右の中央揃えになったけど
左右の中央揃えを保った状態で上下のmarginを100pxにしたいけど
どうやればいいですか？
- 897 ：Name_Not_Found：2022/10/16(日) 12:02:13.74 ID:???.net
- >>894
SNSでその手のWEB系のアカウントをフォローしとけばTLで情報は流れてくるでしょ
専用のアカウントでやれば余計な情報は流れてこないし
- 898 ：Name_Not_Found：2022/10/16(日) 12:30:35.60 ID:???.net
- >>896
margin: 100px auto;
- 899 ：892：2022/10/16(日) 15:57:12.01 ID:???.net
- >>895
ありがとです、コリス入れときます
>>897
SNSは記事埋め込みのを見るぐらいでアカウント持ってないので、作ってみますね
- 900 ：Name_Not_Found：2022/10/16(日) 16:22:54.14 ID:???.net
- >>896
全指定ではなくmargin-leftとmargin-rightに個別でautoを指定する
- 901 ：Name_Not_Found：2022/10/16(日) 16:23:59.35 ID:???.net
- コリスだけどこの記事がまとめられていてわかりやすい
IEよ、さようなら😂 IEをサポート外にした時に使用できるCSSのプロパティや機能のまとめ
https://coliss.com/articles/build-websites/operation/css/css-properties-ie-is-not-supported.html
- 902 ：Name_Not_Found：2022/10/16(日) 17:00:26.78 ID:???.net
- >>901
いいね。でも多すぎると食傷気味になるな
カスケードレイヤーとかもうなんやねんな
- 903 ：Name_Not_Found：2022/10/17(月) 07:23:47.76 ID:???.net
- >>901
iOSのSafariが対応しないCSSというのも知りたい
- 904 ：Name_Not_Found：2022/10/17(月) 08:21:23.46 ID:???.net
- iosサファリ、罠多いよね
backgroundでリピートさせなければ大丈夫とか
- 905 ：Name_Not_Found：2022/10/17(月) 08:30:17.70 ID:???.net
- safariは対応してないのではなくバグってるだけなのでなかなか探しづらい
- 906 ：Name_Not_Found：2022/10/17(月) 09:37:32.57 ID:???.net
- 今はわからんけど、linear-gradientで、tranceparent が効かないとかあったなぁ
IEと同じく、safariはマジ消えてくれ
- 907 ：Name_Not_Found：2022/10/18(火) 21:18:38.66 ID:???.net
- めんどいのでもうBootstrap一本でいいですか
- 908 ：Name_Not_Found：2022/10/18(火) 21:50:38.09 ID:???.net
- >>907
ヨカですよ
- 909 ：Name_Not_Found：2022/10/19(水) 12:49:37.14 ID:D434GI70.net
- CSSで
.class1 {
color : "#32cd32";
}
.class2 {
background-color : "#32cd32";
}
この色を複数の箇所で使いたいです。
あるクラスでは文字色だったり背景色だったりボーダーだったりして、別の属性です。
一箇所治せば全部治るような簡単な書き方ってありますか？
- 910 ：Name_Not_Found：2022/10/19(水) 12:50:22.21 ID:???.net
- css変数
- 911 ：Name_Not_Found：2022/10/19(水) 12:54:36.30 ID:???.net
- >>909
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
:root {
--color1: #32cd32;
}
.class1 {
color: var(--color1);
}
.class2 {
background-color: var(--color1);
}
- 912 ：Name_Not_Found：2022/10/19(水) 12:56:48.70 ID:???.net
- Bootstrap のみで良い。
漏れはCSS も、あまり知らない
最近は、Tailwind もいるらしい
- 913 ：Name_Not_Found：2022/10/19(水) 13:05:12.10 ID:???.net
- CSSもろくに使えずRubyとBootstrapを勧める事しか能が無い奴は無視していい
- 914 ：Name_Not_Found：2022/10/19(水) 13:24:38.50 ID:D434GI70.net
- >>911
思った通りのことができました。ありがとうございました！
- 915 ：Name_Not_Found：2022/10/19(水) 22:06:51.29 ID:???.net
- 質問なのですが、今ウェブコンポーネントを使用してウェブサイトを作ってて
そのウェブコンポーネントの#shadow-rootのスタイルを変えたいのですがどうすればよいでしょうか。
https://imgur.com/FYFuknh.jpg
<fluent-text-area>の#shadow-root<textarea>のスタイルを変更したいです。
よろしくお願いします。
- 916 ：Name_Not_Found：2022/10/21(金) 18:11:16.51 ID:???.net
- >>915
シャドウ DOM の使用 - ウェブコンポーネント | MDN
https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM
Web Components: Shadow DOM に HTML と CSS をセットするいろいろな方法 – ラボラジアン
https://laboradian.com/shadow-dom-samples/
- 917 ：Name_Not_Found：2022/10/21(金) 18:18:40.61 ID:8kiseZfM.net
- 人が作ったCSSでこういう定義を見ました。
span.hoge#\0031 {
}
spanタグのhogeクラス、#以下のID名、という基礎は知っているのですが、
なぜかこれでIDが"1"のところにこのスタイルが適用されます。
#\0031というセレクタ指定で1というIDに適用されるという不思議。
ID名の上につく\マーク（バックスラッシュ）の意味って何ですか？
- 918 ：Name_Not_Found：2022/10/21(金) 18:39:19.47 ID:???.net
- すいません、グリッドで文字列が入る簡単な表を組んでいます
書いたcssが以下です
grid-template-columns: max-content auto;
左の列の幅は最小限で右側はそれに合わせるって感じですね
でも、これだと左側の列にめっちゃ長い文字列が来た場合に適当な位置で折り返さずに
グリッド全体に指定した幅も超えてどんどん長くなっちゃうんですよね
min-contentにすると逆に1文字とか極端に少ない文字で折り返してめっちゃ縦に長い行になっちゃうし
左右にどれくらいの文字が入るかわからないので、各セル？にmax-widthとかを指定したくはないし。
ただ両方ともautoだと、入る文字が少ない時に、左右の列がきれいに左詰めにならずにスカスカになっちゃうし…
何か良い方法あったりしますでしょうか
- 919 ：Name_Not_Found：2022/10/22(土) 15:28:37.82 ID:???.net
- 適当な位置ってどこ？どれぐらい文字が入るか分からなくても、適切な位置で折り返させたいなら
自分が許容できる最大幅をmax-widthで指定するしか無いんじゃない？
で、単純な表ならmax-widthは各セルごとに指定するんじゃなくて、div:nth-child(2n+1)とかで
列ごとにまとめて指定するのはダメなの？
必ず最大幅を超える長い文字列が入るならmax-content部分を最大幅の固定値に変えてもいいけど
- 920 ：Name_Not_Found：2022/10/23(日) 02:38:44.24 ID:???.net
- ありがとうございます
grid-template-columns: auto auto;
でwidthにmax-contentを指定したら望んだ結果が得られました
なんか色々難しく考えて基本を忘れてたみたい
- 921 ：Name_Not_Found：2022/10/23(日) 03:43:17.27 ID:???.net
- やっぱり文章だけの説明だと、何がしたいのかサッパリ分からんな
二度手間になるから質問するなら、せめて簡略化したコードぐらい貼って欲しいわ
- 922 ：Name_Not_Found：2022/10/23(日) 08:39:02.34 ID:8AOtGlRE.net
- すみません外部のウェブコンポーネントを使用するときのことなのですがそのウェブコンポーネントの高さを変更したいです
しかしそのCSSプロパティがshadow-rootに隠れていて変更できません
ほとんどのサイトではShadowDOMを追加することしか紹介されてなく既存のウェブコンポーネントのShadowDOMを編集する方法を紹介されてるところがありません
どうすればよいか困っています
よろしくお願いします
- 923 ：Name_Not_Found：2022/10/23(日) 10:00:29.91 ID:???.net
- >>922
外部ウェブコンポーネントが何物で何処にあり改変可能なのかが提示されていないのでまったくわからない
とりあえず、その外部ウェブコンポーネントが
Style要素をJavaScriptで抱え込んでいるのならそこを改変
link要素をappendChildして外部スタイルシートを参照しているのなら、その参照先のStyleを改変
それともそのウェブコンポーネントにStyleをかえるAPIが用意されていればそれで
という推測でしか言えない
- 924 ：Name_Not_Found：2022/10/23(日) 10:32:13.34 ID:8AOtGlRE.net
- >>923
それはshadow-rootのものについても言えるのでしょうか？
これなのですが<textarea>のStyleはtextareaをリサイズすると現れました
こいつを固定値にしておきたいです
https://imgur.com/FYFuknh.jpg
- 925 ：Name_Not_Found：2022/10/23(日) 10:41:38.80 ID:???.net
- jsでいじれ
- 926 ：Name_Not_Found：2022/10/23(日) 11:09:05.48 ID:8AOtGlRE.net
- そのJSでいじる方法がわかりません
通常Shadow DOMはJSのセレクターなんかで参照ができなくなるものなのでこのshadow-rootの中のtextareaをいじることができません
- 927 ：Name_Not_Found：2022/10/23(日) 11:23:46.30 ID:???.net
- ウェブコンポーネントを使わなければいい
- 928 ：Name_Not_Found：2022/10/23(日) 12:05:50.83 ID:8AOtGlRE.net
- >>927
やはりそうなるのですか…
残念です
- 929 ：Name_Not_Found：2022/10/23(日) 14:28:30.65 ID:???.net
- >>926
>>916
- 930 ：Name_Not_Found：2022/10/23(日) 15:34:00.61 ID:???.net
- >>917
\+16進数はUNICODEエスケープ、\0031はU+0031なので1
>>926
対象要素にpart属性が付いてるならcssで
fluent-text-area::part(control) { ～～ }
のようにすることが可能
jsならカスタムエレメントのshadowRootからshadowDOMのツリーにアクセス可能
- 931 ：Name_Not_Found：2022/10/23(日) 16:00:09.04 ID:8AOtGlRE.net
- >>930
修正できました
ありがとうございます！
- 932 ：Name_Not_Found：2022/10/23(日) 18:55:35.51 ID:???.net
- ::part疑似要素とpart属性、知らなかった
勉強になるなぁ
::part() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::part
part - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/part
- 933 ：Name_Not_Found：2022/10/24(月) 07:48:16.95 ID:XlUzmcQj.net
- いまからHTMLとCSSを網羅的に学習したいのだけどいい参考書やWEBサイトないだろうか
なるべく書いていることに抜けがなく学びたい
- 934 ：Name_Not_Found：2022/10/24(月) 09:23:17.70 ID:???.net
- 抜けがなく学ぶのは無理
基本的なこと掴んでその都度必要なことは調べて身にしていくしかない
- 935 ：Name_Not_Found：2022/10/24(月) 09:48:13.73 ID:???.net
- >>933
MDN
- 936 ：Name_Not_Found：2022/10/24(月) 10:13:19.11 ID:LVvJK6+G.net
- 完璧を求めてほとんど使わない知識を身につけるよりよく使うものを調べなくても書ける方がいいと思う
- 937 ：Name_Not_Found：2022/10/24(月) 10:14:23.48 ID:???.net
- 仮に今現在抜けが無くても将来追加された仕様は抜けるので必ず>>934になる
それでも基礎もないと始まらないし、読むとしたらMDNで>>935
- 938 ：Name_Not_Found：2022/10/24(月) 10:46:12.85 ID:???.net
- 抜けなく覚えていくうちに新しいのが出てきたりして変わっていくから
ほんこれ>>936よ
- 939 ：915：2022/10/24(月) 10:55:05.14 ID:Ou0kVKZr.net
- >>930
ありがとうございます。疑問氷解しました。
- 940 ：Name_Not_Found：2022/10/24(月) 14:43:10.08 ID:???.net
- WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン
https://coliss.com/articles/build-websites/operation/work/html-to-design-figma-plugin.html
- 941 ：Name_Not_Found：2022/10/26(水) 19:57:14.93 ID:???.net
- 抜けが無い知識は、何十年も掛かる
基礎だけやって、Bootstrap, Tailwind などが速い
- 942 ：Name_Not_Found：2022/10/26(水) 20:13:58.23 ID:???.net
- 無いわｗ
- 943 ：Name_Not_Found：2022/10/26(水) 20:16:19.00 ID:???.net
- またきたよこいつ
- 944 ：Name_Not_Found：2022/10/27(木) 12:34:08.38 ID:DizwkO/t.net
- BootstrapとかTailwindってアニメーションとか作れるの？
- 945 ：Name_Not_Found：2022/10/27(木) 15:32:55.75 ID:???.net
- 質問です。登録会社の出勤確認のフォームにアクセスした履歴は有るのに、
欠勤扱いになってしまって当日採用落とされてしまったのですが、海外ipからのアクセスで入力フォーム自体にはアクセス出来ても入力してサブミッション押したら内部でエラーになってこちらが気付かない事って有り得ますか？？
- 946 ：Name_Not_Found：2022/10/27(木) 15:42:34.30 ID:???.net
- スレチ
- 947 ：Name_Not_Found：2022/10/27(木) 15:48:53.50 ID:???.net
- ここまで徹頭徹尾スレ違いなのも珍しいな
- 948 ：Name_Not_Found：2022/10/27(木) 15:53:45.59 ID:???.net
- HTML5とjavaで作られてるフォームなんです
ソース貼ろうとしてもエラーで貼れない。。確認画面は新しくページ作られるタイプですが、普通はそこのディレクトリだけアクセス制限する事って無いですよね？レンタルフォームとかだとどうなんでしょうか？
- 949 ：Name_Not_Found：2022/10/27(木) 15:55:22.28 ID:???.net
- 運用の話なんでその会社に聞いてくれとしか
- 950 ：Name_Not_Found：2022/10/27(木) 16:33:58.04 ID:???.net
- >>949
これだと入力ページと確認ページでディレクトリは変わってないですよね？？
https://i.imgur.com/YLrPrc1.png
今後就業出来なくなりそうでピンチなんです…向こうの鯖が原因ならそれで解決出来るのですが
- 951 ：Name_Not_Found：2022/10/27(木) 17:05:20.46 ID:???.net
- 新手の荒らしか
zoomerといい次々新キャラがくるな
- 952 ：Name_Not_Found：2022/10/27(木) 17:05:51.17 ID:???.net
- やべえ……人の話聞かない系だ
- 953 ：Name_Not_Found：2022/10/27(木) 17:08:33.56 ID:???.net
- >>952
だって会社の人には聞けないし
荒らしじゃありません
- 954 ：Name_Not_Found：2022/10/27(木) 17:11:23.58 ID:???.net
- ソース見て、入力ページと確認ページがディレクトリ同じか教えて欲しいだけです
コード貼ろうとしても何のコードがNGの原因で貼れないのか分からないし
今日中に連絡したいのに
- 955 ：Name_Not_Found：2022/10/27(木) 17:12:16.24 ID:???.net
- legendってfieldsetなしで使っていいもんなの？
- 956 ：Name_Not_Found：2022/10/27(木) 17:16:23.24 ID:???.net
- >>946
form actionってhtmlじゃないんですか？
- 957 ：Name_Not_Found：2022/10/27(木) 17:20:18.94 ID:???.net
- ・ここは「Web制作板」のHTML/CSS質問スレで、なんでも相談スレじゃない
・そちらがいくら切羽詰まっていても他の人には「まったく」関係ない
・場をわきまえたうえでスレ主旨に沿った質問をし、得られた回答を皆に還元するのが質問スレの存在理由
- 958 ：Name_Not_Found：2022/10/27(木) 18:15:28.90 ID:DC1jjxXR.net
- ホンモノで草
- 959 ：Name_Not_Found：2022/10/27(木) 19:27:07.57 ID:???.net
- form actionとか書いてるのに、何故あんなスクショで答えが得られると思ったのか謎
しかし、スマホから質問してくる奴は質問が雑過ぎて困る
スレチは論外だが
- 960 ：Name_Not_Found：2022/10/27(木) 20:46:20.06 ID:???.net
- >>959
フォームに関係有りそうなコードの場所スクショしたつもりなのですが、
もっと上は会社名とかバレるので貼りませんでした。
コード貼ろうとjavaの怪しい部分にスペース入れたり頑張ってみたんですが、NGワールド引っかかって…
フォームメーラーは
https://business.form-mailer.jpってとこ使ってるみたいですが、ググッてもどこのレンタルフォームなのか出てこないんですよね、、
- 961 ：Name_Not_Found：2022/10/27(木) 21:09:53.28 ID:???.net
- ここまで言われても自分がスレチだと理解しないところを見るに
登録会社が付き合いきれなくてブロックしたのかもしれんな…
- 962 ：Name_Not_Found：2022/10/27(木) 23:29:51.31 ID:???.net
- javascriptをjavaと略すやつは滅びて欲しい(´･ω･`)
- 963 ：Name_Not_Found：2022/10/28(金) 08:58:45.06 ID:???.net
- >>962
まったく同意する
意味が通じない省略はヤメロ
パス、パスいっているから、どのpathなんだろうと思ったら、パスワードだったことがある
パスワードくらい短いワードなら略すなよ
- 964 ：Name_Not_Found：2022/10/28(金) 09:03:20.90 ID:G3Y6xNBj.net
- イチゴとイチゴジュースくらい意味変わって来るよな
- 965 ：Name_Not_Found：2022/10/28(金) 12:44:40.42 ID:+LP0D1KO.net
- HTML/CSSの枠から外れた質問になるかもで申し訳ないんだが、Gartic phoneみたいなwebゲームを作ろうと思ったらどの言語に手をつければいいんだ？
フロントエンド用にHTMLとかを覚えるのは必須として、バックエンドで動かす用の言語をまた別個で覚えないといけない感じ？
- 966 ：Name_Not_Found：2022/10/28(金) 16:06:31.13 ID:???.net
- >>950
最後の方見ると、次の画面は確認みたいだから
確認まででページ閉じちゃったとかじゃないの
- 967 ：Name_Not_Found：2022/10/28(金) 17:53:50.76 ID:???.net
- >>965
どんなものでも勉強して損はない
そして勉強するのに遅すぎるということはない
- 968 ：Name_Not_Found：2022/10/29(土) 01:35:29.50 ID:rLG6Jdtj.net
- pre,codeタグを実装したのですがウィンドウサイズを変更しても最初の描画した幅から小さくならず困っているのですがどうしたらよいでしょうか
- 969 ：Name_Not_Found：2022/10/29(土) 02:19:31.63 ID:???.net
- その動作が再現できる最低限のコードを書いてくれなきゃ何とも言えない
- 970 ：Name_Not_Found：2022/10/29(土) 02:32:56.56 ID:rLG6Jdtj.net
- HTML
<pre><code class="language-cs">
コードの中身
</code></pre>
CSS
pre{
overflow:auto;
width:100%;
}
code{
width:100%;
}
こんなかんじです。
- 971 ：Name_Not_Found：2022/10/29(土) 12:41:22.25 ID:???.net
- >>970
codeに
white-space:normal ;
追加でどうすか
- 972 ：Name_Not_Found：2022/10/29(土) 12:41:55.21 ID:???.net
- >>970
再現できてる？
https://jsfiddle.net/to8hvq03/
- 973 ：Name_Not_Found：2022/10/29(土) 12:48:32.89 ID:???.net
- > ウィンドウサイズを変更しても最初の描画した幅から小さくならず
どういうこと？
ちょっと何言ってるか分からない
- 974 ：Name_Not_Found：2022/10/29(土) 13:04:19.24 ID:8Q5qVqs2.net
- 昨日から色々やってみたのですが
親要素をウィンドウサイズによって幅の変更をしたいため100%にしてます
その中でpre,codeをwidth:100%ってやると子要素の大きさで親要素の幅が決まってしまって結局:子要素の幅=子要素の幅のようになってるみたいです
- 975 ：Name_Not_Found：2022/10/29(土) 13:06:40.72 ID:8Q5qVqs2.net
- ちなみに親要素はdivです
子要素に影響されないように親の要素(ここではウィンドウサイズ)のみ影響を受けるようにすることってできますか？
- 976 ：Name_Not_Found：2022/10/29(土) 13:22:57.69 ID:???.net
- >>972に答えろ
- 977 ：Name_Not_Found：2022/10/29(土) 13:40:15.67 ID:rLG6Jdtj.net
- >>976
そいつはちゃんと望む動きになってますね
- 978 ：Name_Not_Found：2022/10/29(土) 13:41:27.62 ID:rLG6Jdtj.net
- >>971
normal追加するとウィンドウサイズの縮小によって小さくなりましたが
コードが空白行含まないのでぐちゃぐちゃになってます
- 979 ：Name_Not_Found：2022/10/29(土) 13:43:05.38 ID:rLG6Jdtj.net
- >>972
コピペで自分の環境でやろうとするとダメですね
- 980 ：Name_Not_Found：2022/10/29(土) 13:49:51.45 ID:???.net
- 書かれてる通りにコードを書くとこうなるけど、何をしたいのかがサッパリ分からん
https://jsfiddle.net/to8hvq03/1/
> 子要素の大きさで親要素の幅が決まってしまって
違う。子要素のwidthを％指定した場合、親要素の幅によって子要素の幅が決まる。
- 981 ：Name_Not_Found：2022/10/29(土) 13:58:18.40 ID:rLG6Jdtj.net
- >>980
そのやつだとうまく言ってるんですよね
なんでできないんだろ…
- 982 ：Name_Not_Found：2022/10/29(土) 14:09:41.04 ID:???.net
- 親要素に固定値で幅を指定している可能性
- 983 ：Name_Not_Found：2022/10/29(土) 14:17:34.94 ID:???.net
- 980踏んでたから次スレ置いとくね
必要なら保守よろしく
HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/
- 984 ：Name_Not_Found：2022/10/29(土) 15:06:54.23 ID:rLG6Jdtj.net
- ちょっと難しそうなので幅の調整は諦めます
色々提案していただきありがとうございました
- 985 ：Name_Not_Found：2022/10/29(土) 15:27:45.26 ID:???.net
- >>983
乙～
- 986 ：Name_Not_Found：2022/11/03(木) 02:43:06.26 ID:???.net
- 画像のように複数のテキストの下部 + テキストのラップdiv上下に
点線を配置する方法ってありますか？
https://imgur.com/f0Jo1yj
テキストはspanで囲ってbackground-imageで
ドット用の画像 or linear-gradientでドットを実装しましたが
https://imgur.com/FI5Faa6
のようにinlineのためdivの幅目一杯まで広がりません。
またテキストの最終行のドットはbackground-imageのため消せません。
（divの下部にドット画像を配置するため重複してしまいます。）
どなたか教えて頂けるとありがたいです。
- 987 ：Name_Not_Found：2022/11/03(木) 03:46:48.53 ID:???.net
- >>986
こういうのじゃダメなの？
CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】
ttps://web-dev.tech/front-end/css/note-design-solid-dashed-line/
- 988 ：Name_Not_Found：2022/11/03(木) 06:32:58.95 ID:???.net
- >>986
今の時代はそういう風に画像を使って装飾よりもCSSで表現する方が主流だよ
この方が扱いやすいのでそういう方面を勉強しとくとこの先助かるよ
- 989 ：Name_Not_Found：2022/11/07(月) 17:12:35.85 ID:???.net
- 新機能勉強しときましょ～
2022年、注目しておきたいCSSの新機能のまとめ
https://coliss.com/articles/build-websites/operation/css/css-in-2022-new-features.html
- 990 ：Name_Not_Found：2022/11/12(土) 12:59:14.65 ID:???.net
- tableタグにcssで一括でスタイルをつけていますが、
特定のTDセルだけ変更したいのですがどうしたらよいのでしょうか？
fontsizeがtest.td優先になって変わりませんでした。
table.test td {
text-align: center;
font-size:10px;
}
.maguro {
border-right: 3px solid #00FF00;
background-color: #00FF00;
font-size: 20px;
}
<table class="test">
<tr><td>要素１</td></tr>
<tr><td>要素２</td></tr>
<tr><td class="maguro">要素３</td></tr>
<tr><td>要素４</td></tr>
</table>
- 991 ：Name_Not_Found：2022/11/12(土) 13:27:03.20 ID:???.net
- table.test td.maguro
で上書きはできる
css 詳細度で検索
こういうキモいセレクターで上書きしなきゃいけなくなったということは元の
table.test tdが設計としておかしいということ
記述としてはおかしくないので動作するが、人間が更新するものとしての設計が破綻している
よほどのことが無い限りタグそのものにcssをあてないほうがよい
table.testは.testでよい
.testがtable以外についたらまずいなら命名がおかしい
- 992 ：Name_Not_Found：2022/11/12(土) 13:52:34.43 ID:???.net
- お答えいただきありがとうございます！！
上書きできました！ 助かりました。
PHPで動的に生成されるテーブルで
セルの内容が都度変更になりまして、
例えば100点以上とあれば赤にするなどにしたかったのです。
最終的にTCPDFでHTMLテーブルをPDFにします。
奇数列や偶数列などでは判別できなく、
直接class指定しかないかなと思ったのですが、
他にどのような方法をとるものでしょうか？
- 993 ：Name_Not_Found：2022/11/12(土) 14:01:26.98 ID:???.net
- php側でセルの内容に合わせてclass付与する
- 994 ：Name_Not_Found：2022/11/12(土) 14:02:36.65 ID:???.net
- cssには現状テキストエレメントの内容を判断する方法はない
data属性とかならセレクタにできる
- 995 ：Name_Not_Found：2022/11/12(土) 14:48:58.87 ID:???.net
- みなさん、ありがとうございます！！
- 996 ：Name_Not_Found：2022/11/14(月) 23:57:24.10 ID:???.net
- いえいえ
- 997 ：Name_Not_Found：2022/11/16(水) 06:56:51.77 ID:NiPf6ivp.net
- そろそろ新スレを建てたほうがいいのではないでしょうか。
- 998 ：Name_Not_Found：2022/11/16(水) 06:59:18.12 ID:???.net
- >>983
もうあったみたいですね。
そろそろ最後なので981をageます。
- 999 ：Name_Not_Found：2022/11/22(火) 15:22:02.11 ID:???.net
- うめうめ
- 1000 ：Name_Not_Found：2022/11/25(金) 13:36:51.06 ID:???.net
- 埋め
- 1001 ：Name_Not_Found：2022/11/25(金) 13:44:21.84 ID:???.net
- 質問いいですか
- 1002 ：Name_Not_Found：2022/11/25(金) 16:39:50.67 ID:???.net
- HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
https://mevius.5ch.net/test/read.cgi/hp/1667020591/
- 1003 ：2ch.net投稿限界：Over 1000 Thread
- 2ch.netからのレス数が1000に到達しました。
総レス数 1003
262 KB
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★