X
HTML/CSS のどんな質問にも優しく答えるｽﾚ 50
レス数が1000を超えています。これ以上書き込みはできません。
0003Name_Not_Found
垢版 |
2022/03/01(火) 22:11:44.85ID:N5cvT1fd
まったくの初心者です。
いま社員バイトのみんなが手書きしたり会社PCにあるエクセルファイルに入力してる日報を、
在宅の人も共通にできるようweb上で入力してもらう仕組みを作ろうとしています。
年末までに完成させるよう、勉強しています。

お聞きしたいのですが、ユーザーに自由文字列を入力してもらうのはinput type=textしかないのでしょうか？
エクセルのシートで縦に50個くらい並んでるセルに入力してもらってるのですが、これをwebページ（html文書）にするなら、
input type=textを50個書き連ねておくものなんでしょうか？
tableで表を作っておくとしても、その表内で入力を受け付けるなんてありえないですよね？
やはり、input type="text"を並べて、そのひとつひとつに名前を付けておかないと処理できないと考えてよいでしょうか？

エクセルだと、VBAで、カウントしながらループで全行を走査してたのですが。
0004Name_Not_Found
垢版 |
2022/03/01(火) 22:23:24.29ID:???
inputで合ってる
改行含めた複数行に対応させたいならtextarea

でも、ExcelをWebで使えるようにするだけなら
業務用のGoogleアカウント作るor作ってもらってスプレッドシート共有の方が楽じゃないかな？
0005Name_Not_Found
垢版 |
2022/03/01(火) 22:27:03.81ID:???
>>3
ワークシートっぽい入力ができるように作るとおもう
初心者とのことなので正直かなり難易度が高いんじゃないかな

たとえばこんな感じ
handsontableのデモ(ちなみに仕事で使うなら有償)
https://handsontable.com/docs/demo/

フリーでもあるだろうけど結局html+cssだけじゃなくて
javascriptの知識も必要になるんじゃないかな
0006Name_Not_Found
垢版 |
2022/03/01(火) 22:28:01.19ID:???
>>4
ありがとうございました！

グーグルスプレッドシートというアイデアはありませんでした。
会社のお金と時間でwebプログラムの勉強ができるならラッキーだと思ってたので。
ほんと、ありがとうございました。
0007Name_Not_Found
垢版 |
2022/03/01(火) 22:30:11.92ID:???
>>5
ありがとうざいました！

たしかにこれを使いこなせたら、エクセルからwebシステムに見た目そっくりのまま移行できそうですね。
0008Name_Not_Found
垢版 |
2022/03/02(水) 01:35:48.82ID:???
Sassからコンパイルする所まで理解し、
BEMやFlocssの命名は迷いなくていい利点も何となくわかってきたところですが、
しかしいくつもCSSファイルを細分化する必要性があるかわかりません。
大規模サイトならメリットあるのはわかるが
LPや名刺サイト系でもブロック別にCSS分割沢山するものですか。
0009Name_Not_Found
垢版 |
2022/03/02(水) 03:19:46.77ID:???
>>8
FLOCSSなどの命名ルールにはそれぞれ設計者がどれくらいの規模、と想定してるから
まず規模に見合う設計を選ぶべきだが
こういうルールというのは他の人が同じ規則に準じて把握・推測できることに意味がある
極端に言えば自分しか更新しないならなんでもいい

慣れ親しんだ設計がやりやすいのであれば必要に応じてコンパクトにすればいいんだよ
フォルダじゃなくて_foundation.sassや_component.sassみたくまとめたり
プロジェクトとコンポーネントはどっちかしか使わず細分化をやめるとかね
0010Name_Not_Found
垢版 |
2022/03/02(水) 22:20:23.66ID:???
>>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 などを使う人が使う、
プロのウェブ系開発者向きのアプリだから、難易度は高い
0011Name_Not_Found
垢版 |
2022/03/03(木) 19:13:14.50ID:???
>>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
0012Name_Not_Found
垢版 |
2022/03/04(金) 12:28:01.89ID:???
タグを閉じ忘れても、後方に影響しない方法ってありでしょうか？
例えばワードプレスの記事内で閉じ忘れが発生した場合、sidebarやfooterのテンプレートにも影響しちゃいますね。
今はブロックエディタだからんなこともないのかしら。
0013Name_Not_Found
垢版 |
2022/03/04(金) 13:00:17.41ID:???
>>12
> 方法ってありでしょうか？

あるでしょうか？なら省略可能なタグ以外は無い
閉じ忘れないようにしたいなら、エディタに機能拡張でも入れて自動的に閉じてもらえ

あとはWordPressスレでやれ

WordPress（ワードプレス）その28
https://mevius.5ch.net/test/read.cgi/blog/1461783816/
WordPressの困った人のスレ 5
https://mevius.5ch.net/test/read.cgi/hp/1643627327/
0014Name_Not_Found
垢版 |
2022/03/04(金) 15:35:39.82ID:???
firefoxってfont family効かないんでしょうか？
おま環でしょうか？
0016Name_Not_Found
垢版 |
2022/03/04(金) 18:26:42.39ID:???
ブラウザで一回表示してChromeだと検証（デベロッパーツール）とかで
自分の思うように動いてないところがどう解釈されてるか見たほうがいいよ
まあかかってないってことはブラウザに無視されたとかそんなのだろうけど
0017Name_Not_Found
垢版 |
2022/03/04(金) 18:36:18.96ID:???
chromeだとちゃんと効きますからね
書き方の間違いではないかと、、、
0018Name_Not_Found
垢版 |
2022/03/04(金) 18:38:20.91ID:???
検証ツールみても横線で消されていることはないですね
importantしてみても駄目です

他のスタイルは適用されるので、セレクタの間違いではないようです
0019Name_Not_Found
垢版 |
2022/03/04(金) 18:45:22.69ID:???
クロスドメインになるwebフォントとか？
0020Name_Not_Found
垢版 |
2022/03/04(金) 18:48:23.07ID:???
とりま値込みで当該箇所のCSSコピペしてみ
0021Name_Not_Found
垢版 |
2022/03/04(金) 19:02:29.86ID:???
超基本的な質問で恐縮なのですが調べてもわからないので助けてください・・
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"」
この部分は何に当たるのでしょうか？　ここの記述を手掛かりにスクレイピングしたり、ここのデータ自体を取得したいのですが、
タグやクラス名で指定しても取得できません
0022Name_Not_Found
垢版 |
2022/03/04(金) 19:18:26.41ID:???
すみません　allow page choice fontの設定でした(´・ω・`)すまん、、、
0024Name_Not_Found
垢版 |
2022/03/04(金) 20:01:39.69ID:???
>>23
ありがとうございます！　これです！　attrsで取得できました！！
お手数おかけしました
0025Name_Not_Found
垢版 |
2022/03/05(土) 22:51:49.04ID:???
>>9
遅くなりましたがご回答ありがとうございます
小規模サイトでひとりで構築するなら自由に…ということですね

1ページ完結名刺サイト、LPサイトだと、昔みたいに、
reset、base、customizeのファイルくらいしかいらないと思ってしまうんだけど
今時の作り方じゃないから、同業者から見ると格好悪いのかなと気になっています
0026Name_Not_Found
垢版 |
2022/03/05(土) 23:35:08.71ID:???
Bootstrap でも使ってみれば？
0028Name_Not_Found
垢版 |
2022/03/06(日) 11:44:04.81ID:???
https://jsfiddle.net/bgegg/g0vw3qn7/1/
codeタグを使ってもレンダリングされるんですが、ソースコードをそのまま表示させる方法はありますでしょうか？
htmlとjavascritp、cssなどのソースを使います。
0031Name_Not_Found
垢版 |
2022/03/06(日) 12:11:29.36ID:???
ありません
<を&lt;に置換しましょう
0032Name_Not_Found
垢版 |
2022/03/06(日) 12:13:41.70ID:???
置き換えずにやる方法ってないんですかね？
textareaくらいですか？
0033Name_Not_Found
垢版 |
2022/03/06(日) 12:54:27.04ID:???
とりあえず「html シンタックスハイライト」でググれ
0035Name_Not_Found
垢版 |
2022/03/06(日) 13:10:19.22ID:???
>>32
手動置き換え面倒ならjsの文字列としてhtmlを入れて
replaceを2回かけるミニプログラムでも書いておけばいいんじゃないの？
0037Name_Not_Found
垢版 |
2022/03/06(日) 13:50:59.59ID:???
>>32
たいていはうまくいってしまうけど正しくはtextarea内もべたで書く時は特殊文字を置換しないとだめよ
0038Name_Not_Found
垢版 |
2022/03/06(日) 13:55:59.87ID:???
>>35
置き換えないとだめなんですねこれ
ありがとうございました

簡易的になのでtextareaでもokでしょうか？

>>36
0039Name_Not_Found
垢版 |
2022/03/06(日) 17:45:32.21ID:???
ちょっと何言ってるか分からない
0040Name_Not_Found
垢版 |
2022/03/07(月) 01:04:34.02ID:???
>>28
ソースを別ファイルにしてもよければ
<iframe src="./hoge.txt"></iframe>
とか
0042Name_Not_Found
垢版 |
2022/03/07(月) 09:35:26.87ID:???
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%
}
0043Name_Not_Found
垢版 |
2022/03/07(月) 11:59:57.61ID:???
>>40
ありがと
素直にワードプレスにします(´・ω・`)
無料ブログはつらい
0044Name_Not_Found
垢版 |
2022/03/07(月) 13:20:44.02ID:???
>>42
右寄せにならないのはmodal-headerがflexboxになってて、justify-contentがspace-betweenになってるから
モーダルのヘッダー部分にタイトルとか入れないなら、<div class="row">の前にダミーで<h5></h5>とか入れるか
もしくはmodal-headerのclassにjustify-content-endを入れれば右寄せになるんじゃない？
004542
垢版 |
2022/03/07(月) 14:53:42.58ID:???
>>44
なるほど、参考にさせていただいてもうちょい試行錯誤してみます！
ありがとうございました！
0046Name_Not_Found
垢版 |
2022/03/09(水) 21:52:16.65ID:???
https://imgbox.com/73H4GsmU
画像をfloat leftで寄せて、文字を回り込ませているのですが、文字と画像の余白はpaddingもマーディンも効きません
何を使うといいんでしょうか？
0050Name_Not_Found
垢版 |
2022/03/13(日) 21:51:11.88ID:???
Webページで日付表示の指定方法があったら教えてください

目的には「2022-03-13」などと指定しておいて
ブラウザの言語指定に基づいて
米国語のブラウザでは「Mar. 13, 2022」
日本語のブラウザでは「2022/03/13」などと
自動的に日付表示させる方法があったら教えてください
0051Name_Not_Found
垢版 |
2022/03/13(日) 22:18:59.97ID:???
JavaScriptでブラウザの言語判定して日本語なら〜英語なら〜で表示させないと無理では？？
0052Name_Not_Found
垢版 |
2022/03/14(月) 01:09:16.70ID:???
>>51
かなり面倒みたいですね
Javascriptで検索したらtoLocaleDateStringってのがヒットしました
組み込めるかどうか検討してみます。
0053Name_Not_Found
垢版 |
2022/03/16(水) 11:55:21.32ID:acpOVR1E
-webkit-overflow-scrollingっていつのまにか不要になっていた(デフォルトで慣性スクロールが効くようになった)んですね
全然知らんかった　もう書く必要ないのか
0054Name_Not_Found
垢版 |
2022/03/16(水) 14:16:56.42ID:???
Autoprefixer使ってるから、その辺はあまり気にしなくなった
0055Name_Not_Found
垢版 |
2022/03/16(水) 14:19:33.14ID:???
って、Autoprefixer関係無い話だったｗ
0056Name_Not_Found
垢版 |
2022/03/16(水) 20:32:48.96ID:???
cssなんですが、
例えば

.h1 {
color: #FFF;
}
@media screen and (max-width: 768px) {
h1 {
color: #FFF;
}
}

上記のように、基本のCSSに加えてモバイル向けのメディアクエリも設定する場合、基本のCSSの方には
@media screen and (min-width: 769px)
とかつけた方がモバイルの方は描画が速くなったりするのでしょうか？

基本のCSS適用後にメディアクエリでモバイル用CSSで上書きされるのと、
基本とモバイル用のそれぞれでメディアクエリ適用有無の判定が行われるのと、
どちらがよりよいのでしょうか。
0057Name_Not_Found
垢版 |
2022/03/16(水) 21:31:06.89ID:???
>>56
排他の方が早いが4G回線でも体感できないくらいの差しかない
0058Name_Not_Found
垢版 |
2022/03/16(水) 23:54:37.72ID:???
web制作の学習を始めた初心者です。
インプレス社から出版されている「Sassの教科書」で
学習しているのですが利用環境を整えるためのインストール作業で手間取っています。

Node.jsをインストールした後npmコマンドを用いてセットアップ済みの環境を
インストールしていくのですがnpm installコマンドを実行しても
インストールがされません。エラー表記があまりに多くどこを見ればよいかも
わからない状態です。
原因究明のためにはエラー内容をコピペしたほうがいいでしょうか？
自分でも意味があまりわかっておらず不明な説明かもしれませんが
どなたか回答いただければ
0059Name_Not_Found
垢版 |
2022/03/17(木) 00:39:50.64ID:???
今時はvscodeの拡張でコンパイルする方が簡単よ
0060Name_Not_Found
垢版 |
2022/03/17(木) 01:13:55.94ID:???
何だか分からんがnode.jsインストールと同時に
既にnpmもインストールしちゃったとか？
0061Name_Not_Found
垢版 |
2022/03/17(木) 02:37:07.01ID:???
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するのと同じ
006261
垢版 |
2022/03/17(木) 02:37:41.33ID:???
「Sassの教科書」は、漏れも読んでいるけど、2017年の本だから、
今では、VSCode の拡張機能で、簡単に出来る

ただし、本格的にプロジェクトを作って制作するなら、
npm, gulp, npm scripts などで、タスクを定義して使う
006361
垢版 |
2022/03/17(木) 06:17:13.02ID:???
ただし、Live Sass Compiler は、
@import の代わりの新構文、@use, @forward に対応していないらしい

その場合は、他の拡張機能を探すか、
gulp, npm scripts で、Dart Sass を使うかする必要がある

SASSは、Ruby Sass, node-sass(LibSass)は廃止で、Dart Sassへ移行する
0064Name_Not_Found
垢版 |
2022/03/17(木) 16:04:52.74ID:???
全く回答になっていない件
0065Name_Not_Found
垢版 |
2022/03/17(木) 16:45:39.27ID:???
このキモい句読点はいつもKENTAとかいうYouTuber？をステマしてるやつだな
0066Name_Not_Found
垢版 |
2022/03/17(木) 19:59:47.23ID:???
>>57
遅くなったけれどありがとう
0.1秒表示が早いだけでもかなりの影響があると聞いていたのでとことんやるべきかと思ったのですが、それを踏まえてもなおそこまではやらんでもというレベルなのでしょうかね

もうやり尽くした、あとはこれくらいしか...となったら突き詰めてみるくらいで考えてみることにします
0067Name_Not_Found
垢版 |
2022/03/17(木) 20:05:30.55ID:???
>>66
究極的にはセレクタの長さとかまで言い出すことになるからな
minifyしときゃなんでもいいよ
0068Name_Not_Found
垢版 |
2022/03/17(木) 20:18:16.87ID:???
もう誰も気付かないどころか、自分でも体感的には
全く気付かない誤差レベルの自己満足の世界だな
0069Name_Not_Found
垢版 |
2022/03/17(木) 21:02:54.20ID:???
58です。

vscodeの拡張機能でコンパイルできるのですね。
回答してくださった方々ありがとうございました。
007061
垢版 |
2022/03/18(金) 05:51:43.67ID:???
>>63
に書いたけど、

新しい構文、@use, @forward に対応した、VSCode の拡張機能があるらしい

【VSCode】Dart Sassが使える拡張機能 - DartJS Sass Compiler and Sass Watcherの使い方
https://yumegori.com/vscode-dart-sass-setting
0071Name_Not_Found
垢版 |
2022/03/18(金) 18:20:40.00ID:???
chromeのインスペクタでcssの編集出来なくなってないですか？
vivaldiなんですけども、どないしたらいいですかね
0073Name_Not_Found
垢版 |
2022/03/18(金) 19:17:29.30ID:WYm/bNId
WordPressのCSSの変更を試みています。
ブログで長い縦スクロールのサイト。
上部にメインメニューでプルダウンメニューが有ります。
そのプルダウンメニューにはたくさんのメニュー項目があります。
しかしそのメニューはブラウザのウィンドウの高さを超えることができません。
メニュー要素の高さを3000pxとかにしてもブラウザのウィンドウの高さでカットされています。

縦へのスクロール量はどんなに多くなっても良いので、
メニュー要素の高さは全表示させたいです。
とは言え、メニューの高さ以上にページ自体の高さはありますが。
どうやったら、メニューの高さを設定した数値に保てるでしょうか？
0074Name_Not_Found
垢版 |
2022/03/18(金) 19:50:13.97ID:???
どっかにoverflow:hiddenあるんじゃないの
0075Name_Not_Found
垢版 |
2022/03/19(土) 03:29:27.58ID:???
昔frontpageを使っていたときはテーブルの列を消そうと思ったらwordやexcel感覚で列選択して消していたけど
最近はvscodeとか使っていると列を消したいときはソースを行ごとに触るしかないの？

html貼り付けて列のタグを削除とかできるサイトとかあれば便利そう
0076Name_Not_Found
垢版 |
2022/03/19(土) 08:49:38.02ID:???
そんなあなたにDreamweaver
0078Name_Not_Found
垢版 |
2022/03/22(火) 18:52:07.02ID:???
ブログをやっているのですが
ブログタイトルにh1
記事タイトルにh2が使われているテンプレートを使っているのですが、
記事本文で見出しタグを使う場合h1から使うのかh3から使うのかどちらが正しいでしょうか

初心者なので変なこと書いてたらすいません
0079Name_Not_Found
垢版 |
2022/03/22(火) 19:18:55.46ID:???
ページ内でhの連番が飛んでなければh3
0080Name_Not_Found
垢版 |
2022/03/22(火) 20:00:03.97ID:???
書籍などの目次（見出し／小見出し）をイメージするとわかりやすいよ
h3
0081Name_Not_Found
垢版 |
2022/03/22(火) 21:19:53.65ID:???
ありがとうございます
書き込んだあとに思ったけどテンプレートできっちり書いてくれてるなら記事本文では下手にhtml記述しないほうがいいような気もしました
0082Name_Not_Found
垢版 |
2022/03/24(木) 14:24:20.89ID:???
質問です
自分が作ったHTMLの中の、
あるフォントで指定した日本語部分を
そのフォントがインストールされていない他人の端末で表示したときに
豆腐文字で表示されますでしょうか、
それとも便宜的に別のフォントで表示されますでしょうか？
また、自分がフォントを指定しなければ、この問題は回避されますでしょうか？
よろしくおねがいします
0083Name_Not_Found
垢版 |
2022/03/24(木) 14:40:38.99ID:???
font-familyの優先順位に従う
何も指定してない場合ブラウザやOSの仕様による
0084Name_Not_Found
垢版 |
2022/03/24(木) 15:56:19.24ID:Ngjr/wSZ
CSSフレームワークって使わないで書くのが普通なんですか？

たくさんフレームワークあって別の人があとから修正することを考えたらいちいちそのフレームワークの学習コスト取らせるのは現実的ではないから、という理由でしょうか？
0086Name_Not_Found
垢版 |
2022/03/24(木) 16:16:18.21ID:???
基本を知ってればフレームワークは応用にすぎん
学習コストうんぬんを考えるのはそういうレベルの人材
0087Name_Not_Found
垢版 |
2022/03/24(木) 19:29:13.00ID:???
ちんちんシュッ！シュッ！シュッ！
0088Name_Not_Found
垢版 |
2022/03/24(木) 19:43:32.45ID:wA0UfBbL
うんこプリッ
0089Name_Not_Found
垢版 |
2022/03/24(木) 20:04:14.98ID:???
CSSフレームワーク使ってる人はHTML/CSSで書ける
ウェブアプリなんか作る人がそっちよりも機能実装の方に力入れたいからフレームワークを使うんだと思う
0090Name_Not_Found
垢版 |
2022/03/25(金) 01:46:02.15ID:???
ほぼ、Bootstrap。
少数派が、Tailwind, Bulma

CSS フレームワークを使わないと、まず無理。
まともに作るのに、とんでもなく時間が掛かる

responsive とか、様々な場合を考えないといけない。
バグを排除できない
0091Name_Not_Found
垢版 |
2022/03/25(金) 02:04:03.01ID:???
このキモイ句読点はもしかしてサロンコピペ荒らし野郎か
0092Name_Not_Found
垢版 |
2022/03/25(金) 18:29:56.04ID:???
vivaldiなんですが、インスペクタからcssの編集が出来なくなることがあります。
ヘッダーにcssファイルへのリンクがあり、そのリンク先にcssが記述されています。
しかし、ヘッダまでしか追えていないので編集できんのです
chromeは問題ないです
0095Name_Not_Found
垢版 |
2022/03/27(日) 03:51:28.87ID:???
有名どころのサイトなので明言したくないんですが
ページをスクロール等操作していた際に<style id="xxxというのがいきなり現れるのはどういう仕組みなんでしょうか
それを出てくる前に塞いでおきたくてheadやbodyを調べたんですが、id=に続く文字列はどこにも見つかりません
訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか
0096Name_Not_Found
垢版 |
2022/03/27(日) 04:18:47.31ID:???
>>95
ある程度わかるけど
そのstyleタグの前後をきちんと書かなきゃ
0097Name_Not_Found
垢版 |
2022/03/27(日) 04:56:27.91ID:???
JavaScript, jQuery などでプログラミングして、スクロール位置で判断する

例えば、100 スクロールされて、scrollTop が、100になったら、
id="xxx" の要素を作って、どこかの要素に追加して、

そのid="xxx"の要素に、jQueryで、スタイルを付ける
$( '#xxx' ).css( 'color', '#f00' );
0098Name_Not_Found
垢版 |
2022/03/27(日) 05:22:17.72ID:???
>訪問者の閲覧を強引に足止めする手段として詳しい方はいるのではないでしょうか

これはどういう意味なんだろう
0101Name_Not_Found
垢版 |
2022/03/28(月) 12:51:03.90ID:???
源界明朝は限界ギリギリ読める源ノ明朝の派生フリーフォント ? デザインのブログ
ttps://flopdesign.com/blog/font/5146/
0102Name_Not_Found
垢版 |
2022/03/29(火) 01:41:13.49ID:???
>>101
ありがとうございます！ずっと探してました！
0103Name_Not_Found
垢版 |
2022/03/29(火) 15:26:47.37ID:???
サイトのソースを見ると
> style.css?ver=202203270623
とかクエスチョンの後に数字が付くものがあります。
これって何ですか？
アクセスする度にそのユーザー用のCSSを動的に一時的に生成しているってことですか？
0104Name_Not_Found
垢版 |
2022/03/29(火) 15:34:26.86ID:???
>>103
それはそのCSSのアドレスを処理してるサーバー側次第じゃ
静的なCSSと単なるパラメータなのかもしれないし
完全動的にCSSを返す仕組みでその判断に使ってる文字列かもしれないし

そのアドレス対して
?以降ないCSSまでのアドレスで中身がわかるか
日付ぽい数字をいじって中身が変わったの返すか
と見比べてみりゃいい
0105Name_Not_Found
垢版 |
2022/03/29(火) 15:36:15.96ID:???
1) style.css?ver=202203270623
2) style.css
3) style.css?ver=202202010900

こういう話ね
0106Name_Not_Found
垢版 |
2022/03/29(火) 15:55:03.50ID:???
リロードするたびに数字が変わる場合は
ただのキャッシュ対策
0107Name_Not_Found
垢版 |
2022/03/29(火) 16:53:16.09ID:???
キャッシュ対策いいかげん改善されないのかね
php使えない環境が面倒すぎ
0108103
垢版 |
2022/03/29(火) 19:57:39.70ID:???
皆さんありがとうございます。
ブラウザやPC変えても、
ver以降の数値は変わらないようですね。
適当な数値を手入力しても内容に変化はありませんね。
0109Name_Not_Found
垢版 |
2022/03/29(火) 22:10:14.05ID:???
キャッシュ対策だね
スーパーリロードとかしなくてもいいやつ
0110Name_Not_Found
垢版 |
2022/03/30(水) 02:16:26.19ID:???
ある広告表示をデベロッパーツールなどで消そうとしても、該当する要素を削除してみた途端にすぐに要素が復活します
こうやって広告などを無限に呼び出す場所はどうやって検出してどう止めればいいのでしょうか？
0112Name_Not_Found
垢版 |
2022/03/30(水) 06:58:30.55ID:???
100個ぐらいのJavaScript(JS)を解析しないといけない。
他人のサイトの解析なんて、無限に時間が掛かる

ブラウザで、JS を使わないように設定できるかな？
0113Name_Not_Found
垢版 |
2022/03/30(水) 07:34:05.27ID:???
>>112
ブラウザの設定でスクリプトの禁止できたような
0114Name_Not_Found
垢版 |
2022/03/31(木) 13:35:05.87ID:???
ChromeでQuick Javascript SwitcherってのでJSのON／OFFさせてるよ
0115Name_Not_Found
垢版 |
2022/04/01(金) 14:09:01.74ID:mRFv6Faa
URL貼り付けていい
0116Name_Not_Found
垢版 |
2022/04/01(金) 17:58:53.98ID:26d9NCWV
ブログスキンとはどのようなことですか。
恐れいりますが、回答はテキストでください。URLだけではかえって焦点が絞り切れない
0117Name_Not_Found
垢版 |
2022/04/01(金) 18:12:28.38ID:???
服の衣装替えみたいなもん
0119Name_Not_Found
垢版 |
2022/04/01(金) 18:17:22.87ID:z6Ae0s2B
質問です。
<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>するしかないのでしょうか？
0121Name_Not_Found
垢版 |
2022/04/01(金) 18:53:33.20ID:???
面倒だから全角スペース入れちゃえば
0122Name_Not_Found
垢版 |
2022/04/01(金) 19:00:05.70ID:z6Ae0s2B
>>120
試してみます。

