X

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

■ このスレッドは過去ログ倉庫に格納されています
2021/11/09(火) 14:10:27.98ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
https://mevius.5ch.net/test/read.cgi/hp/1627551978/

■関連スレ
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
2022/01/13(木) 14:35:59.25ID:???
css変数ってあんま使わんですか？
2022/01/13(木) 16:26:10.16ID:???
>>538
規模によって変わる質問など無意味
2022/01/13(木) 17:38:33.58ID:???
>>539
cssの変数定義ってそのままファイルに残っちゃうのがね
ファイル容量的にsassからcss吐き出した方が有利だからでは？
cwv対策にcssファイル小さい方がいいしね
2022/01/13(木) 17:58:27.48ID:???
jsからcssに数値渡したい時は使うようにしてるな
styleを書き換えずにcss変数を書き換える
元のcssは上書きされない
2022/01/13(木) 18:26:12.59ID:???
>>541
共通する部分には便利なので使っます
2022/01/13(木) 19:14:18.83ID:???
ブログカードのflexでのデザインについて
ブログカードを包む要素は.wrapperです
以下のようにブログカードを２列にしたいと思います

■■
■■
■■

wrapperのwidthは640pxにしています。
ブログカード同士の横の余白は32pxにしたいです。
640-32/2として、space-betweenで並べれば中央に余白が出来ます。

こういうことをサクッと出来る計算とかないでしょうか？

wrapperの幅が変わることを想定しています
2022/01/13(木) 19:37:53.32ID:???
width: calc((100% - 32px) / 2);

だけど2列固定ならgridの方が簡単
wrapperに
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
するだけ
2022/01/13(木) 19:48:01.81ID:???
>>545
レスポンシブにはしますけど、スマホでもpcでも2列固定ですね
ありがとうございました
2022/01/13(木) 20:06:41.27ID:???
>>545
すみません、これだとコンテナからはみ出ますね
調べます
2022/01/13(木) 20:45:41.77ID:???
すみません　私のミスでした
2022/01/14(金) 00:46:39.02ID:???
レスポンシブれてない
2022/01/14(金) 05:20:43.51ID:???
Gridのfrってなんの略？
ググったら
>外径を表す単位でフレンチと読みます
って医学関係の用語が引っかかる
2022/01/14(金) 08:54:13.88ID:???
>>550
フレーム
2022/01/14(金) 15:53:12.49ID:???
>>539
くっそー、、いつの間に出来てたんだ。。5年前くらいになんで無いんだよって思ってたわ
IＥ未対応ならまあ無理だったが。その後はscssで対応してた　
今後はこっちつかう。scssもjQueryと同じ運命ただるだろう。サンクス
2022/01/14(金) 16:45:35.85ID:???
>>551
ありがとうございます
これでまた一歩、CSS Gridを覚える気力が湧きます
2022/01/14(金) 20:59:20.88ID:???
ブログカードの高さというのはheightで固定するものでしょうか？
ありがちな方法を教えて下さい。

ブログカードの中に画像と、記事タイトルと、投稿日などを含めるかと思います。

画像
記事タイトル
投稿日

と言った並びになることが多いと思うのですが、ブログカードを固定するのか、これらの内容物の高さを固定しているのかよくわかりません。

参考にしているサイトを調べてみたんですが、ブログカードも内容物に対してもheightの指定が見当たらなかったです。
でも、カードの高さは揃っています。

