X

HTML/CSS のどんな質問にも優しく答えるｽﾚ 50

■ このスレッドは過去ログ倉庫に格納されています
1Name_Not_Found
垢版 |
2022/02/25(金) 16:42:48.40ID:H+CdGnmu
https://mevius.5ch.net/test/read.cgi/hp/1636434627/
2022/06/10(金) 12:45:48.34ID:???
width: 100%;
height:auto
325Name_Not_Found
垢版 |
2022/06/10(金) 14:43:14.21ID:Y/BlBpdu
height:autoっていつも忘れるけど
inhelitしてるんだろうか
2022/06/10(金) 14:49:44.05ID:???
デフォルトで auto
変なもの継承してる可能性があるから一応書く癖つけたほうが楽
2022/06/10(金) 14:53:01.74ID:???
Google PageSpeed Insights用にimgに固定値入れるようになったから
autoつけるようにしてるね
2022/06/10(金) 14:57:07.99ID:???
heightで継承？
2022/06/11(土) 17:06:35.70ID:???
こんにちは。
ページネーションなしで画面に表示しきれないテーブルを表示したとします。
そのテーブルの任意の行（画面からはみ出て表示されない行）を表示するようにジャンプしたい場合、htmlだけでやる手段はあるでしょうか。
（各行にアンカーを埋め込む？）
あるいは Javascriptが必要でしょうか？
2022/06/11(土) 18:54:12.29ID:???
ページ内移動をhtmlとcssだけでやりたいとなると、方法としては
基本的にアンカーリンクだけじゃない？他に何かあったっけ？
2022/06/11(土) 22:21:54.89ID:???
5ちゃん初カキコさせていただきます。
有名なサイトのCSS、jsを見ると大概インデントが無かったり詰まってたりしますが、
あれには理由があるのでしょうか。
ググりましたが分かりませんでした。
どなたか教えてくださると幸いです。
2022/06/11(土) 22:44:07.52ID:???
>>331
コレの話？

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

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

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

【装備】
【立ち回り】

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

【装備】【立ち回り】

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

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

感謝いたします。
2022/06/16(木) 13:59:57.83ID:???
消えてる消えてるｗ
2022/06/18(土) 16:56:55.45ID:???
10年以上の前のサイトで
box-sizingをborder-boxに変えた時にグシャっとレイアウトが崩れるとき
どのあたりのパラメータから直していけば良い？
2022/06/18(土) 17:24:02.48ID:???
そらborderとpaddingよ
だがそもそも崩れるなら無茶な上書きすべきではない
2022/06/18(土) 17:28:08.18ID:???
ありがとう、作り手がdiv10階層入れ子だらけで＆css4000行とかで
content-boxで作られているからびっくりするぐらい崩れる
触りたく無いけど、開発ツールでグシャったものをなんとかborder-boxで立て直したくなるね
2022/06/19(日) 00:27:05.45ID:???
100px*100pxのDivを100px*50pxにして上半分と下半分で分割して表示することて出来ますか？
2022/06/19(日) 00:30:38.66ID:???
できますよ
2022/06/19(日) 00:31:21.51ID:???
IEが死んでくれたので
だいぶ楽になりますね
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というようにするには
どうやったらできますか？
2022/06/20(月) 13:54:09.29ID:???
メディアクエリ
2022/06/20(月) 18:49:36.60ID:???
scale()はcalc使えるけどvwとかは入れても動かないんだっけ？
だったらjavascriptかな？
361Name_Not_Found
垢版 |
2022/06/20(月) 21:14:03.32ID:d+bmcBX0
widthに応じてfont-sizeを無段階で変わることってできたっけ？
メディアクエリを細かくするしかない？
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
2022/06/20(月) 21:54:08.12ID:???
>>361
vw
364Name_Not_Found
垢版 |
2022/06/20(月) 22:35:06.47ID:d+bmcBX0
>>362
すごいな、こんなのあるのか
たしかにやりたいことはこれだわ

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

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

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

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

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

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

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

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

例えば、
あいうえおかきくけこさしすせそ
の文章があったとして、一文字目は空白を入れ、左寄せで文字を記入していた際に、上記のような現象が合わさると
　あいうえおかきくこさ
しすせそ
のような、文字列が揃わなくなる場合はどうすれば良いでしょうか？
2022/07/14(木) 18:58:50.04ID:???
>>406
既に備わってる機能を非表示にしたり表示したいのならaudio要素に属性を設定するだけ
uiとかプレイヤーの色とか色々カスタマイズしたいならjs
https://mevius.5ch.net/test/read.cgi/hp/1478002550/

>>407

https://i.imgur.com/HmRDzMt.jpg
https://i.imgur.com/5Ud82yv.jpg
2022/07/14(木) 19:03:34.31ID:???
>>404、>>405
よくあるサービスの機能比較表の中で出てくる記号だから空はまずいと思うんだけど、記号をそのまま入力しとくのがいいのかね

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

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

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

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

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

こういうサイトは有り得ない
2022/07/22(金) 16:08:54.81ID:???
>>407
1行しかない時はセンタリング、複数行になる時は左寄せ、ていうのならできるけど、、
2022/07/22(金) 17:19:58.97ID:???
「いちばんやさしいWeb3の教本」、ほとんどの説明が間違えてるのでマジで頭がクラクラする。
あの「インターネットマガジン」を出していたインプレスが作った書籍だと考えると、感慨深い…
https://twitter.com/PCM3324/status/1550012746116173824
https://twitter.com/5chan_nel (5ch newer account)
2022/07/22(金) 23:58:18.67ID:???
インプレスの本はハズレが多いよ
デザイン系も微妙なの多い
2022/07/23(土) 04:32:20.22ID:???
概念系はオライリーが良かったりする？
2022/07/23(土) 17:53:58.46ID:???
拡張機能のstylusなどを使って
画像のimg alt=""の内容を読み込んで
その画像の下に表示させる方法を教えてください
2022/07/23(土) 18:17:58.10ID:???
javascriptでどうぞ
2022/07/23(土) 18:27:16.33ID:???
stylusでは難しいのですか？
javascriptを勉強します
2022/07/23(土) 20:15:06.29ID:???
使う機能拡張としてはTampermonkeyとかそっち系の話だね

stylusはサイトごとにCSSを上書きするだけだし
CSSだけじゃ特定の箇所を読み込むって時点で無理
2022/07/23(土) 20:34:13.97ID:???
imgには::after疑似要素使えないもんなぁ
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況