>>121
それも考えたのですが、SigilというツールでKndle本を制作しています。
コードはできるだけ最適なものにしたいのです。
0123Name_Not_Found
垢版 |
2022/04/01(金) 19:05:58.17ID:???
できるだけ最適なものをと考えるなら
それこそ行頭字下げする場合はPタグで統一した方がよくね？
0124Name_Not_Found
垢版 |
2022/04/01(金) 19:11:29.98ID:???
>>123
それな
字下げされているということは段落が違うんだからbrを入れてるのがおかしい
0125Name_Not_Found
垢版 |
2022/04/01(金) 19:12:10.18ID:???
そうやね
>>119のなんとかやりたいであろう

<p>むかしむかしあるところに<br />
おじいさんとおばあさんがいました</p>
を簡単なhtml書いてブラウザに表示させてデベロッパーツールで見てみればいいが
cssを引っ掛ける場所がpとbrだけでbrで切られた後半のテキストには
何もないんだわ
jsならテキスト要素を探せるんだがねえ
0126Name_Not_Found
垢版 |
2022/04/01(金) 19:25:15.50ID:z6Ae0s2B
>>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>

２行目と３行目の間にだけ空白行をつけたい場合、
どうするのがスマートでしょうか？
0127Name_Not_Found
垢版 |
2022/04/01(金) 19:34:05.59ID:???
<p>ほげほげ</p>
<p class="hoge">ふがふが</p>

.hoge{
margin-top: 1em;
}
0128Name_Not_Found
垢版 |
2022/04/01(金) 19:40:25.79ID:???
上で言ったcssを引っ掛けるとは
>>127
のような話

インデント下げのcssを引っ掛けたいタグにクラス名書いてやればいいだけだし
そのためにはbrぶった切りでは厳しい
0129Name_Not_Found
垢版 |
2022/04/01(金) 19:40:32.03ID:???
紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
どうしてもやりたいなら

<section>
<p>むかしむかし</p>
<p>おじおば</p>
</section>

とか

<p>
<span>むかしむかし</span>
<span>おじおば</span>
</p>
0130Name_Not_Found
垢版 |
2022/04/01(金) 19:41:36.89ID:???
>>127
空白行が必要なpタグの前（または後）にマージン設定するパターンですね。勉強になります。今のところ最終手段としています。
0131Name_Not_Found
垢版 |
2022/04/01(金) 20:50:08.92ID:???
久々にhtml4のサイト触っているけど、
昔はhtml5は吐きそうだったけど、今見るとhtml4のほうがうげぇってなるわ
0132Name_Not_Found
垢版 |
2022/04/01(金) 21:11:21.02ID:???
webってC/C++でやった醜態をまたやらかしたイメージしかないんだよな
僕の考えた最強のライブラリとかああいうの
0134Name_Not_Found
垢版 |
2022/04/02(土) 01:25:10.75ID:???
> 紙の字下げの法則がそもそもwebのセオリーと合ってないんだからやろうとしてることがおかしい
これな
Webサイトは出版とは違うんだと考えを改めた方がいい
0135Name_Not_Found
垢版 |
2022/04/02(土) 01:32:10.29ID:???
Webでやるなら先頭1文字をデカくするドロップキャップの方が見栄えはいいかな
0136Name_Not_Found
垢版 |
2022/04/02(土) 02:04:14.09ID:???
そもそも
text-indent: 0;
padding: 1rem;
とかじゃあかんの？
0137Name_Not_Found
垢版 |
2022/04/02(土) 02:05:31.46ID:???
いや、padding-left: 1rem; か
0138Name_Not_Found
垢版 |
2022/04/02(土) 02:30:46.43ID:???
そもそも字下げは文節で区切る場合に使用で段落毎に使うものではない
0139Name_Not_Found
垢版 |
2022/04/02(土) 03:20:32.19ID:???
>>136
質問者の説明がわかりづらくてみんな一瞬それ思い浮かべたと思うけど
よく読むとそれだと下げたくないところも下がるってこと
0140Name_Not_Found
垢版 |
2022/04/02(土) 16:26:36.32ID:???
英語のマニュアルを翻訳していて、斜体(italic)を全角でも斜体にしたいのですが、
span+transformするしかなさそうなのでコンポーネント化して独自タグ<nana>を作ってみようかなと思います(バルーンを出すタグは作ったことあるので

でも面倒ですし、何か他に上手い方法ってありませんか？
0141Name_Not_Found
垢版 |
2022/04/02(土) 16:27:58.52ID:???
>>140
なさそう → 二、三ページぱっと見て見つからなかった
0142Name_Not_Found
垢版 |
2022/04/02(土) 17:28:37.24ID:???
>>140
単純にcssに書いて <span class="i"> でいけた
0143Name_Not_Found
垢版 |
2022/04/03(日) 00:36:53.74ID:???
フォントに斜体があるかどうかだから
（あるならiタグでいける）
transformが無難じゃね
0144Name_Not_Found
垢版 |
2022/04/03(日) 01:03:44.44ID:???
Web編集で文字が斜体にならないときの理由と２つの対応方法
ttps://web-365.biz/made_in_wordpress/webfont-how-to-italic
0145Name_Not_Found
垢版 |
2022/04/03(日) 08:25:19.48ID:???
テーブル内に複数の画像を横に並べて自動で画像が左スクロールし
各画像の左端がテーブルの左端に来たら５秒間スクロールし
５秒過ぎたら自動でスクロール再開これを繰り返す
このようなのはcssで作ることはできますか？
できるならどうやればいいんですか？
0147Name_Not_Found
垢版 |
2022/04/03(日) 08:38:05.80ID:???
アニメーション機能でそういう画像のスクロールはあったような
0148Name_Not_Found
垢版 |
2022/04/03(日) 17:04:19.20ID:6lXmEp/A
すいませんもしわかれば教えていただきたいのですが
ドリームウィーバーを使っておりまして
フォント単位のremを使用するとブラウザプレビューは正しく表記されるのですが
ドリの画面上のフォントサイズがデカく表示されてしまいます。差異がない表示にしたいのですが何か良い方法はないでしょうか
0149Name_Not_Found
垢版 |
2022/04/03(日) 17:39:04.25ID:???
ドリームウィーバー使ったことないから分からないけどremはブラウザの標準フォントサイズを基準に決まるので
bodyにfont-size:10pxにしてremをemにするとかかなあ
例えばpタグで囲んだ文字を1.6em（16px）にしたり見出しを4.8em（48px）とか共通にできるのでは？
0150Name_Not_Found
垢版 |
2022/04/03(日) 18:08:32.88ID:???
ブラウザプレビューできるんならドリームウィーバーのプレビューなんか使うな
0151Name_Not_Found
垢版 |
2022/04/04(月) 01:57:49.15ID:???
ちんちんシュッ!シュッ!シュッ!
0152Name_Not_Found
垢版 |
2022/04/04(月) 18:06:53.29ID:???
声高にドリームウィーバー！
0153Name_Not_Found
垢版 |
2022/04/04(月) 20:22:29.03ID:???
デザインビューだけに適用できるcssの設定があったと思うけど
具体的にどうするかは忘れたし
今も残ってる機能なのかはわからない、、
0156Name_Not_Found
垢版 |
2022/04/04(月) 23:34:26.70ID:???
Google「フォント ゴシック 割れ」
0160Name_Not_Found
垢版 |
2022/04/05(火) 02:05:27.90ID:???
質問のマルチポストは5chでは忌み嫌われているのでやめましょう
ましてやフォントの質問はスレ違いです
0162Name_Not_Found
垢版 |
2022/04/06(水) 13:08:12.72ID:???
ニュース見てホームページ観に行ったけど
確かにシンプルやったwインターネット黎明編って感じ
0163Name_Not_Found
垢版 |
2022/04/06(水) 14:50:46.55ID:???
その黎明期に作ったファンサイトが公式化したからね
同事務所の名取裕子のサイトも同じ黎明期designにしてる
0165Name_Not_Found
垢版 |
2022/04/06(水) 19:04:31.87ID:???
>>162
Win98の時代を思い出すぜ
テーブルでレイアウトとか普通にやってた時代か
0166Name_Not_Found
垢版 |
2022/04/06(水) 20:48:37.99ID:???
いまだにリニューアルできない顧客の
table>tr>tdのタグ内でコンテンツ書いて埋めてるわ
0167Name_Not_Found
垢版 |
2022/04/07(木) 01:43:04.89ID:???
>>166
テーブルレイアウトとはtdのなかにtable作ってその中にtable作っていく作法だぞ
0169Name_Not_Found
垢版 |
2022/04/07(木) 18:22:36.43ID:???
>>167
もちろんそれ
それやってるぞー、FrontPageで
タグ打ちなんてやってられん

html4なのに、htmlタグの上にdtdのxhtmlって書いているだが昔何も知らずに俺が貼り付けたと思うが、特に不具合は起きないのこれ？
0170Name_Not_Found
垢版 |
2022/04/07(木) 22:23:02.58ID:???
テーブルレイアウトっていうとcolspan rowspan駆使してたようなやつだな
0171Name_Not_Found
垢版 |
2022/04/09(土) 01:49:35.46ID:???
そうそう、もうspanしまくりよ
0173Name_Not_Found
垢版 |
2022/04/09(土) 04:19:16.15ID:???
ﾊﾟﾝﾊﾟﾝ! ｽﾊﾟﾊﾟﾝ！
0174Name_Not_Found
垢版 |
2022/04/09(土) 05:11:13.24ID:???
ﾁﾝﾁﾝｼｭｯ!ｼｭｯ!ｼｭｯ!
0175Name_Not_Found
垢版 |
2022/04/09(土) 13:29:29.80ID:???
質問です、
html5のvideoタグでプレイヤー画面の映像とプレイヤーコントロール(下部コントロールではなく画面クリックで再生停止する方)の間にhtmlを仕込むことはできますか？

やりたいことはプレイヤーの上にhtmlコンテンツを重ねながらプレイヤー画面をクリックで再生停止をコントロールできるようにしたいです。
0176Name_Not_Found
垢版 |
2022/04/09(土) 13:41:57.49ID:???
jsで動画のon/offをコントロールしたらできる
0177Name_Not_Found
垢版 |
2022/04/09(土) 15:38:13.69ID:???
>>176
やはりjsで仕込むしかないですか

プレイヤー上に再生の三角マークとか複数のdivなどの要素が重なってるのでどれが再生停止のコントロールに紐づいてるのか分かりませんがcssで上手い具合に重なりの順序変えたりすればいけるのかなとか思ってました...
0179Name_Not_Found
垢版 |
2022/04/09(土) 17:14:07.45ID:???
生のcssはiframeやobjectの中身にはアクセスできんよ
pointer-eventsなどで包括要素ごと操作禁止とかなら制御できるが
0180Name_Not_Found
垢版 |
2022/04/09(土) 21:21:02.89ID:???
ありがとうございました
pointer-events:none で対応できました

不勉強でこんな便利なのが追加されてたとは知りませんでした......
これを機会に脳内のアップデートしておきます
0181Name_Not_Found
垢版 |
2022/04/10(日) 00:48:45.79ID:???
ふつうに知識のアップデートどいいでしょ、何だよ脳内のアップデートって
0183Name_Not_Found
垢版 |
2022/04/10(日) 06:47:10.09ID:???
今のネットって古い書き方のジャンク情報とかも溢れてるからきついよな
無駄に広帯域の回線契約してジャンク情報の中からあたり情報探す
時間とか考えるとまとめてある本買ったほうがいいまでの時代になってしまった
0184Name_Not_Found
垢版 |
2022/04/10(日) 07:20:06.39ID:???
>>183
Qiita「今日はこういう事例を投稿します・・・おぉっとここでトラブル発生、うまくいかないので次回へ続く」

みたいな情報はなんとかして欲しい
0186Name_Not_Found
垢版 |
2022/04/10(日) 09:14:14.46ID:???
クソ記事クソサイトはChromeの拡張機能で検索結果に出てこないようにしてる
イラッとしたら登録
二度と出会わなくて済むし収益への貢献も防げる
沙汰していくべき
0187Name_Not_Found
垢版 |
2022/04/11(月) 01:19:04.58ID:???
サイトNG機能は全ブラウザに既定であって欲しい
0188Name_Not_Found
垢版 |
2022/04/11(月) 01:49:25.32ID:???
naverまとめはドメインごと当時ブロックしてた
0189Name_Not_Found
垢版 |
2022/04/11(月) 09:56:59.93ID:???
コメント欄あるだろ
古いって書きまくってこいよ
0190Name_Not_Found
垢版 |
2022/04/11(月) 17:58:27.21ID:???
>>189
そんなゴミページを相手にする時間がもったいない
0191Name_Not_Found
垢版 |
2022/04/11(月) 19:54:28.60ID:???
コメントも承認されないだけだろう
野次っても意味ない
0192Name_Not_Found
垢版 |
2022/04/13(水) 08:30:43.07ID:???
H1：野菜の紹介
section>H2：根菜類
ul>li>figure>img 写真
figcaptionにタマネギ、説明にpタグで○○と入れたい時

タマネギって何のタグ使えば良い？
H3は見出しだからちょっと違う感じがするような・・
セマンティック的には何が良いんだろう
0193Name_Not_Found
垢版 |
2022/04/13(水) 10:58:49.71ID:???
ｄｌタグでdtがタマネギでddに説明でもいいだろう
0194Name_Not_Found
垢版 |
2022/04/14(木) 00:38:44.56ID:???
dlあんま使ったことない
これ便利そう
0195Name_Not_Found
垢版 |
2022/04/14(木) 00:52:58.60ID:???
めんどくせーから全部Div
どうせH3以下と他タグの構造なんてSEOに影響しないし
グーグルも大して判定しない
0196Name_Not_Found
垢版 |
2022/04/14(木) 09:33:48.07ID:???
でも同業者にソース見られてこいつレベル低いなｗとか思われる
0197Name_Not_Found
垢版 |
2022/04/14(木) 10:04:24.08ID:???
綺麗にタグ書いても別にいいことないんだよな
どこかの案件に入ろうとする時に断られるかもしれないけど
0198Name_Not_Found
垢版 |
2022/04/14(木) 10:28:22.63ID:???
divの入れ子って昔良く見た景色だが
今見ると狂気に見える
0199Name_Not_Found
垢版 |
2022/04/14(木) 10:29:54.44ID:???
>>195
そういう問題じゃなくなんか気持ち悪くならないか？
性格の問題かねえ
0200Name_Not_Found
垢版 |
2022/04/14(木) 10:44:50.15ID:???
tableよりマシじゃね
エンジニアが書くと全部divになる
classにスタイルつけるから要素はなんでもいいんだよな
0201Name_Not_Found
垢版 |
2022/04/14(木) 10:57:47.82ID:???
>>197
綺麗な方がスパゲッティで書くよりは視認性上がるしメンテも楽だ
0203Name_Not_Found
垢版 |
2022/04/14(木) 11:04:15.29ID:???
>>201
テンプレートエンジン使うと視認性気にならないよ
0204Name_Not_Found
垢版 |
2022/04/14(木) 11:26:42.93ID:???
馬鹿そうなコードは見てるだけでもバカが伝染しそうとか？ｗ
0206Name_Not_Found
垢版 |
2022/04/14(木) 13:32:12.40ID:???
>>195
今はそうでも後からSEOも基準変えるかもしれないからやはりコードは綺麗に書く
0207Name_Not_Found
垢版 |
2022/04/14(木) 14:54:16.51ID:???
>>202
ここら辺の理解ないままテケトーに書いてるやつ多すぎ
0209Name_Not_Found
垢版 |
2022/04/14(木) 17:36:06.47ID:???
>>200
15年前から脳の成長が止まっている子かな？
0210Name_Not_Found
垢版 |
2022/04/15(金) 00:17:48.42ID:9hOR2zg0
質問失礼します
最近Webサイトを制作し、GoogleSearchConsoleを使用し始めたのですがカバレッジでリダイレクトエラーが発生します
基本的に公開したいページが
https://ドメイン/サブディレクトリ/
だとすると、リダイレクトエラーが発生するurlが
https://ドメイン/サブディレクトリ
となります
リダイレクトの確認も行いましたが原因が分かりません
これはhtmlでの内部リンクが原因だったりするのでしょうか？

スレチでしたらすいません
0211Name_Not_Found
垢版 |
2022/04/15(金) 04:08:04.10ID:???
tableタグを使わずに表ってつくれるの？
0215Name_Not_Found
垢版 |
2022/04/16(土) 02:39:25.63ID:72RxKsAn
laravelで2chのような掲示板を作っており
レスを投稿すると
文章の長さによって表の列縦幅を変動させて背景色の長さを文章の長さまでに変更したいのですが
すべての行の背景色の長さが一番長い文章に統一されてしまいます。
これを改善したいのですがどうしたらいいでしょうか？
それとうまく説明できなくて申し訳ありません...
0216Name_Not_Found
垢版 |
2022/04/16(土) 08:13:33.01ID:???
イメージ画像とかないの？
0220Name_Not_Found
垢版 |
2022/04/18(月) 18:36:40.42ID:???
どうしょうもないな
やり方はそれぞれでコレをやんなきゃダメというわけでもないし
0221Name_Not_Found
垢版 |
2022/04/21(木) 20:24:29.62ID:???
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する
0223Name_Not_Found
垢版 |
2022/04/21(木) 22:34:01.98ID:???
ちょっと何言ってるか分かんないから
理想型の画像も作ってくれ
0224221
垢版 |
2022/04/22(金) 02:09:01.65ID:???
>>221です。

>>222-223
222のサイトを使って見せたいもの作れたんだけど、どうやったらここに貼れるんですか？
スクショ貼れって話だったりします？
0225221
垢版 |
2022/04/22(金) 02:11:37.62ID:???
>224
runとかsaveってボタン見落としてました。
必死にローカルで作ってぺたぺたしてた……
※resultってあるのに自動で変わらんなぁとか思ってましたわ(;・∀・)

https://jsfiddle.net/1gao8x4j/
0226Name_Not_Found
垢版 |
2022/04/22(金) 15:45:27.08ID:???
内容に合わせて個別にクラス指定するかjavascript使わないと
CSSだけで汎用性持たせるのは無理じゃね？
0227Name_Not_Found
垢版 |
2022/04/22(金) 15:48:43.55ID:???
思ったようなのが見つからないときはjsで目的の物を実装しておいて
後でゆっくりCSSでできるか調べるのも手よ
0228221
垢版 |
2022/04/22(金) 20:00:14.49ID:???
>>226
やっぱり無理かな？
無理なら無理で諦めようとは思ってます。
※妥協大事

>>227
js使えば何とかできるけどそこまで手間暇かけたくなくてね……
※２〜４カラム対応でjsでそこまで書くの面倒で……
まあ、提示したやつで妥協しますわ。

相談にのってくれてありがとうございました。
0229Name_Not_Found
垢版 |
2022/04/23(土) 16:28:07.82ID:???
<style>〜</style>の部分はデザインを変えたいhtmlタグ部分より下に書いても問題ないんですか？
0230Name_Not_Found
垢版 |
2022/04/23(土) 16:30:31.72ID:???
試して見れば
だめだったら爆発するわけじゃないんだし
0232Name_Not_Found
垢版 |
2022/04/23(土) 16:43:10.89ID:???
動くけどbody内のstyleはひっそり非推奨になったから気をつけて
0233Name_Not_Found
垢版 |
2022/04/23(土) 16:46:17.24ID:???
まあ色々試す場合はいじってるタグの近くにstyle置いて
確定したら上か外部に移動やな
0234Name_Not_Found
垢版 |
2022/04/23(土) 23:54:36.53ID:???
もう何年かしたら
html内にだららららーと表示されたりするのだろうか、、
0235Name_Not_Found
垢版 |
2022/04/24(日) 00:59:01.42ID:???
body内だめになったんか？
一時期bodyないに入れろってなってなかった？
0236Name_Not_Found
垢版 |
2022/04/24(日) 03:50:36.67ID:???
>>235
入れるべきではないが動く
↓
入れてもいい
↓
やっぱ入れないで　動くけど

と変遷してる
入れるべき、になったことはない
0237Name_Not_Found
垢版 |
2022/04/24(日) 04:29:42.31ID:???
入れるべき

はないわなｗ
プログラムやってるともうちょいなんとかしたいが
0238Name_Not_Found
垢版 |
2022/04/25(月) 01:12:33.09ID:???
Scssのif文て全く使う機会ないんだが実際便利な使い道ってある？
静的な文書で条件ってのもなんか微妙な気が
0239Name_Not_Found
垢版 |
2022/04/25(月) 02:07:54.15ID:???
roop内の分岐は？
特定のカウンタごとで結果を変えるとか
0240Name_Not_Found
垢版 |
2022/04/25(月) 03:22:34.18ID:???
>>238
変数にいらん値を入れるとerror吐くようにするとか
目視でやったほうが早かったりするから自己満足やね
0241Name_Not_Found
垢版 |
2022/04/25(月) 10:08:09.13ID:6Gb9KuO2
https://popo-design.net/template/demo/simple-corp/subpage.html
このカラム２を６つ並べて、７つ目を作ったときに１つ目の下に自動的に入るようにするにはどうすればよいのでしょうか？
よろしくお願いいたします。
0242Name_Not_Found
垢版 |
2022/04/25(月) 12:47:29.34ID:???
単純に折り返すだけでいいならdisplay:flex;を指定してる親要素に
flex-wrap: wrap;
を追加
0243Name_Not_Found
垢版 |
2022/04/25(月) 13:06:10.84ID:???
cssのネイティブの変数が最新のWPやBootstrap5でもう実装されちゃってんのな

しかしscssの変数の方が圧倒的に文字数少なくて済むが使い分けどうすんのこれ、、
そのうちscssはやっぱりいらなくなりましたってなりそうだしなー
0244Name_Not_Found
垢版 |
2022/04/25(月) 13:54:24.44ID:???
カスタムプロパティ実装すんのはブラウザの仕事やろ、wpやらBootstrapは関係ないやん。Sass変数と違ってカスケーディングの対象だし全くの別モンやで。
0245Name_Not_Found
垢版 |
2022/04/25(月) 14:22:02.29ID:???
>>243
ネストできるようになったらいよいよいらないかな
minifyやプレフィクサーのためになんらかのコンパイル自体は残るだろうけど
0246Name_Not_Found
垢版 |
2022/04/25(月) 14:29:00.12ID:???
>>242
ありがとうございます。
やってみたところ、１行目は６つなんですが、
２行目以降が５つにしかならないんです……
0247Name_Not_Found
垢版 |
2022/04/25(月) 15:27:05.60ID:???
>>246
3行以上あるの？だったらCSSに

.col:nth-of-type(6n+1) {
margin-left: 0;
}

を追加
他に影響が合ったり効かないようなら、クラス名等は環境に合わせて工夫して
0248Name_Not_Found
垢版 |
2022/04/25(月) 17:35:31.42ID:6Gb9KuO2
>>247
で、できました！
ありがとうございます！
0249Name_Not_Found
垢版 |
2022/05/02(月) 00:16:50.00ID:???
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とかにするはナシで）
0250Name_Not_Found
垢版 |
2022/05/02(月) 00:37:35.59ID:???
その例だと親セレクタカンマで解決しちゃう
0251Name_Not_Found
垢版 |
2022/05/02(月) 00:40:34.66ID:???
エスパー予測すると
インターポレーション　#{$this}　とかでぐぐってみて
0252Name_Not_Found
垢版 |
2022/05/02(月) 01:10:29.14ID:???
>>250
確かに。。例が悪かった・・・

聞きたいのは、#hoge1の内容がもっと巨大であって、その中の1部だけを別の箇所でも汎用クラス的に使いまわしたいケース。

例では、#hoge1の中身を全部#hoge2でも使いたいわけではなく、あくまで#hoge1の中の.module1だけを#hoge2でも使いたい。

ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
#hoge1{
.module1,　@at-root #hoge2 .module1{
@extend .module1;
}
0253Name_Not_Found
垢版 |
2022/05/02(月) 01:12:38.70ID:???
>>251
すまん、ググったがちょっとわからない、、
インターポレーションは演算しないようにする為のものじゃないの？
0254Name_Not_Found
垢版 |
2022/05/02(月) 01:13:43.47ID:???
なんとしてもそのネストでやりたい理由がわからんが
mixin化するか大人しくその装飾をコンポーネントとみなして一つclass作るかなあ
0255Name_Not_Found
垢版 |
2022/05/02(月) 01:15:56.59ID:???
>>252
ごめんこれ間違い
>ちなみにこれだと@at-root書いても.module1の中にはいっちまうのだな・・
↓

ちなみにこれだと@at-root書いても#hoge1の中にはいっちまうのだな・・
0256Name_Not_Found
垢版 |
2022/05/02(月) 01:18:44.01ID:???
>>254
まあ普通にそうなるよね。ありがとう

一度完成したサイトで一部分を切り出して別の場所で臨時的に使いたい
ってケースなんだが、どうやったらcssの構造崩さずにラクできるかなと思い、、
0259Name_Not_Found
垢版 |
2022/05/05(木) 23:23:05.73ID:???
すみません質問させてください

htmlの要素の検証とかEdgeのWebキャプチャの機能使って画像保存したりしたのってサイトの管理者にはわかりますか？
0260Name_Not_Found
垢版 |
2022/05/05(木) 23:43:10.23ID:???
分かりませんが、仮にバレたところで何か問題でも？
0261Name_Not_Found
垢版 |
2022/05/06(金) 00:02:38.87ID:???
>>260
ありがとうございます
画像保存禁止のページでその辺使ってしまってバレたらヤバイとなりました
0262Name_Not_Found
垢版 |
2022/05/06(金) 00:07:43.25ID:???
バレてもなんもないよ
そんなこと気にしてるとウイルスに感染しましたスパムに引っかかるよ
0263Name_Not_Found
垢版 |
2022/05/06(金) 00:45:50.87ID:FMKyUWnB
>>262
ありがとうございました
まだちょっと不安ですがなんとか落ち着こうと思います
0264Name_Not_Found
垢版 |
2022/05/06(金) 20:01:52.98ID:???
保存禁止なんて勝手に言ってるだけやからな
0265Name_Not_Found
垢版 |
2022/05/10(火) 12:43:51.21ID:???
よくソースコードを表示してあるサイトでtextareaの背景が１行ごとに色が変わって横のしましま模様になっているの見かけるけど
これみたいにtextareaの背景色を１行ごとに変えるにはどうすればいいんですか？
<textarea style="background:#ff00ff">
aaa
bbb
ccc
</textarea>
のようにやっても単色でしか塗りつぶせないので
0266Name_Not_Found
垢版 |
2022/05/10(火) 12:47:00.16ID:???
>>265
その目的とするサイトの目的の箇所の上で右クリックして
検証じゃだめなの？
0267Name_Not_Found
垢版 |
2022/05/10(火) 12:47:35.89ID:???
右クリック禁止してなきゃブラウザ上でまる見えよ
0269Name_Not_Found
垢版 |
2022/05/10(火) 12:57:53.78ID:???
初歩的な話だがCSSは分かる？
0270Name_Not_Found
垢版 |
2022/05/10(火) 12:58:25.22ID:???
>>268
現物のソースタグじゃなくて害と箇所にかかってるCSSを見ないと
タグに対するCSSの情報も見れるでしょ
0273Name_Not_Found
垢版 |
2022/05/10(火) 13:39:47.80ID:???
web界隈はサンプルソースだらけなので参考の仕方を覚えておくといいよ
0274Name_Not_Found
垢版 |
2022/05/10(火) 16:17:56.61ID:???
そんなもん別にweb界隈に限ったことじゃないけどなｗ
0275Name_Not_Found
垢版 |
2022/05/10(火) 17:34:35.01ID:???
>>265
ああいうのはtextareaじゃなくてcontentEditable=trueにした要素でしょ
0278Name_Not_Found
垢版 |
2022/05/11(水) 00:15:02.81ID:???
申し訳ありません、間違ったスレへ投稿してしまったようなのでこちらへマルチさせてくださいm(vv)m
--------------
昔、youtubeの個別ページにおいてサイドへRecommended for youがひたっすら記載されていた時代