https://arrown-blog.com
ここっす
2022/01/14(金) 22:16:11.56ID:???
heightで固定しないね
2022/01/14(金) 22:31:08.97ID:???
flexで、並んでるやつは高さが揃うようになってるだけ
2022/01/14(金) 22:39:45.53ID:???
>>532
レスありがとうございます。
ご親切に詳しく教えて頂き感謝です。
実はご指摘頂いた有料スクールも選択肢に入れていて、
独学をもう少し進めて不明点がぬぐえないならスクールに通うか、訓練校に行こうか、
と考えている次第です。
いずれにせよ決断はもう少し様子を見てからになりそうです。
大変参考になりました。
ありがとうございました。
2022/01/14(金) 22:46:57.73ID:???
金かけて行くようなもんじゃない
やりたいことググればすぐに上達する
逆に何がしたいか目的がない奴は金かけても無駄金になるぞ
2022/01/14(金) 23:46:58.89ID:???
YouTube で有名な、雑食系エンジニア・KENTA の有料サロンの、
Ruby on Rails 初心者用コースには、3千人が参加しているけど、

確か、HTML, CSS/SASS, JavaScript は、Progate・ドットインストールだったかな？
動画を参照して

KENTAは、200万円の学校をぼったくりと言って訴えられているw
マコなりの学校は80万円とか？
2022/01/15(土) 00:34:33.76ID:???
>>557
スクールは金の無駄だからやめとけ
その金を作業環境やプログラム、デザイン系の専門書
またはアドビCCに費やした方がマシ
職業訓練校なりスクールなりどっちでもいいが
コーダー1本で仕事なんてできないから
どのみちプログラムやデザインの知識が必要になってくるし
まったく素人から始めるなら
そのための専門書が年間10万近くかかってくる
2022/01/15(土) 00:55:43.68ID:???
焦ると学校の餌食になる
お笑い、声優、youTuber、プログラムなどスクールが市場にできるということはそういうことだ

ネギ背負った夢見る鴨が鍋に自分から入るのが養成スクール
2022/01/15(土) 05:32:03.93ID:???
2008年ぐらいのphpを見てたら
html内のstyle/cssの前に
/*<![CDATA[*/
とかあるけど、これは何？ブラウザへのおまじない？
2022/01/15(土) 06:37:15.30ID:???
>>562
後ろのどっかに/*]]*/があるはず
CDATAセクションでググって
2022/01/15(土) 07:18:43.31ID:???
>>556
flexだと自動的に揃うんですか
ブログカードは固定したほうがいいですか？一般的に
2022/01/15(土) 09:47:42.41ID:???
同じヒエラルキーの要素がいくつか横並びするなら
高さは揃ってる方が見映えいいんじゃね
ブログに限らず
2022/01/15(土) 10:39:27.71ID:???
実験してみますです
2022/01/15(土) 10:42:58.89ID:???
最初は人に教わる環境は必要だと思うぞ
1人だと頓挫するから鞭売ってもらう必要がある

教科書やネットに載ってない重要な事はたくさんある
それと参考書やﾈｯﾄが人に現場で使わない無駄な情報が多すぎる
2022/01/15(土) 10:43:54.93ID:???
かといって高額なぼったくり塾にはつかまるなよ
2022/01/15(土) 10:46:15.35ID:???
可変しやすい記事タイトル部分部分だけ切ることにします
文字数制限ならoverflowhiddenなり
2022/01/15(土) 10:51:00.77ID:???
CSSが次から次と新しいの出してくるけど
リリース情報とかどこでチェックしてる？
2022/01/15(土) 10:51:55.23ID:???
ころすけなり
2022/01/15(土) 11:15:08.11ID:???
画像の大きさにブログカードを合わせるのか、ブログカードの大きさに画像をあわせるのかどちらなんでしょうか？
2022/01/15(土) 11:21:20.63ID:???
デサインに合わせる
2022/01/15(土) 11:27:26.35ID:???
>>557
ちなみに年齢にいくつぐらいなんだろう？
年齢が高いのなら未経験は給与は下がるだろうから折り合いつけ無いといけないよ
年齢が若く就職根ざしてるなら訓練校も悪くなかったよ