www.youtube.com##span[class="ytd-video-meta-block"]:has-text(Recommended for you)

的な記述で全部削除していました
最近それらの仕様削除を知り、ならば他のサイトで気に入らないテキスト語句を上記の部分入れ替えで使おう！と試すものの、有効とならず

用途はあるサイト内において、テキストを一括削除することです
この上記記述に過不足または間違いがあるのでしょうか？よろしくお願いしますm(vv)m
0279278
垢版 |
2022/05/11(水) 00:31:15.22ID:???
ふと、spanの部分を変更したら自己解決できました
仕様の根本を無理解のままコピペ運用すると、こういう面で苦労しますね
失礼しました
0281Name_Not_Found
垢版 |
2022/05/12(木) 22:56:12.15ID:???
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)

どのようにしたらショート動画を非表示に出来るでしょうか
0282Name_Not_Found
垢版 |
2022/05/12(木) 23:53:07.15ID:???
広告ブロックか何だか知らんけど、hasの中は

ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]

とかじゃダメなの？
0283Name_Not_Found
垢版 |
2022/05/13(金) 01:15:40.93ID:???
すっぽん食べるとギンギンになるって本当ですか(´・ω・｀)？
0285Name_Not_Found
垢版 |
2022/05/13(金) 11:30:42.37ID:???
>>282
その記述だとサムネイル上のショート動画のマークだけ消えました
サムネ自体は非表示になりません　難しい
0286Name_Not_Found
垢版 |
2022/05/13(金) 12:49:30.31ID:???
>>283
スッポンの生き血もいいけどハブ酒とかもかなり効くぜ
まあこの手のゲテモノ関連は得てして精力剤としてのものだ
0287Name_Not_Found
垢版 |
2022/05/13(金) 13:34:32.27ID:???
>>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"])
0288Name_Not_Found
垢版 |
2022/05/13(金) 14:00:21.02ID:???
広告ブロッカーだと未だsafariしかサポートしてない:has()に対応してるんだな
0289Name_Not_Found
垢版 |
2022/05/13(金) 18:40:19.01ID:???
>>287
出来ました！
そうですね確かにhasの中って書いてあったのに私が記述間違ってましたありがとう
0290Name_Not_Found
垢版 |
2022/05/18(水) 10:31:13.42ID:???
viewportについて質問させてください。
横幅1366px幅の固定幅サイトに、以下のタグを追記しました。

結果は
・スマホで表示すると、画面に合わせてサイトが縮小された状態で表示されました
・解像度が低いデスクトップPC(1280 * 768)は、ChromeでF11の全画面表示でも横スクロールが表示されました

MDNのサイト(https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts)では、「多くのモバイル端末やブラウザーが全画面モードである場合、ビューポートは画面全体です。」と記載があったのできれいに表示できるかと思ったのですが出来ませんでした。
上記metaタグの場合、デスクトップ上のブラウザ上ではどのように振る舞うものでしょうか。
また、モバイル端末でのみ有効なのでしょうか。
0291Name_Not_Found
垢版 |
2022/05/18(水) 10:34:34.48ID:???
タグ抜け出ました…
<meta name="viewport" content="width=1366, user-scalable=yes">
0292Name_Not_Found
垢版 |
2022/05/18(水) 10:37:46.15ID:???
デスクトップとモバイルで拡大縮小も動作違うしなあ
デスクトップは素材単位で拡大縮小するのでレイアウト崩れしまくるけど
モバイルはレンダリング結果を画像を拡大縮小するようにレイアウト崩れなしでいける
この辺の差がありそう
0293Name_Not_Found
垢版 |
2022/05/18(水) 12:01:17.94ID:???
そこの部分の説明のビューポートはあくまでもブラウザ内の表示領域という意味でmeta viewportでどうふるまうかとはちがくね？
0295Name_Not_Found
垢版 |
2022/05/21(土) 18:43:29.43ID:???
レコメンド広告だけ大量に表示しまくる方法ってありますか
暇な時あれ眺めてると掘り出し物とか出来てき好きなんですが・・・
0297Name_Not_Found
垢版 |
2022/05/28(土) 19:04:05.03ID:???
自分が触っているサイトが
inputにフォーカスが当たると青い枠が出るんだけど、
cssや直書きhtmlに 疑似クラスのfocusも、プロパティのoutlineも無いんだけどなぜかわからん・・・
ラジオボタンも中心が青いし、inputに作用していることは間違いないんだけどどこに書いてそう？
0298Name_Not_Found
垢版 |
2022/05/28(土) 20:23:19.94ID:???
ん？user agent stylesheetの話？
0299Name_Not_Found
垢版 |
2022/05/28(土) 20:44:32.75ID:???
>>297
開発者ツールで目的の要素や周辺のスタイル適用がどう変化してるか見てみよう
cssでないならスクリプトでやってるかもね
0300Name_Not_Found
垢版 |
2022/05/28(土) 21:50:37.26ID:???
>>298
始めて名前は聞いたけどそれっぽい
firefoxなら青枠、edgeなら黒枠、inputの背景はクリーム色になる
ie11なら特に装飾無し

もともと13年ぐらい前のphpで、cssの行頭には
* {margin: 0;padding: 0;}
これしか書いていなかった

firefoxで、おなじみ開発ツールではその色などは :focus-visibleにすると青枠が出るけど
継承とかには出てこないけど、ブラウザが変わるとuser agent stylesheetからの継承とか出るみたいね
結局はreset.cssみたいなので消えるということか

13年前はフロント周りはhtml4の殻に閉じこもっていたなぁ
0301Name_Not_Found
垢版 |
2022/05/29(日) 15:11:59.58ID:???
div内にflexのulを作って、liならべてwrapする時
例えばliのwidth:50%って
ul.col2 li {width:50%}
ul li.col2 {width:50%}
どっちが正解？
0302Name_Not_Found
垢版 |
2022/05/29(日) 16:25:13.43ID:???
正解はない
liにいちいちclassをつけて管理するか
wrap要素で管理するか
0303Name_Not_Found
垢版 |
2022/05/29(日) 16:52:15.37ID:???
>>302
サンクス、デファクトスタンダードみたいなのが存在するかと思ってた
liの数が多いからwrapper要素に指定します
0304Name_Not_Found
垢版 |
2022/06/01(水) 14:01:14.05ID:???
ちょっと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);
</スクリプト>

何でリンクの背景色は変わったのに下線は消えないんでしょうか？
どうすれば下線を消せますか？
0305Name_Not_Found
垢版 |
2022/06/01(水) 16:33:51.47ID:???
ここでも見ればいいんじゃない

ttps://qumeru.com/magazine/150

hは自分でつけてね

ていうか、Googleで「text-decoration none 効かない」って検索したらトップに出てきたんだけど
0306Name_Not_Found
垢版 |
2022/06/01(水) 16:38:42.97ID:???
読み込み順の問題とか？
0307Name_Not_Found
垢版 |
2022/06/01(水) 16:49:21.39ID:???
そのtestってidはaタグ(アンカータグ)にかかってんの？
親要素や子要素にかかってても下線消えないらしいけど。

仕事だからもういくわ。
また夜に来るよ。
0308Name_Not_Found
垢版 |
2022/06/01(水) 17:08:13.87ID:???
#haichiにもtext-decoration: none;
0310Name_Not_Found
垢版 |
2022/06/01(水) 20:55:37.44ID:???
>>308
おれもこれで消えた
理由は何でか分からん
0311Name_Not_Found
垢版 |
2022/06/01(水) 20:59:50.73ID:???
>>308
それにもtext-decoration: none;したら下線消えました
でも何でaタグだけにtext-decoration: none;しても下線消えなかったのかな
0313Name_Not_Found
垢版 |
2022/06/01(水) 21:14:23.95ID:???
わかった<ins>がだめなんだ<div>にしたらそのまま消える
0314Name_Not_Found
垢版 |
2022/06/01(水) 21:24:24.44ID:???
役に立たなかったか。すまん
解決したならよかった
0315Name_Not_Found
垢版 |
2022/06/01(水) 21:46:40.26ID:???
主要なブラウザのデフォルトCSSではinsにtext-decoration: underline;が指定されてる
だから、元のCSSでもa要素の下線は消えてたけど、insの方は消えてなかったって話
試しにinsにテキスト入れてみりゃ分かる
0318Name_Not_Found
垢版 |
2022/06/01(水) 22:02:10.40ID:bVPpNF9s
insタグなんか初めて聞いたのじゃ
戦前には無かったからのぅ
0320Name_Not_Found
垢版 |
2022/06/01(水) 23:52:17.15ID:???
初学者ですが、このスレ勉強になるね。
0321Name_Not_Found
垢版 |
2022/06/02(木) 00:03:16.62ID:???
insなんてタグ初めてしったわ
HTML系の本かれこれ10年以上何十冊も読んでるけど
出てきたことない
辞典には一応のってるな
0322Name_Not_Found
垢版 |
2022/06/02(木) 00:44:58.94ID:???
アドセンスコードでinsタグ使われているから存在は知ってた
0323Name_Not_Found
垢版 |
2022/06/10(金) 12:41:03.53ID:???
divの中にある要素（画像やテキストやボタンなど）をdivの幅に合わせて
縮小拡大するにはどうすればいいんですか？
0325Name_Not_Found
垢版 |
2022/06/10(金) 14:43:14.21ID:Y/BlBpdu
height:autoっていつも忘れるけど
inhelitしてるんだろうか
0326Name_Not_Found
垢版 |
2022/06/10(金) 14:49:44.05ID:???
デフォルトで auto
変なもの継承してる可能性があるから一応書く癖つけたほうが楽
0327Name_Not_Found
垢版 |
2022/06/10(金) 14:53:01.74ID:???
Google PageSpeed Insights用にimgに固定値入れるようになったから
autoつけるようにしてるね
0329Name_Not_Found
垢版 |
2022/06/11(土) 17:06:35.70ID:???
こんにちは。
ページネーションなしで画面に表示しきれないテーブルを表示したとします。
そのテーブルの任意の行（画面からはみ出て表示されない行）を表示するようにジャンプしたい場合、htmlだけでやる手段はあるでしょうか。
（各行にアンカーを埋め込む？）
あるいは Javascriptが必要でしょうか？
0330Name_Not_Found
垢版 |
2022/06/11(土) 18:54:12.29ID:???
ページ内移動をhtmlとcssだけでやりたいとなると、方法としては
基本的にアンカーリンクだけじゃない？他に何かあったっけ？
0331Name_Not_Found
垢版 |
2022/06/11(土) 22:21:54.89ID:???
5ちゃん初カキコさせていただきます。
有名なサイトのCSS、jsを見ると大概インデントが無かったり詰まってたりしますが、
あれには理由があるのでしょうか。
ググりましたが分かりませんでした。
どなたか教えてくださると幸いです。
0332Name_Not_Found
垢版 |
2022/06/11(土) 22:44:07.52ID:???
>>331
コレの話？

Minify（ミニファイ）とは何か？圧縮方法とJS・CSSの軽量化のメリットを解説
ttps://ssaits.jp/promapedia/technology/minify.html
0334Name_Not_Found
垢版 |
2022/06/12(日) 00:01:23.39ID:???
それです。
ありがとうございます。
minifyと言うのですね。
0335Name_Not_Found
垢版 |
2022/06/13(月) 21:44:19.29ID:mVV3FM0W
メニューをfixedで固定してグローバルメニュー表示にしてハンバーガーにするのクッソ難しいわ
わけわからん
0336Name_Not_Found
垢版 |
2022/06/13(月) 21:44:53.78ID:mVV3FM0W
なんとなくコピペでできはするけど他のCSSに速攻で干渉してイライラする
0337Name_Not_Found
垢版 |
2022/06/13(月) 22:21:58.98ID:???
基本的なことを聞いてしまい恥ずかしいのですが…。
<details>タグを使用しようとしたとき、指定されていたフォントサイズではなく大きく表示されてしまったため、
サイズを指定しようとしたときに<details＞タグが無効化されてしまいました。
CSSで<details>タグを使用した際のフォントサイズを指定すると良いのでしょうか？
どなたかやさしく教えてもらえると嬉しいです
0339Name_Not_Found
垢版 |
2022/06/13(月) 22:32:20.90ID:mVV3FM0W
妥協してabsoluteで済ませた
fixed難しすぎるだろこれ・・
0340Name_Not_Found
垢版 |
2022/06/13(月) 22:46:42.02ID:???
>>337です　解決いたしました　お目汚し失礼いたしました
0341Name_Not_Found
垢版 |
2022/06/14(火) 12:35:20.97ID:???
ulのnth-childってliにしか効かないんですか？
0342Name_Not_Found
垢版 |
2022/06/14(火) 12:43:57.39ID:???
ulにはli以外入れちゃいけないからそうなるね
0343Name_Not_Found
垢版 |
2022/06/14(火) 16:10:57.12ID:???
cssはマークアップ的に正当かどうかは検証しないのでulの子であればli以外であっても効く
0344Name_Not_Found
垢版 |
2022/06/14(火) 18:31:01.52ID:???
li:nth-child(3)とか書いてたらliにしか効かない
li削除して:nth-child(3)だけにすればli以外でも効く
0345Name_Not_Found
垢版 |
2022/06/15(水) 16:36:58.94ID:Csrza33o
質問よろしいでしょうか？

<textarea style="white-space:pre-wrap;">【装備】 \n【立ち回り】</textarea>

で改行して以下のように表示したいのですが、できません。

【装備】
【立ち回り】

こんなふうに改行されません。

【装備】【立ち回り】

どなたかお力添えをお願いできないでしょうか？
0348Name_Not_Found
垢版 |
2022/06/15(水) 18:50:22.45ID:???
htmlでは一般的なエスケープシーケンス表記は使えないのでHTMLエンティティで
\nは＆#10;や＆NewLine;(＆も半角)、もちろん347の\rな＆#13;でも問題ない
textareaの中身なんかは実際に改行しちゃってもいいし
0349Name_Not_Found
垢版 |
2022/06/15(水) 19:14:39.64ID:???
横からだけど、あんまりやったことなかったから勉強になった
0350Name_Not_Found
垢版 |
2022/06/16(木) 13:51:52.03ID:UVqwXAbN
皆さん、ありがとうございました。

とりあえず が一番良さそうです。

感謝いたします。
0352Name_Not_Found
垢版 |
2022/06/18(土) 16:56:55.45ID:???
10年以上の前のサイトで
box-sizingをborder-boxに変えた時にグシャっとレイアウトが崩れるとき
どのあたりのパラメータから直していけば良い？
0353Name_Not_Found
垢版 |
2022/06/18(土) 17:24:02.48ID:???
そらborderとpaddingよ
だがそもそも崩れるなら無茶な上書きすべきではない
0354Name_Not_Found
垢版 |
2022/06/18(土) 17:28:08.18ID:???
ありがとう、作り手がdiv10階層入れ子だらけで＆css4000行とかで
content-boxで作られているからびっくりするぐらい崩れる
触りたく無いけど、開発ツールでグシャったものをなんとかborder-boxで立て直したくなるね
0355Name_Not_Found
垢版 |
2022/06/19(日) 00:27:05.45ID:???
100px*100pxのDivを100px*50pxにして上半分と下半分で分割して表示することて出来ますか？
0357Name_Not_Found
垢版 |
2022/06/19(日) 00:31:21.51ID:???
IEが死んでくれたので
だいぶ楽になりますね
0358Name_Not_Found
垢版 |
2022/06/20(月) 12:39:14.14ID:???
transform:scaleについてですけど幅1000pxのdivがあって
ウインドウの幅が1000px以上の時はdivの表示拡大率1.0（transform:scale(1.0)）
ウンドウの幅が1000px未満の時はウインドウの幅に合わせた拡大率にしたい
例えばウインドウの幅が500pxのときは拡大率0.5、250pxのときは0.25というようにするには
どうやったらできますか？
0360Name_Not_Found
垢版 |
2022/06/20(月) 18:49:36.60ID:???
scale()はcalc使えるけどvwとかは入れても動かないんだっけ？
だったらjavascriptかな？
0361Name_Not_Found
垢版 |
2022/06/20(月) 21:14:03.32ID:d+bmcBX0
widthに応じてfont-sizeを無段階で変わることってできたっけ？
メディアクエリを細かくするしかない？
0362Name_Not_Found
垢版 |
2022/06/20(月) 21:40:56.50ID:???
そこはwidthじゃなくviewportに応じて、とかでしょ
とりあえず、これでも読んでみるといい

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-clamp-calculator.html
0364Name_Not_Found
垢版 |
2022/06/20(月) 22:35:06.47ID:d+bmcBX0
>>362
すごいな、こんなのあるのか
たしかにやりたいことはこれだわ

>>363
すまん、ちょっとわからん
0365Name_Not_Found
垢版 |
2022/06/21(火) 18:37:20.48ID:???
今リモートでプログラミング勉強してるんですが、WordPressから入るとゆー珍しい方針のようで、今やっとHTMLとCSSの段階になりしました。が、さっぱり理解出来なくて。
ググれば答えは出てくるのですが、応用がまったくきかない状態でお手上げです。
でも諦めたくないんです！！
何かオススメのいい勉強の方法ありませんか！？
0366Name_Not_Found
垢版 |
2022/06/21(火) 19:25:50.94ID:???
君はプログラムに興味があるんだからこんなとこに来てはいけない
0367Name_Not_Found
垢版 |
2022/06/21(火) 22:06:50.68ID:???
そういや
問題発生→ググる→解決→ばんざいオレすげー（理解はしてない）
でやってきてるな自分
これでいいと思ってたｗ
0368Name_Not_Found
垢版 |
2022/06/21(火) 22:32:07.19ID:???
とりあえずシンプルなHTMLテンプレートでも拾ってきて全体の構造をざっくりと理解するのと
セットになってるCSSを眺めて、分からないとこを端から調べるとか？
あとはVSCode入れてなければインスコして、HTMLとCSS関係の機能拡張入れておいて
ググりながらテンプレ丸写しでもいいから、ひたすら自分で書く
ついでにemmetも一緒に憶えとくとコーディングが楽だけど、それはある程度憶えてからでもおｋ
0370Name_Not_Found
垢版 |
2022/06/22(水) 01:21:05.18ID:???
WPからやるって完全にサロン餌食じゃないか
0371Name_Not_Found
垢版 |
2022/06/22(水) 01:49:19.46ID:???
昔ウェブデザイナーを名乗るやつに
ここのh3はinline-blockで付箋みたいにしたらどう？
って言ったらなんすかそれ？みたいなこと言ってたな

無料テーマでポチポチ入力するだけのセットアップすらできない奴だったな
0372Name_Not_Found
垢版 |
2022/06/22(水) 01:51:29.79ID:???
念のためだがinline-block知らんってことね
0373Name_Not_Found
垢版 |
2022/06/22(水) 02:11:29.79ID:???
その手の装飾系しか教えんサロンや講座もあるからなー
CSSやHTML解ってないのにそこだけ教えて意味ねーってやつ
0374Name_Not_Found
垢版 |
2022/06/22(水) 05:15:53.38ID:???
個人的にはwp触れる謳うんならプラグインの負荷を下げるためにfunction.phpを少し書くぐらいやって欲しいところ
0375Name_Not_Found
垢版 |
2022/06/22(水) 12:46:00.24ID:???
functions.phpは割とコピペだけでもイケるとはいえ、多少はphpの知識も必要だし
初心者向け講座だったら、まぁやらんだろうね
講師の立場で時間と金のこと考えたら、別講座にして金取ろうってなりそう
0376Name_Not_Found
垢版 |
2022/06/23(木) 02:03:52.14ID:???
下手におしえて元のphp破壊されても困るし
0377Name_Not_Found
垢版 |
2022/06/30(木) 18:25:33.02ID:???
transform:scaleで縮小したときにできる余白を詰めるにはどうすればいいですか？
0378Name_Not_Found
垢版 |
2022/06/30(木) 18:57:04.40ID:???
余白の外側も同じ様に縮小
0381Name_Not_Found
垢版 |
2022/07/01(金) 18:14:29.37ID:???
とりあえず「tranceform scale 余白」で検索してみては
概要掴めば質問の具体性も増すと思う
0382Name_Not_Found
垢版 |
2022/07/10(日) 11:12:17.34ID:qwkAp6hq
CSS設計の部分を体系的に学ぶ方法や、そういった知識や技術の資格ってなにがありますか？
0384Name_Not_Found
垢版 |
2022/07/10(日) 11:36:42.01ID:???
ベンダー資格は探せばあるけど取らないといけない資格は無いよ
学び方は実践で学ぶか模写コーディングでもしてみたら？
0385Name_Not_Found
垢版 |
2022/07/10(日) 15:58:35.72ID:qwkAp6hq
コーディングは実務経験があるので、基礎設計の方もそろそろしっかり学びたかったので
色々ググるしかないかな
0386Name_Not_Found
垢版 |
2022/07/11(月) 01:27:24.44ID:???
>>385
本ならCSS設計完全ガイドがおすすめ
CSS設計の教科書って本もあるけど
内容が古すぎるのとBEM推しなんで
だいぶ今の時代と合わなくなってきてる
0387Name_Not_Found
垢版 |
2022/07/11(月) 06:40:53.07ID:???
>>382
この分野ってまだまだ資格とかそういうものは無いね
フォトショやイラレも資格とかできればいいのにこの辺日本は後進国
0388Name_Not_Found
垢版 |
2022/07/11(月) 06:43:37.44ID:???
>>386
CSSは進歩も早く環境もめまぐるしく変わるから
今の時代じゃもはや書籍では情報が追いつかない感がある
ネットで情報漁る方が有益だね
0389Name_Not_Found
垢版 |
2022/07/11(月) 06:44:48.78ID:???
>>385
コーディング経験あって基礎設計わかんないもんなの？
どういうレベルの実務経験なのかその辺がわかんないとアドバイスしづらい
0390Name_Not_Found
垢版 |
2022/07/11(月) 13:17:43.99ID:???
スキルのあるヤツはネットだけで充分かもしれんが、初心者は
「何が分からないのかが分からない」「何が有益な最新情報なの？」
なんて人が多い
だから取っかかりとして、なるべく最近に出たレビューで評価の高い
それなりの情報量で全体像が分かる幅広くまとまった本でも読んで
後は行き当たりばったりで必要な最新情報をネットで漁った方がいい
0391Name_Not_Found
垢版 |
2022/07/11(月) 13:25:04.41ID:???
でもコーディング実務経験あるから・・・
0392Name_Not_Found
垢版 |
2022/07/11(月) 13:56:44.62ID:???
実務経験つってもピンキリだからなぁ
みんなそれぞれ分かったつもりでも、実は分かってなかったりするかもしれない
そこの確認と不足してる部分を学び直したいって事だろ？

そもそもCSS設計について体系的に1つにまとまった、ある程度の情報量がある日本語のサイトなんてある？
リファレンスとしてHTML Living StandardとかMDNとかは便利だけど、そういうのとはまたちょっと違うしなぁ
0393Name_Not_Found
垢版 |
2022/07/11(月) 14:24:10.50ID:CWsn8tpc
375です

コーティングはフリーで10年くらい
他者に引き継ぐ時、多人数で作業する場合のわかりやすい、CSSの設計、命名や書き方をあらためて棚卸しの意味も含めて学び直したいとおもってるところで

コレ！っていうのがないのでは、、というのはうっすら感じており
結局のところ、納品するファイル群に運用活用ルールテキストを明文化して持つのが、、今のところ良いのかと思ってます

フレームワークはあまりあまり使わないけど、そういうものも解決になるのかも

>>386
書籍あたってみますサンクス
0394Name_Not_Found
垢版 |
2022/07/11(月) 14:45:51.27ID:???
MDNに準拠した違反の無いコードならなんでもいいわけで
CSSの命名規則なんて結局ユーザーが作ったものに過ぎない
FLOCSSだってdart sassのuseに最適化するとなるとまた手間が変わってくるし
0395Name_Not_Found
垢版 |
2022/07/11(月) 14:47:57.32ID:???
>>393
気持ちはよくわかるが
「ルール決めて運用でカバー」かな
0396Name_Not_Found
垢版 |
2022/07/11(月) 15:28:14.99ID:???
Tailwind CSSとか言ってみる
0397Name_Not_Found
垢版 |
2022/07/12(火) 00:55:16.80ID:???
まぁだからBEMとか生まれてくるんだろうけど
それも数人で最初運営してても人が入れ替わってくうちに崩れてくるからな
会社でマニュアル作るしかないけど
全うな会社だったら既にあるだろうし
今の時点で無いってことはWEBに関して後進的な企業だろうから
手間隙かけてリファレンス作ったとしてそれがお賃金うあ評価に繋がるかといったら……
数人でコーディングしてりゃ必ずブチあたる問題だけど
問題解決してないってことはその会社ではそれがお賃金にならんから誰もやらんってことよ
0398Name_Not_Found
垢版 |
2022/07/12(火) 06:21:40.87ID:???
1人アスペルガーがいて独自路線で突き進むのはほんとやばいわ
指摘すると発狂するし
0399Name_Not_Found
垢版 |
2022/07/12(火) 09:26:58.32ID:???
案件によってレギュレーション変わったりするもんだし、、
0400Name_Not_Found
垢版 |
2022/07/12(火) 23:23:11.06ID:???
レギュレーション使うにもそれなりに知識いるからな
知識のない奴や中途半端にコードかじった程度のやつに
レギュレーション与えて作らせると後々とんでもないコードになってるとかあるし
コーディング技術ってほんとピンキリで個人の技量見極められるリーダーいないと詰む
0401Name_Not_Found
垢版 |
2022/07/13(水) 00:31:40.92ID:???
Ruby on Rails なら、

SASS のBootstrap, Bulma, Tailwind とか、BEM(MindBEMding)
0403Name_Not_Found
垢版 |
2022/07/14(木) 17:04:15.77ID:???
⚪︎×の表現ってaltとかどうしたらいいんだろう？
「まる」って書くか？
0404Name_Not_Found
垢版 |
2022/07/14(木) 17:11:49.38ID:???
画像のaltならそのまま⚪︎×
0405Name_Not_Found
垢版 |
2022/07/14(木) 17:15:55.64ID:???
htmlをコピペした時、画像のとこはaltで置き換えられるから
それに合わせて適切な文字列を入れればok
テキストが不要な装飾画像なら
alt=“”にしてもいいんだし
0406Name_Not_Found
垢版 |
2022/07/14(木) 17:40:39.94ID:PZZiitGk
HTML5 Audio Playerについて質問はここでいいんでしょうか？
それとも適当適切なスレがあるんですか？
0407Name_Not_Found
垢版 |
2022/07/14(木) 18:20:06.80ID:???
初歩的な質問かもしれませんが、教えてください。
長文で文字を起こした時に、ブラウザ幅の限界となって自然と改行されてしまう文字。つまり自らが改行を起こすHTMLタグを使用せずに生まれてしまった改行への対処法等はありますでしょうか。

例えば、
あいうえおかきくけこさしすせそ
の文章があったとして、一文字目は空白を入れ、左寄せで文字を記入していた際に、上記のような現象が合わさると
　あいうえおかきくこさ
しすせそ
のような、文字列が揃わなくなる場合はどうすれば良いでしょうか？
0409Name_Not_Found
垢版 |
2022/07/14(木) 19:03:34.31ID:???
>>404、>>405
よくあるサービスの機能比較表の中で出てくる記号だから空はまずいと思うんだけど、記号をそのまま入力しとくのがいいのかね

でも⚪︎×って文字が色々あるしどれが正確なのかとか、内容に合わせて「可能・不可能」とか「対応・非対応」とか言葉を入れてあげた方が親切かなとか思って
0410Name_Not_Found
垢版 |
2022/07/14(木) 19:34:59.37ID:???
大きなお世話な気もするけど
やってあげたいなら好きにすれば、としか
0412Name_Not_Found
垢版 |
2022/07/16(土) 10:32:31.13ID:???
一般人には目障りなだけよのう
0413406
垢版 |
2022/07/21(木) 22:59:39.83ID:BjwPTpA/
https://codepen.io/joshbader/pen/GqXbVZ
↑
このサイトのプレイヤーを形、色、ボタンの有無など多少はいじれたんですが
それ以上はちょっと知識がなくて困っています

やりたい事は、早送りボタンを次曲(NEXT)に変え
ソース(mp3)はhtmlに記述したいんです

もうひとつ
ｈ1に曲名を出せますが、そこにファイル名(mp3)を表示させたいです
今のままだと曲が変わった時にそのままになってしまいます

ご教示よろしくお願いします、他に頼れる所がないので・・
0414Name_Not_Found
垢版 |
2022/07/22(金) 15:27:29.73ID:???
>>407
ブラウザのサイズに合わせて、自動的に改行してくれる方が便利

もし改行しなかったら、
スクロールバーが表示されて、一々スクロールしないと読めなくなってしまう

こういうサイトは有り得ない
0415Name_Not_Found
垢版 |
2022/07/22(金) 16:08:54.81ID:???
>>407
1行しかない時はセンタリング、複数行になる時は左寄せ、ていうのならできるけど、、
0417Name_Not_Found
垢版 |
2022/07/22(金) 23:58:18.67ID:???
インプレスの本はハズレが多いよ
デザイン系も微妙なの多い
0418Name_Not_Found
垢版 |
2022/07/23(土) 04:32:20.22ID:???
概念系はオライリーが良かったりする？
0419Name_Not_Found
垢版 |
2022/07/23(土) 17:53:58.46ID:???
拡張機能のstylusなどを使って
画像のimg alt=""の内容を読み込んで
その画像の下に表示させる方法を教えてください
0421Name_Not_Found
垢版 |
2022/07/23(土) 18:27:16.33ID:???
stylusでは難しいのですか？
javascriptを勉強します
0422Name_Not_Found
垢版 |
2022/07/23(土) 20:15:06.29ID:???
使う機能拡張としてはTampermonkeyとかそっち系の話だね

stylusはサイトごとにCSSを上書きするだけだし
CSSだけじゃ特定の箇所を読み込むって時点で無理
0423Name_Not_Found
垢版 |
2022/07/23(土) 20:34:13.97ID:???
imgには::after疑似要素使えないもんなぁ
0425Name_Not_Found
垢版 |
2022/07/24(日) 00:57:32.94ID:???
altじゃなぁ
キャプションじゃダメなのか
0426Name_Not_Found
垢版 |
2022/07/24(日) 01:51:27.87ID:???
キャプションにするって話だと、ユーザースクリプトでHTML書き換えるしか
0428Name_Not_Found
垢版 |
2022/07/24(日) 06:04:51.63ID:???
hasでできたらよかったのにねぇ
0429Name_Not_Found
垢版 |
2022/07/24(日) 20:33:15.31ID:???
学校やめました。
理由は本気でWeb3を極めようと思ったからです。
親と先生にめちゃくちゃ止められたけど、絶対俺ならTCP/IPやHTTPを独占から解放できるって言ってなんとか説得しました。
今日から毎日72時間「いちばんやさしいWeb3の教本」を読みます。
これからよろしくお願いします。
0432Name_Not_Found
垢版 |
2022/07/25(月) 01:20:00.01ID:???
>>413
>>408でも書いたけど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/
0433Name_Not_Found
垢版 |
2022/07/25(月) 16:46:13.47ID:2g6w4J2c
wordpressに表を入れて横の画面縮小してもレイアウト崩れないようにしたくて
https://sayaka-m.com/5412/
をそのままやってみたけど、結局できない。
どういうことだろう？
0434Name_Not_Found
垢版 |
2022/07/25(月) 17:56:46.50ID:???
横スクロールさせたらええやん
もしくは項目を折り返さないようにするとか
0435Name_Not_Found
垢版 |
2022/07/25(月) 21:49:59.92ID:???
自分で書いたコードも示さずに、どういうことだろう？は
さすがにエスパーじゃないと無理
0436406
垢版 |
2022/07/25(月) 23:58:13.13ID:CH4u17o4
>>432
next機能は転がってる物で置き換えればなんとかなりそうですが
ファイル名表示は自分には無理そうです
わざわざありがとうございました、ちょっとづつ勉強していきます
0437Name_Not_Found
垢版 |
2022/07/26(火) 03:15:35.38ID:???
>>433
スクロールさせたい要素を包括する直近の要素にoverfow
折り返したくない要素にwhite-space

・競合してる
・word-breakとかword-wrapとかoverflow-wrapとか適用されてる
・width周りでへんなことしてる
・スタイル適用する要素間違ってるか書き忘れてるか記述ミス
どれか

https://i.imgur.com/QvWcYee.jpg
0438Name_Not_Found
垢版 |
2022/07/27(水) 12:36:46.14ID:???
ニュースなど記事サイトを見てると、
最初連なった文章内で、
単語とかが虫食いのようにバラバラに表示されるサイトがあります。
あれって何ですか？
0439Name_Not_Found
垢版 |
2022/07/27(水) 13:45:48.86ID:UmReAZWr
>>438
どんな状態かよくわからないけど、ウェブフォント使ってると和欧で違うフォントで、読み込めた方から表示されるようなことはあるかも、、
0440Name_Not_Found
垢版 |
2022/07/27(水) 14:27:12.19ID:???
>>438
意味わからんすぎるけどスクショで見てみたい
0441Name_Not_Found
垢版 |
2022/07/27(水) 17:14:27.13ID:yTHi1+E/
<p class="has-vivid-red-color has-text-color has-huge-font-size">
にborder-bottom: solid 1px red;　もいれたいのですが、どう記述したらよいですか？
0442Name_Not_Found
垢版 |
2022/07/27(水) 17:31:03.52ID:???
<p class="has-vivid-red-color has-text-color has-huge-font-size" style="border-bottom: solid 1px red;">
0443Name_Not_Found
垢版 |
2022/07/27(水) 19:27:26.76ID:???
>>440
スマホでなりやすいです。

たとえば
意味わからんすぎるけど で見てみたい
遅れて
意味わからんすぎるけどスクショで見てみたい

と表示されますね。
0444Name_Not_Found
垢版 |
2022/07/27(水) 19:48:26.41ID:???
ラグとかでもなく？
デザイン上でわざとそうしてるようなの？
0445Name_Not_Found
垢版 |
2022/07/27(水) 19:55:02.39ID:???
ソース上で消えてる部分が別のタグで括られてたりするの？
0446Name_Not_Found
垢版 |
2022/07/27(水) 20:14:00.00ID:UmReAZWr
その表示遅延はなにか良い効果ありそうなの？
0447Name_Not_Found
垢版 |
2022/07/27(水) 20:17:06.54ID:???
スペースでの調整が詰まってしまいました。
書き直し。
ex)
意味わからんすぎるけど　　　　で見てみたい
意味わからんすぎるけどスクショで見てみたい

スクショの文字幅は保ってます。
0448Name_Not_Found
垢版 |
2022/07/27(水) 20:19:52.38ID:???
例になるサイトでも出してくれないことには何とも言えないわな
サーバー要因なのか、おま環なのか、作成者の意図的なものなのか
0449Name_Not_Found
垢版 |
2022/07/27(水) 20:20:58.70ID:???
>>447
回答としては
webフォント読み込みが原因

fontdisplayがデフォルトのautoだとblockを優先して
chromeとfirefoxは読み込み完了か3秒経過するまでテキストが非表示になる
safariは読み込み完了まで非表示になる
0450Name_Not_Found
垢版 |
2022/07/28(木) 09:58:12.57ID:???
CSSのセレクタで指定しているブロック？セクション？の呼び方って何でしょうか

h1{}
↑このひとかたまりの呼び方です
0451Name_Not_Found
垢版 |
2022/07/28(木) 10:12:33.87ID:???
h1 {
↑セレクタ
font-size:
↑プロパティ
2em;
↑バリュー
}
0453Name_Not_Found
垢版 |
2022/07/28(木) 10:25:59.06ID:???
>>451-452
「行」で良さそうですね、ありがとうございました
0454Name_Not_Found
垢版 |
2022/07/28(木) 14:37:30.28ID:???
まぁ、セレクタだな
行はおじさん組織向け
0455Name_Not_Found
垢版 |
2022/07/28(木) 15:14:05.97ID:???
viewportを1280pxで固定しててスマホで見切れるって何が原因なの？
ヘッダー以外はwidth100%の画像…
0457Name_Not_Found
垢版 |
2022/07/28(木) 17:13:34.72ID:Fgn+aCqp
行、って初めて聞いた

セレクタ{プロパティ:値、、、}

のセットを「行」と呼ぶん？
0458Name_Not_Found
垢版 |
2022/07/28(木) 17:30:21.45ID:???
>>457
猛虎弁やめようよ
よりにもよってコーダーが特定の地域でしか通用しない糞みたいな言葉遣いするのはやめようよ
0459Name_Not_Found
垢版 |
2022/07/28(木) 17:38:24.24ID:Fgn+aCqp
はて？
0460Name_Not_Found
垢版 |
2022/07/28(木) 18:12:33.11ID:???
セレクタ＋宣言ブロック
0461Name_Not_Found
垢版 |
2022/07/28(木) 18:42:47.86ID:???
呼び名がないなら普通に何行目って言えばいいだけでしょ
0462Name_Not_Found
垢版 |
2022/07/28(木) 19:43:01.90ID:???
セレクタと宣言ブロックをあわせてルールセットでしょ
0463Name_Not_Found
垢版 |
2022/07/28(木) 19:56:36.92ID:???
質問です

サイトを作ったのですが、縦に長くなるとスクロールバーの分コンテンツが横に少し縮小されます
これを無効にするにはどうすれば良いでしょうか？
0465Name_Not_Found
垢版 |
2022/07/29(金) 03:50:52.16ID:???
>>458
なんやねんこいつ
キモすぎやろw
頭ムシ湧いてんちゃう？
0466Name_Not_Found
垢版 |
2022/07/29(金) 08:20:12.01ID:XvUMpWRA
そうよね
ルールセットだよな
用語として明示的に使わないから曖昧になってた汗
0467Name_Not_Found
垢版 |
2022/07/29(金) 08:26:02.65ID:???
会話の中でルールセトが～なんて言う場面が思いつかないが
0468Name_Not_Found
垢版 |
2022/07/29(金) 09:24:36.53ID:???
会話の中でなら○○要素のスタイルを～って言うな何より伝わりやすい
0469Name_Not_Found
垢版 |
2022/07/29(金) 10:22:23.60ID:XvUMpWRA
日本語わかる、オフショア現地ディレクタとかとチャットするときなんかは、正しい用語使いたいかも
0471Name_Not_Found
垢版 |
2022/07/29(金) 12:21:09.34ID:???
状況相手関係なく何行目に書かれているこれが(もしくはこのファイルのh1のスタイルが、とか)って伝えるのが一番わかりやすいもん
0473Name_Not_Found
垢版 |
2022/07/29(金) 16:08:15.40ID:???
ちなみにレスポンシブの対応はどう設定してるの？というかしたいの？
0474Name_Not_Found
垢版 |
2022/07/29(金) 16:34:02.52ID:XvUMpWRA
viewportとかも知りたいかも
0475Name_Not_Found
垢版 |
2022/07/29(金) 16:36:00.48ID:???
>>473
レスポンシブではスクロールバーが常時表示されませんし縮尺も変わることはないです

PCのブラウザでウィンドウの大きさを変えるなどして、スクロールバーが出る状態になるとスクロールバー分自動で縮尺が変わる感じです

分かりにくい説明ですみません
0476Name_Not_Found
垢版 |
2022/07/29(金) 16:41:07.72ID:???
レスポンシブ対応はしてないって事？
0477Name_Not_Found
垢版 |
2022/07/29(金) 16:46:50.04ID:???
viewportは
<meta name="viewport" content="width=device-width, initial-scale=1">です

PCサイトでのみスクロールバーが常時表示されのですが、レスポンシブは関係ありますかね？

最近勉強始めたので変なところがあればすみません
0478Name_Not_Found
垢版 |
2022/07/29(金) 18:28:06.53ID:???
スクロールバーって縦？横？
0480Name_Not_Found
垢版 |
2022/07/29(金) 18:31:53.51ID:???
縦の右端にでるものです
0481Name_Not_Found
垢版 |
2022/07/29(金) 23:25:01.35ID:???
ブラウザの右にスクロールバーが出るなら縦方向にページが続いているという事だよ
*{}にbox-sising:border-boxとかmargin:0とかpadding:0入れても出る？
0482Name_Not_Found
垢版 |
2022/07/30(土) 09:12:01.18ID:???
>>480
何がやりたいかよく分からないから想像でレスするけど、

●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
0483Name_Not_Found
垢版 |
2022/08/01(月) 04:54:28.04ID:???
なんか↑みたいな組み方とsass？できてないとこっから先厳しいんかな
cssでしかやってこなかったから自信なくなるわ組み方は凄い参考にはなるけど
0484Name_Not_Found
垢版 |
2022/08/01(月) 05:18:09.84ID:???
あとよかったらsassの変数使わずにcssの変数使ってる理由を聞きたい頼んます
0485Name_Not_Found
垢版 |
2022/08/01(月) 23:00:00.79ID:???
普通は、SASS でしょ。
たぶん説明の都合上、CSS 変数を使っただけじゃないの？

一部、SASSで計算できない式もあるけど
0486Name_Not_Found
垢版 |
2022/08/02(火) 00:27:00.79ID:???
>>484
出来るか出来ないかで言えば出来た方が良い
jsfiddleだとcalc関数内でSASS/SCSSの変数が効かなかったから今回はCSSの変数使ったけど普段はSCSSの変数使ってる

ただ、JSと組み合わせなきゃ計算できないケースがあって、そういう時はCSSの変数使ってる
ビルド後だと変数も参照できないしね
0487Name_Not_Found
垢版 |
2022/08/02(火) 07:05:28.42ID:LCob4Nix
文字の一部の色を変えるにはどうすればいいんですか？
例えば「語」という漢字の言の部分を黄色、五の部分を緑、口の部分を青というようにしたいです。
0488Name_Not_Found
垢版 |
2022/08/02(火) 07:15:17.70ID:LCob4Nix
それと文字の一部を表示するにどうすればいいですか？例えば「語」といい漢字が幅100pxだとして左から○pxまでを表示とかできれば映画の字幕ように徐々に文字を表示できるので
0489Name_Not_Found
垢版 |
2022/08/02(火) 15:24:49.14ID:TuiCHZK9
<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;
}

よろしくお願いします。
0491Name_Not_Found
垢版 |
2022/08/02(火) 17:22:11.28ID:???
>>489
インラインで疑似要素は使えないんじゃね？
0492Name_Not_Found
垢版 |
2022/08/02(火) 17:33:45.87ID:???
>>490
conic-gradientをこんな時に使うのか！天才だね！
0493Name_Not_Found
垢版 |
2022/08/02(火) 19:10:41.13ID:???
>>492
でも使える文字が限定されるから、あまり汎用性無いしねぇ
文字列の途中で使うなら、色分けされた文字を重ねるよりは使いやすいけども
0494Name_Not_Found
垢版 |
2022/08/02(火) 19:24:28.49ID:???
フォントによって範囲変わりそうだからwebフォントも欲しくなるけど
使い方がおもしろいね
0495Name_Not_Found
垢版 |
2022/08/02(火) 21:02:04.69ID:???
>>482
>>●PCでスクロールバーが表示されることによってコンテンツ領域が横に17px縮むのを防ぎたい？
・width: calc(100% + 17px)

これでした！細かくありがとうございました！
0496Name_Not_Found
垢版 |
2022/08/03(水) 09:28:11.19ID:F0xCRVca
>>491
ヤフオクの商品説明でインラインに入れないと駄目なんです。
同じことをインラインでやるにはどうしたらいいですか？
0497Name_Not_Found
垢版 |
2022/08/03(水) 09:48:39.33ID:9jvHSMMw
<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;
}
0498Name_Not_Found
垢版 |
2022/08/03(水) 09:59:56.75ID:???
>>496
疑似要素でなくても使えるscrollbar-colorとかscrollbar-widthってプロパティがある
但し、Firefoxでしかサポートされてない
そもそも>>489はFirefoxとiOSのSafariでは動作しないんだが、そこは気にしないの？
0499Name_Not_Found
垢版 |
2022/08/03(水) 10:31:34.66ID:???
styleタグもjavascriptも使えないんじゃ無理だな
firefox以外は諦めた方がいい
0500Name_Not_Found
垢版 |
2022/08/03(水) 10:42:54.24ID:???
ヤフオクの商品説明欄で変なことしようとしないの
0501Name_Not_Found
垢版 |
2022/08/03(水) 13:06:18.74ID:???
制限のある環境で表が崩れるのを解消したいのなら
文字数を削ったり表を複数に分けて情報量を減らす等を考えたらどうかね
0502helpme
垢版 |
2022/08/03(水) 19:41:21.50ID:bnl/H4E1
指定した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+"');}))
0503Name_Not_Found
垢版 |
2022/08/03(水) 20:01:34.85ID:???
Bootstrap5を使用している人教えて下さい。
5からボタンのフォーカス時のスタイルの扱いがかわりました。ボタンにフォーカスがある場合はフォーカス時のスタイルが維持されるようになりました。

なので、クリックするたびにJSでbtn-primary とbtn-outline-primaryを付け替えるような実装をしても即座にスタイルがかわりません。

vuejsなどでリアクティブにクラスを変更するような処理もクラスは変わっているのに優先度の高いフォーカス時のスタイルが優先されてしまいこまっています。

フォーカスがあたっていても付け替えたクラスのスタイルを即座に反映させたい場合、どのようにすればいいでしょうか？

付け替えたクラスの優先度を上げるとかフォーカス時のスタイルを無効にするとかするしかないでしょうか。


特に複数のチェックボックスをボタン形式で表示している箇所がクリックしてチェック外してもボタンのスタイルが即座に変わらず困っています。
0506helpme
垢版 |
2022/08/03(水) 20:55:24.18ID:bnl/H4E1
>>502
自分では出来ませんでした。
0507Name_Not_Found
垢版 |
2022/08/05(金) 04:32:35.57ID:???
単純な質問ですいません
"aline-items"ってなんです？
0508Name_Not_Found
垢版 |
2022/08/05(金) 06:44:19.47ID:???
align-itemsの誤字だろうなー
0510Name_Not_Found
垢版 |
2022/08/05(金) 09:54:38.45ID:1B0B0mAS
素人が「スクロールバーの機能はそのままで表示だけ消したい」を自力で構築してみたよ
間違ってるかもしれないが、こんな感じ
<head>
<style>
::-webkit-scrollbar {display:none;}
</style>
</head>
0514Name_Not_Found
垢版 |
2022/08/05(金) 14:32:53.70ID:???
IEは四十九日も過ぎたんだからもういいだろ
0515helpme
垢版 |
2022/08/05(金) 17:48:55.74ID:U6wol5UU
指定したhtmlを任意の文字に置換するブックマークレット下さい
0516Name_Not_Found
垢版 |
2022/08/05(金) 17:56:14.30ID:???
ブックマークレットはスレチだよ
0517helpme
垢版 |
2022/08/05(金) 19:29:43.73ID:U6wol5UU
>>516
どのブックマークレットのスレってどこですかね？
0518Name_Not_Found
垢版 |
2022/08/06(土) 15:55:47.41ID:OP7dI5K4
ド素人がウェブサイトの改良を担当することになってしまいました
ホームページビルダー20を使っています

ページ上方にヘッダー、下にフッター、左にサイドメニュー、右にメイン画面を表示
という構成でウェブページを作りたくて、
ヘッダーとフッターとサイドメニューは全ページで共通化したいです。

その場合、ifameを使うのと、
ホームページビルダーのリンクメニュー（サイト共通メニュー）を使うのと、
どちらが良いですか？
それぞれのメリット・デメリットを教えてください。

最初はPHPでincludeするとか、jQueryを使ってみる等考えたのですが、うまくいきませんでした…
iframeは、以前は非推奨だったようですが、HTML5になってから非推奨ではなくなったと聞いています
営業面は全く考えなくて良いです
0520Name_Not_Found
垢版 |
2022/08/06(土) 19:05:19.45ID:???
それはさすがにド素人にはハードル高いだろうなぁ
0521Name_Not_Found
垢版 |
2022/08/06(土) 19:51:57.23ID:???
必ずホームページビルダー20を使うことが前提の質問なのか？
あとド素人ということだけどiframeやjavascriptやPHPがクラインアント側の処理なのかサーバーサイド側の処理なのかもわからないレベルなのだろうか
0522Name_Not_Found
垢版 |
2022/08/06(土) 20:29:25.79ID:???
ビルダーのリンクメニューとiframeの比較っていう質問からしても
そういうは分からないんじゃない？
0523Name_Not_Found
垢版 |
2022/08/06(土) 20:43:19.27ID:???
>>521
メモ帳とかでHTMLを記述すれば編集できることは知っていますが、
完成物をホームページビルダー経由以外でサーバーへアップする方法を知らないです
それ以外にFTPソフト等は入ってないです
新しいソフトをインストールする場合には文書を作ってボスの印を押して、さらに上の組織に申請して許可を取らないといけません
文書自体を作ることは簡単ですが、実際に許可が降りるかどうかは不明
「既にホームページビルダーでアップロードできるんだからそれ使え」で却下される可能性はあります
パスワードも知りませんし、上の組織も頻繁に異動があるので最悪誰も把握してない可能性もあります

PHPがサーバー側の処理であることは知っています
iframeはたぶんクライアント側
javaはよく分かりません

ただ、PHPについてはそれ以外に知ってることはほとんど無いです
iframeで組んだことはあります
0524Name_Not_Found
垢版 |
2022/08/06(土) 20:46:42.05ID:IxMekEqP
ポームページビルダー使ってるだと？
ハゲとるんか？
そんな老人が使う古いツールは今は誰も使っていない。
0525Name_Not_Found
垢版 |
2022/08/06(土) 20:59:39.24ID:???
>>523
ビルダーについて否定的なレス多いけどまさにそうで、
独自の組み方するからメンテナンス性が最悪で長期的な事考えたらリスクしかない
ソフトに頼り切りってのもリスク

まあこの内容をオブラートに包んで稟議行きやね
FTP使うならwinscpならSFTPにもSCPにも対応してるからこのソフトを挙げればいい

何が言いたいかっていうとビルダー文化マジでやめてくれ
0526Name_Not_Found
垢版 |
2022/08/06(土) 21:02:18.42ID:???
>>524
上の組織が選定したソフトがコレなんで、他のソフトは基本使えないと思います
私は選定に携われる立場にはありません
上に意見を伝えることは可能ですが、採用される可能性は低いです
ウチ以外の組織だと本当に老人が保守してるところもあるので
前に所属してた組織では、60歳のおじいちゃんがウェブサイトを保守してました

とはいえ意見を言うだけならタダなので、
ホームページビルダーではなくウェブサイト制作にオススメのツールがあれば教えていただけると今後の参考になります
0527Name_Not_Found
垢版 |
2022/08/06(土) 21:08:13.06ID:???
と思ったら、早速>>526がオススメのツールを挙げてくれていましたね
ありがとうございます
フリーソフトっぽいので、予算を消費することも無さそうです
後は上の許可が取れるかどうかと、パスワードを教えてもらえるかどうかですが…