学校によるんだろうけど学校に企業説明に来てくれる企業もあって
家で悶々とさせているよりは就職を考えるときのハードルも下がった
ただし他の人も行ってるけど学ぶ姿勢がゆるい人も多いから
それに影響されずに積極的に授業外でも課題やったり質問していく姿勢持ってたら悪くないと思う
何より悩んだ時に人に聞ける環境は貴重だと感じた
2022/01/15(土) 11:28:53.07ID:???
>>572
デザイン次第
2022/01/15(土) 12:03:29.99ID:???
>>573
では枠が最初ですよね。
枠に合わせて画像を縮小させることで、画像のアスペ比が崩れる可能性はありますが、その点はどうしてますか？
2022/01/15(土) 12:39:36.80ID:???
アスペ比とかキモイ略つかうな
2022/01/15(土) 13:06:48.19ID:???
>>576
画像の縦横比を揃えるか、object-fitか
2022/01/15(土) 13:45:39.42ID:???
>>578
どうもです。

https://webdesignday.jp/inspiration/technique/css/7976/
いい記事だったんで張っておきますね。
2022/01/15(土) 14:23:05.96ID:???
アイキャッチがない場合の表示方法ってどうしてますか？
ブログサービス問わず使える方法といえば、背景画像の設定くらいしか思いつかないのですが
2022/01/15(土) 14:43:05.40ID:???
まあ画像じゃなくてもいいですね
アイキャッチないです、という表示を出来れば

positionなど使ってみます
2022/01/15(土) 17:55:48.15ID:???
>>563
亀レスすまんです
たしかにこのphpのhtmlタグにはxhtmlと書いてあるから
CDATAの中にある文字列はエスケープせずにそのままコードとして受け取ってくれ、みたいな感じ？
2022/01/15(土) 20:30:05.09ID:???
ブログカードをデザインする場合、左の赤ボックスと右の黒ボックスはどのくらいの比率にしますか？
赤は固定、黒はflex-grow:1;などで目一杯伸ばしてみたんですが、これだと小さいデバイスで見た場合に、黒だけ縮み、画像の大きさはそのままです。



画像は縦横比を4:3にするときれいに見えるということで、heightとwidthを240:180程に固定していたのですが、上記の問題があります。

flexで1:3位の割合で割り振るのが無難でしょうか？
これだと黄金比云々は捨てることになりますが。
https://i.imgur.com/wuTRT54.jpg




https://ideone.com/r9tL47
2022/01/15(土) 20:36:17.09ID:???
デザインの質問やんけ
スレ違い
2022/01/15(土) 20:36:46.74ID:???
黄金比に縛られると凡庸なデザインばかりになるぞ
あくまで目安だ
2022/01/15(土) 20:47:29.28ID:???
>>584
もうお前がどっか行けばいい
2022/01/15(土) 20:48:30.49ID:???
>>586
お前もついて行け
2022/01/15(土) 20:58:49.58ID:???
自分がどういうデザインにしたいかで決めればいいのに
画像もレスポンシブにしなくていいの？
2022/01/15(土) 22:06:34.13ID:???
黄金比無視してやります
2022/01/15(土) 23:02:33.85ID:???
教えてちゃんには酷やがその辺のサイト見たらわかることや
2022/01/15(土) 23:28:47.27ID:???
>>590お前スレタイも読めないの？安価もつけられないビビりキッズ君には酷なことやがw
2022/01/15(土) 23:54:33.89ID:???
自分だったら
画像のwidthは％単位、heightはautoにするかな
2022/01/16(日) 00:06:06.88ID:???
>>590
標準語を使おう
2022/01/16(日) 10:06:28.43ID:???
>>588
画像もレスポンシブにしますね。
画像をレスポンシブにする＝黄金比は捨てる、ちいうことになるんでしょうか？
2022/01/16(日) 10:11:26.29ID:???
>>592
画像はアイキャッチなので、objectfitを使います。
画像の横幅100%ということは、画像を包む要素にpxで幅を指定することになりますよね？
2022/01/16(日) 10:30:06.80ID:???
>>594
はい、レスポンシブ対応なら崩れるわ
正解なんて無いから好きにすりゃいいよ