…ちなみにWinSCPはド素人でも扱えますか？
ウェブサイトの保守点検は私ではなく、私よりもPC使えない人が担当するんですが
iframeとかjavascriptとかPHPとかincludeとかSCPとかFTPとか、そういう単語を何も知らない人が担当します
0528helpme
垢版 |
2022/08/06(土) 21:12:34.94ID:CZE6yndP
>>516
ブックマークレットスレってどこですか？
0529Name_Not_Found
垢版 |
2022/08/06(土) 21:25:45.66ID:???
>>528
近いのはjsスレ。でも多分相手にされない
理由は自分の代わりに組んでくれって内容だから
>>519みたいな殊勝な人なら答えてくれるかもね
てか画像おじphpも書けんのかw
0530Name_Not_Found
垢版 |
2022/08/06(土) 21:46:45.41ID:???
>>527
ワークフローとか作らないと厳しい感じはするけど作ったそれも併せて提案すればいいんでね
0531Name_Not_Found
垢版 |
2022/08/06(土) 21:59:10.94ID:???
知識のない人たちが今後もホームページビルダーで管理していくという前提で
iframeとホームページビルダーのリンクメニュー（サイト共通メニュー）のどちらがいいかというならiframeがいい気がする

ホームページビルダーのリンクメニュー（サイト共通メニュー）の機能はjavascriptも一緒に生成してそうで、
仮にメモ帳などでのファイルの直接編集をする必要がある場合などは知識のない人には編集は厳しそう

iframeの方は基本htmlだけで完結すると思うので、javascriptの知識ない人でもファイルの直接編集に対応できそう

ただし、どちらの方法を採用するかは今後のサイトの運用（保守）も含めて考えた方がいい

iframeとホームページビルダーのリンクメニュー（サイト共通メニュー）の2つの方法で実際に作ってみて、
作られた物に対して何か変更を入れるときに、知識のない人たちにとってどちらの方法で作った方が対応しやすいのかを考慮する

そのうえでiframeとホームページビルダーのリンクメニュー（サイト共通メニュー）のどちらを採用するか決めてもいいと思う
0532Name_Not_Found
垢版 |
2022/08/06(土) 22:06:11.53ID:???
勘違いしてるかもしれないので一応
winscpやSFTPはウェブサイトを作るツールじゃなくてサーバーにアップロードするためのツールだからね
0533Name_Not_Found
垢版 |
2022/08/06(土) 22:06:51.71ID:???
そういう状況だと自分ならVSCodeでファイル作って
アップロードだけビルダーでやらせるけど、そもそもの話に戻ると
素人が保守管理すること考えたら>>531だよなぁ
0534Name_Not_Found
垢版 |
2022/08/06(土) 22:16:45.59ID:OP7dI5K4
>>531
ありがとう、両方作ってみます

>>532
勘違いしてました
SFTPがアップロード等の通信用語であることは知ってましたが、
WinSCPもそのためのツールだとは知らなかったです（まぁ、今日初めて知ったツールなので当然ですが）
ちなみにホームページビルダー以外で、HTMLを編集するのに良いツールって何かあるのでしょうか？
有料無料問いません。もしあるなら今後のためにも知っておきたいです
0535Name_Not_Found
垢版 |
2022/08/06(土) 22:30:26.84ID:OP7dI5K4
あと、今後知識のない素人がウェブサイトを更新していくと仮定した場合、
PHPが使われたページで更新していくのは厳しい、という結論で良いでしょうか？
0536Name_Not_Found
垢版 |
2022/08/06(土) 22:38:05.08ID:???
>>534
いろいろありすぎるけど、、、
メモ帳のようなものだと
　TeraPad
　Notepad++
　サクラエディタ
　EmEditor
のようなテキストエディタとか

もっと高機能だと
Visual Studio Codeとか
ホームページビルダーと同じようなツールのAdobeのDreamweaverとか
0537Name_Not_Found
垢版 |
2022/08/06(土) 22:50:52.32ID:???
>>535
PHPの知識がない素人がPHPを使ったページを更新していくのは無理だと思う
0538Name_Not_Found
垢版 |
2022/08/06(土) 22:57:59.34ID:???
>>532
間違ったwinscpはツールだけどSFTPは通信用語ね
0539Name_Not_Found
垢版 |
2022/08/06(土) 23:27:26.45ID:OP7dI5K4
>>536
ありがとうございます。各ツールのことを調べてみます

>>537
やはりそうですか。
PHPについては個人的に勉強するとして、今回は>>531の方法でいくことにします
0540Name_Not_Found
垢版 |
2022/08/07(日) 03:05:38.60ID:???
>>529
趣味の範囲。本業はデザインとフロントだからサーバサイドはあんまり分からん
小規模のシステムとかは個人で受注してやってる

まあなんだ。散々言われてるホームページビルダーは俺もやめてほしい
iframeで共通化するくらいなら最初からベタ書きでいい
その方が保守性がいい
0541Name_Not_Found
垢版 |
2022/08/07(日) 03:37:44.25ID:???
>>540
ヘッダーとフッターは一度書いたら弄らないのでベタ書きでも良いと思いますが、
サイドメニューがベタ書きなのはさすがにマズくないですか？
もしメニュー内容を変更したい場合、全ページのサイドメニューを書き換えなきゃなりませんし
実際に更新忘れが頻発しており、挙句の果てにはページによってサイドメニューの内容が異なる始末です
そもそも私にウェブサイト改良の話が来たのも、ド素人保守担当とボスから
「サイドメニューを変更する時に全ページ更新しなきゃいけないのがミスの温床だから何とかしてくれ」と言われたからですし
（一応、「私もほぼゼロからの勉強ですし、本来の業務と並行になるので数ヶ月はかかりますよ」とは言ってあります）

もちろん、>>537と見解が違って
「PHPの知識がない素人でもPHPを使ったページは問題なく更新していけるよ」
という話であれば、是非ともPHPを勉強して組んでいきたいところではありますが
ホームページビルダーよりもその方が良さそうなのは私レベルでも理解はできます
0542Name_Not_Found
垢版 |
2022/08/07(日) 04:26:49.77ID:???
>>541
経緯はまあ色々あるんだろう
まあ簡潔に書くわ

各パーツを共通化したい
・画像の通りにincludeしてください（最適解
・それができない場合 -> iframe使わずベタ書きにしてください
・ベタ書きが出来ない -> もう保守ぶっ飛ばしてiframe使ってくださいURL参考にしてね

稟議云々は上で書かれてたから一々書かんけどそれも無理ならビルダー使えばいい
んでサイドメニューが頻繁に変わること事態まずいよね。デザイン設計からおかしいよね
もう好きにして
0543Name_Not_Found
垢版 |
2022/08/07(日) 14:18:47.58ID:???
https://www.ufret.jp/
このサイトの楽譜ページ右クリックやドラッグできないんだけどできるようにするにはどうしたらいいですか？
0544Name_Not_Found
垢版 |
2022/08/07(日) 15:10:38.61ID:IX1hHBsU
>>542
サイドメニューの更新がミスの温床になる、そういう設計がおかしいからこれから改良しようという話であって、
当たり前ですが改良後は更新が頻繁にならないように設計します
しかしどんなに上手く設計しても更新ゼロにすることは無理です
頻繁でなくとも数年に1回はサイドメニューの更新が必要になる可能性はあります
仮に3年後にサイドメニューを更新する場合、私は異動で今の組織を離れています
ですので、私がいなくなっても、何の知識もないド素人でも更新できる形でなければなりません

PHPを使うのが最適解であるなら、可能な限りその最適解を取りたいですが、
問題は「全く知識のないド素人が、PHPが使用されているウェブサイトを更新していくことが可能かどうか」です
>>537は無理だとおっしゃっていますけど、実際のところどうなんですか？

もし>>537の言うとおりであれば、ベタ書きに気持ちが傾いています

前の組織では素人なりにiframeでサイトを構成していたんですけど、私が異動した後にサイドメニューの更新があって、
新たに追加されたメニューをクリックすると、メイン画面ではなくサイドメニューにコンテンツが表示されるというミスをやってましたし
どのみちiframeを使った場合のサイドメニュー更新も、作業回数は少なくなりますがリスクはありますからね

「サイドメニューの更新はほとんど必要なくなるように作ったけど、
もしサイドメニューの更新が必要な時は面倒だけど全ページ書き換えてね」
と伝えておけば…まぁ忘れられても、さすがにド素人でも全ページの更新が必要なことはそのうち気付くとは思うので。
その辺、マニュアルも作っておくことにします。たまに更新という程度なら大丈夫だと信じることにします。

他の方のご意見としても、「ベタ書きも選択肢に加えるなら、iframeで構成するよりはベタ書きの方が良い」
という結論で良いでしょうか？
0545Name_Not_Found
垢版 |
2022/08/07(日) 15:11:53.21ID:???
>>543
とりあえずuBlock Origin等の広告ブロッカーを入れてみる
0546Name_Not_Found
垢版 |
2022/08/07(日) 15:22:35.42ID:???
>>544
全くの素人ができるように外注するのは無理なん？
作業時間を考えると素人が作るほうが時間がかかるし人件費は高くつくよ
0548Name_Not_Found
垢版 |
2022/08/07(日) 15:59:55.67ID:???
個人的には全ページベタ書きで抜け漏れ発生させるよりは
iframeで更新させた方が間違いは少ないと思うなぁ

php？環境作らなきゃローカルで即プレビューできない時点で
素人にやらせるとか無理だね
マニュアル作るにしろ手順や解説が複雑化すれば間違いが多くなる
条件考えれば最適解でも何でも無い
0549Name_Not_Found
垢版 |
2022/08/07(日) 16:02:03.91ID:???
>>547
うちの環境だと広告ブロッカーで右クリックもドラッグも可能だが
設定とかフィルターとかいじってみたら？
0550Name_Not_Found
垢版 |
2022/08/07(日) 16:05:22.12ID:???
おまえらいつまで「インターネット老人会社」のコンサルやっとんねん、もうええやろw
0552Name_Not_Found
垢版 |
2022/08/07(日) 17:13:59.55ID:???
1日数レスしかつかないスレで10超えるなんて珍しいこともあるもんだ
ほぼスレチだけどw
0553Name_Not_Found
垢版 |
2022/08/07(日) 18:07:40.19ID:???
>>546
外注はまず承認が下りないと思います
少なくとも県内の同種の組織で外注しているというのは聞いたことないです。あっても少数派かと
人件費については気にしなくていいです、残業代が一切出ないことが公的に認められている職場なので
コレ書くだけで何の職場か、分かる人もいるかも知れませんが

今後ド素人に引き継ぐ際、PHPでは無理という意見が多数派ですね
iframeを使うかベタ書きにするかは人によって見解が異なるようなので、
ウェブサイトの保守・更新の担当者に、
iframeで作ったものとベタ書きで作ったもの、
どちらが更新をやりやすいか、ド素人目線の意見を伺うことにしようと思います
0554Name_Not_Found
垢版 |
2022/08/07(日) 19:30:13.72ID:???
>>551
そのページで右クリックできてるよ
chromeでもfirefoxでも
0555Name_Not_Found
垢版 |
2022/08/07(日) 19:36:09.09ID:???
>>551
ちなみにだけど、右クリック出来ない云々はjavascriptとかでやってると思うので
完全にスレ違いな
0556Name_Not_Found
垢版 |
2022/08/07(日) 20:48:40.07ID:???
>>554
まじか、Uブロックの雪フィルターでは無理やねんな
0557helpme
垢版 |
2022/08/07(日) 22:08:03.93ID:Mn+zLDrz
>>529
自己解決しました！回答ありがとうございます。
0558Name_Not_Found
垢版 |
2022/08/08(月) 02:26:05.61ID:???
流れ豚切りですまんが、とりあえずHTML6いつ出るの？
0560Name_Not_Found
垢版 |
2022/08/09(火) 23:44:12.11ID:???
ウェブ系は、無料のVSCode を使え。
Microsoft 製だから、絶対に承認できるはず

プロなら、Ruby on Rails などで、部分テンプレート・Partial を使うけど、
本格的なサーバープログラミングだから無理でしょう

初心者は、YouTube で有名な雑食系エンジニア・KENTA のRailsサロンなどに入って、
半年でポートフォリオを作って転職していく
0561Name_Not_Found
垢版 |
2022/08/09(火) 23:47:27.16ID:???
あ、そういう話じゃないんで初心者騙す嘘話とか結構です
0562Name_Not_Found
垢版 |
2022/08/10(水) 02:52:56.04ID:???
カルト宗教が勧誘で騙くらかす口調だなｗ
0563Name_Not_Found
垢版 |
2022/08/10(水) 03:06:22.07ID:???
「絶対に承認できる」という謎ワード
0564Name_Not_Found
垢版 |
2022/08/10(水) 04:16:27.33ID:???
WEB制作板はKENTAで透明あぼーんしとけば間違いない
0565Name_Not_Found
垢版 |
2022/08/10(水) 09:55:46.39ID:CkzM/nXu
よろしくお願いします。

chromeで5chを見るとき、ページのズームを拡張機能の「stylus」で指定すると、スレッドのアンカー？レス番へのポップアップが表示されません。
ブラウザのズーム倍率を変えるとポップアップは表示されるのですが、ページごとに設定するのは大変なので、stylusで一括設定したいのですが、どうすればいいでしょうか？

今は
html{
zoom: 1.25 !important;
}
と記述して、ページのズームだけはできています
0566Name_Not_Found
垢版 |
2022/08/10(水) 13:22:00.61ID:???
Stylusでのズームだと座標の計算がずれるみたい
設定＞デザイン＞ページのズーム で常に拡大しておけば
拡大したくないページも大きいままになるけど
0567Name_Not_Found
垢版 |
2022/08/10(水) 15:04:00.71ID:???
chromeはドメインごとに個別にズーム設定できるけど、それじゃアカンの？
0568565
垢版 |
2022/08/10(水) 17:45:13.36ID:CkzM/nXu
レスありがとうございます
chromeのサイトごとの設定で「5ch.net」を設定しても、核板（例えばここmevius.5ch.net）の設定には反映されないので面倒です
スタイルシートで一括でできないかと思ったけどだめでしょうか
0569Name_Not_Found
垢版 |
2022/08/10(水) 18:32:35.59ID:???
chromeではズームさせたいページでズームしたら、次にそのページ開いてもズームされた状態で開かれるし
設定上も5ch.netじゃなくてmevius.5ch.netで設定が残るけど、そういうことじゃないの？
0570Name_Not_Found
垢版 |
2022/08/10(水) 18:35:51.20ID:???
ブラウザのドメイン事のsettingやな
stylusで一括指定できる
0571565
垢版 |
2022/08/10(水) 19:34:41.94ID:???
レスありがとうございます。

>>569
それは理解していますが、
いろんな板に行くたびにわざわざズームしなくてすむようにドメインで一括で指定したいんです。

>>570
>>565に書きましたが、stylusで設定するとレス番へのポップアップが表示されないので、される方法ないかと思いまして。。
0572Name_Not_Found
垢版 |
2022/08/10(水) 20:30:31.71ID:???
>>571
ポップアップがbody基準で座標指定されてるっぽいので
body以下の拡大したいdivにzoom指定すればイケるんじゃない？
たとえば

.thread {
zoom: 1.25 !important;
}

とか
上手く行かないとこは、各要素で個別にfont-sizeいじるとかで
対応すれば他の板・スレでも大体イケる
0573571
垢版 |
2022/08/10(水) 21:48:13.06ID:???
>>572
ご教示のコードでうまく表示されました、ありがとうございます。
書き込む前に少し要素で試してたんですが、どれも違ったようです。
cssよくわかってないので助かりました！
0574Name_Not_Found
垢版 |
2022/08/10(水) 23:03:13.27ID:???
5ch は古くてバグだらけで、めちゃめちゃ。
今時どこでもUTF-8 で、shift-jis を使っているサイトなど無いだろ

ページを拡大表示したら、×印を押せなくなるとかw
どうやったら、こういうページを作れるのか、逆に聞きたい

リンクもめちゃめちゃ。
正しいリンクにならない

&; みたいな文字実体参照が入ったり
0575574
垢版 |
2022/08/10(水) 23:07:40.52ID:???
5ch で、ページを拡大表示したら、
右側の広告の下へ、文字が潜り込んで読めないとか

どうやったら、こんなクソなサイトを作れるのか、聞きたいw
0576Name_Not_Found
垢版 |
2022/08/10(水) 23:41:11.46ID:???
5chで広告なんて見たこと無いけど、言ってる内容からするとz-indexかかっているんだろうね
拡大したらレイヤーの下に潜ってしまうのはしゃーない
0577Name_Not_Found
垢版 |
2022/08/10(水) 23:59:06.21ID:???
そんなに5ｃｈ見るなら専ブラ使えで終わっちゃう話だし
誰もそんなに困ってないから直す気なんか無いよな
0578Name_Not_Found
垢版 |
2022/08/11(木) 00:43:58.72ID:???
専ブラ知らないんだろうな・・・
0579Name_Not_Found
垢版 |
2022/08/11(木) 08:19:07.37ID:???
cssの疑似要素でwhite-space:pre-wrap;を設定し、content内で改行したいんですが
content: "ABC\ADEF";
のDEFを次の行に改行したい場合、"\AD"を回避する方法をご教授ください
0580Name_Not_Found
垢版 |
2022/08/11(木) 12:49:48.39ID:???
手っ取り早いのは\Aの後ろに半角スペース入れる
0583Name_Not_Found
垢版 |
2022/08/11(木) 17:16:47.91ID:???
>>580 581 582
どの方法でも対応できました
ありがとうごさいます。
0584Name_Not_Found
垢版 |
2022/08/13(土) 10:23:06.11ID:PHisC1YJ
<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のサイズを広げる以外で良い方法があれば教えてください。
0585584
垢版 |
2022/08/13(土) 10:41:20.03ID:???
すみません、撤回します。
wrapクラスにoverflow: hidden;を指定したのが影響していました
0586Name_Not_Found
垢版 |
2022/08/17(水) 08:21:58.44ID:???
transform:scaleを使って自動的にウインドウの幅に合わせて拡大縮小させる方法はありますか？
0587Name_Not_Found
垢版 |
2022/08/17(水) 11:49:47.22ID:???
transform:scaleを是が非でも使いたいわけでもなければ
何をしたいかを明確にしたほうが正解に近づくよ
0588Name_Not_Found
垢版 |
2022/08/17(水) 13:28:57.60ID:???
js使えばできるけどtransform使う意味は全くない
0589Name_Not_Found
垢版 |
2022/08/18(木) 17:50:42.71ID:???
サイト上に埋め込み動画を表示して、サイトの背景色と動画の背景色とを合わせたいのですが、ブラウザのアドオンを使ってスポイト抽出した場合とスクショをとってフォトショで抽出した場合とで色が異なり、どちらを背景にしてもうまく馴染みません
また他の人に試してもらったら微妙に違うカラーコードになったようです(ディスプレイの違いによるものですかね？)

ベタ塗り背景なので抽出した位置が悪いとかでもないと思うんですが、動画とCSSで綺麗に合わせるのは難しいでしょうか？
0590Name_Not_Found
垢版 |
2022/08/18(木) 18:07:24.89ID:???
>>589
別に難しくない
その場合だとアドオンのほうが信頼性は高い
スクショで色が変わるのがpngじゃなく変なjpgになってるとか何かおかしい
0591Name_Not_Found
垢版 |
2022/08/18(木) 18:12:36.56ID:???
動画ファイルをローカルアプリで開いてスクショ→スポイト抽出した色をCSSで背景に設定としたところ、やはりブラウザで見ると微妙に境目ができました
ただ、その部分をスクショしてスポイト抽出してみると、CSS部分も動画部分も同じカラーコードなんです
これはディスプレイの発色によるものでどうしようもないような気がしてきました
0592Name_Not_Found
垢版 |
2022/08/18(木) 18:37:04.75ID:Xl13zcwC
動画をhtmlに埋め込んで、それをキャプチャとったらどう？
Youtubeで適当な動画でそれで試してうまく行ったよ
ただ、試した動画のサムネールが動画の色とずれてるから再生させないと色がずれてた
0593Name_Not_Found
垢版 |
2022/08/18(木) 18:37:22.16ID:???
動画の端に1pxのゴミ入ったりしてない？

今回の件とは違いそうだけど以前作成してもらった動画に問題があって
書き出しし直してもらった事が過去にあったよ
圧縮前の劣化してない動画の色をスポイトしてみるとか
0594Name_Not_Found
垢版 |
2022/08/18(木) 18:39:49.88ID:???
スポイトで同じならカラーコーディネートの問題だから気にしなくていい
0595Name_Not_Found
垢版 |
2022/08/18(木) 18:41:24.96ID:???
>>591
動画再生支援部分のモニタ出力時に補正かかってるのかもしれんね

動画の色は環境の違いによって補正かかったり動画に埋め込まれてる色空間やフルレンジ/リミテッドレンジの情報無視する場合があるのでまぁほどほどに
0596Name_Not_Found
垢版 |
2022/08/18(木) 18:47:05.66ID:???
>>592
それをやったのが589の最初のとこですね
表示されたものを1.ブラウザのアドオンで抽出する、2.スクショしてフォトショで抽出する　の2パターンで色を取って背景に設定してみましたが、どっちも境目が見えました
動画ファイルを見せられればいいのですが、仕事で扱うものなのでそういうわけにもいかず。。

>>593
出力時の問題もあったりするんですね
こういう問題があるなら背景で馴染ませるようなデザインはなるべく避けた方が良さそうですね
0597Name_Not_Found
垢版 |
2022/08/18(木) 18:50:17.64ID:???
>>595
専門的すぎてなかなか理解が追いつきませんが、CSSでどうにかできる範疇を超えているということはわかりました😭
ありがとうございます
0598Name_Not_Found
垢版 |
2022/08/20(土) 11:37:17.71ID:???
すみません、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を得られるでしょうか？
0600Name_Not_Found
垢版 |
2022/08/20(土) 13:44:15.37ID:???
> なぜか「AFN GO undefined」というページになっちゃう (AFN Tokyo が呼び出せない)

chrome、firefox、edgeで試したが、そうはならない
おま環だろうが、いずれにしろスレ違い
0601Name_Not_Found
垢版 |
2022/08/20(土) 15:35:16.92ID:???
>>598
オレ環もブックマークしたら同じ？？？
afngo以外で聞いているので問題なしだけれど
0602Name_Not_Found
垢版 |
2022/08/20(土) 16:40:46.72ID:???
>>598
ほんとだ、うちでもその不思議な現象が再現する！(うちも「おま環」なのか？ｗ)
原因わからんしスレチでもあるんだろうけど、どこで訊けばいいのかもわからん
すまんこ
0603Name_Not_Found
垢版 |
2022/08/20(土) 17:26:53.44ID:???
スクリプトでページ遷移したように見せかけてるけど直に開かれた時の事は考えてない作りなんじゃね？
0604Name_Not_Found
垢版 |
2022/08/20(土) 17:54:57.22ID:???
reactで作られてるってのがヒントだな
でもまぁ、無理なんじゃないかね
とりあえずピン留めして開きっぱなしにすればブラウザ再起動してもイケる
0605Name_Not_Found
垢版 |
2022/08/20(土) 18:15:18.70ID:???
Operaだと普通に https://afngo.net/radio/Tokyo プレイヤーページが開かれるな
reactで生成しててもそのURLが変わる事はなはずなのでそのページが開かれないとおかしい
ブックマークのURL確認してみ
0606Name_Not_Found
垢版 |
2022/08/20(土) 18:20:13.21ID:???
firefox developer edition 104.0b10でも問題なし
0609Name_Not_Found
垢版 |
2022/08/21(日) 00:35:38.29ID:???
スレチなのもそうだけどスレで聞くよりまず先に
公式サイトには聞いたのだろうか？
0610Name_Not_Found
垢版 |
2022/08/21(日) 05:48:16.24ID:???
>>598
3 で、Cookie を見たら、2つ保存されていたので、
その値でアクセスOK と判別されているのかも

5 からアクセスすると、Cookie の値がサーバーに登録されていないので、拒否されるとか？

例えば、Ruby on Rails で作っているようなプロなら、
あらゆるページで、URL を保存される事を考えて、
アクセスOK ならリダイレクトする

逆に、認証トークンなどで認証している場合は、アクセスできないようにする

こういう設定を、routing と言う。
つまり、プログラマーが悪い。バグ
0611610
垢版 |
2022/08/21(日) 06:10:47.85ID:???
Edge なら、F12 開発者ツールで、
アプリケーションタブ > ストレージ > Cookie

>>610
修正

3 で、Cookie を見たら、2つ保存されていた。
次に、5 で、Cookieを見たら、同じ値が2つあった

つまり、Cookieで判別していない。
このアプリは、前ページがどこから来たかで、判断しているのだろう

どの道、プログラミングのバグ
0612610
垢版 |
2022/08/21(日) 06:15:41.89ID:???
Ruby, Selenium WebDriver などでは、ブラウザの自動操作ができる

ページA へ移動して、そこで特定のボタンを押して、ページB へ移動するとか

iMacros で出来るかも知れないけど、漏れは知らない
0613Name_Not_Found
垢版 |
2022/08/21(日) 12:54:09.91ID:???
>>609
じゃあお前が公式サイトに聞いて答えをみんなに教えてくれよｗ
0614Name_Not_Found
垢版 |
2022/08/21(日) 12:56:08.17ID:???
>>610
要するにサイト側のバグということで桶？
おま環とか言ってた奴も勘違いということで桶？
0615Name_Not_Found
垢版 |
2022/08/21(日) 14:25:40.11ID:???
例の人に絡んだり、糞しょーもない煽りレスとか
このスレの初心者かな？
0616610
垢版 |
2022/08/21(日) 17:53:31.72ID:???
サイト側のバグ。プログラマーが悪い

例えば、Ruby on Rails の本には書いてある

ユーザーがサイト内のすべてのページを、お気に入りに保存して、
そこからアクセスする場合も、逐一考えなければならない

もし認証が必要なら、ログインページへリダイレクトするとか、
そういう処理・routing も考えなければならない
0617Name_Not_Found
垢版 |
2022/08/21(日) 18:14:47.19ID:???
このruby信者の文章気持ち悪すぎる
0618598
垢版 |
2022/08/21(日) 19:04:43.79ID:???
皆さん、どうも有り難うございました！

自分でも何となく「サイト自体の方が怪しい」とは感じており期待薄ではあったのですが
ひょっとして呼び出し元URLに何らかの引数？など与えたら希望する「AFNTokyo」が
一発呼び出しできるんじゃないか？などと思いお尋ねした次第です。

残念ながら「サイト側のバグ」であることは明白で、しかも私の質問もスレチのようですから
今回の質問はここで一旦おしまいとさせていただきます。今後は公式サイトにバグ修正を
依頼するメールを送ってみるつもりです。

スレチにも関わらず、結局沢山の方々に色々とお手間を取らせてしまいました。
どうもすみませんでした、そして本当に有り難うございました。
0619Name_Not_Found
垢版 |
2022/08/21(日) 19:11:01.86ID:???
バグではなく意図的である可能性も無きにしも非ず
基本的にコンテンツ直リンって、嫌われるイメージある
0620Name_Not_Found
垢版 |
2022/08/21(日) 19:22:13.99ID:???
みなさんコーディングってどれくらいの速さでやるんですか？
独習100時間目くらいなんですが今日このサイトのコーディングに8時間かかってしまった(o´Д`)
https://webdesigner-go.com/engbody/
0622598
垢版 |
2022/08/21(日) 19:43:10.82ID:???
>>620
食事指導に「なし」と「無し」が混在してる
0623Name_Not_Found
垢版 |
2022/08/21(日) 21:03:31.71ID:???
上出来ですか、良かった
鬼集中してやったので終わったらフラフラでした
コーダーを職業にしたらエコノミー症候群になりそう笑
0624Name_Not_Found
垢版 |
2022/08/21(日) 22:43:22.99ID:???
>>618
AFN聞いている一人として
おれ環ではAFN360の時もプレイヤーページをいきなりお気に入れてもダメだった
AFN Goもそれに合わせた「仕様です」ということかもしれない
お気に入りに入れられる勝手サイトで聞いた方が手っ取り早い
0626Name_Not_Found
垢版 |
2022/08/22(月) 21:23:16.72ID:???
画像をドラッグすると禁止アイコンとやや縮小された画像が表示されるけど
これらを表示しないようにするにはどうすればいいんですか？
0627Name_Not_Found
垢版 |
2022/08/22(月) 21:40:13.94ID:???
ulとliで画像を横並びにして画像間の間隔を30pxにしたものをウインドウの幅に合わせて
拡大縮小させる方法は？
zoomが一番いいんでしょうか？
0628Name_Not_Found
垢版 |
2022/08/22(月) 21:49:47.91ID:???
このあいだのzoomマンか？
0629Name_Not_Found
垢版 |
2022/08/22(月) 22:33:01.74ID:???
ファイヤーフォックスだけ使えないけどzoomが一番いい
transform:scaleだと縮小すると画面いっぱいにならない
無駄な余白もできちゃうから
0630Name_Not_Found
垢版 |
2022/08/22(月) 22:51:18.26ID:???
zoomってそんな使い勝手よいか？
0632Name_Not_Found
垢版 |
2022/08/23(火) 06:00:42.63ID:???
zoomはtransform:scaleより全然使いかっていいよ
0634Name_Not_Found
垢版 |
2022/08/23(火) 06:34:26.84ID:???
非標準のゴミプロパティ推してるやつなんなんだ
0636Name_Not_Found
垢版 |
2022/08/23(火) 20:50:45.81ID:???
tailwindマジうんち
web標準の一部機能に未対応とか独自のビルドシステムや文法とか時代に逆行してるだろ
0637Name_Not_Found
垢版 |
2022/08/23(火) 21:36:49.52ID:???
しかもtailwindでよろ！っていうクライアントが出現し始めてる
bootstrapよりうざい
0638Name_Not_Found
垢版 |
2022/08/24(水) 01:04:37.21ID:???
俺もtailwind反対派だけどtwitterの人に@applyは互換性もなく思想に反してるんじゃないのみたいにしつこく聞いてたらブロックされたわ
0639Name_Not_Found
垢版 |
2022/08/24(水) 08:15:11.62ID:DzgI8cgc
>>635
画像だけでなく、画像間の幅やテキストなどもウインドウ幅におさまるように縮小したいから
画像だけ小さくなっても画像間が30pxのまんまだとバランスとれないし
0640Name_Not_Found
垢版 |
2022/08/24(水) 08:39:35.74ID:???
条件後出し、マジ嫌われるから止めような
0641Name_Not_Found
垢版 |
2022/08/24(水) 08:49:01.70ID:???
レスポンシブ化にzoomを使おうなんて発想が有り得ない
0642Name_Not_Found
垢版 |
2022/08/24(水) 08:51:14.78ID:???
そもそも非推奨プロパティだから使うな
0645Name_Not_Found
垢版 |
2022/08/24(水) 10:33:02.79ID:???
このスレの奴らって実力は全然ねえのなｗ
ケチつけられる粗を探して見下すだけ
0647Name_Not_Found
垢版 |
2022/08/24(水) 11:25:12.00ID:DzgI8cgc
>>643
vwだと希望する幅にならないから
つまりpxできっちり指定したものを縮小させたいんだよ
0648Name_Not_Found
垢版 |
2022/08/24(水) 12:17:07.08ID:???
>>647
vwもpx数を元に設定できるよ
もしかして目分量で設定してる？
0649Name_Not_Found
垢版 |
2022/08/24(水) 12:28:55.53ID:???
px to vwとかでぐぐれ
計算機もあるしmixin関数もゴロゴロ見つかる
0650Name_Not_Found
垢版 |
2022/08/24(水) 12:53:01.13ID:???
いや、ここは>>645先生に任せてみよう
先生！お願いします！
0651645
垢版 |
2022/08/24(水) 12:57:24.44ID:???
>>650
いや、俺もこのスレの一員だから実力は全然ねえよｗ
ケチつけられる粗を探して見下しただけ
0652Name_Not_Found
垢版 |
2022/08/24(水) 13:10:42.61ID:???
>>644
横だがありがとう

clamp関数便利だね
知らずにメディアクエリで個別設定して制御してたわ
0654Name_Not_Found
垢版 |
2022/08/24(水) 13:37:58.38ID:???
>>651
だったら煽るだけのヘタレ先生は黙って見下しオナニーでもしてて
0655Name_Not_Found
垢版 |
2022/08/24(水) 13:41:47.39ID:???
>>653
情報ありがとう
でも外部ツールで固定値算出すると修正する時にぱっと見で数値が分かりづらいのと
数値を修正する時が面倒だからSCSSで計算式を残すようにしてるわ

他の人は固定値算出してるのかな？
0656Name_Not_Found
垢版 |
2022/08/24(水) 14:00:29.57ID:???
>>655
紹介しといて何だけど、基本的に自分も計算式は残すｗ
が、手っ取り早く使いたい様な場合と使い分けだね
0657Name_Not_Found
垢版 |
2022/08/24(水) 14:19:40.84ID:???
>>656
補足もありがとう
認識ズレてなくてよかった
0660Name_Not_Found
垢版 |
2022/08/24(水) 19:39:26.50ID:???
functionとmixin作っておけば計算式はそこにある
コードはfunc.pxToVw(50)とかになるから50pxをvwにしたいのだとすぐわかる
何の問題もない
0661Name_Not_Found
垢版 |
2022/08/25(木) 22:14:27.62ID:???
>>629
transform:scaleで出来る。ただしscaleに与える値を動的に求めるのはcssのcalcじゃ無理
そこでJavaScriptでscaleの値をセットすればzoomもどきができる
当然、Windowsのサイズに動的に追従できてFirefoxでも問題なく動作している
この方法の良いところはtransformのブロックの中の要素を気にせずにzoomもどきができること
0662Name_Not_Found
垢版 |
2022/08/25(木) 22:27:34.47ID:???
vwでいいじゃん定期
jsいらんよ
0663Name_Not_Found
垢版 |
2022/08/25(木) 23:36:35.59ID:???
30pxにしたいのかしたくないのかよくわからないし
0664Name_Not_Found
垢版 |
2022/08/27(土) 18:33:34.70ID:???
divの中に２つののdivがあってdisplay:table-cellを使うと横並びになっちゃうけど
display:table-cellを縦並びにするにはどうすればいいの？
0666Name_Not_Found
垢版 |
2022/08/27(土) 19:02:37.61ID:???
>>662
vwじゃ不都合な時がある
例えば幅１００px高さ２５０pxの画像と幅３００px高さ２５０pxの画像を
それぞれwidth:10vwにすると幅１００pxの画像の方がでかく表示されちゃうから
0667Name_Not_Found
垢版 |
2022/08/27(土) 19:03:53.09ID:???
>>664
親のdivをdisplay:flexにしてflex-direction:columnにする
子のdivがtable-cellでないといけない理由はなんだろ？
0668Name_Not_Found
垢版 |
2022/08/27(土) 19:56:41.15ID:???
>>667
table-cellの方がflexより綺麗に枠におさまるのと
vertical-alignを使えるから
0669Name_Not_Found
垢版 |
2022/08/27(土) 20:14:49.54ID:???
>>668
縦の中央揃えもしたいってこと？
それならflexでもできるよ
0670Name_Not_Found
垢版 |
2022/08/28(日) 00:21:26.38ID:???
それなら子のdivをflexにしてalgin-items指定する方がいいかもね
親に余分な指定しなくても縦に並ぶし
0671Name_Not_Found
垢版 |
2022/08/28(日) 00:23:40.17ID:???
align-itemsのtypoですよって念のため
0672Name_Not_Found
垢版 |
2022/08/28(日) 11:09:20.47ID:???
>>666
まず前提条件としてどういう形にしたいのかを出そう
後出し条件もやめよう
そしてcssの設定箇所を見直そう
0673Name_Not_Found
垢版 |
2022/08/28(日) 11:11:06.71ID:???
zoomマンは困ってて聞いてるんじゃなくてたぶん荒らしだよ
0674Name_Not_Found
垢版 |
2022/08/28(日) 11:44:34.28ID:???
自力で漕ぎ着けた設定でTUEEEしたいんだと思う
それを荒らしというかだな
以後それっぽい人いたらスルーするよ
0675Name_Not_Found
垢版 |
2022/08/29(月) 13:52:36.10ID:???
HTML5のprogress要素を利用したいのですが、
min = 0
max = 100
として
value = 100
が代入されるとページいっぱいに進捗グラフが伸びてしまいます。
どの様にしたらサイズを読み込み時のままに100％表示が出来ますか？
0676Name_Not_Found
垢版 |
2022/08/29(月) 14:48:31.61ID:???
>>675
質問がおま環っぽいので取り下げます。
使ってるライブラリ内に書いてるのが原因ぽかったので
0677Name_Not_Found
垢版 |
2022/08/29(月) 15:40:30.08ID:???
>>675,676
状況再現できなくて回答躊躇してた……原因分かったならなにより
デフォルトで使う分にはいいけど、きっちり整形しようとするとめんどいねこの要素
0678Name_Not_Found
垢版 |
2022/08/29(月) 18:33:10.49ID:???
>>672
<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がいいと思った。
0679Name_Not_Found
垢版 |
2022/08/29(月) 18:47:17.02ID:???
zoom使う要素がどこにもないんだが…
0681Name_Not_Found
垢版 |
2022/08/29(月) 20:13:25.41ID:???
>>678
・画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる
・画像サイズがバラバラかつ点数が多いなら、object-fit使って同じ枠内に納めればレイアウト上もすっきりする
・間隔はjustify-contentのspace-aroundなりspace-betweenなりに任せれば考える必要もなく
・背景画像はbackground-size:coverなりcontainなりにしておけば相対比率で縮小される
0683Name_Not_Found
垢版 |
2022/08/30(火) 05:44:39.03ID:???
例えば小説家になろうの
ncode.syosetu.com##.footerbookmark > li > a
に付与されているhrefにより、リンク動作とともに「javascript:void(0)」がマウスオーバーされてしまう現象

正常動作を保ちながらマウスオーバーのみ非表示にする方法はありませんか？
ネットではpointer-events:noneが目立ち、リンクそのものまで完全除去してしまう例ばかりでしてm(vv)m
0684Name_Not_Found
垢版 |
2022/08/30(火) 12:34:30.26ID:???
>>681
設計時の画像の幅はcssで取得できますか？
>>682
９で割っているけど９という値はどこから来たんですか？
0685Name_Not_Found
垢版 |
2022/08/30(火) 13:17:10.41ID:???
以降zoomerを相手するやつも荒らし
0686Name_Not_Found
垢版 |
2022/08/30(火) 13:26:15.10ID:???
> ９で割っているけど９という値はどこから来たんですか？

要は>>681のコレ

> 画像のwidthをcalc( (設計時の画像幅 / 設計画面の幅) * 100vw )で指定すれば相対比率を変えずに縮小できる

calc((660 / 900) * 100vw)

画面幅900px時に660pxになるって意味
「どの画面幅の時に画像幅が250pxだったりmargin-rightが30pxになるよう設計してるのか？」が分からなかったから
仮に900pxとしただけで、そこは1280pxとか好きに変えてどうぞ

というわけで、もうzoomは諦めろ
0687Name_Not_Found
垢版 |
2022/08/30(火) 13:42:47.42ID:???
>>683
先ずその例に挙げられてるとこに辿り着けないのは自分だけ？
0688Name_Not_Found
垢版 |
2022/08/30(火) 14:08:03.28ID:???
>>687
その前に何が言いたいのか分からなかった……
0689Name_Not_Found
垢版 |
2022/08/30(火) 14:22:12.18ID:???
>>687
場所が分かった
各作品ページ内か目次の欄にある「ブックマークから削除 or ブックマークに追加」のボタン
モーダル表示によるワンクッションをいれる為にjavascript:void(0)でAタグによる動作を止めてるっぽいね

＞正常動作を保ちながら～とかマウスオーバーされてしまう～
この付近への理解が追いつかない
ソースを見る限り正常な動作してると思うんだよね
マウスカーソルを矢印のままにしたいとかなのかな？
0690683
垢版 |
2022/08/30(火) 14:46:52.41ID:???
リンク先の値表示で、ハイパーリンク上へカーソルを持っていくとブラウザ下方にステータスが表示されますよね
-----
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
0691Name_Not_Found
垢版 |
2022/08/30(火) 15:10:50.79ID:???
というか、それはublockとかの広告ブロッカーの話？
0692Name_Not_Found
垢版 |
2022/08/30(火) 15:27:14.52ID:???
>>690
モーダル（ポップアップ）内のボタンを押した時に
JSでデータベースにアクセスするようにしてるからモーダルをスキップするのは諦めろ
Aタグどうこうだけじゃ無理だし君には手に負えない
0693Name_Not_Found
垢版 |
2022/08/30(火) 15:39:37.64ID:???
> 「javascript:void(0)」ポップアップを消したい

「ブックマークに追加」ボタンを押すことで表示されるモーダルを表示させずに
「ブックマークに追加」と「ブックマークを解除」を切り替えたいってこと？
ブックマークボタンの表示はモーダルのcloseボタンでページをリロードさせて切り替えてるし
いずれにしろjavascriptの話だからスレ違いだし、恐らく今使ってる機能拡張で対応するのは
無理じゃないかな
0694Name_Not_Found
垢版 |
2022/08/30(火) 16:51:24.39ID:???
>>692-693
リンク先のステータスを一括非表示とかであればどこかで何度も目にした記憶ですが、やはりリンク単一での処理は無理でしたか
助言有難うございました
0695Name_Not_Found
垢版 |
2022/08/30(火) 19:31:30.96ID:I7IXLTks
課題で作ってるサイトのお気に入りボタンのハートをクリックした後に色付きにしたいのですがcssだけでできますかね？色付きのハートのボタンを画像化するしかないですか？
0696Name_Not_Found
垢版 |
2022/08/30(火) 19:45:12.00ID:???
ここで聞いたらカンニングじゃん？
0697Name_Not_Found
垢版 |
2022/08/30(火) 20:49:52.70ID:???
できるけどカンニングよくない
0698Name_Not_Found
垢版 |
2022/08/31(水) 00:33:01.93ID:???
>>695
CSSでできる
なにかのやり方を調べるスキルはこの先ずっと必要だから、自力でがんばれ
0699Name_Not_Found
垢版 |
2022/08/31(水) 00:48:20.19ID:???
俺はハート型を書くことができない！
実装はアレとアレかなあ
0700Name_Not_Found
垢版 |
2022/08/31(水) 19:32:39.32ID:???
ハートをCSSだけで作ろうと思えば作れる
クリック後に色を反転させることもJS使わずにCSSだけで作ろうと思えば作れる
0701Name_Not_Found
垢版 |
2022/08/31(水) 21:13:19.20ID:???
質問スレなんだからせめてチェックボックスとかヒントいれてもいいんじゃないの
なんか答え出すなって流れだから画像出さないけどさ
答えから学ぶことも大いにあると思ってる
学べない人は遅かれ消えるんだし
そこからjsに繋がってったらええやん
0702Name_Not_Found
垢版 |
2022/08/31(水) 22:12:58.68ID:???
意地悪じゃなくて不正に荷担したらダメだろ
0703Name_Not_Found
垢版 |
2022/08/31(水) 22:43:29.52ID:???
過保護画像おじvs放任主義（普通）
ﾌｧｲ
0704Name_Not_Found
垢版 |
2022/08/31(水) 22:44:56.30ID:???
課題で　とか誰も必要としてない情報を入れなければ回答得られたのにな
0705Name_Not_Found
垢版 |
2022/08/31(水) 22:53:33.93ID:???
言わなくてもいいことの分別
って大事だよね
0706Name_Not_Found
垢版 |
2022/08/31(水) 23:02:33.18ID:???
まあ画像おじさんの言いたいことは分かるしその通りだと思うけど
教育する立場の人もいるだろうしその役割を奪っていいのかってのはある
同じ苦労をさせて無駄な時間をかけさせるのは本当に無駄でしかないし

ただみんな課題ってとこに引っかかってるだけじゃね
0707Name_Not_Found
垢版 |
2022/08/31(水) 23:15:01.30ID:???
できるかできないかのヒントは出したつもりだった
質問してくるぐらいやる気ありそうだし頑張ってほしいなと思ってみてたわ
0708Name_Not_Found
垢版 |
2022/08/31(水) 23:15:11.71ID:???
課題
で一線引いたやつはいるだろうな
質問スレだから茶化すのも含め色々アウトだけど
0709Name_Not_Found
垢版 |
2022/08/31(水) 23:52:39.40ID:???
>>703
ﾌｧｲになるほど勢いねんだわこのスレっつーか板
スレの主題を無視すれば双方間違ったこと言ってねーし
かなC
0710Name_Not_Found
垢版 |
2022/09/01(木) 00:00:54.03ID:???
ちゅーても、ググって答え見つけるのも、ここで答え貰うのも大差無いからな
書きぶりからすると、そういうのも含めて成果物が出来上がればいいってだけの課題なんだろうし
ここで質問することを一概に不正と決めつけるのも見当違いのような
画像を別に用意して実装する方法は分かってるっぽかったし、別解があるのか？って程度の質問に
そんなに騒ぐ必要も無い
0711Name_Not_Found
垢版 |
2022/09/01(木) 00:10:14.32ID:???
ハートを環境依存文字でやると落第なのでしょうか
0712Name_Not_Found
垢版 |
2022/09/01(木) 00:17:58.43ID:???
『cssだけでハート』ってぐぐれば
ちょうどいいの出てくんじゃん
0713Name_Not_Found
垢版 |
2022/09/01(木) 01:18:17.98ID:???
そういや子供の頃BASICでハート作ったなぁ
0714Name_Not_Found
垢版 |
2022/09/01(木) 01:29:31.17ID:???
＞ハートを環境依存文字でやると落第なのでしょうか
そんなことで落第させるような学校は辞めてしまえ
0715Name_Not_Found
垢版 |
2022/09/01(木) 01:47:33.53ID:???
↓の記事で紹介されている方法を組み合わせれば、HTMLとCSSだけで、画像を使わずにハートをクリックしたときに色を反転させることはできる

CSS | ハート型（Heart）の作り方
https://1-notes.com/css-shape-heart-design/

cssだけでトグルを実装する
https://zenn.dev/katoaki/articles/fcef72b6e16709
※HTMLの<label>を<input>要素に関連付ける方法を知っていることが前提
0716Name_Not_Found
垢版 |
2022/09/01(木) 01:53:40.67ID:???
「cssだけでトグルを実装する」の例ではコンテンツの表示・非表示を切り替えているが
そうではなくて
「CSS | ハート型（Heart）の作り方」で作ったハートの背景色（background）を変えてあげればよい
0717Name_Not_Found
垢版 |
2022/09/01(木) 03:53:26.30ID:???
質問の感じマルチポストしてるだろうし答えてあげてももう来ないだろうな
0718Name_Not_Found
垢版 |
2022/09/01(木) 08:24:28.34ID:???
cssのプロパティーを書く順番について
width,height,background,border,padding,margin,font-size
どの順番に書いた方がいいですか？
0720Name_Not_Found
垢版 |
2022/09/01(木) 13:01:51.60ID:???
ulの中にある画像やテキストや背景などにそれぞれvwをつけてウインドウ幅に合わせて
縮小させるのは難しいので
ulだけにvwをつけてulの中の画像やテキストや背景も縮小することはできないんですか？
0721Name_Not_Found
垢版 |
2022/09/01(木) 13:54:52.22ID:???
>>718
MozillaやW3Cが推奨してるのは視覚順
Googleが推奨してるのはABC順

仕事ならグループ内の基準に合わせて
個人ならお好きにどうぞ
0723Name_Not_Found
垢版 |
2022/09/01(木) 15:09:36.43ID:???
bootstrapで作ってて、

<a class="btn btn-light btn-lg fs-1 fw-bold" href="...">hoge</a>

みたいなコードが何個もあるんですが、
このクラスのセットをまとめてｃｓｓファイルに切り出したりってどうやったらできますか
0724Name_Not_Found
垢版 |
2022/09/01(木) 15:32:45.49ID:???
ブラウザの開発ツールから実際に適用されてるstyleをコピペ
もしくはcssファイル開いてセレクタで検索
0725Name_Not_Found
垢版 |
2022/09/01(木) 17:00:03.17ID:???
同じコードが複数あるから「btn btn-light btn-lg fs-1 fw-bold」の部分を一つのクラスにして↓みたいなことをやろうとしているのならやめた方がいい
<a class="bd-btn" href="...">hoge</a>
ボタンのhoverやactive時のエフェクトが効かなくなると思う
0726Name_Not_Found
垢版 |
2022/09/01(木) 17:05:59.67ID:???
>>695 ありがとうございました。オンラインスクールの課題だったので軽い気持ちで質問してしまいました。ポートフォリオに載せる時はcssだけのやり方で実装したいと思います
0727Name_Not_Found
垢版 |
2022/09/01(木) 22:14:59.30ID:???
>>709
無視は草
いやだめだろそれw

>>726
軽い気持ちで質問していきゃいいよ
基本ここのおじは回答したい欲に飢えてるからw
回答を通して自分の引き出しの再確認って意味合いもあるしwin-winよ
0728Name_Not_Found
垢版 |
2022/09/01(木) 22:52:42.19ID:???
お題があると自分の再確認になるのは確かだね
0729Name_Not_Found
垢版 |
2022/09/01(木) 23:04:45.58ID:???
質問があると回答おじ達の運動会が始まるから中々回答できねーわ
みんなこのくらいに帰ってるんだよな俺もたまには回答したいわ
0730Name_Not_Found
垢版 |
2022/09/02(金) 00:06:22.67ID:???
再確認するまでもないはずの非推奨になって使わなくなったプロパティでそうだったっけ？ってのを確認したことはあるな
直近で言えばzoomとか
結局再確認ってとこに落ち着いたけど
※荒らす意図はない
0731Name_Not_Found
垢版 |
2022/09/02(金) 00:30:10.14ID:???
>>723
以下のように、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>
0732Name_Not_Found
垢版 |
2022/09/02(金) 03:15:24.19ID:???
いつもの人が、いつも以上に頓珍漢な回答をしてるな･･･
0733Name_Not_Found
垢版 |
2022/09/02(金) 04:16:44.27ID:???
クラス付与はcssじゃ無理
回答しようにもクラスをセットで云々ってトコにかすりもしないしこの回答でいいのかが分からんからエスパー気味になるけど

隣接兄弟要素に同じスタイルを付与したいとか、一つの要素を基準に別の要素にスタイルを当てたいって相談だったのなら
結合子を使って.A + .Bとか擬似クラスを使えば出来る
js自体は綺麗だし良いと思う

それぞれ画像みたいな感じ
正直回答がこれでいいのか自信がない
0734Name_Not_Found
垢版 |
2022/09/02(金) 04:17:59.71ID:???
画像貼り忘れたけど自信ないしいいかすまん
0735Name_Not_Found
垢版 |
2022/09/02(金) 06:54:50.76ID:???
>>734
着地点俺もよくわからないし気にすんな
0736Name_Not_Found
垢版 |
2022/09/02(金) 13:04:29.52ID:???
<style>
#test{
width:100%;
height:300px;
background-image:url("./test.png");
background-size:cover;
}
</style>
<div id="test"></div>

背景画像の元のサイズは幅１２００px高さ８００pxとする
これでウインドウを縮小すると背景画像も縮小されるけど、背景画像の全体が表示されるので、背景画像の隠れた部分まで表示されてしまいます。
隠れた部分を表示せずに背景画像の比率も変えないでウインドウ幅に合わせて縮小するにはどうやればいいんですか？
なお背景画像は複数表示されてもOKです。
0737Name_Not_Found
垢版 |
2022/09/02(金) 13:19:29.34ID:???
ちょっと何言ってるか分からないけど、言葉通りの質問なら
例題が答えになってるという珍しいパターン
0738Name_Not_Found
垢版 |
2022/09/02(金) 14:12:13.70ID:???
＞背景画像の隠れた部分まで表示されてしまいます。
隠れた部分が表示されないのでどうすれば表示されますか？なら分かるが
まさしく>>737だね
0739Name_Not_Found
垢版 |
2022/09/02(金) 14:24:58.40ID:/RJw6LmJ
>>736
高さ指定を下記の様に書き換えた時の動きが求める解ですか？
height: calc(100vw * 0.25);
0740Name_Not_Found
垢版 |
2022/09/02(金) 18:27:49.82ID:???
>>739
近い感じだけど
それだと背景画像がちょっと横に引き伸ばされちゃった
引き伸ばしはされないでウインドウ幅に合わせて縮小って感じにしたいです
0741Name_Not_Found
垢版 |
2022/09/02(金) 18:49:27.37ID:???
例えば円の画像を背景にすると自動で下の図のように並ぶけど
この並んだ状態のまんまウインドウ幅に合わせて縮小ってことです
coverだと円が枠いっぱいに拡大されちゃうのでだめです
0742Name_Not_Found
垢版 |
2022/09/02(金) 18:55:22.82ID:???
background-size:100% 100%;
のことか？
0744Name_Not_Found
垢版 |
2022/09/02(金) 19:10:53.54ID:???
background-size: contain;　でもいいと思う
no-repeat　をつけるかつけないかはお好みで
0746Name_Not_Found
垢版 |
2022/09/02(金) 23:14:38.60ID:???
セクションの区切りの線を波線にしたいのですがイラレで波線をsvg形式で保存するっていうのはそのセクション前後の背景色込みのデータを保存すれば良いですか？
例えば白のセクションの次のセクションの背景を青にしたくてその青の線を波線にするにはどういうsvgデータを作成すれば良いのでしょうか？
0747Name_Not_Found
垢版 |
2022/09/02(金) 23:39:05.74ID:???
Custom Shape Dividers でぐぐってみて
0748Name_Not_Found
垢版 |
2022/09/03(土) 09:41:20.10ID:???
>>741
>>736 と同じ問の流れだとすると前提条件が違う
まさかzoomマン？
後出しで条件を変えて解答を否定するのは良くない
0749Name_Not_Found
垢版 |
2022/09/03(土) 09:52:18.83ID:???
>>746
“hr 背景画像 波線”　でググる
背景色に影響されたくなかったらベクターの背景透過画像
0750Name_Not_Found
垢版 |
2022/09/03(土) 12:38:07.79ID:???
>>743>>747
試してみたけどちょっと思った通りと違いました。
>>743は横に引き伸ばされちゃって、>>747は比率が変わっちゃいました
cssは無理なのかな？JSでやるしかないのかな？
0752Name_Not_Found
垢版 |
2022/09/03(土) 13:00:00.03ID:???
>>750
アンカー間違ってそうだけど>>744も試してみた？
必要に応じて background-position や background-repeat もつけてね
0753Name_Not_Found
垢版 |
2022/09/03(土) 13:28:08.22ID:???
>>750
> 横に引き伸ばされちゃって

縮小はしたいけど、拡大はNGなの？
だったらメディアクエリのmin-widthで画像の最大幅を指定して
background-size: auto;を指定してやれば済む話だろ
0754Name_Not_Found
垢版 |
2022/09/03(土) 22:43:58.15ID:???
>>752
それでやったけど枠より大きい画像の場合縮小されてしまいました。
>>753
元の画像より拡大はしたくないです
0755Name_Not_Found
垢版 |
2022/09/03(土) 23:01:11.11ID:???
背景画像が枠より大きい場合は図のように表示
ウインドウ幅を縮小するとをその状態のまんま背景画像を縮小って意味です。
coverやcontainだと枠からはみ出た部分も枠に入っちゃうんです。
枠からはみ出た部分は枠に入れたくなかったんですぅ。
0757Name_Not_Found
垢版 |
2022/09/03(土) 23:05:17.82ID:???
>>755
height:300pxで固定じゃないのかよ
画像サイズも縦長になっちゃってるし
途中で条件変えるなよ
0759Name_Not_Found
垢版 |
2022/09/04(日) 00:05:08.98ID:???
>>755
zoomマン様
出来るけれどそれは単純じゃない

要件を小出しにしてきたのは良くない
その要件も背景の事しか書いていないけれど
前面の要素はどうするんだよとかツッコミどころがある

とにかく色々と解答を得たことにダメ出ししたままで全部投げは良くない
ダメな部分をどうすれば良いのか自分で応用案を考えるのが先だよ
0760Name_Not_Found
垢版 |
2022/09/04(日) 13:26:51.53ID:xF1KZss9
>>758
イイね
ちょこっと複数背景画像を指定して
ちょこっと手直しでイイ感じ
0761Name_Not_Found
垢版 |
2022/09/04(日) 14:34:31.67ID:???
また後出し要素が･･･
そんなに気軽に手直しできるかな？
0762Name_Not_Found
垢版 |
2022/09/04(日) 16:04:11.96ID:???
zoomerにかまうのやめよう
0763Name_Not_Found
垢版 |
2022/09/04(日) 17:25:19.19ID:???
zoomerはもう少し伝える努力をして欲しい
レス番の修正もそうだけど言ってる内容がちぐはぐな事が多いので
書き込む前に複数回見返す癖をつけようや
0764Name_Not_Found
垢版 |
2022/09/05(月) 23:46:37.97ID:???
<td>x
xと一致するときだけスタイルシートを適用したいのですが
<td class="hoge">と何百行と書くのを避けたいです
どのような指定方法がありますか？よろしくおねがいします
0765Name_Not_Found
垢版 |
2022/09/06(火) 00:41:04.97ID:???
ややスレチな回答になるけど、<td>は全部手打ち？
手打ちの場合はjavascriptで<td>内の該当文字のあるタグにclass名を付与する
PHP等による自動挿入の場合は、導入する時にclass名を自動で付与しよう

それ以外だと
<td>xが何列目に来るのかが固定の場合は
中身に対してではなく○番目のタグのような色変更はできるよ
設問の例だとどういう形になるのかな？
0766Name_Not_Found
垢版 |
2022/09/06(火) 00:55:10.85ID:???
返信ありがとうございます
巨大なテーブルタグをツールで出力しました
<tr>と<td>がそれぞれ数百行あり、<td>xの出現はまちまちで規則性はありません
やりたいことは、<table class="hoge">として、特定の文字列の<td>にスタイルを適用したいのです
<td>xを<td class="hoge">xと律儀に置換するしか表現できないのでしょうか？
0767Name_Not_Found
垢版 |
2022/09/06(火) 00:56:17.61ID:???
>>764
・手打ちなら最後に正規表現使ってクラス付きのタグに一括置換
・動的テーブルなら出力時に条件設定してクラス付加
0768Name_Not_Found
垢版 |
2022/09/06(火) 01:07:16.95ID:???
jsで<table class="hoge">の中の<td>を全部取得してその中に特定の文字列がある<td>にクラスを付与するのかな
0769Name_Not_Found
垢版 |
2022/09/06(火) 10:49:23.82ID:???
>>766
ツールってどういうツール？
javascript？PHP？Excel等のローカル？
0770Name_Not_Found
垢版 |
2022/09/06(火) 14:08:42.09ID:???
>>766
CSSに内容によるセレクタはないので、どうしてもHTML上でクラス付加したくなければJS使うしかないね
ただ、もとのテーブルがツール管理なら出力後のHTMLをどう加工しても影響なくない？
クラス付加程度でソースの可読性は落ちないし、メンテ考えるとJSでの処理はおすすめしないなあ
0771Name_Not_Found
垢版 |
2022/09/06(火) 17:04:10.22ID:???
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>
0772Name_Not_Found
垢版 |
2022/09/06(火) 20:03:37.10ID:???
rubyでやったことないけど、re = /<td>x(?=<)/ ならいけるんでない
0773771
垢版 |
2022/09/07(水) 00:47:53.91ID:???
確かに、re = /<td>x(?=<)/
にすれば、<td>xx は置換されなかった

<td>x</td>
だけが置換された
0774771
垢版 |
2022/09/07(水) 01:02:56.22ID:???
これでも良かった。
re, replace 両方の末尾に、< を付ける

re = /<td>x</
replace = '<td class="hoge">x<'
0775766
垢版 |
2022/09/07(水) 08:10:48.16ID:???
みなさん親切に教えていただきありがとうございました
表を作るたびにjavascriptで指定するのは大変なので、ファイルサイズが1mbに倍増しましたがクラス付加にしました
.hoge a[href="URL"] { みたいな指定が内容に対してできないと分かってよかったです
ツールというのはwebツールでexcelデータをtableタグに置換しただけです（書き方が悪くてすみませんでした）
0776771
垢版 |
2022/09/07(水) 12:01:29.92ID:???
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>
0777Name_Not_Found
垢版 |
2022/09/07(水) 12:28:50.47ID:???
javascriptとかruby使う必要あるか
出力されたHTMLをテキストエディタで開いて<td>xxx</td>を<td class="hoge">xxx</td>に一括置換すればいいだけなのでは
0778Name_Not_Found
垢版 |
2022/09/07(水) 13:38:22.59ID:???
>>775
画像なしで1MBはちょっと大きいね
ページを分割するか、外部データにして動的に少しずつ読み込む方が見る側に優しいかも
0779Name_Not_Found
垢版 |
2022/09/07(水) 20:28:33.73ID:H3nxHm9n
srcsetで
PC用画像の時にだけ効かせるCSS
スマホ用画像の時にだけ効かせるCSS
て書く方法あります？

<picture>
<source media="(max-width:750px)" srcset="SP.jpg">
<img class="hoge" src="PC.jpg">
</picture>

これだと.hogeはスマホの画像にも効いてしまう

mediaqueryで対応すれば解決自体はできるけど、上記の方法を知りたい
0780Name_Not_Found
垢版 |
2022/09/07(水) 21:12:05.96ID:???
なんでメディアクエリじゃ駄目なのかわからん
0781Name_Not_Found
垢版 |
2022/09/07(水) 21:23:26.96ID:???
>>779
pictureでまとめたものはsourceひっくるめて一つのオブジェクト扱いなので、クラス分けるのは無理
メディアクエリでSP用とPC用の定義を分けるのが最適解
0783Name_Not_Found
垢版 |
2022/09/08(木) 07:34:50.40ID:???
>>764
jQueryなら1行でできるけどな。
$('td:contains:("x")').css('color','red');

jQuery使いたくないならjsの.includes()　使えばいい。

cssはテキストノードに関しては無理。 href="x"やvalue="x"など「属性」なら属性セレクタでできる
0784Name_Not_Found
垢版 |
2022/09/08(木) 12:39:01.58ID:???
ハイフンから始まるcssプロパティーってベンダープレフィックスだけですか？
0785Name_Not_Found
垢版 |
2022/09/08(木) 12:53:49.70ID:???
>>784
ハイフンハイフンで始まるカスタムプロパティ (CSS 変数)がある
0786Name_Not_Found
垢版 |
2022/09/08(木) 15:06:18.05ID:???
>>783
containsの後にコロン入ってるよ！
あとcss()よりaddClass()の方が使い勝手いいかも
0787Name_Not_Found
垢版 |
2022/09/08(木) 17:09:56.14ID:???
>>766
素の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"); }
0788Name_Not_Found
垢版 |
2022/09/08(木) 18:06:13.83ID:???
>>786
そうなんよね
スタイル定義は意識してCSSに分離しとかないと、後々探し回る羽目になりがち
0789Name_Not_Found
垢版 |
2022/09/09(金) 12:40:19.85ID:???
>>786
>>788
同感
jQueryでCSSを設定しまくってたサイトの変更がめちゃ大変だった
0790Name_Not_Found
垢版 |
2022/09/09(金) 15:08:52.51ID:???
>>786
スマン　コロンは後で気付いたわ

そう、cssメソッドなんて普段使わんよ。1行で簡潔できるのをわかりやすく示しただけ。
クラス付与が基本よな
0791Name_Not_Found
垢版 |
2022/09/09(金) 15:10:43.28ID:???
もうレスポンシブが主流なんだから
.css()なんて誰も使ってないから大丈夫だよ。
みんなわかってるって
0792Name_Not_Found
垢版 |
2022/09/09(金) 15:13:16.38ID:???
バニラのjsなんてコピペでもしないと覚えられないわ
jQueryならなんも見ないでも書けるし便利だからやめられん
0793Name_Not_Found
垢版 |
2022/09/09(金) 18:38:25.57ID:???
bootstrapもjquery排除したし無くて困る事は減りつつあるような気が
まぁ、アプリならvueとかreact使うだろうから余計に要らないのだが
0794Name_Not_Found
垢版 |
2022/09/09(金) 20:04:48.67ID:???
tableの左上と右上を丸くしたいのですがtableにborder-radiusを指定しても丸くなりません。border-collapseはseparateでborder-spacingは0で指定してます、
0795Name_Not_Found
垢版 |
2022/09/09(金) 20:13:31.60ID:???
「table　css　角丸」でググってみ
0796Name_Not_Found
垢版 |
2022/09/09(金) 21:07:41.16ID:???
>>794
テーブルのボーダーの上にセルのボーダーが被ってるんじゃね
該当部分のボーダーを消せば見えるようになるはず

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; }
0797Name_Not_Found
垢版 |
2022/09/10(土) 00:18:18.49ID:???
>>796
ありがとうございます！できました〜
0798Name_Not_Found
垢版 |
2022/09/12(月) 00:12:31.72ID:???
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
0799Name_Not_Found
垢版 |
2022/09/12(月) 00:17:10.42ID:???
参考リンクはどうしてもNGワードやこのスレッドにはもう書けませんとなります
『NA-F50B15-H』でamazonを検索し、amazon直売の商品を選ぶことで最適な資料へ辿れる様子です
マケプレ商品の場合、汎用広告バナーが代わりに表示されますがIDそのものは生きています
お手間すみません
0800Name_Not_Found
垢版 |
2022/09/12(月) 00:39:01.74ID:???
background-imageでsvgを使うとき、base64でエンコードしなきゃいけないのは
IEのためだけでしたっけ？
0802Name_Not_Found
垢版 |
2022/09/12(月) 13:19:04.75ID:???
#productAlert_feature_div > div > div > h2::before {content: "\A"; white-space: pre;}
試しに導入したら様々な部分の表示がバグって、しかも他の正常なコードにまで悪さするようになりました

しかし、今まで.prodImage側のafterなどを追加で試行錯誤していましたがh2側のbeforeで指定することは盲点でしたね
今回は{content: "\A"; white-space: pre;}　←この部分がどうにも怪しいものの、助言有難うございました
0803ちなみに
垢版 |
2022/09/12(月) 13:32:02.02ID:???
#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を付け、用途別で常時切り替えるところが少し面倒
0804Name_Not_Found
垢版 |
2022/09/12(月) 14:12:28.16ID:???
くっそーマジファッキン
.prodImageにあるfloatが邪魔して無駄な空白を作ったり、float＋広告バナー＋本来の用途＋imgの縮尺変更＋staticなのにabsolute状態
これらが重なってどうしてもコンパクトかつスマートな表示になりませんわ
そもそも改行一つにせよ、普通のサイトはblockの付け外しなどで簡単に位置調整可能ですしorz
amazonが1か所に要素を詰め込みすぎな様子です

広告バナーを諦めて.prodImageそのものをカットします・・・スレ利用すみませんでした
0805Name_Not_Found
垢版 |
2022/09/12(月) 15:11:53.42ID:???
>>800
IE11対応と、CSS内で直接SVG属性を編集するためじゃないかな
ファイルからリンクする方が保守性はいいよね
0806Name_Not_Found
垢版 |
2022/09/12(月) 15:16:03.88ID:???
cssで背景色を変えたいけどhtml側にsvg書きたくない時とかはエンコード必要
0807Name_Not_Found
垢版 |
2022/09/13(火) 01:10:20.39ID:???
>>805
ありがとうございます！
IE滅んで良かったー
0808Name_Not_Found
垢版 |
2022/09/13(火) 12:38:11.48ID:???
>>806
base64じゃなくて引っかかる文字だけURLエンコードでいいっしょ
0809Name_Not_Found
垢版 |
2022/09/13(火) 20:29:00.45ID:wdaZP6Kf
初心者です
HTMLにread onlyを外部ファイル(json)から取得した値でONOFFしたいのですが検索してもJavaScriptを使う方法しか出てこないです‥jsonを読む都合上JavaScript 使わずにHTML、CSS、vue.jsで実現する方法はありませんか？
0813Name_Not_Found
垢版 |
2022/09/16(金) 01:06:07.27ID:???
雑談スレにageで書けよおう
0814Name_Not_Found
垢版 |
2022/09/20(火) 21:55:19.74ID:???
<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で同じ幅になるんじゃないんですか？
0815Name_Not_Found
垢版 |
2022/09/20(火) 22:33:23.07ID:???
外枠の幅1remにしてなくね
0816Name_Not_Found
垢版 |
2022/09/20(火) 23:00:16.28ID:???
つーか何言ってるかよく分かんない
外枠のdivってwidthが500pxの？
で、liをdivのwidthに合わせて500pxにしたいってこと？
だとすればremの意味と使い方が分かって無い気が
0817Name_Not_Found
垢版 |
2022/09/20(火) 23:02:40.72ID:???
remが基準にするのはフォント
ホントよ
0820Name_Not_Found
垢版 |
2022/09/21(水) 01:12:19.35ID:???
>>814
・remはルートのフォントサイズを基準にする単位なので、ボックスサイズの指定には不向き
・CSSに「親の親」の値を直接取得して利用する方法はない
・divの幅よりulの幅を大きくとって、その中にdivと同じ幅のliを横に並べたいなら、liのwidthに直接500pxを指定
・div幅=ul幅=li幅で縦に並べるなら100%指定ですむけど、positionとflex使ってるからｺﾚｼﾞｬﾅｲ予感
0821Name_Not_Found
垢版 |
2022/09/21(水) 09:18:15.86ID:2QBGPuKv
>>809
V-bind:readonlyで設定できました
スレチ申し訳ないです
0822Name_Not_Found
垢版 |
2022/09/21(水) 13:06:45.04ID:???
>>820
なるほどｃｓｓじゃ無理なんですね
まだｃｓｓは不完全なんだな
ｊｓでやるか
0823Name_Not_Found
垢版 |
2022/09/21(水) 13:19:05.87ID:???
>>822
設定の仕方が違うだけ
inline-block使ってみ
0824Name_Not_Found
垢版 |
2022/09/21(水) 13:58:28.89ID:???
>>822
CSSのせいじゃなくて、アプローチの方がおかしいと思われる
0825Name_Not_Found
垢版 |
2022/09/21(水) 15:47:12.72ID:???
つーか実際のところliって縦並びにしたいのかな？
>>814だとliは横並びだから500pxだとdivから盛大にはみ出すんだが
0826Name_Not_Found
垢版 |
2022/09/21(水) 18:34:46.11ID:???
わざわざabsoluteやflex入れてるしulはdivより広くしたいんじゃね
どういうレイアウトにしたいのかはっきり示した方が的確な助言がもらえるとは思う
0827Name_Not_Found
垢版 |
2022/09/21(水) 18:59:38.67ID:???
だね
フレームレイアウトを絵で書いてくれた方が完成にたどり着くの早そう
SP表示までにレイアウトが変わる場合はそれも添えとくとベター
0828Name_Not_Found
垢版 |
2022/09/21(水) 19:16:49.51ID:???
>>823
枠の中にulを収めたいわけじゃないです
>>825
横並びです
>>826
そうです
liの幅はdiv枠の幅で、liが２つ以上だとul全体はdivより大きくなるのは仕方ないです
0829Name_Not_Found
垢版 |
2022/09/21(水) 19:33:32.32ID:???
>>828
単純にdivとliに同じ幅を指定すればいいと思うよ
決め打ちなら同じ500px、ページ幅に合わせて可変するならvw使った値を入れる
あとはulのデフォルトマージンとパディングをクリアしとけば希望の形になるのでは？
0830Name_Not_Found
垢版 |
2022/09/21(水) 21:29:31.50ID:???
>>829
vwだと100vwにしたときbodyのmarginを０にしないとウインドウ幅から枠がはみ出してしまうので
外枠の幅は%がいいです。
そうするとliもvwを使わないということです。
0831Name_Not_Found
垢版 |
2022/09/21(水) 21:40:06.77ID:???
後出し多いな……先に条件まとめた方がええで
0833Name_Not_Found
垢版 |
2022/09/28(水) 10:29:35.47ID:Y4GrquMW
Tableのthにmarginを与えたいのですが仕様上不可能でしょうか？
thをdivで囲んでmarginを設定していますが余分なmargin が設定されてしまいます
thのmargin設定の代わりとしてborder-spacingを試してもダメでした
0834Name_Not_Found
垢版 |
2022/09/28(水) 12:25:20.20ID:???
thをdivで囲むのは構造上間違ってるので
見栄えの為に調整したいのならthの中にdivを入れて
中にいれたdivにthへ施したかった装飾を適用してみたらどうかな
0835Name_Not_Found
垢版 |
2022/09/28(水) 14:14:57.26ID:KvtwyvLR
>>834
ありがとうございます
Tableのborder-spacingの設定する場所間違っていて設定場所を変えるとうまく行きました
0836Name_Not_Found
垢版 |
2022/09/29(木) 12:23:37.18ID:???
tableでお知らせ表示したいのですがheight195pxをはみ出たらスクロールできるようにしたいのでtableにheight:195pxとoverflow:autoを指定しましたが、tdの高さ毎に高さが増えてスクロールバーも出てきません。
どうすればいいですか？
0838Name_Not_Found
垢版 |
2022/09/29(木) 15:50:23.00ID:???
>>836
display:blockかdisplay:inline-blockを指定するといいよ……って>>837が解説そのものだった
0840Name_Not_Found
垢版 |
2022/09/29(木) 20:19:39.63ID:???
解決したところでアレだけど、お知らせならテーブルよりリストの方が管理しやすいかもよ？
0842Name_Not_Found
垢版 |
2022/09/30(金) 15:59:13.70ID:???
うちではブラウザ関係無く問題無いし、おま環？
ブラウザでズームとかしてない？
0843Name_Not_Found
垢版 |
2022/09/30(金) 16:03:17.69ID:???
>>842
ブラウザもズームしてませんし、拡張機能とかそういうことでもないっぽいです
すべてのブラウザで同じことが起きます
これはスレチになりますかね？
0845Name_Not_Found
垢版 |
2022/09/30(金) 16:21:54.09ID:???
このプレッシャー、ZOOMERか？
0846Name_Not_Found
垢版 |
2022/09/30(金) 16:30:52.96ID:???
ディスプレイ設定の表示スケールも100%？
0847Name_Not_Found
垢版 |
2022/09/30(金) 16:35:34.97ID:lzsSrvyH
キャッシュが残っている可能性は？
Ctrl +F5
0848Name_Not_Found
垢版 |
2022/09/30(金) 16:39:43.22ID:???
>>846>>847
ディスプレイ設定なども問題ないです
0849Name_Not_Found
垢版 |
2022/09/30(金) 16:55:17.24ID:???
150pxのはずが180pxぐらいだから、多分どこかで1.2倍されてる
0851Name_Not_Found
垢版 |
2022/10/01(土) 21:29:44.98ID:???
display:flex、高さをautoにしたdivの中に子要素を置いて
divの高さが自動で子要素の高さに合わせるようにしたいけど
うまくいきませんdisplay:flexでは無理なでしょうか？
0853Name_Not_Found
垢版 |
2022/10/01(土) 22:00:17.63ID:???
>>851
普通なら子の高さに合わせて設定されるよ
子にpositionとか指定してあると崩れるけど、コード貼ってもらわないと原因はわかんないな
0854841
垢版 |
2022/10/01(土) 22:51:30.86ID:???
>>841
これですが
Firefoxだとまともに表示されたので、Chrome系？クロニウム？の場合にのみ私の環境で起きるようです
0855Name_Not_Found
垢版 |
2022/10/01(土) 23:41:48.85ID:???
>>854
機能拡張を全てオフにしても再現するの？
完全におま環で情報が少なすぎだし、他人が再現できない上にスレ違いだから
これ以上どうしようもない
0857Name_Not_Found
垢版 |
2022/10/02(日) 00:34:41.55ID:???
>>854
・Chrome/Edgeのすべての拡張機能をオフにして起動しても結果は同じか
・Chrome/Edgeの設定→アクセシビリティ→ページのズーム の値は100%か
・Windowsの設定→システム→ディスプレイ→表示スケールの詳細設定 の値は正しいか
・Chrome/Edgeのショートカットを右クリック→プロパティ→互換性→高DPI設定の変更 の内容はオフか
・Chrome/Edgeで設定のリセットをしても結果は同じか

これ以上はソフトウェア板かWindows板のChrome/Edgeスレ案件やね
ちゃんと環境書いて質問しないと叩かれるかもなので注意
0858Name_Not_Found
垢版 |
2022/10/02(日) 12:35:06.88ID:Ws3o/3Qz
自動幅より30px狭くしたいんだけど
width:calc(auto - 30px)としてもうまくできませんでした。
このやり方では間違ってますか？
0859Name_Not_Found
垢版 |
2022/10/02(日) 12:43:08.39ID:???
autoは数値ではないのでcalcの中に入れても計算しない
0860Name_Not_Found
垢版 |
2022/10/02(日) 12:43:36.23ID:Ws3o/3Qz
<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と同じ挙動にさせることはできますか？
0861Name_Not_Found
垢版 |
2022/10/02(日) 12:44:31.81ID:Ws3o/3Qz
>>859
そうなんですか
ありがとうございます
0862Name_Not_Found
垢版 |
2022/10/02(日) 12:52:24.40ID:Ws3o/3Qz
>>859
calcが無理なら他に自動幅より30px狭くする方法なありますか？
0863Name_Not_Found
垢版 |
2022/10/02(日) 13:22:20.59ID:???
>>858,860
https://jsfiddle.net/ に書こう
styleの記述ミスしてるよ
なるべくcssも使おう

あとは何を表現したくて30px狭くしたいの？
0864841
垢版 |
2022/10/02(日) 13:49:58.64ID:???
>>855>>857
スレチ了解しました
他のスレへ移動します
一応、レスを書いてくださった方に返答として以下を書きます

---
昨日きちんと表示されていた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
0865Name_Not_Found
垢版 |
2022/10/02(日) 13:55:32.60ID:Ws3o/3Qz
>>863
狭くして空いた部分に縦長のボタンを入れたい
0866Name_Not_Found
垢版 |
2022/10/02(日) 14:08:05.08ID:???
>>860
子要素がposition:absoluteの場合、親要素には必要な幅を直接指定するのが普通だと思うよ
その例だとabsoluteである必要性が見えてこないんだけど、子要素を動かしたりする予定があるの？
0867Name_Not_Found
垢版 |
2022/10/02(日) 16:41:17.82ID:???
>>864
> i.imgur.com/CUC5R0I.jpg

これ、Rulerのサイズからして画像の縮尺は100％みたいだけど
描画エリアだけじゃなくブラウザのUI自体も大きくなってるから
ブラウザ全体がデカくなってるっぽいね

ttps://i.imgur.com/IRNMQLd.jpg

とはいえスレチなので、レス不要
あとは移動先で頑張って
0869Name_Not_Found
垢版 |
2022/10/02(日) 19:05:25.83ID:Ws3o/3Qz
>>866
子要素を動かす予定はあります。
>>868
それでできましたー
でもflex: 1;ってどういう意味ですか？
0870Name_Not_Found
垢版 |
2022/10/02(日) 19:16:24.60ID:???
>>869
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
0871Name_Not_Found
垢版 |
2022/10/03(月) 16:12:18.89ID:???
<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にしたいです。どうすれば余白を０にできますか？
0872Name_Not_Found
垢版 |
2022/10/03(月) 16:29:44.55ID:???
>>871
フォントサイズの指定を#ctrに移して、line-height:1を追加すればいいよ
現状で余白が出るのは<li>タグの外の改行が影響してるせい
0873Name_Not_Found
垢版 |
2022/10/03(月) 18:29:35.93ID:???
#ctr aにdisplay: block;とかじゃダメなの？
0874Name_Not_Found
垢版 |
2022/10/03(月) 18:37:38.86ID:???
>>872>>873
どちらでもできました
ありがとうございます
0875Name_Not_Found
垢版 |
2022/10/03(月) 19:48:08.60ID:l8DxzCix
スケブみたいなイラストコミッションサービスを作りたいんだけど会員登録、決済機能のようなシステムの構築ってどこで調べればいいんだろう
0876Name_Not_Found
垢版 |
2022/10/03(月) 20:48:01.08ID:???
>>874
内容が複数行になる可能性があるならdisplay:blockのが融通きくね
0877Name_Not_Found
垢版 |
2022/10/04(火) 12:15:18.25ID:+1IPjthN
>>875
フレームワークとか
検索してみたら？ここではないよ
0878Name_Not_Found
垢版 |
2022/10/05(水) 05:47:43.99ID:???
最近のAIの過ごさ見てると数年後にはコード書く必要無くなってるんじゃね？とか考えちゃうんですけどみなさんどう思います？
0879Name_Not_Found
垢版 |
2022/10/05(水) 10:11:31.45ID:???
それ言われて15年経ってる
0880Name_Not_Found
垢版 |
2022/10/05(水) 12:22:30.75ID:K3i9fbJO
デザイン関係は他社と差別化ができる前提で客の思い描いた物が100%反映できるなら取って変わる可能性ある
仮に完成しても使用料だの権利だので色んな企業が作るだろうしそれの保守運用でまた人が必要だしで言語は廃れても人は必要だろうね
0881Name_Not_Found
垢版 |
2022/10/05(水) 16:56:48.76ID:???
コードを書かなくても良いWYSIWYG系のエディターを使わされた事がある。
吐き出されるコードに癖があって、そのWYSIWYGエディターの範疇を逸脱する細工が求められて苦労した。
エンドユーザーがCMSのコンテンツを作る等には良いかもしれない。
0882Name_Not_Found
垢版 |
2022/10/06(木) 03:04:48.49ID:???
AI化一番すぐできそうでできないのがWEBデザインなんだろうな
昔もいろいろコード吐き出すやつあったけど
無駄な記述多くて使いもんにならんかった
今だと技術的には可能でもグーグルからクソコードですで弾かれたらそれで終わりだからな
手書きだろうとWPだろうとCMSｂｾろうとグーグャ汲ﾉOKもらえなｂｯりゃ意味ないｂﾌよ
そのャ`ューニングはｂ竄ﾁぱり人じゃｂﾈいとできないｂｾろう
0883Name_Not_Found
垢版 |
2022/10/07(金) 04:17:54.39ID:B4JFIMcV
テーブルっぽい表示を作っているのですが、デザインをどうすればいいのか迷っています。

下記を見て頂けると見ての通りなのですが、[有効なアカウントは下記をチェック]というタイトルが長いのに、実際のコンテンツ(？)は1個のチェックボックスだけです。
タイトルとコンテンツの幅が違いすぎて、表示に違和感があります。
https://liveweave.com/smPut9

こういう時に、違和感なく表示するにはどうすればいいでしょうか？
タイトルを複数行にする事も考えたのですが、それは回避したいです。
0884Name_Not_Found
垢版 |
2022/10/07(金) 12:44:49.10ID:???
デザインはさほど気にならないけど
見出しはもう少し文字を削って単語にできるよね？
必要ならテーブル外に注釈いれたらどうかな

それ以外はクリックできる範囲が小さいので
余白を含めるか、?有効などのテキストを入れてクリック範囲を広げたり
チェックしやすいようにしてあげると利用者に優しいかな
0885Name_Not_Found
垢版 |
2022/10/07(金) 18:00:02.73ID:???
table使わずに「っぽい表示」にしてるのは何故？
0886Name_Not_Found
垢版 |
2022/10/08(土) 18:08:55.34ID:???
最低でもheight:30pxで子要素の高さに応じてheightが変化するようにするには
heightをどう設定すればいいですか？
0889Name_Not_Found
垢版 |
2022/10/08(土) 18:40:37.90ID:???
min-heightじゃなくheightで設定したいならclamp()とかmax()使うとか
どういう状況で使いたいのかによるが、自分なら親じゃなく子に制限掛けるが
0890Name_Not_Found
垢版 |
2022/10/15(土) 09:10:00.31ID:???
clamp()なんて始めて知ったわ
またいつのまにこんなの出てるんだよ・・
0891Name_Not_Found
垢版 |
2022/10/15(土) 09:26:40.98ID:???
>>889みたいなので新しい情報が入ってくるから
このスレは眺めておく価値がある
さんくす
0892Name_Not_Found
垢版 |
2022/10/15(土) 19:45:02.18ID:???
その辺の新規実装って定期的な情報源あります？
IE消えて実用になったプロパティも多そうなので、巡回ルートに加えときたくて…
0893Name_Not_Found
垢版 |
2022/10/15(土) 20:14:08.75ID:???
>>892
コリスとか？
このスレでもたまに貼られる
0894Name_Not_Found
垢版 |
2022/10/16(日) 11:08:33.11ID:???
margin:autoで左右の中央揃えになったけど
左右の中央揃えを保った状態で上下のmarginを100pxにしたいけど
どうやればいいですか？
0895Name_Not_Found
垢版 |
2022/10/16(日) 12:02:13.74ID:???
>>892
SNSでその手のWEB系のアカウントをフォローしとけばTLで情報は流れてくるでしょ
専用のアカウントでやれば余計な情報は流れてこないし
0897892
垢版 |
2022/10/16(日) 15:57:12.01ID:???
>>893
ありがとです、コリス入れときます

>>895
SNSは記事埋め込みのを見るぐらいでアカウント持ってないので、作ってみますね
0898Name_Not_Found
垢版 |
2022/10/16(日) 16:22:54.14ID:???
>>894
全指定ではなくmargin-leftとmargin-rightに個別でautoを指定する
0900Name_Not_Found
垢版 |
2022/10/16(日) 17:00:26.78ID:???
>>899
いいね。でも多すぎると食傷気味になるな
カスケードレイヤーとかもうなんやねんな
0901Name_Not_Found
垢版 |
2022/10/17(月) 07:23:47.76ID:???
>>899
iOSのSafariが対応しないCSSというのも知りたい
0902Name_Not_Found
垢版 |
2022/10/17(月) 08:21:23.46ID:???
iosサファリ、罠多いよね
backgroundでリピートさせなければ大丈夫とか
0903Name_Not_Found
垢版 |
2022/10/17(月) 08:30:17.70ID:???
safariは対応してないのではなくバグってるだけなのでなかなか探しづらい
0904Name_Not_Found
垢版 |
2022/10/17(月) 09:37:32.57ID:???
今はわからんけど、linear-gradientで、tranceparent が効かないとかあったなぁ
IEと同じく、safariはマジ消えてくれ
0905Name_Not_Found
垢版 |
2022/10/18(火) 21:18:38.66ID:???
めんどいのでもうBootstrap一本でいいですか
0907Name_Not_Found
垢版 |
2022/10/19(水) 12:49:37.14ID:D434GI70
CSSで

.class1 {
color : "#32cd32";
}

.class2 {
background-color : "#32cd32";
}

この色を複数の箇所で使いたいです。
あるクラスでは文字色だったり背景色だったりボーダーだったりして、別の属性です。
一箇所治せば全部治るような簡単な書き方ってありますか？
0910Name_Not_Found
垢版 |
2022/10/19(水) 12:56:48.70ID:???
Bootstrap のみで良い。
漏れはCSS も、あまり知らない

最近は、Tailwind もいるらしい
0911Name_Not_Found
垢版 |
2022/10/19(水) 13:05:12.10ID:???
CSSもろくに使えずRubyとBootstrapを勧める事しか能が無い奴は無視していい
0912Name_Not_Found
垢版 |
2022/10/19(水) 13:24:38.50ID:D434GI70
>>909
思った通りのことができました。ありがとうございました！
0913Name_Not_Found
垢版 |
2022/10/19(水) 22:06:51.29ID:???
質問なのですが、今ウェブコンポーネントを使用してウェブサイトを作ってて
そのウェブコンポーネントの#shadow-rootのスタイルを変えたいのですがどうすればよいでしょうか。
https://imgur.com/FYFuknh.jpg

<fluent-text-area>の#shadow-root<textarea>のスタイルを変更したいです。

よろしくお願いします。
0915Name_Not_Found
垢版 |
2022/10/21(金) 18:18:40.61ID:8kiseZfM
人が作ったCSSでこういう定義を見ました。

span.hoge#\0031 {

}