どうしてもデザインが気になって決めかねてるのなら
自分が気に入った既存のWebサイトの比率を参考にしたらどうかね
2022/01/16(日) 10:34:26.10ID:???
>>596
比率なら崩れないとは思うんですが
2022/01/16(日) 10:42:28.77ID:???
>>583
PCもタブレットもスマホも全て画面が縦横比同じならわかるけど
現実は違うのでそこに同じ比率を保とうとすると無理が出るのは当然。（しかも1：1.6なんて無謀）
2022/01/16(日) 10:46:41.82ID:???
>>597
横長（PC）用のデザインに縦長（スマホ）用のデザインを同じ比率でそのまんま突っ込んだらどうなるか想像してみたらいい。
仮に黄金比が美しいと仮定したとしても読みつらいよ。

webはアート作品ではない。　見て美しいね。で終わるなら糞だ。
メディアであり情報提供してアクションさせてなんぼだ
2022/01/16(日) 10:49:50.25ID:???
>>597
崩れるから質問に来たんとちゃうの？
崩れなくてそれを良しとするのなら、そもそも質問にくる必要ないと思うのだが

あと文字サイズも考慮に入れて考えな
2022/01/16(日) 11:59:37.87ID:???
>>591
ブログカードのheightはどうやって決めてますか？
autoだと、縦長の画像を使ったときにブログカード全体が伸びてしまうので、どこか絶対値で固定しないといけないですが

>>599
>>600
妥協してやります
2022/01/16(日) 12:39:06.61ID:???
作りたいデザインに合わせて決める
2022/01/16(日) 12:43:07.88ID:???
8バイマン、黄金比マンになったのか？
2022/01/16(日) 12:58:26.77ID:???
バカの一つ覚えみたいに何でも黄金比が正解と思ったら大間違いだからな
球体を見ろ。あんなに美しいのに黄金比なんかじゃない。
女を見ろ。花火見ろ、自分のPCモニター見ろ。
全く黄金比じゃない。
周囲のあらゆる条件が揃ってそれぞれ出番となるのだ
2022/01/16(日) 13:24:41.25ID:???
>>601
max-heightやmax-width使わんの？
2022/01/16(日) 13:52:29.88ID:???
>>605
使ってみます
ブログカードのうち、大枠に指定するもんなんですかね？
2022/01/16(日) 13:53:36.84ID:???
object fit使うから画像にしときます
2022/01/16(日) 15:33:39.12ID:???
数十秒で答えが出るような事は、精査してから書き込みなさいよ
LINEじゃないんだから
2022/01/16(日) 15:52:42.19ID:???
>>608
優しくねえやつは去れよ
要らねえんだよお前
2022/01/16(日) 15:57:39.02ID:???
専スレ持ちのあの人だろうから
専スレのノリで質問しちゃうんだろうね