spanタグのhogeクラス、#以下のID名、という基礎は知っているのですが、
なぜかこれでIDが"1"のところにこのスタイルが適用されます。
#\0031というセレクタ指定で1というIDに適用されるという不思議。

ID名の上につく\マーク（バックスラッシュ）の意味って何ですか？
0916Name_Not_Found
垢版 |
2022/10/21(金) 18:39:19.47ID:???
すいません、グリッドで文字列が入る簡単な表を組んでいます

書いたcssが以下です

grid-template-columns: max-content auto;

左の列の幅は最小限で右側はそれに合わせるって感じですね


でも、これだと左側の列にめっちゃ長い文字列が来た場合に適当な位置で折り返さずに
グリッド全体に指定した幅も超えてどんどん長くなっちゃうんですよね

min-contentにすると逆に1文字とか極端に少ない文字で折り返してめっちゃ縦に長い行になっちゃうし

左右にどれくらいの文字が入るかわからないので、各セル？にmax-widthとかを指定したくはないし。
ただ両方ともautoだと、入る文字が少ない時に、左右の列がきれいに左詰めにならずにスカスカになっちゃうし…

何か良い方法あったりしますでしょうか
0917Name_Not_Found
垢版 |
2022/10/22(土) 15:28:37.82ID:???
適当な位置ってどこ？どれぐらい文字が入るか分からなくても、適切な位置で折り返させたいなら
自分が許容できる最大幅をmax-widthで指定するしか無いんじゃない？
で、単純な表ならmax-widthは各セルごとに指定するんじゃなくて、div:nth-child(2n+1)とかで
列ごとにまとめて指定するのはダメなの？
必ず最大幅を超える長い文字列が入るならmax-content部分を最大幅の固定値に変えてもいいけど
0918Name_Not_Found
垢版 |
2022/10/23(日) 02:38:44.24ID:???
ありがとうございます