>>609
君も優しくなりなさんな
2022/01/16(日) 16:25:24.07ID:???
>>609
そういう優しさ強要の煽りレスって、質問者と同一人物と見なされて
結果、誰にも相手にされなくなるんだけど、そういうのを狙ってるの？
それって質問者にとって全く優しくないんだけど、自覚はある？
2022/01/16(日) 16:54:30.54ID:???
>>611
どうでもいいことでスレを汚すお前はどうなんだ
ただの荒らしは去れや
2022/01/16(日) 17:02:33.79ID:???
>>609
黄金比マンの本音はこれか　氏ねよ
2022/01/16(日) 17:02:58.75ID:???
>>611
いやいや質問者の自演だからw
2022/01/16(日) 17:06:46.35ID:???
>>608
優しくねえなあ
死ねよ
2022/01/16(日) 17:07:36.43ID:???
このスレはスレタイも読めねえキチガイが常駐して荒らしてるだけだな
2022/01/16(日) 17:08:49.38ID:???
質問者が無駄なレスを注意されてるのを
キレて煽っちゃダメだろう
2022/01/16(日) 17:12:45.07ID:???
>>614
いや、頭ごなしに同一人物認定するのもどうかと思ってさｗ
2022/01/16(日) 17:18:09.71ID:???
実際に同一人物かどうかは知らんが、こうなってくると
せっかく作ったブログカードのサンプルも貼る気失せるな
2022/01/16(日) 17:23:33.17ID:???
>>612
なるほど、忠告が質問者の利益になるというのが
全く理解できないのなら、確かにどうでもいいことだねｗ
2022/01/16(日) 18:42:11.12ID:???
画像というのは縮小限界のようなものがあるんでしょうか？
chrome(vivaldi)のモバイルエミュで画面を縮小してくと、一定以下のところで縮小がとまります。
ブログカードは、今試行錯誤中です。
2022/01/16(日) 19:14:43.36ID:???
>>609だが俺は質問者じゃないけどな
「どんな質問にも優しく答えるスレ」って書いてるのに一文字も従わず偉そうにしてる阿呆の不細工な顔よ
偉ぶる前にそのデブのお腹どうにかしろよみっともねえな
俺は今日2レスしかしてない
他ののレスは知らん
2022/01/16(日) 19:15:27.95ID:???
>>610
俺に強要すんなよ
他に注意する奴らがいるだろ
と言ってもそいつは1人だけなんだろうけど
2022/01/16(日) 19:17:29.44ID:???
>>611
質問者が論点じゃねえんだわ
スレのルール無視でググレカスなんて偉そうにできる立場じゃねえだろ
分かんねえならスレに来るなよ
そういうスレだろここ
625609
垢版 |
2022/01/16(日) 19:23:42.49ID:???
>>621
LINEやってるか？
ここで質問した方がいいぞ
このスレはキチガイ1人が荒らしてるっぽい
5ちゃんねる運営がクソ過ぎてLINEのURL貼れねえわ

LINEのオープンチャットから行けばいい
オープンチャット「プログラミング初心者の集い」
2022/01/16(日) 19:27:07.90ID:???
こうしてどんどん5ちゃんから人がいなくなる


まあ知らんけど
2022/01/16(日) 19:27:21.16ID:???
ルール厨が1番ルールを無視して、すぐ上の質問にも答えず
偉そうに説教垂れて荒らしてるっていうｗ
2022/01/16(日) 19:43:32.57ID:???
こんな日本語も読めねえからな


回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
2022/01/16(日) 19:48:40.75ID:???
初心者にはLINEのオープンチャットの環境が一番いいよ
基本的にここと違って大人が多い

https://i.imgur.com/VWgZ8y8.jpg
2022/01/16(日) 19:51:51.88ID:???
そもそもいったい何のためのルールなんだ？っていうね
何をもって「優しい」のか「暴言」なのかは主観によるのに
他人に俺様ルールを強要するような奴は5chなんて向いてない
2022/01/16(日) 19:52:53.49ID:???
object-fit使うと枠の下に余白ができるんですが、これはなんでしょうか？
アスペクト比と関係ありそうですが、調査中です。

computeではpaddingはありません。

https://i.imgur.com/jvOwgpV.jpg

https://ideone.com/W62DMT
2022/01/16(日) 19:53:10.90ID:???
>>630
スレの>>1すら読まないお前は5ちゃんねるすら向いてない
2022/01/16(日) 19:56:15.90ID:???
LINEのオープンチャットやってるから、LINEみたいな質問してる
ってことか。理解した。
2022/01/16(日) 19:57:23.30ID:???
>>631
その部分のソース出せ
2022/01/16(日) 19:57:57.27ID:???
あ、ごめん。出てた
2022/01/16(日) 20:04:25.66ID:???
>>634
出せじゃねえよカス
消えろや
2022/01/16(日) 20:12:48.83ID:???
>>631
emp_image imgにdisplay: block;かflex;かtable;追加してみ

>>636
質問に答えない人はちょっと黙ってて
2022/01/16(日) 20:18:35.13ID:???
使えねえなあ！
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況