grid-template-columns: auto auto;

でwidthにmax-contentを指定したら望んだ結果が得られました
なんか色々難しく考えて基本を忘れてたみたい
0919Name_Not_Found
垢版 |
2022/10/23(日) 03:43:17.27ID:???
やっぱり文章だけの説明だと、何がしたいのかサッパリ分からんな
二度手間になるから質問するなら、せめて簡略化したコードぐらい貼って欲しいわ
0920Name_Not_Found
垢版 |
2022/10/23(日) 08:39:02.34ID:8AOtGlRE
すみません外部のウェブコンポーネントを使用するときのことなのですがそのウェブコンポーネントの高さを変更したいです
しかしそのCSSプロパティがshadow-rootに隠れていて変更できません
ほとんどのサイトではShadowDOMを追加することしか紹介されてなく既存のウェブコンポーネントのShadowDOMを編集する方法を紹介されてるところがありません
どうすればよいか困っています
よろしくお願いします
0921Name_Not_Found
垢版 |
2022/10/23(日) 10:00:29.91ID:???
>>920
外部ウェブコンポーネントが何物で何処にあり改変可能なのかが提示されていないのでまったくわからない

とりあえず、その外部ウェブコンポーネントが
Style要素をJavaScriptで抱え込んでいるのならそこを改変
link要素をappendChildして外部スタイルシートを参照しているのなら、その参照先のStyleを改変
それともそのウェブコンポーネントにStyleをかえるAPIが用意されていればそれで
という推測でしか言えない
0922Name_Not_Found
垢版 |
2022/10/23(日) 10:32:13.34ID:8AOtGlRE
>>921
それはshadow-rootのものについても言えるのでしょうか？

これなのですが<textarea>のStyleはtextareaをリサイズすると現れました
こいつを固定値にしておきたいです
https://imgur.com/FYFuknh.jpg
0924Name_Not_Found
垢版 |
2022/10/23(日) 11:09:05.48ID:8AOtGlRE
そのJSでいじる方法がわかりません
通常Shadow DOMはJSのセレクターなんかで参照ができなくなるものなのでこのshadow-rootの中のtextareaをいじることができません
0925Name_Not_Found
垢版 |
2022/10/23(日) 11:23:46.30ID:???
ウェブコンポーネントを使わなければいい
0926Name_Not_Found
垢版 |
2022/10/23(日) 12:05:50.83ID:8AOtGlRE
>>925
やはりそうなるのですか…
残念です
0928Name_Not_Found
垢版 |
2022/10/23(日) 15:34:00.61ID:???
>>915
\+16進数はUNICODEエスケープ、\0031はU+0031なので1

>>924
対象要素にpart属性が付いてるならcssで
fluent-text-area::part(control) { ～～ }
のようにすることが可能
jsならカスタムエレメントのshadowRootからshadowDOMのツリーにアクセス可能
0929Name_Not_Found
垢版 |
2022/10/23(日) 16:00:09.04ID:8AOtGlRE
>>928
修正できました
ありがとうございます！
0931Name_Not_Found
垢版 |
2022/10/24(月) 07:48:16.95ID:XlUzmcQj
いまからHTMLとCSSを網羅的に学習したいのだけどいい参考書やWEBサイトないだろうか
なるべく書いていることに抜けがなく学びたい
0932Name_Not_Found
垢版 |
2022/10/24(月) 09:23:17.70ID:???
抜けがなく学ぶのは無理
基本的なこと掴んでその都度必要なことは調べて身にしていくしかない
0934Name_Not_Found
垢版 |
2022/10/24(月) 10:13:19.11ID:LVvJK6+G
完璧を求めてほとんど使わない知識を身につけるよりよく使うものを調べなくても書ける方がいいと思う
0935Name_Not_Found
垢版 |
2022/10/24(月) 10:14:23.48ID:???
仮に今現在抜けが無くても将来追加された仕様は抜けるので必ず>>932になる
それでも基礎もないと始まらないし、読むとしたらMDNで>>933
0936Name_Not_Found
垢版 |
2022/10/24(月) 10:46:12.85ID:???
抜けなく覚えていくうちに新しいのが出てきたりして変わっていくから
ほんこれ>>934よ
0937915
垢版 |
2022/10/24(月) 10:55:05.14ID:Ou0kVKZr
>>928
ありがとうございます。疑問氷解しました。
0939Name_Not_Found
垢版 |
2022/10/26(水) 19:57:14.93ID:???
抜けが無い知識は、何十年も掛かる

基礎だけやって、Bootstrap, Tailwind などが速い
0942Name_Not_Found
垢版 |
2022/10/27(木) 12:34:08.38ID:DizwkO/t
BootstrapとかTailwindってアニメーションとか作れるの？
0943Name_Not_Found
垢版 |
2022/10/27(木) 15:32:55.75ID:???
質問です。登録会社の出勤確認のフォームにアクセスした履歴は有るのに、
欠勤扱いになってしまって当日採用落とされてしまったのですが、海外ipからのアクセスで入力フォーム自体にはアクセス出来ても入力してサブミッション押したら内部でエラーになってこちらが気付かない事って有り得ますか？？
0945Name_Not_Found
垢版 |
2022/10/27(木) 15:48:53.50ID:???
ここまで徹頭徹尾スレ違いなのも珍しいな
0946Name_Not_Found
垢版 |
2022/10/27(木) 15:53:45.59ID:???
HTML5とjavaで作られてるフォームなんです
ソース貼ろうとしてもエラーで貼れない。。確認画面は新しくページ作られるタイプですが、普通はそこのディレクトリだけアクセス制限する事って無いですよね？レンタルフォームとかだとどうなんでしょうか？
0947Name_Not_Found
垢版 |
2022/10/27(木) 15:55:22.28ID:???
運用の話なんでその会社に聞いてくれとしか
0948Name_Not_Found
垢版 |
2022/10/27(木) 16:33:58.04ID:???
>>947
これだと入力ページと確認ページでディレクトリは変わってないですよね？？
https://i.imgur.com/YLrPrc1.png
今後就業出来なくなりそうでピンチなんです…向こうの鯖が原因ならそれで解決出来るのですが
0949Name_Not_Found
垢版 |
2022/10/27(木) 17:05:20.46ID:???
新手の荒らしか
zoomerといい次々新キャラがくるな
0950Name_Not_Found
垢版 |
2022/10/27(木) 17:05:51.17ID:???
やべえ……人の話聞かない系だ
0951Name_Not_Found
垢版 |
2022/10/27(木) 17:08:33.56ID:???
>>950
だって会社の人には聞けないし
荒らしじゃありません
0952Name_Not_Found
垢版 |
2022/10/27(木) 17:11:23.58ID:???
ソース見て、入力ページと確認ページがディレクトリ同じか教えて欲しいだけです
コード貼ろうとしても何のコードがNGの原因で貼れないのか分からないし
今日中に連絡したいのに
0953Name_Not_Found
垢版 |
2022/10/27(木) 17:12:16.24ID:???
legendってfieldsetなしで使っていいもんなの？
0955Name_Not_Found
垢版 |
2022/10/27(木) 17:20:18.94ID:???
・ここは「Web制作板」のHTML/CSS質問スレで、なんでも相談スレじゃない
・そちらがいくら切羽詰まっていても他の人には「まったく」関係ない
・場をわきまえたうえでスレ主旨に沿った質問をし、得られた回答を皆に還元するのが質問スレの存在理由
0956Name_Not_Found
垢版 |
2022/10/27(木) 18:15:28.90ID:DC1jjxXR
ホンモノで草
0957Name_Not_Found
垢版 |
2022/10/27(木) 19:27:07.57ID:???
form actionとか書いてるのに、何故あんなスクショで答えが得られると思ったのか謎

しかし、スマホから質問してくる奴は質問が雑過ぎて困る
スレチは論外だが
0958Name_Not_Found
垢版 |
2022/10/27(木) 20:46:20.06ID:???
>>957
フォームに関係有りそうなコードの場所スクショしたつもりなのですが、
もっと上は会社名とかバレるので貼りませんでした。
コード貼ろうとjavaの怪しい部分にスペース入れたり頑張ってみたんですが、NGワールド引っかかって…
フォームメーラーは
https://business.form-mailer.jpってとこ使ってるみたいですが、ググッてもどこのレンタルフォームなのか出てこないんですよね、、
0959Name_Not_Found
垢版 |
2022/10/27(木) 21:09:53.28ID:???
ここまで言われても自分がスレチだと理解しないところを見るに
登録会社が付き合いきれなくてブロックしたのかもしれんな…
0960Name_Not_Found
垢版 |
2022/10/27(木) 23:29:51.31ID:???
javascriptをjavaと略すやつは滅びて欲しい(´･ω･`)
0961Name_Not_Found
垢版 |
2022/10/28(金) 08:58:45.06ID:???
>>960
まったく同意する
意味が通じない省略はヤメロ

パス、パスいっているから、どのpathなんだろうと思ったら、パスワードだったことがある
パスワードくらい短いワードなら略すなよ
0962Name_Not_Found
垢版 |
2022/10/28(金) 09:03:20.90ID:G3Y6xNBj
イチゴとイチゴジュースくらい意味変わって来るよな
0963Name_Not_Found
垢版 |
2022/10/28(金) 12:44:40.42ID:+LP0D1KO
HTML/CSSの枠から外れた質問になるかもで申し訳ないんだが、Gartic phoneみたいなwebゲームを作ろうと思ったらどの言語に手をつければいいんだ？
フロントエンド用にHTMLとかを覚えるのは必須として、バックエンドで動かす用の言語をまた別個で覚えないといけない感じ？
0964Name_Not_Found
垢版 |
2022/10/28(金) 16:06:31.13ID:???
>>948
最後の方見ると、次の画面は確認みたいだから
確認まででページ閉じちゃったとかじゃないの
0965Name_Not_Found
垢版 |
2022/10/28(金) 17:53:50.76ID:???
>>963
どんなものでも勉強して損はない
そして勉強するのに遅すぎるということはない
0966Name_Not_Found
垢版 |
2022/10/29(土) 01:35:29.50ID:rLG6Jdtj
pre,codeタグを実装したのですがウィンドウサイズを変更しても最初の描画した幅から小さくならず困っているのですがどうしたらよいでしょうか
0967Name_Not_Found
垢版 |
2022/10/29(土) 02:19:31.63ID:???
その動作が再現できる最低限のコードを書いてくれなきゃ何とも言えない
0968Name_Not_Found
垢版 |
2022/10/29(土) 02:32:56.56ID:rLG6Jdtj
HTML
<pre><code class="language-cs">
コードの中身
</code></pre>
CSS
pre{
overflow:auto;
width:100%;
}
code{
width:100%;
}

こんなかんじです。
0971Name_Not_Found
垢版 |
2022/10/29(土) 12:48:32.89ID:???
> ウィンドウサイズを変更しても最初の描画した幅から小さくならず

どういうこと？
ちょっと何言ってるか分からない
0972Name_Not_Found
垢版 |
2022/10/29(土) 13:04:19.24ID:8Q5qVqs2
昨日から色々やってみたのですが
親要素をウィンドウサイズによって幅の変更をしたいため100%にしてます
その中でpre,codeをwidth:100%ってやると子要素の大きさで親要素の幅が決まってしまって結局:子要素の幅=子要素の幅のようになってるみたいです
0973Name_Not_Found
垢版 |
2022/10/29(土) 13:06:40.72ID:8Q5qVqs2
ちなみに親要素はdivです
子要素に影響されないように親の要素(ここではウィンドウサイズ)のみ影響を受けるようにすることってできますか？
0975Name_Not_Found
垢版 |
2022/10/29(土) 13:40:15.67ID:rLG6Jdtj
>>974
そいつはちゃんと望む動きになってますね
0976Name_Not_Found
垢版 |
2022/10/29(土) 13:41:27.62ID:rLG6Jdtj
>>969
normal追加するとウィンドウサイズの縮小によって小さくなりましたが
コードが空白行含まないのでぐちゃぐちゃになってます
0977Name_Not_Found
垢版 |
2022/10/29(土) 13:43:05.38ID:rLG6Jdtj
>>970
コピペで自分の環境でやろうとするとダメですね
0978Name_Not_Found
垢版 |
2022/10/29(土) 13:49:51.45ID:???
書かれてる通りにコードを書くとこうなるけど、何をしたいのかがサッパリ分からん
https://jsfiddle.net/to8hvq03/1/

> 子要素の大きさで親要素の幅が決まってしまって

違う。子要素のwidthを％指定した場合、親要素の幅によって子要素の幅が決まる。
0979Name_Not_Found
垢版 |
2022/10/29(土) 13:58:18.40ID:rLG6Jdtj
>>978
そのやつだとうまく言ってるんですよね
なんでできないんだろ…
0980Name_Not_Found
垢版 |
2022/10/29(土) 14:09:41.04ID:???
親要素に固定値で幅を指定している可能性
0982Name_Not_Found
垢版 |
2022/10/29(土) 15:06:54.23ID:rLG6Jdtj
ちょっと難しそうなので幅の調整は諦めます
色々提案していただきありがとうございました
0984Name_Not_Found
垢版 |
2022/11/03(木) 02:43:06.26ID:???
画像のように複数のテキストの下部 + テキストのラップdiv上下に
点線を配置する方法ってありますか？
https://imgur.com/f0Jo1yj

テキストはspanで囲ってbackground-imageで
ドット用の画像 or linear-gradientでドットを実装しましたが
https://imgur.com/FI5Faa6
のようにinlineのためdivの幅目一杯まで広がりません。
またテキストの最終行のドットはbackground-imageのため消せません。
（divの下部にドット画像を配置するため重複してしまいます。）

どなたか教えて頂けるとありがたいです。
0985Name_Not_Found
垢版 |
2022/11/03(木) 03:46:48.53ID:???
>>984
こういうのじゃダメなの？

CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】
ttps://web-dev.tech/front-end/css/note-design-solid-dashed-line/
0986Name_Not_Found
垢版 |
2022/11/03(木) 06:32:58.95ID:???
>>984
今の時代はそういう風に画像を使って装飾よりもCSSで表現する方が主流だよ
この方が扱いやすいのでそういう方面を勉強しとくとこの先助かるよ
0988Name_Not_Found
垢版 |
2022/11/12(土) 12:59:14.65ID:???
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>
0989Name_Not_Found
垢版 |
2022/11/12(土) 13:27:03.20ID:???
table.test td.maguro
で上書きはできる
css 詳細度で検索

こういうキモいセレクターで上書きしなきゃいけなくなったということは元の
table.test tdが設計としておかしいということ
記述としてはおかしくないので動作するが、人間が更新するものとしての設計が破綻している
よほどのことが無い限りタグそのものにcssをあてないほうがよい
table.testは.testでよい
.testがtable以外についたらまずいなら命名がおかしい
0990Name_Not_Found
垢版 |
2022/11/12(土) 13:52:34.43ID:???
お答えいただきありがとうございます！！
上書きできました！　助かりました。

PHPで動的に生成されるテーブルで
セルの内容が都度変更になりまして、
例えば100点以上とあれば赤にするなどにしたかったのです。
最終的にTCPDFでHTMLテーブルをPDFにします。

奇数列や偶数列などでは判別できなく、
直接class指定しかないかなと思ったのですが、
他にどのような方法をとるものでしょうか？
0991Name_Not_Found
垢版 |
2022/11/12(土) 14:01:26.98ID:???
php側でセルの内容に合わせてclass付与する
0992Name_Not_Found
垢版 |
2022/11/12(土) 14:02:36.65ID:???
cssには現状テキストエレメントの内容を判断する方法はない
data属性とかならセレクタにできる
0993Name_Not_Found
垢版 |
2022/11/12(土) 14:48:58.87ID:???
みなさん、ありがとうございます！！
0995Name_Not_Found
垢版 |
2022/11/16(水) 06:56:51.77ID:NiPf6ivp
そろそろ新スレを建てたほうがいいのではないでしょうか。
0996Name_Not_Found
垢版 |
2022/11/16(水) 06:59:18.12ID:???
>>981
もうあったみたいですね。
そろそろ最後なので981をageます。
10011001
垢版 |
Over 1000Thread
このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 272日 23時間 57分 2秒
10021002
垢版 |
Over 1000Thread
5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。


───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────

会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。

▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/

▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php
レス数が1000を超えています。これ以上書き込みはできません。
ニューススポーツなんでも実況