2ちゃんねる ■掲示板に戻る■ 全部 1- 最新50    

■ このスレッドは過去ログ倉庫に格納されています

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

1 :Name_Not_Found:2021/11/09(火) 14:10:27.98 ID:???.net
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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

2 :Name_Not_Found:2021/11/09(火) 14:58:00.86 ID:???.net
>>1はできる子

3 :Name_Not_Found:2021/11/09(火) 15:25:16.51 ID:???.net
できる子ちゃん

4 :Name_Not_Found:2021/11/09(火) 22:47:10.59 ID:???.net
>>1ができる子って噂を聞いて走ってきました

5 :Name_Not_Found:2021/11/09(火) 23:05:07.43 ID:???.net
<input type="text" value="あああ&nbsp;&nbsp;あああ">

これをブラウザで表示してテキストボックスの「あああ&nbsp;&nbsp;あああ」の部分を
テキストエディタ(使ってるのはterapad)にコピペすると「あああ??あああ」と表示されてしまいます。
半角スペースは2つ並べても1つ分しか表示されないので&nbsp;を使いたいんだけど
他にコピペしても文字化けしないかつ半角スペースを2つ以上連続で表示できるようにするにはどうすればいいんですの?

6 :Name_Not_Found:2021/11/09(火) 23:06:35.63 ID:NFl2iet+.net
訂正ブラウザで表示されている部分は
「あああ&nbsp;&nbsp;あああ」です

7 :Name_Not_Found:2021/11/09(火) 23:07:37.21 ID:NFl2iet+.net
もう1回訂正
ブラウザで表示されているのは「あああ あああ」です

8 :Name_Not_Found:2021/11/09(火) 23:57:04.33 ID:???.net
普通に半角スペース2つ並べればええで(大嘘)

9 :Name_Not_Found:2021/11/10(水) 00:38:46.99 ID:???.net
そもそもinputのvalueは半角スペース連続してても圧縮表示されないでしょ?

&nbspはU+00A0で通常のスペース文字ではない
firefoxやieならコピー時にU+0020に変えてくれるけどchromium系はそのまま
webやるのにユニコードに対応してないterapadは捨てましょう

10 :Name_Not_Found:2021/11/10(水) 01:46:27.93 ID:???.net
できる子乙なの

11 :Name_Not_Found:2021/11/10(水) 13:56:26.71 ID:???.net
>>9
横からだけど、勉強になった

12 :Name_Not_Found:2021/11/10(水) 15:59:46.29 ID:???.net
>>9
なんでブラウザのそんな細かな挙動知ってんの?怖っ

13 :Name_Not_Found:2021/11/10(水) 16:02:00.62 ID:???.net
>>12
無知で草
このネタそこそこ有名やぞ

14 :Name_Not_Found:2021/11/10(水) 21:57:50.86 ID:???.net
TeraPad は、新しめの文字コードに対応していないので、やたらと? と表示される。
アプリ自体がかなり古いので、使わない方がよい

漏れは、VSCode・サクラエディタを使っている

15 :Name_Not_Found:2021/11/10(水) 23:19:24.48 ID:???.net
ほげーterapadだめなんだ!

16 :Name_Not_Found:2021/11/11(木) 00:42:08.10 ID:???.net
秀丸秀丸

17 :Name_Not_Found:2021/11/11(木) 00:58:38.51 ID:???.net
PC歴長いけど、秀丸ってシェアウエアなのもあって
未だに試したことすら無い

18 :Name_Not_Found:2021/11/11(木) 01:24:14.04 ID:???.net
選択文字の質問です
1
<div><p>あいうえお</p></div>
2
<div>
<p>あいうえお</p>
</div>
という文書をtest.htmlとして保存してブラウザで開いた後
あいうえおをタブルタップないしはトリプルタップで選択しエディタにコピペをするとChrome系とFirefoxで挙動が異なります
SRIron(Chrome系) 3回タップが必要
1はあいうえおの後に2回改行が入る
2は改行は入らず
Firefox ダブルタップでもあいうえおは選択される
1は改行は入らず
2はダブルタップ時は改行は入らず トリプルタップ時はあいうえおの前に改行2個 後に改行1個
どういう法則で改行が入ったりしたりしなかったりするのか
本来どちらの挙動が望ましいものなのか
バグなのか
その辺を知りたいです。

19 :Name_Not_Found:2021/11/11(木) 01:39:40.28 ID:???.net
ブラウザによって挙動は異なりますがバグではありません仕様です

20 :Name_Not_Found:2021/11/11(木) 06:34:23.44 ID:dljWC3V8.net
わたしは禿丸を使ってます。
おかげでハゲました。

21 :Name_Not_Found:2021/11/11(木) 10:14:10.48 ID:???.net
>>14
うちもその組み合わせだわー
テラパッドは有名だけど縁がなくてほとんど使ったことないし
秀丸は(解除法知ってるけど)出向先で使えないことが多い(大手はシェアウェアNG多い?)ので記憶から消えてった
機能覚えて損のないサクラに落ち着いた
ゴリゴリ書くときはvscode

22 :Name_Not_Found:2021/11/11(木) 17:27:52.73 ID:dljWC3V8.net
>>21
あなたは禿丸の作者から特別にハゲ認定されてますか?

23 :Name_Not_Found:2021/11/11(木) 17:43:56.54 ID:???.net
俺は秀とvscだなー

24 :Name_Not_Found:2021/11/11(木) 20:05:15.40 ID:???.net
★という文字を抽出して、背景色を変更できますか?
セレクタはありません。
typoraというエディタを使っていて、テーマをカスタムしたいのですはい

25 :Name_Not_Found:2021/11/11(木) 20:09:49.76 ID:???.net
js使えばできるじゃね?
でも抽出じゃなく普通にclass名設定して適用するのがいいと思うよ

26 :Name_Not_Found:2021/11/11(木) 20:39:56.81 ID:???.net
>>25
class名は指定できないっぽいので、むずそうですね
どうもでした

27 :Name_Not_Found:2021/11/13(土) 01:22:28.80 ID:???.net
css3のanimationについて質問です
#test{
position:absolute;
}
<div id="test">test</test>

ページを読みこんで3秒後に一瞬でposition : absoluteがfixedに変わるようにするにはどうすれば良いのでしょうか?

28 :Name_Not_Found:2021/11/13(土) 02:01:58.75 ID:???.net
>>27
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_animated_properties
positionはanimate可能なプロパティではありません
jsでスイッチさせてください

29 :Name_Not_Found:2021/11/13(土) 02:03:54.14 ID:???.net
jsでスタイル変えるしかなさそう

30 :Name_Not_Found:2021/11/13(土) 05:20:41.33 ID:???.net
最初からfixedで良くね

31 :Name_Not_Found:2021/11/13(土) 07:36:49.73 ID:???.net
>>28-30
アドバイスTHX

32 :Name_Not_Found:2021/11/13(土) 10:38:40.76 ID:???.net
>>14
vscodeは、HTML新規作成の際、utf-8が前提になってるのがちょっとな
文書自体をeuc-jpとかで新規作成するならterapadで作成してる

33 :Name_Not_Found:2021/11/13(土) 14:23:16.76 ID:???.net
2000年代かな?

34 :Name_Not_Found:2021/11/13(土) 16:16:49.79 ID:???.net
いや、そいつはterapadを使い続けたいからeucjpでとか言ってるだけだろ

35 :Name_Not_Found:2021/11/13(土) 16:27:03.50 ID:???.net
VSCodeの文字コードなんて設定を変えりゃいいだけの話だし
terapadだって初期設定はsjisだったのに何言ってんだっていう

36 :Name_Not_Found:2021/11/13(土) 16:28:58.08 ID:???.net
今時のHTMLはcharset指定しなければutf-8だよな、と思ったら HTML LS での新規仕様なだけなのか

37 :Name_Not_Found:2021/11/13(土) 16:58:44.89 ID:???.net
>>33 >>34
お前らが世間知らずなだけ
自分で作成できる小さいサイトしかやった事無さそう

38 :Name_Not_Found:2021/11/13(土) 21:25:24.01 ID:???.net
いや、だって05年あたりからこの方、euc-jpなんてキャラクタセットはどこぞの大学の95年あたりの古代から更新されてないページくらいでしか見た覚えが無いんだが(良くあったよな文字化けページ

39 :Name_Not_Found:2021/11/14(日) 00:15:32.29 ID:???.net
>>38
だから世間知らずだって言ってんだが。
たぶんECとかメルマガとかやったことないだろ?

40 :Name_Not_Found:2021/11/14(日) 00:36:16.15 ID:???.net
メルマガ(笑)

41 :Name_Not_Found:2021/11/14(日) 01:00:28.25 ID:???.net
>>40
いちいち腹立つやつだな
いきなりケンカ売ってきて何なのおまえ?
こんなとこでいきなり相手に不快な思いさせてなにがしたいん?

42 :Name_Not_Found:2021/11/14(日) 01:09:29.26 ID:???.net
必要な道具を選んで使えればいい、て話だしね

43 :Name_Not_Found:2021/11/14(日) 03:11:21.65 ID:???.net
専門分野だけどメルマガ、
週に1度20000通ぐらい送ったうち
5000通ぐらいはクリックして内容見てくれているのは嬉しいけどな

44 :Name_Not_Found:2021/11/14(日) 03:24:11.93 ID:???.net
ケンカ売ってるヤツがケンカ売られてキレんなよ

45 :Name_Not_Found:2021/11/14(日) 10:25:04.41 ID:???.net
>>43
表面しか知らない馬鹿がメルマガなんてもう古いとか言って勝手に撤退していくからいいよな
(そういう奴はどうせSNSでモノマネや半端な事してまた撤退が関の山)

46 :Name_Not_Found:2021/11/14(日) 10:28:38.44 ID:???.net
>>44
俺はこう言う理由があるからterapadもまだ使ってるって自分の事を書いたら
2000年代だの、こいつ呼ばわりされて不快な思いしたから全力で立ち向かうわ

47 :Name_Not_Found:2021/11/14(日) 12:44:57.68 ID:???.net
いやたち向かわんでいいよ

俺もメルマガやってるけどメーラー対応面倒よね

48 :Name_Not_Found:2021/11/14(日) 13:47:13.59 ID:???.net
>>46
会話が成立しない猿に使う元気があったらコード書いてるほうが有意義

49 :Name_Not_Found:2021/11/14(日) 16:34:51.99 ID:???.net
自分のルーティンみたいもんもあるだろうし
ツールなんて好きなの使えばいいとは思うが
vscode使わず古いterapad使い続ける理由が
>>32で、文字コードごとに使い分けてるなら
煽りたくなる気持ちも分かる

50 :Name_Not_Found:2021/11/14(日) 17:15:10.92 ID:???.net
わかるわー

51 :Name_Not_Found:2021/11/14(日) 18:00:17.35 ID:???.net
>>49
vscode使わずなんて書いてないんだけどな。
euc-jpでドキュメントのたくさん新規作成する時や小さいウインドウでサクっと作業するときにterapad使ってるってだけで。

vscodeは行番号の背景色やスクロールバーの色など細かい部分でカスタマイズは必要だったが概ね気に入ってるよ。
マルチカーソルと画面分割、ソース折りたたみ、SassのコンパイルやEmmetが便利だし。
正規表現やフォルダごと置換はAdobeのDWと比較すると画面が見にくいが全部揃ってて軽いのってこれくらいだしな。

さくらはDOMツリーが見やすいのは良いがメインにはならない。
秀丸は7年前くらいの当時はフリーのエディタで正規表現使えるのは希少だった
Sublime_textはvscode出てから使わなくなった。

これら色々使ったうえでterapad「も」使ってる。文句ある?

52 :Name_Not_Found:2021/11/14(日) 18:06:22.20 ID:???.net
そういやSublime_textも文字コード変換に弱かった。
めんどくささ、見やすさいう意味で変換や置換関連で一番強かったのはDW。

これはソースの整理も強い。例えばpタグを削除(クラスIDあるなし、閉じタグ含め)や
マークダウンもボタン1つで除去できたな。
ソフト自体が重すぎて使わなくなったが。

53 :Name_Not_Found:2021/11/14(日) 18:39:55.70 ID:???.net
煽られたくなければ煽り返してないで、詳細端折らず、そう書いとけばいいのに
最後にまた余計な一文で煽り返してるっていうね
技術以前に煽り耐性を身につけた方がいい

54 :Name_Not_Found:2021/11/14(日) 20:13:58.45 ID:???.net
>>51
> 文句ある?
言い方の口調が気に食わない
敬語で話せ

55 :Name_Not_Found:2021/11/14(日) 20:30:18.51 ID:???.net
>>54
文句あります?

56 :Name_Not_Found:2021/11/14(日) 22:01:46.10 ID:???.net
なんのスレだっけここ

57 :Name_Not_Found:2021/11/14(日) 23:07:16.78 ID:???.net
スレタイ読める勢が黙るスレです

58 :Name_Not_Found:2021/11/15(月) 10:21:32.73 ID:???.net
Macなので文字コード変換はmi使ってる
色々試したけどこれが文字コード周りはこれが良かった

59 :Name_Not_Found:2021/11/15(月) 10:28:58.36 ID:???.net
macは文字コード改行コードもmiが便利やね
BOM削除とかもあったっけか

60 :Name_Not_Found:2021/11/15(月) 12:47:20.01 ID:Hk05C2Jv.net
jedit
いいですよー

61 :Name_Not_Found:2021/11/15(月) 14:15:12.66 ID:???.net
jedit前はよく使ったけど、まだあるんだ

62 :Name_Not_Found:2021/11/15(月) 21:10:38.08 ID:EMV4y3z+.net
サイトを作るときのフォントサイズについてなんですが、IE ,fire fox ,Chromeに対応する場合はemを使うべきでしょうか?
pxだとブラウザごと端末ごとに変える必要がありそうなので使いたくないんですが

63 :Name_Not_Found:2021/11/15(月) 21:17:44.58 ID:???.net
静的htmlで作成する場合
/index.html
/css/style.css
/image/top.jpg
という構成で

background-imageを指定するとき
1:background-image: url(/image/top.jpg)か
2:background-image: url(..//image/top.jpg)
サーバ上ではどちらも見えるけど

1はローカルでは反映できない、2はローカルで反映できるということになるよね
現場の人はどっちで作るべきなの?

64 :Name_Not_Found:2021/11/15(月) 23:26:25.18 ID:???.net
>>62
べきって話はないけど好きに使うといいよ

>>63
2は/が1個多い
1はローカル関係ないよ
サーバー上でも階層変えたらだめなのでおすすめしない
逆にいついかなる時もドメイン直下に置いてあるファイルにアクセスしたい時はそれでもいいと思うよ

65 :Name_Not_Found:2021/11/15(月) 23:33:32.09 ID:???.net
>>62
色々な考え方があったり、場面によって使い分けたりとかあるので
これを使うべき!みたいなもんは無い
「css font-size 単位」とかで検索してみるといい

66 :Name_Not_Found:2021/11/16(火) 12:19:48.53 ID:???.net
>>63
動的ばっかりやってるからそのまま静的も1が多い。 
1は絶対パス。
最近のサイトは1つのコンテンツに対して読み込まれる側ではなく
読み込む側の位置が変わる事が多いからどこから読んでも同じパスになるように相対ではなく対パスにする事で
作業負担やミスが圧倒的に減るお

67 :Name_Not_Found:2021/11/16(火) 15:03:11.47 ID:???.net
肉付けされまくったサイトのcss指定が
../../../../../style.css
とかたまにあって吐くわ

部署ごとにあるかもしれませんが、魑魅魍魎状態

68 :Name_Not_Found:2021/11/16(火) 15:24:58.82 ID:???.net
cssでの指定はcssファイルからが起点になるのは仕方無いの?
相対なら一度 ../ で上がらないといけないけど
ルートディレクトリなら心配しなくて良いのか・・

69 :Name_Not_Found:2021/11/16(火) 15:39:52.63 ID:???.net
絶対パスしか使いたくないでござる

70 :Name_Not_Found:2021/11/16(火) 18:07:36.15 ID:yeBr81ND.net
スマホ向けで水平・垂直に切り替えた時の挙動の対応方法を教えてください。

常にディスプレイに対して高さ100%表示にしたいです。
この時引っかかるのが「ロケーションバーや下のステータスバー」です。
垂直状態から水平に向きを変えた時、
その要素分空間が空いてしまいます。

ならないブラウザもありますが、OS標準であるSafariではなってしまいます。
常にディスプレイサイズに対して高さ100%にする方法ってありますか?

71 :Name_Not_Found:2021/11/16(火) 19:45:18.15 ID:???.net
PC用のグローバルメニューを作っているんだけど、
昔はul>li*5みたいな形で作っていたものを
navを使おうと思ったらどう使えばいいの

header
section.globalNav(幅指定無し)
section.container(幅1024px)
ul(flex)>li*5
みたいなのを考えたけどnavタグってどこに使えば・・・

72 :Name_Not_Found:2021/11/16(火) 21:38:56.22 ID:???.net
>>70
とりあえずコレでも

これからはこの実装がオススメ!ブラウザの高さいっぱい、iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html

73 :Name_Not_Found:2021/11/16(火) 21:45:37.94 ID:???.net
>>71
navはナビゲーションのセクションを表してるだけだから
section.globalNavをnavにするとか

74 :Name_Not_Found:2021/11/17(水) 03:29:24.42 ID:???.net
>>73
特に考えず、区切りはsection使ってたけど、
共通メニューは特別としてnav使う感じ?
navはコンテンツのsectionよりも上の存在、ヘッダーのナビゲーションと考えればいいのかな

75 :Name_Not_Found:2021/11/17(水) 05:23:19.38 ID:???.net
>>74
nav要素はsection要素と同じくセクショニングコンテンツ(コンテンツ区分要素)
section要素は他に適切なセクショニングコンテンツが無い場合に使う

とりあえずコレ読んでみるといいかも

HTML 要素リファレンス - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element#content_sectioning
<nav>: ナビゲーションセクション要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/nav

あとは「html セクショニングコンテンツ」とかで検索してみるといいよ

76 :Name_Not_Found:2021/11/17(水) 11:57:23.69 ID:???.net
あ?

77 :Name_Not_Found:2021/11/17(水) 12:19:50.89 ID:???.net
どした

78 :Name_Not_Found:2021/11/17(水) 12:55:42.84 ID:???.net
>>75
サンクス、気持ちすっきりしたわ
navに入れ替えました

79 :Name_Not_Found:2021/11/18(木) 16:37:44.48 ID:VouHkH1n.net
サイトを作るときのフォントサイズについてなんですが、IE ,fire fox ,Chromeに対応する場合はemを使うべきでしょうか?
pxだとブラウザごと端末ごとに変える必要がありそうなので使いたくないんですが

80 :Name_Not_Found:2021/11/18(木) 16:52:13.78 ID:???.net
既視感がすごい

81 :Name_Not_Found:2021/11/18(木) 22:29:09.01 ID:???.net
PXがいいよ

82 :Name_Not_Found:2021/11/18(木) 22:51:52.16 ID:???.net
デフォルトのフォントサイズは通常 16px じゃないの?
14 もあるかも知れないけど

それを、1 em/rem にすれば?

83 :Name_Not_Found:2021/11/19(金) 15:41:47.98 ID:???.net
>>79
cssで
body{font-size:12px}
ってすりゃいいだけ

84 :Name_Not_Found:2021/11/19(金) 15:43:17.71 ID:???.net
他のタグはデフォなんてつかわないだろうに
liのへんなマークとか使うか?

なんでフォントサイズだけはデフォ使う前提なんだよ

85 :Name_Not_Found:2021/11/19(金) 17:19:01.92 ID:???.net
>>84
ulとかolにlist-style: none;指定してるリセットCSS使えば?

86 :Name_Not_Found:2021/11/19(金) 20:32:25.29 ID:???.net
誰がどう読んでも84はそんなこと知ってると思うの

87 :Name_Not_Found:2021/11/19(金) 22:02:08.01 ID:???.net
>>85
読解力なさすぎ

88 :Name_Not_Found:2021/11/20(土) 00:09:12.12 ID:???.net
あぁ、そういう話か。デフォ云々は>>83で解決してると思ってたから、何言ってんだ?と思いつつ
適当に流し読みしてたら、自分が変なこと書いてたわ
めんごめんご

89 :Name_Not_Found:2021/11/20(土) 01:32:18.10 ID:???.net
youtubeトップ画面で1行に表示させる動画数を増やしたいと思い
:root * {--ytd-rich-grid-items-per-row: 6 !important;}
というcssをStylusで適用したのですが、右端に空欄ができていて、動画数も5個になっています
ちなみにCtrl+ホイールで縮小させると80%くらいでやっと6個になりました
どうやったら空欄を埋めれますでしょうか

90 :Name_Not_Found:2021/11/20(土) 01:46:20.18 ID:???.net
Stylus使ってなくても縮小すれば6個になるよ

91 :Name_Not_Found:2021/11/20(土) 16:36:35.38 ID:???.net
大事なことなので2回言いました、みたいになってる

92 :Name_Not_Found:2021/11/20(土) 16:58:54.05 ID:???.net
おまいら情弱だな。
俺がいい事教えてやろう
Stylusなんて使わなくても
ブラウザの虫眼鏡マークで80%くらいに縮小すれば6個になる
騙されたと思ってやってみ?

93 :Name_Not_Found:2021/11/20(土) 17:29:57.25 ID:???.net
>>89
その辺のYouTubeの仕様、元に戻ったかも
多分、以前の設定でイケる

94 :Name_Not_Found:2021/11/20(土) 18:02:04.06 ID:???.net
>>93
ほんとだ
今日開いてみたら元通りになってました
ありがとうございます
縮小すれば戻るとかクソ寒いレスしてくれた人もありがとうな

95 :Name_Not_Found:2021/11/21(日) 19:49:01.66 ID:???.net
livedoorブログなどでbootstrapは必要でしょうか?

96 :Name_Not_Found:2021/11/21(日) 20:02:53.17 ID:???.net
必要でしょうか?って言われたら必要ではない

97 :Name_Not_Found:2021/11/21(日) 20:28:00.30 ID:???.net
フリーでサイトのモック?を作りたいのですが、inkscapeなどがいいのでしょうか?
ワイヤーだけではなく装飾も作っておいたほうがいいんですよね?

98 :Name_Not_Found:2021/11/21(日) 21:04:17.94 ID:???.net
どういう答えを期待してるのかサッパリ分からんけど
無料で使えるソフトやサービスなんて限られてるんだから
色々試して好きなの使えばいいよ

99 :Name_Not_Found:2021/11/21(日) 23:03:36.74 ID:???.net
excel方眼紙でええ

100 :Name_Not_Found:2021/11/22(月) 04:49:31.95 ID:???.net
はい(´・ω・`)
サービス多すぎるからペイントでやったほうが良いインじゃないかなと

101 :Name_Not_Found:2021/11/22(月) 17:23:21.30 ID:???.net
Figma試してみるとか

102 :Name_Not_Found:2021/11/24(水) 10:49:42.35 ID:???.net
ブログのデザインをする場合、ペイントソフトなどでモック?を作りますか?
gimpでやろうと思うんですが、どうやってますか?
uxは持ってません

103 :Name_Not_Found:2021/11/24(水) 11:38:42.31 ID:???.net
俺は毎朝欠かさずUX飲んでから仕事始める

104 :Name_Not_Found:2021/11/24(水) 21:11:23.44 ID:???.net
デザインを仕事にしてるプロならphotoshop一択
そでなく自分一人で完結するならgimpでもなんでもいい

105 :Name_Not_Found:2021/11/25(木) 06:33:48.17 ID:???.net
ラスタのほうが色々描けるから、ベクタは選ばないってことですかね。

106 :Name_Not_Found:2021/11/25(木) 13:57:04.36 ID:???.net
>>105
巨大なラスター絵は、縮小すればベクターなもんさ

107 :Name_Not_Found:2021/11/25(木) 14:12:39.12 ID:???.net
photoshopでもベクター扱えるだろ

108 :Name_Not_Found:2021/11/25(木) 14:20:26.43 ID:???.net
XDとかfigmaとかじゃあかんのかモックん

109 :Name_Not_Found:2021/11/25(木) 17:50:45.88 ID:T8nIbur8.net
最近フォトショは純粋な写真編集にしか使ってないな
XD便利

110 :Name_Not_Found:2021/11/25(木) 18:40:42.01 ID:???.net
HTMLやCSSの話から外れると途端にレベル下がるなw

111 :Name_Not_Found:2021/11/26(金) 17:35:08.30 ID:???.net
次の画像のようなレイアウトを作りたいです
PC時
https://imgur.com/GzDfq0e
SP時
https://imgur.com/CQ0JELN

要素はこんな感じです
<div>
 <figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
 <h3>タイトル</h3>
 <p>親譲りの〜〜</p>
</div>

いまはJQueryで画面幅変更時に各要素を囲ってレイアウトしているのですが、
PC時
<div>
 <figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
<div class="wrap">
 <h3>タイトル</h3>
 <p>親譲りの〜〜</p>
</div>
</div>
SP時
<div>
<div class="wrap">
 <figure><img src="_img/gazou.jpg" width="600" height="400" ></figure>
 <h3>タイトル</h3>
</div>
 <p>親譲りの〜〜</p>
</div>

これをJQueryを使わずにCSSだけで作ることは可能でしょうか?

112 :Name_Not_Found:2021/11/26(金) 19:58:10.66 ID:???.net
grid

113 :Name_Not_Found:2021/11/26(金) 20:07:56.17 ID:???.net
jQueryいらん

114 :Name_Not_Found:2021/11/26(金) 20:32:16.07 ID:???.net
>>111
適当に作った
https://jsfiddle.net/ysmar453/

115 :Name_Not_Found:2021/11/26(金) 20:45:04.35 ID:???.net
bootstrapって使う必要性ありますか?
デザインが整うといいますが、自由度がないとも。

学習コストも問題だし(´・ω・`)bu

116 :Name_Not_Found:2021/11/26(金) 20:53:26.56 ID:???.net
広告少ない無料ブログだとどこがいいすか?
fc2かシーサーか

117 :Name_Not_Found:2021/11/26(金) 20:53:30.73 ID:???.net
bootstrapって今思えば、見た目をcssのクラス名にしたものを
複数個並べてレイアウトや表現するやり方と考えたら良いの?

それ以外に何かあったっけ?

118 :Name_Not_Found:2021/11/26(金) 21:13:53.09 ID:???.net
>>114
ありがとうございます
Gridの指定が複雑ですが、資料見ながら読み解きます!!

119 :Name_Not_Found:2021/11/26(金) 21:22:25.17 ID:???.net
よくわかんないんですけど、スマホでpcサイトを表示させたら離脱されるんでしょうか?
無料ブログのスマホ表示だと広告多くて

120 :Name_Not_Found:2021/11/26(金) 22:15:09.04 ID:???.net
離脱って何や

121 :Name_Not_Found:2021/11/26(金) 22:38:42.37 ID:???.net
>>115
どんなCSSフレームワークも憶えておいて損は無いけど
bootstrapを使う必要性があるか?って言われたら
使う必要は無いっていう答えになる

122 :Name_Not_Found:2021/11/26(金) 23:06:04.28 ID:???.net
>>116
無料のとこ端から登録して試してみたら?
結局、使ってみないと自分に合ってるかどうか分からんよ

123 :Name_Not_Found:2021/11/27(土) 00:21:26.49 ID:???.net
>>119
見る側からすると
今時スマホ対応すらできてない糞サイトか
と思ってそっ閉じ離脱するのはまあまああると思う

124 :Name_Not_Found:2021/11/27(土) 00:40:41.73 ID:vNMUtXZG.net
レスポンシブにするから分けて作るの激減してるね

125 :Name_Not_Found:2021/11/27(土) 00:54:42.17 ID:???.net
メディアクエリすら使わずにレスポンシブ化するとかね

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ | コリス
ttps://coliss.com/articles/build-websites/operation/css/media-queries-probably-dont-need.html

126 :Name_Not_Found:2021/11/27(土) 01:10:02.43 ID:???.net
CSS フレームワークなら、Bootstrap, Bulma も、ほぼ同じ

SASS の@import が無くなるから、Bootstrap 4 は、もう使えない。
@use に変わるけど、格段に難しいから、多くの人が脱落すると思う

Learn Bootstrap 5 and SASS by Building a Portfolio Website - Full Course, 2021/6
https://www.youtube.com/watch?v=iJKCj8uAHz8

5時間の動画だけど、@importを使っている部分があるので、そこは真似しない方がよい

127 :Name_Not_Found:2021/11/27(土) 01:23:57.59 ID:???.net
特定のキーワードが出てくると誰も聞いていないのに
独り言を書き込む、いつもの人か

128 :Name_Not_Found:2021/11/27(土) 07:23:09.19 ID:???.net
>>121
めんどくさそうなのでやめときます。

>>122
そうですね。
シーサーは広告入るみたいです。スマホには。

>>123
やはりデザインを変更する必要はありますか。

>>124
レスポンシブにすればスマホ版に広告はいらない可能性もありますね。

129 :Name_Not_Found:2021/11/28(日) 08:46:19.40 ID:???.net
<input type="range" min="0" max="10" step="1">スライダーで0のとき
disabledみたいなグレーにするにはどうやればいいんですか?
disabledだとグレーにはるけど操作もできないので

130 :Name_Not_Found:2021/11/28(日) 17:28:08.11 ID:???.net
javascript使う

131 :Name_Not_Found:2021/12/01(水) 21:33:25.30 ID:???.net
アーティクル部分のデザインなんですが、2つ目の例のようにデカデカと本文まで表示させるのと、1つ目のように横並びにするのとでは、どちらがいいんでしょうか?
個人的に好きなのは前者ではあります。情報が見つけやすいと考えますが、最新記事はサイドバーで表示させればいいという考えもあると思います。
ブログを作ります。

https://www.yamakei-online.com
https://tech.andpad.co.jp

132 :Name_Not_Found:2021/12/02(木) 14:32:17.00 ID:???.net
8の倍数ルールというのがあると思うんですが、これを使うとフォントサイズが8px 16p 24pxと極端になりませんか?
見出し1が24px、見出し2が16pxというふうに。

133 :Name_Not_Found:2021/12/02(木) 15:09:57.94 ID:???.net
4の倍数ってのもあってだな

134 :Name_Not_Found:2021/12/02(木) 15:16:08.54 ID:???.net
>>132
参考にどうぞ

デザインは8の倍数でできている | 1 pixel|サイバーエージェント公式クリエイターズブログ
https://ameblo.jp/ca-1pixel/entry-11837685575.html

135 :Name_Not_Found:2021/12/02(木) 15:18:42.31 ID:???.net
のちのBootstrapである

136 :Name_Not_Found:2021/12/02(木) 17:19:18.13 ID:???.net
960pxグリッドシステムってPCには今も最善?
まだワイドが無かった時代よね?
いくつぐらいが適切なんだろう
安いノートは1366ピクセルだから、1280ぐらい?

137 :Name_Not_Found:2021/12/02(木) 19:44:48.04 ID:???.net
webデザインはモック作ったほうが良いですか?
あと、好きなデザインがよく分からんのですが、嫌いを明確にしたら少し見えてきました。
やはり、情報を伝えるのが目的なのでテキストベースのサイトが好きですね。
好きよりも嫌いを明確にする意味ってなんですかね?


>>134
うーん、細かいとこは4bフ倍数も使いまbキ(´・ω・`)。。。。

138 :Name_Not_Found:2021/12/02(木) 20:03:15.72 ID:???.net
1の倍数がいいよ

139 :Name_Not_Found:2021/12/02(木) 20:10:21.60 ID:???.net
>>136
今の時代はYouTubeに合わせるのが1番良い

140 :Name_Not_Found:2021/12/02(木) 20:11:30.35 ID:???.net
>>139
ちょっと何言ってるかわかんない

141 :Name_Not_Found:2021/12/03(金) 07:22:34.58 ID:???.net
今一番見られてるコンテンツはYouTubeだしこの先も当分はそうだろう
世間に一番馴染みのあるコンテンツに合わせるのは常套手段だ

142 :Name_Not_Found:2021/12/03(金) 09:52:18.04 ID:???.net
何言ってんの

143 :Name_Not_Found:2021/12/03(金) 12:38:44.00 ID:???.net
>>141
お薬出しておきますね

144 :Name_Not_Found:2021/12/03(金) 12:56:25.69 ID:???.net
YouTubeで動画は見るけどサイトの作りはウンコだよな
使いづらい

145 :Name_Not_Found:2021/12/03(金) 14:17:59.99 ID:???.net
コレ思い出した
https://imgur.com/ixOZyBt

146 :Name_Not_Found:2021/12/03(金) 14:43:56.91 ID:???.net
世界で一番見られてるのはYouTubeだろ
だったら世界で一番馴染ある優れたサイトなのはここでしょ

147 :Name_Not_Found:2021/12/03(金) 15:05:11.92 ID:???.net
マクドナルド話法だな(画像略

148 :Name_Not_Found:2021/12/03(金) 16:02:23.07 ID:???.net
youtubeが優れてるのはコンテンツであってデザインではないでしょ?

149 :Name_Not_Found:2021/12/03(金) 17:07:17.89 ID:???.net
ちょっと前だけど
世界で一番みられているのはGoogleらしい
その次がYoutube
https://www.visualcapitalist.com/ranking-the-top-100-websites-in-the-world/

150 :Name_Not_Found:2021/12/04(土) 15:18:27.34 ID:???.net
でもこのスレでもこれが1番とかベストはコレだとか答えが出ないしな
そういう場合は1番売れてるものに合わせるのが定石

151 :Name_Not_Found:2021/12/04(土) 15:53:49.00 ID:???.net
じゃあ一番売れてるほうを使いますってなるよね

152 :Name_Not_Found:2021/12/05(日) 03:36:31.48 ID:???.net
グーグルが出てきた時
あまりのシンプルさにびっくりしたもんだ

153 :Name_Not_Found:2021/12/05(日) 03:49:12.58 ID:???.net
個人的にはUI以上に検索速度の速さにビックリした思い出

154 :Name_Not_Found:2021/12/05(日) 08:11:35.26 ID:???.net
NTTのGooのパクリサイトかと思ったわ

155 :Name_Not_Found:2021/12/05(日) 08:15:14.30 ID:???.net
GoogleはYahooの検索結果より圧倒的にページ数多くてびっくりした

156 :Name_Not_Found:2021/12/05(日) 09:17:27.98 ID:???.net
googleが出たとき、検索の速さは衝撃的だったね。感動したわ。
はじめはウザい広告もなかったからあっというまに浸透した。

157 :Name_Not_Found:2021/12/05(日) 09:57:47.24 ID:???.net
ティキストベースのサイトが好きってオカシイですか?
画像でごちゃごちゃしたサイトよりも、タイトルバナーすらテキストっていう、、。
それでいて、おしゃれに見える。

そんなサイト知りませんか(´・ω・`)

158 :Name_Not_Found:2021/12/05(日) 10:45:05.49 ID:???.net
テキストのバナー…???
テキストだったらテキストだろう

159 :Name_Not_Found:2021/12/05(日) 13:12:01.00 ID:???.net
>>157
デザインのキモは調和だよ

160 :Name_Not_Found:2021/12/05(日) 17:45:32.63 ID:???.net
質問させてください
<div>
 <h2>ながめのタイトル</h2>
 <p>リード………………………</p>
</div>
h2要素の文字幅がdiv要素の最大幅にしたいです。
その最大幅でp内は適宜改行されるようにしたいです。
divの幅を指定しないと無理でしょうか?

161 :Name_Not_Found:2021/12/05(日) 17:49:01.30 ID:???.net
div {
display: inline-flex;
flex-direction: columun;
}

162 :Name_Not_Found:2021/12/05(日) 17:58:32.24 ID:???.net
>>161
ありがとうございます。
教えていただいたものでは
p要素の幅になってしまいます。
文章が下手で申し訳ありませんがp要素はh2要素よりかなり長く
親要素の幅で改行されてるイメージです

163 :Name_Not_Found:2021/12/05(日) 18:07:52.27 ID:???.net
div {
width: min-content;
}
h2 {
white-space: nowrap;
}

164 :Name_Not_Found:2021/12/05(日) 18:15:13.84 ID:???.net
>>162
指定すべきはpの幅

165 :Name_Not_Found:2021/12/05(日) 19:28:29.61 ID:???.net
>>163
ありがとうございます!
できましたが、IE11は効かないんですね
IE11だけ何か対策で対応します

>>164
そうです。
上記で問題があった場合、
h2と同じ幅指定にJQueryで指定しようかと思います

166 :Name_Not_Found:2021/12/05(日) 19:36:03.98 ID:???.net
>>158
bannerコマンド知らんとかモグリか?

167 :Name_Not_Found:2021/12/05(日) 20:20:13.20 ID:???.net
>>165
これでイケる?

html - IE element width to min-content - Stack Overflow
https://stackoverflow.com/questions/23160267/ie-element-width-to-min-content/28767605

168 :Name_Not_Found:2021/12/05(日) 20:28:20.82 ID:???.net
>>167
ありがとうございます!!!
ラップしてたdiv自体をラップする必要があるようですが
IE11でも問題なくなりました
コピペなのでどういう振る舞いをしてるかをこれから勉強します
助かりました!

169 :Name_Not_Found:2021/12/05(日) 21:09:38.10 ID:???.net
inline-flexなんてあるのか・・・
令和最新版だな

170 :Name_Not_Found:2021/12/06(月) 01:55:40.09 ID:???.net
IEなんてもう捨てちまえよ

171 :Name_Not_Found:2021/12/06(月) 06:55:59.04 ID:???.net
どちらにせよ来年消えるから許してあげて

172 :Name_Not_Found:2021/12/06(月) 16:39:20.16 ID:???.net
htmlで入力フォームつくってAさんが入力した値を次にそのhtmlを開いたBさんが値を参照するにはどうしたらよいでしょうか?
htmlに直接追記変更させたいですが無理でしょうか?

173 :Name_Not_Found:2021/12/06(月) 17:26:13.60 ID:???.net
なにそれこわい

174 :Name_Not_Found:2021/12/06(月) 17:45:52.12 ID:???.net
phpとかでやれ

175 :Name_Not_Found:2021/12/06(月) 17:50:31.45 ID:???.net
やっぱ無理ですか
まことにごめんなさい
htmlで簡単な管理表みたいなの作りたかったんです

176 :Name_Not_Found:2021/12/06(月) 18:25:05.36 ID:???.net
それを実現するには、データベースとか、どこかに保存したデータを出し入れしなきゃいけないが
そんな機能はhtmlには無い
管理表的なものなら、お手軽にGoogleスプレッドシートとかで作った方が楽だよ

177 :Name_Not_Found:2021/12/06(月) 21:04:41.90 ID:???.net ?2BP(0)
http://img.5ch.net/ico/nida.gif
HTMLってどうやって勉強しましたか?
どんぐらいほんとか読んだのでしょう。。。

178 :Name_Not_Found:2021/12/06(月) 22:16:24.95 ID:hlNUpFlf.net
特定のキーワードを含むページに上部に定型メッセージを表示するのってどうやってやるの?


コロナというキーワードを含むページの上部に「新型コロナウイルスに関する情報が含まれている可能性があります」と注意喚起

179 :Name_Not_Found:2021/12/06(月) 22:18:11.67 ID:hlNUpFlf.net
のメッセージを表示

途中で送信しちゃったので

180 :Name_Not_Found:2021/12/06(月) 22:21:05.90 ID:???.net
自分のサイトだったら手作業でやれない事のなさそうですけど
見るところ全てだとgreasemonkey等のスクリプトを自前でつくってやるってぐらいしか思いつかない

181 :Name_Not_Found:2021/12/06(月) 22:35:53.50 ID:???.net
「特定のキーワードを含むページ」っていう時点で
スクリプトにしか出番は無いわな

182 :Name_Not_Found:2021/12/07(火) 01:59:02.39 ID:???.net
js使えばすぐできる、5分あれば実装できる

183 :Name_Not_Found:2021/12/07(火) 11:09:04.30 ID:???.net
孤独な人生って生きがいありますか?
誰のために生きることも出来いない
自分のため?自分にだって価値なんて感じないんだ

184 :Name_Not_Found:2021/12/08(水) 13:49:40.85 ID:???.net
>>177
Udemy とか、Progate・ドットインストールには無いの?

185 :Name_Not_Found:2021/12/08(水) 23:50:40.23 ID:???.net
コピペやテンプレサイトで何個かWebサイト作ってきたけど、全くいちからCSSやってみたら全然出来なくて萎えた
positionプロパティ難しいしdisplayも全然できないし丸一日何も出来なかった
模写コーディングを覚えないとダメだ

186 :Name_Not_Found:2021/12/09(木) 00:13:39.00 ID:???.net
フレームワークがうまく使いこなせない
やっぱ何となくの独学じゃなくてちゃんと順序立てて勉強しなきゃなあ

187 :Name_Not_Found:2021/12/09(木) 03:24:20.62 ID:???.net
htmlにフレームワークあったっけ?

188 :Name_Not_Found:2021/12/09(木) 04:05:19.65 ID:???.net
cssの方だろ?

189 :Name_Not_Found:2021/12/09(木) 04:10:51.19 ID:???.net
cssのフレームワークなんているか?
必要な分だけ書いたほうが覚えることも少なくて済むかと

190 :Name_Not_Found:2021/12/09(木) 18:36:03.64 ID:???.net
html/cssを学びたいんですが何をどう手つけて勉強始めたらいいですかね?
プログラムは未経験ですがインフラやってますのでbashとかvbaは出来ます

191 :Name_Not_Found:2021/12/09(木) 18:43:44.06 ID:???.net
まずはReactですね

192 :Name_Not_Found:2021/12/09(木) 19:21:21.68 ID:???.net
>>190
esxiでvMotionとかやってるの?

193 :Name_Not_Found:2021/12/09(木) 20:17:54.28 ID:???.net
>>192
190ですけど、
主にはawsのクラウドインフラですね
仮想化周りはhyper-vだけでvmはノータッチです

194 :Name_Not_Found:2021/12/09(木) 20:38:16.27 ID:???.net
モックを作成しているのですが、web ui kitのようなものは使いますか?
パーツも自作していくのでしょうか?

使用ソフトはkritaです。

195 :Name_Not_Found:2021/12/09(木) 20:52:43.89 ID:???.net
>>193
インフラってAWSのほうかすごいやん、route53とlightsailしか使ってないわ
サーバレスのlambda理解できずに諦めたわ

196 :Name_Not_Found:2021/12/09(木) 22:11:00.19 ID:???.net
んで、プログラム初心者ですがhtml/cssはどう学べば良いですか?

197 :Name_Not_Found:2021/12/09(木) 22:50:51.21 ID:???.net
右クリックしてソース見たらええんちゃうか

198 :Name_Not_Found:2021/12/09(木) 23:08:09.58 ID:???.net
>>196
プログラム学んだように書いて慣れるしか無いんじゃないかな

199 :Name_Not_Found:2021/12/09(木) 23:35:30.46 ID:???.net
>>196
まずはreactですね

200 :Name_Not_Found:2021/12/09(木) 23:54:26.55 ID:???.net
実務的なところはどうですかね?
実務で実際に使ってるようなツールとかなんかあれば知りたいですね

201 :Name_Not_Found:2021/12/09(木) 23:54:48.12 ID:???.net
reactってなんすか?

202 :Name_Not_Found:2021/12/10(金) 01:18:33.42 ID:???.net
暇つぶしにMDNのフロントエンジニアコースみたいなのやってる。
HTMLが35〜50時間、CSSが90〜120時間をJavaScript135〜185時間を想定しているらしい。
これだけやってもようやくショボいwebページが作れるようになる。

五体満足で若いなら他の資格の勉強した方がいいんでないか?

203 :Name_Not_Found:2021/12/10(金) 01:35:59.59 ID:???.net
コーディング1本で食える時代じゃないし
今後未来はコーディングはAIがやるようになるだろうし
他の仕事見つけた方が良いよ
デザインできるなら別だけどデザインになると今度は
ガチのグラデザと同じ土俵で戦うことになるから
生涯デザイナーやるって気概ないなら
バックエンドとか目指した方が飯の種になるよ

204 :Name_Not_Found:2021/12/10(金) 01:43:03.00 ID:???.net
今は減ってインフラ・サーバ・PG系で月40万、webの固定客で30万ぐらいもらってる脱サラ個人事業主だけど、
手広くやる方がつぶしがきくのも事実、月100万は数年維持できたし、
15年続けられたのもやっぱり知識分散しているおかげだと思う
若いのならもっと勉強して客を増やせば良い

205 :Name_Not_Found:2021/12/10(金) 01:49:14.65 ID:???.net
サーバー系はほんと人出常にたりんからな
PGは人口多い割に長続きしないから入れ替わりが早い

206 :Name_Not_Found:2021/12/10(金) 14:35:29.24 ID:???.net
photoshopなどでモックを作る場合、1pxもずれないように正確に作るんでしょうか?いきなりコーディングに入るとデザインが破綻しませんか

207 :Name_Not_Found:2021/12/10(金) 16:15:57.20 ID:???.net
>>206
今時フォトショでプロトタイプなんか作らない
そういうのはもうXDとかでやる時代

208 :Name_Not_Found:2021/12/10(金) 19:31:21.66 ID:???.net
xdですか。
持っていないので、、、。

しかも個人レベルのサイトなので、有料ソフト買うほどかなと。

209 :Name_Not_Found:2021/12/10(金) 19:34:42.59 ID:???.net
xdは制限あるけど無料で使えるよ

210 :Name_Not_Found:2021/12/10(金) 21:14:49.30 ID:???.net
回答どうも。使ってみますけど、個人で使う意味あるんですかね?

211 :Name_Not_Found:2021/12/10(金) 21:42:05.05 ID:???.net
意味があるかどうかは個人差があるので答えはない

212 :Name_Not_Found:2021/12/11(土) 00:08:08.46 ID:???.net
時間があっという間に過ぎる

213 :Name_Not_Found:2021/12/11(土) 12:01:29.70 ID:???.net
今はリキッドレイアウトが当たり前だそうですね。
リキッドレイアウトと8の倍数ルールというのは組み合わせ可能でしょうか?


横幅100%にしても文章が読みづらいと思うので、幅の上限設定は必要かと思います。
例えばvw2100pxを基準とする場合でも、上限は1050px程度にしたい場合、max-width:50%などと設定します。

この場合、横幅は1050pxとなりますが、必ずしも8の倍数とはなりません。

リキッドと8の倍数ルールは共存出来るんでしょうか?



>>211
了解す
イメージでいいのでペイントでいきます

214 :Name_Not_Found:2021/12/11(土) 13:08:03.68 ID:???.net
>>213
maxやminにパーセントなど相対を入れるのが変
よほど意図があってテクニカルに使うのでも無い限りやらない

215 :Name_Not_Found:2021/12/11(土) 13:19:09.11 ID:???.net
>>214
maxに絶対値をpxで指定すると(例えば1000px)、3000pxのディスプレイでも、2000pxのディスプレイでも、同じ横幅で表示されるということになりますね。
横に大きな余白が出来てしまいますが、それでいいのでしょうか?

スマホなんかの場合は、どのくらいを上限値とするんでしょうか?

216 :Name_Not_Found:2021/12/11(土) 13:44:35.35 ID:???.net
>>215
上限1050って言ってるんだから余白できて当たり前
画面幅に対して同じくらいの幅にしたいなら要素のwidth自体を90%とか相対にするだけ
maxいらない

217 :Name_Not_Found:2021/12/11(土) 14:07:05.68 ID:???.net
>>216
スマホの場合でも余白が出来ていいんでしょうか?
画面サイズが限られているので、余白ができないようにフルで使いたいユーザーが多いのではないですか?

218 :Name_Not_Found:2021/12/11(土) 14:18:44.69 ID:???.net
なにがしたいのやら

219 :Name_Not_Found:2021/12/11(土) 14:25:24.41 ID:???.net
リキッドデザインと8の倍数の共存ですね。
デバイスのサイズを基準としたいのですが、8で割り切れるサイズばかりではないかと。

220 :Name_Not_Found:2021/12/11(土) 14:29:47.52 ID:???.net
max-heightなどは
たとえば中のコンテンツの文字列が長文になってしまったけれどこれ以上のサイズにすれば
デザインが崩れてしまうなどの場合に使って
画面サイズなどに使う必要はないのでは

221 :Name_Not_Found:2021/12/11(土) 14:37:23.88 ID:???.net
日本語でおk

222 :Name_Not_Found:2021/12/11(土) 14:42:25.76 ID:???.net
え?

223 :Name_Not_Found:2021/12/11(土) 15:15:33.77 ID:Gd+G6WF8.net
>>213
幅に上限設定するならそれはリキッドデザインというか普通のレスポンシブデザインじゃないか?

224 :Name_Not_Found:2021/12/11(土) 15:37:19.10 ID:???.net
>>223
レスポンシブですか。

レスポンシブの場合もVWを基準にしてデザインすると思うんですが、中途半端な横幅のデバイスにはどう対応するでしょうか?
8で割り切れない奇数になっているなど。

225 :Name_Not_Found:2021/12/11(土) 15:45:25.78 ID:???.net
8の倍数がどうとかの豆知識を身につけるレベルに達してないから
余計なこと考えずcssを理解すべき

226 :Name_Not_Found:2021/12/11(土) 16:58:53.13 ID:???.net
たしかに 8 にこだわりすぎてるから、とりあえず忘れようか

227 :Name_Not_Found:2021/12/11(土) 17:18:21.32 ID:???.net
どのぐらい余白を取るかという指標があるとデザインが楽なんですよね。

228 :Name_Not_Found:2021/12/11(土) 19:40:07.93 ID:???.net
8に呪われし者か

229 :Name_Not_Found:2021/12/11(土) 21:14:26.08 ID:???.net
余白ルールとかありますかね?
レスポンシブと共存出来る。

230 :Name_Not_Found:2021/12/11(土) 23:37:59.17 ID:???.net
こいつはとりあえず始めるということができない隠キャタイプだな

231 :Name_Not_Found:2021/12/11(土) 23:57:49.45 ID:???.net
やらない(できない)理由探ししてるだけだろ
陰キャで纏めてくれるな

232 :Name_Not_Found:2021/12/12(日) 00:13:12.78 ID:???.net
archive.phpって一個のフォルダに一つしかできませんか?
名前変えて使うのもありですか?
例えばarchibe_2021.phpみたいに
一覧ページからカスタム投稿でarchive.phpに飛ばすと、決まったCSSデザインにしかできないんですかね
arcive.php内で更に条件分岐して複数ページのCSSデザイン作っていく感じですか?
複数怪奇過ぎてついていけない

233 :Name_Not_Found:2021/12/12(日) 00:22:56.30 ID:???.net
お知らせ一覧がパーマリンクxx.com/newsに飛ぶ
archive.phpとして処理される
お知らせ一覧なので、特にサムネイル画像とかは要らない
じゃあサムネイル画像が必要な一覧ページも作りたい場合どうすればいいのか?という質問です
例えば物件一覧ページを追加した場合
上から順に新規投稿で下が古い物件一覧ページ
これもarchive.phpで処理されるけどパーマリンクは
xx.com/bukkenに飛ぶ
しかしnewsのarchive.phpとして処理されるからサムネイル画像などcssがいじれない
それともarchive.phpに条件分岐コード書けば物件一覧用としてもcssをいじれるんですか?
archive.php内で複数のページのCSSコーディングが出来るんですかね?

234 :Name_Not_Found:2021/12/12(日) 01:53:47.74 ID:???.net
改めてスレタイ読んでみて、ここで質問するのが適当だと思えば続けてもいいけど
適当ではないと思ったら、WordPressスレに移動しましょう

235 :Name_Not_Found:2021/12/12(日) 02:10:40.16 ID:???.net
>>223
リキッドレイアウトは(特にPC用の場合に)最小幅を設定しないもののことだぞ
PCで見てる場合に幅を800pxとか700pxとかにしても、画面の一部が隠れて
スクロールバーが出たりすることがないもののこと

236 :Name_Not_Found:2021/12/12(日) 11:04:11.30 ID:???.net
複数のCSSとかおかしなことを・・・
テンプレート階層を調べてください

237 :Name_Not_Found:2021/12/12(日) 14:07:49.98 ID:???.net
>>233
マルチすな、隠キャ

238 :Name_Not_Found:2021/12/12(日) 14:44:34.94 ID:???.net
一応、誘導後ではあるからマルチとも言い切れないけど、違う誘導先に書き込んでるしなぁ
唐突にarchive.phpって言われても、wordpress知らない勢からすると( ゚д゚)ポカーンだよな
スレタイに合った質問かどうかよりも、どのスレに詳しい人が多いか考えて質問すればいいのにね

239 :Name_Not_Found:2021/12/12(日) 15:02:07.04 ID:???.net
wpスレに見放されてweb板を徘徊するような奴はスルー推奨

240 :Name_Not_Found:2021/12/12(日) 15:05:02.81 ID:???.net
このスレ優しくない奴が常駐してるよな

241 :Name_Not_Found:2021/12/12(日) 15:10:27.28 ID:???.net
まぁスレ内容のhtml/cssに関係無い長文貼るマルチはヤバいからな

242 :Name_Not_Found:2021/12/12(日) 15:13:52.13 ID:???.net
わからんならわからんで答えなきゃいいんだよ
変に絡むからどうでもいいことで争う羽目になる
バカはお前だけだよ

243 :Name_Not_Found:2021/12/12(日) 15:37:42.22 ID:???.net
ということで >>242の言う通りwpネタはスルーしましょう

244 :Name_Not_Found:2021/12/13(月) 16:30:37.43 ID:???.net
>>236
archive-xxx.php追加したらあっさりできました
ありがとう😊

245 :Name_Not_Found:2021/12/13(月) 16:40:17.90 ID:???.net
静的コンテンツと動的コンテンツってなんすか?
イマイチわからん

246 :Name_Not_Found:2021/12/13(月) 16:53:43.01 ID:???.net
静的…コードに書いたものがそのままコンテンツになるもの
動的…phpなどで閲覧する人のブラウザに閲覧した時点でコンテンツ生成されるもの
例えばCMSで読み込む新着記事一覧などは動的
同じ新着記事一覧でもHTMLで毎回手動で更新しているなら静的
そして君はとても性的だよ…

247 :Name_Not_Found:2021/12/13(月) 17:38:18.64 ID:???.net
最後で大きく滑って台無しだわ

248 :Name_Not_Found:2021/12/13(月) 18:23:05.21 ID:???.net
おや、政敵かな?

249 :Name_Not_Found:2021/12/14(火) 18:21:03.02 ID:???.net
iframeってgoogle的には使って良いの?

250 :Name_Not_Found:2021/12/14(火) 18:43:15.67 ID:???.net
google翻訳でgoogle自身が使っているから
ダメじゃないんじゃないかな

251 :Name_Not_Found:2021/12/14(火) 19:35:36.87 ID:???.net
メインコンテンツがiframeの中、みたいなあやしい構造でなければ
別にいいんじゃね

252 :Name_Not_Found:2021/12/15(水) 01:28:31.98 ID:???.net
グーグルマップの埋め込みもiframeだしな

253 :Name_Not_Found:2021/12/15(水) 14:43:58.68 ID:???.net
width:100px;のボックスにpadding-left:50px;とbox-sizing:border-box;を指定しました。
しかし、デベロッパーツールを使うと幅は100pxでした。
50pxになるはずではないのですか?

254 :Name_Not_Found:2021/12/15(水) 14:46:56.33 ID:???.net
ですね

255 :Name_Not_Found:2021/12/15(水) 15:01:05.79 ID:???.net
デベロッパーツールでそれを知る事はできないのでしょうか?
比較用のボックスを置くなどしないと。

256 :Name_Not_Found:2021/12/15(水) 15:29:50.30 ID:???.net
はい

257 :Name_Not_Found:2021/12/15(水) 17:11:24.93 ID:???.net
>>253
100pxになるのは正しい挙動

100以下にしたいのなら
max-width:100pxかinline-block等にでもすると良いんじゃないかな?

258 :Name_Not_Found:2021/12/15(水) 17:12:15.54 ID:???.net
widthが固定値だから
paddingつけても変わらんよ

259 :Name_Not_Found:2021/12/15(水) 18:27:07.59 ID:???.net
了解しました。
納得します。

260 :Name_Not_Found:2021/12/15(水) 21:26:35.76 ID:???.net
width - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/width

> widthはCSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが
> box-sizingをborder-boxに設定すると、境界領域の幅を設定します。

CSS 基本ボックスモデル入門 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area

261 :Name_Not_Found:2021/12/15(水) 22:46:25.77 ID:???.net
>>253
デベロッパーツールのどこ見て言ってるのか知らんけど
見るべきところはサイズ詳細図になってるところの一番内側だぞ
そこが100になってるなら何か間違ってる

262 :Name_Not_Found:2021/12/16(木) 19:25:00.87 ID:???.net
test

263 :Name_Not_Found:2021/12/16(木) 20:02:52.28 ID:???.net
google fontなんですが、ダウンロードせずに使うためのリンクってどこにあるんでしょうか?
以前はあったと思うんですが。

https://fonts.google.com/noto/specimen/Noto+Sans+JP

264 :Name_Not_Found:2021/12/16(木) 20:12:29.22 ID:???.net
右上の四角と+のアイコンクリック

265 :Name_Not_Found:2021/12/16(木) 20:32:00.68 ID:???.net
thanksです

266 :Name_Not_Found:2021/12/16(木) 21:32:54.72 ID:???.net
初歩的な質問で恐縮ですが、宅配便の追跡番号が入力済みのURLのように、場合に応じた単語が最初から一部のフォームに入力済みのURLを作成する方法はありますでしょうか?

267 :Name_Not_Found:2021/12/16(木) 21:48:48.42 ID:???.net
https://tsurihack.com/6126
このサイトのようにタイトルロゴを中央に持ってくる場合、内包されるボックスの幅を統一しないといけないでしょうか?
space-betweenで配置するのだと思います。
ヘッダの全体幅1000px、左を500px、中央指定なし、右指定なしとすると、ロゴも右寄りに配置されますので

268 :Name_Not_Found:2021/12/16(木) 21:52:31.93 ID:???.net
そこの場合だとTSURI HACKというタイトルロゴはposition:absouteで位置指定してるね

269 :Name_Not_Found:2021/12/16(木) 21:57:06.11 ID:???.net
・ロゴだけabsoluteにする
・左コンテナ ロゴコンテナ 右コンテナで分ける 左コンテナにmargin-right 右コンテナにmargin-leftをauto
・flex-basis
・grid
好きなのどうぞ

270 :Name_Not_Found:2021/12/17(金) 16:25:59.27 ID:???.net
pcサイトでも横幅は固定しないで、モニタサイズを基準にデザインするもんでしょうか?
しかし、超ワイドもあるわけですよね。

271 :Name_Not_Found:2021/12/17(金) 16:46:45.96 ID:???.net
ここで聞くよりも自分で既存のサイトを見て回ってどういうデザインでやってるのか体感しろ

272 :Name_Not_Found:2021/12/17(金) 17:23:50.33 ID:???.net
どういう層をターゲットにするか次第なのでは

273 :Name_Not_Found:2021/12/18(土) 01:07:56.79 ID:???.net
トップに画像デカデカと貼る文化はようすたれてくれんかな

274 :Name_Not_Found:2021/12/18(土) 01:44:24.56 ID:???.net
すたれません

275 :Name_Not_Found:2021/12/18(土) 05:57:50.11 ID:???.net
topのcoverで使う画像サイズってどれくらいのpxやデータサイズを上限として使っているんだろうか

276 :Name_Not_Found:2021/12/18(土) 07:58:58.24 ID:V4P6XZ0z.net
トップにでかい画像載せておくだけで見栄えが良くなるからなくならんだろう
作る側も楽だしクライアント受けもいい

277 :Name_Not_Found:2021/12/18(土) 08:59:51.70 ID:???.net
俺はwidth1280pxにheight400pxのheader img貼ってるな
1Mぐらいある

278 :Name_Not_Found:2021/12/18(土) 12:35:21.48 ID:???.net
まあ雑誌やスポーツ新聞の見出しみたいなもんだからなw

279 :Name_Not_Found:2021/12/18(土) 15:53:10.73 ID:???.net
ちょっとスレチになるけど、
トップページのindex.htmlとそれに関連するimg, css, jsをダウンロードしたいんだけどどうすれば良い?
シンプルなサイトならソースおっかけたらいいかもだけど、
結構大きいと何か良い方法無いかなと

280 :Name_Not_Found:2021/12/18(土) 16:06:37.61 ID:???.net
モニターサイズじゃなくてウインドウサイズにすりゃいいんじゃね?

281 :Name_Not_Found:2021/12/18(土) 16:28:22.72 ID:???.net
>>279
puppeteerでサブリクエストをフックするコードを書いてトップページにアクセス
https://stackoverflow.com/questions/52542149/how-can-i-download-images-on-a-page-using-puppeteer/56534741#56534741

282 :Name_Not_Found:2021/12/18(土) 16:35:30.03 ID:???.net
う、C言語はわからねぇ

283 :Name_Not_Found:2021/12/18(土) 18:06:56.14 ID:???.net
jsだが

284 :Name_Not_Found:2021/12/18(土) 18:10:42.55 ID:???.net
HTTrackじゃダメ?

285 :Name_Not_Found:2021/12/18(土) 23:20:38.07 ID:???.net
>>279
windowsならctrl+sでウェブページ完全で保存でいける

286 :Name_Not_Found:2021/12/19(日) 01:54:10.65 ID:???.net
>>285
それ最初に試したけど、フォルダ構造が1フォルダにまとめられてしまうのが残念でした
htmlは相対パスは書き換えられていないのに、htmlをローカルで見ると単一フォルダに集められたものを見れるという不思議

287 :Name_Not_Found:2021/12/19(日) 03:21:29.71 ID:???.net
>>279
パクリ野郎めw

288 :Name_Not_Found:2021/12/19(日) 06:09:13.10 ID:???.net
ブラウザでサイトをダウンロードするとか、curl/wget とか

アセットもローカルに保存する際に、
絶対パスを相対パスに変換して、ちゃんと動くようにしてくれるものもある

再帰的に何階層までさかのぼるか、も考えないといけない

普通は直リンクだけをダウンロードして、
そのリンク先から、さらにさかのぼらない

大量に再帰的にさかのぼると、攻撃に思われるので、やらない方がよい

289 :Name_Not_Found:2021/12/19(日) 06:21:21.08 ID:???.net
誰もそんなことをやるとは言っていない

290 :Name_Not_Found:2021/12/19(日) 07:15:01.82 ID:???.net
ありがとういけました。
単一のフォルダになってもほとんどがimg, css, jdなので
すぐに振り分けることができました

291 :Name_Not_Found:2021/12/19(日) 15:33:59.72 ID:???.net
重たい画像を読み込むまで軽量な画像を代替表示させることって
HTMLやCSSで出来なかったでしたっけ?
動画の代替画像と勘違いしているだけですかね?

292 :Name_Not_Found:2021/12/19(日) 22:01:50.25 ID:???.net
「html 画像 切り替え サイズ」で検索!

srcset, sizes か?
少し用途が違うか?

<img sizes="(min-width: 960px) 75vw, 100vw"
srcset="img-1440.png 1440w, img-720.png 720w, img-360.png 360w"
src="default-image.png">

293 :Name_Not_Found:2021/12/19(日) 23:10:33.17 ID:???.net
>>291
IEくらいしか機能しないと思うがlowsrcの事か?

294 :Name_Not_Found:2021/12/20(月) 08:33:15.96 ID:???.net
>>291
今でも使われているかわからんけど
プログレッシブ画像ってあったな
インタレースとか

295 :Name_Not_Found:2021/12/20(月) 14:49:53.68 ID:???.net
imgタグのloading属性の話じゃないの?
lazy指定で遅延読み込みするだけだけど

<img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img#attr-loading

代替画像とかIE対応って話になるとプログレッシブ画像かjavascriptかな?

296 :Name_Not_Found:2021/12/20(月) 17:01:39.81 ID:???.net
自分用メモ:
LQIP = Low Quality Image Placeholders
本チャンの画像が用意できるまで表示しておく軽量低品質画像のこと

297 :Name_Not_Found:2021/12/20(月) 17:55:23.97 ID:???.net
できた
<img loading="lazy"width="400"height="300"src="https://placekitten.com/4000/3000"alt=""style="background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=)0/100%100%">
画像が用意できるまで黒1ピクセルのgifを引き伸ばして表示
ロードしたら差し変わる

298 :Name_Not_Found:2021/12/20(月) 18:16:33.07 ID:???.net
孫は5歳で遺族 資料黒塗りばかり/熱海土石流 被災者が交流
ttps://www.jcp.or.jp/akahata/aik21/2021-12-19/2021121913_01_0.html

299 :Name_Not_Found:2021/12/20(月) 18:56:27.87 ID:w4bsrX1q.net
>>297
それ背景画像引き伸ばすんじゃなくてbackgrund colorでよくね

300 :Name_Not_Found:2021/12/20(月) 19:37:38.02 ID:???.net
貼り付けるたびに微妙に手間が掛かるのがなぁ

301 :Name_Not_Found:2021/12/20(月) 20:56:20.66 ID:???.net
cssコードに記載して、にアウトラインを表示する方法ってありますか?
vscodeです

セクションをアウトラインに表示させたいんです

302 :Name_Not_Found:2021/12/20(月) 21:00:06.93 ID:???.net


303 :Name_Not_Found:2021/12/20(月) 21:54:34.78 ID:???.net
ここはフッターのコード
ここはヘッダーのコード

というような目印がほしいんですよね

どこにあるのかわからなくなるので

304 :Name_Not_Found:2021/12/20(月) 22:37:01.63 ID:???.net
コメントのこと?

305 :Name_Not_Found:2021/12/20(月) 22:55:25.80 ID:???.net
、にアウトライン
の意味がわからない

306 :Name_Not_Found:2021/12/21(火) 00:59:35.76 ID:???.net
理解しようとするな、感じ取るんだ

307 :Name_Not_Found:2021/12/21(火) 03:22:46.10 ID:???.net
要するにテキスト末尾の区切りに何かしら入れたいってことだろうな

308 :Name_Not_Found:2021/12/21(火) 06:20:58.49 ID:???.net
ここからはヘッダ用のcss、ここからはフッタ用のcssといった目印をつけておきたいんですよ。
コードがどこいったかわからんくなる

309 :Name_Not_Found:2021/12/21(火) 07:19:11.12 ID:???.net
コメントアウトのことならググったらやり方出るよ

310 :Name_Not_Found:2021/12/21(火) 07:25:36.55 ID:???.net
いえ、コメントアウトしてもvscodeのアウトラインには表示されません。
方法はあるでしょうか?

311 :Name_Not_Found:2021/12/21(火) 08:55:55.10 ID:???.net
名前だけで判別のつくclass名にする、では足りないの?

312 :Name_Not_Found:2021/12/21(火) 09:19:03.30 ID:???.net
>>301をもう一回読みなおせ
日本語で書き直せ

313 :Name_Not_Found:2021/12/21(火) 09:23:25.31 ID:???.net
>>311
クラス名はアウトラインに表示されるんですが、
ズラーッと同じ階層に表示されちゃうんですよね


以下のマークダウンのように階層化出来たら分かりやすいなと
# header
## header_title
## header_description
# footer
## footer_copyright
## footer_description
## contact_form

説明不足ですみません

314 :Name_Not_Found:2021/12/21(火) 13:53:26.07 ID:???.net
わかりやすい日本語で質問できない人が求めるわかりやすさとは

315 :Name_Not_Found:2021/12/21(火) 13:59:35.13 ID:???.net
連投すみませんね。
レスポンシブを作っているのですが、pcファーストでcssを記述しています。
その場合、スマホ用のメディアスクリーンにcssを記述しても、反映はされません。
!importantをつけることで反映されるようになりますが、スマホ用cssにはすべてimportantを付ける必要がありますか?

優先順位を変更する正しい方法があれば。

@media screen and (max-width: 550px) { /*スマホ用のデザイン。ウインドウ幅550px以下の場合に適用*/

#container{
border: 10px solid red !important;
}
}
/*pc用*/
#container{
border:1px solid silver;

}

316 :Name_Not_Found:2021/12/21(火) 14:09:17.89 ID:???.net
>>301
VSCode の質問は、プログラミング板のVSCodeのスレで聞いてください

>>315
レスポンシブ対応は、Bootstrap, Bulma, Tailwind などのCSS フレームワークを使えば?

317 :Name_Not_Found:2021/12/21(火) 14:12:42.98 ID:???.net
>>315
pcにもメディアクエリをつければいい

既存サイトの引継でもないのにimportantを使う必要が出てきたらよほどダメなコードを書いてると思おう

318 :Name_Not_Found:2021/12/21(火) 14:15:40.27 ID:???.net
>>315
その記述だと後半はpc用ではなくすべてに適用となる
sp用に書いたものが上書きされている
spメディアクエリを後半に書くかpcにもメディアクエリでspと排他にするか
「すべてに適用」「pcのみ」「spのみ」でちゃんと切り分けよう

319 :Name_Not_Found:2021/12/21(火) 15:02:13.35 ID:???.net
>>317
>>318
了解です。ありがとうございました。

320 :Name_Not_Found:2021/12/21(火) 15:46:22.58 ID:???.net
>>316
そうします。

321 :Name_Not_Found:2021/12/21(火) 18:21:50.94 ID:???.net
>>315
!important使いたくないならpc用より後に書く

322 :Name_Not_Found:2021/12/21(火) 18:39:31.55 ID:???.net
タブレットは使用したことがないのですが、一般的にはタブレットのサイトにはサイドバーを表示しないものですか?
カラムを下に落とすかどうかです。

323 :Name_Not_Found:2021/12/21(火) 18:41:21.64 ID:???.net
>>315
minじゃなくmaxwidthの場合は
記述は下じゃないかね?

324 :Name_Not_Found:2021/12/21(火) 18:52:53.28 ID:???.net
>>323
いやどっちでも下

325 :Name_Not_Found:2021/12/21(火) 19:30:02.80 ID:???.net
>>322
デザインにもよるしランドスケープモードってのもあるし

326 :Name_Not_Found:2021/12/22(水) 06:32:46.19 ID:???.net
>>325
どうもっす
そういうもんですかね

327 :Name_Not_Found:2021/12/22(水) 06:49:34.85 ID:???.net
まぁ、そういうものだな

328 :Name_Not_Found:2021/12/22(水) 10:32:31.77 ID:???.net
タブのレイアウトってのは、基本的にはスマホと同じ感じになると考えます。
そうであれば、ブレイクポイントは1つで、スマホ・タブとpcの2つに振り分ければいいかなと思います。

スマホ・タブ用のレイアウトはサイドバーを落とします。

この場合のブレイクポイントはどのくらいが目安ですか?
960pxという記事を見つけました。

が、小さめのpcでブラウザのブックマークバーを表示させた場合、サイドバーが落ちそうです。
960pxは少し大きすぎるんじゃないかと思うのですが、どうですかね。

329 :Name_Not_Found:2021/12/22(水) 10:33:37.14 ID:???.net
ブックマークバーなんか出すな

330 :Name_Not_Found:2021/12/22(水) 15:30:00.40 ID:???.net
どういうデザインなのかサッパリ分からんし、目安なんか有って無いようなもんだから、好きにしろとしか

> タブのレイアウトってのは、基本的にはスマホと同じ感じになると考えます。
> そうであれば、ブレイクポイントは1つで、スマホ・タブとpcの2つに振り分ければいいかなと思います。

個人的には、そんな柔軟性に欠ける条件で縛って作ったりしない

331 :Name_Not_Found:2021/12/22(水) 17:02:30.91 ID:???.net
>>328
お前、前にも言われただろ
「いちいち聞くな、手を動かせ」と

332 :Name_Not_Found:2021/12/22(水) 17:55:31.54 ID:???.net
まさか8の倍数マンか!?

333 :Name_Not_Found:2021/12/22(水) 18:00:19.57 ID:???.net
後に5chを騒がす「ハチバイマン」が
W3C参与になることを俺たちはまだ知るよしも無かった

334 :Name_Not_Found:2021/12/23(木) 01:46:54.35 ID:???.net
headにcssを直接書く時って

335 :Name_Not_Found:2021/12/23(木) 01:47:44.90 ID:???.net
すまん、途中で送信してしまった
<head>
<style type="text/css">
<!--

このコメントアウト必要だったっけ?省略しても良い?

336 :Name_Not_Found:2021/12/23(木) 01:48:25.96 ID:???.net
html5の話ね、連投すまんです

337 :Name_Not_Found:2021/12/23(木) 02:04:53.03 ID:???.net
いらない

338 :Name_Not_Found:2021/12/23(木) 02:21:04.87 ID:???.net
type属性も省略可能

339 :Name_Not_Found:2021/12/23(木) 06:17:41.16 ID:???.net
>>338
まじか、ありがとう

340 :Name_Not_Found:2021/12/23(木) 23:08:58.38 ID:???.net
海外の12歳の少女が、NFTで1億8000万円を稼ぐ

12歳のナイラ・ヘイズ氏のNFT(※)コレクションが、数時間で160万ドル(約1億8000万円)
を稼ぎ出したと、米メディアの『Business Insider』が報じている。
ヘイズ氏は4歳で絵を描き始め、9歳のときにスマートフォンを使って彼女の代表作
「Long Neckie Ladies」を描いたという。このシリーズは3333点からなる、首の長い
多種多様な女性を描いたコレクションだ。出品後わずか数時間で売り切れとなり、
総額は約1億8000万円にのぼるという。
「アートは私が自分自身を表現し、言葉では不可能なやり方で人々を
驚かせるのためのもの」と述べている。
これまでにヘイズ氏は、NFTで1394ETH(約6億6000万円)を稼ぎ出してきた。
若きアーティストのさらなる活躍に期待しよう。

341 :Name_Not_Found:2021/12/24(金) 08:28:59.64 ID:???.net
ブライアン・イーノ氏、NFT販売に対し「価値あるものとは思えない」と持論語る
「詐欺師がカモを探し回っているよう」だそうです
https://japanese.engadget.com/brian-eno-does-not-like-nft-100027971.html
さらにイーノ氏は「NFTは、アーティストがグローバル資本主義から少しばかり恩恵を受けるための手段であり、金融化(financialization)のミニチュア版に過ぎないと思う。なんと素晴らしい。これのおかげでアーティストもまた、ちっぽけな資本家というクソったれ野郎(asshole)になれるんだよ」とエレガントな言葉でNFTを売る行為について説明しました。

実際にはイーノ氏の信頼する知人らもNFTを気に入っている模様で、イーノ氏本人もNFTに関する「質問には心を開いておくようにしている」としました。それでも最後には「いまは主に詐欺師(NFTクリエイター)がカモを探して歩いているような状況だ。そして目を輝かせたアーティストが大勢、喜んで後者に…まあ、私の皮肉はこの辺にしておこう。要するにいまはあまりそれについて前向きには感じていないと言うことだ」と述べています。

342 :Name_Not_Found:2021/12/24(金) 23:01:06.77 ID:???.net
<input type="range" name="test" min="0.05" max="10" step="0.05" value="0.05" id="test" style="width:100px">

このスライダーをマウスで1段階動かすと0.2になってしまいます。
stepが0.1なので0.15にならないとおかしいけど
どうすれば0.15になりますか?

343 :Name_Not_Found:2021/12/24(金) 23:05:36.96 ID:???.net
訂正0.15ではなく0.1にならないとおかしいですが

344 :Name_Not_Found:2021/12/24(金) 23:07:21.09 ID:???.net
訂正stepが0.05なので0.1にならないとおかしいですが

345 :Name_Not_Found:2021/12/24(金) 23:21:49.09 ID:???.net
<input type="range">は、何かの「大きさ」や「速さ」の調整など(たとえば音量やフォントサイズの調整)、ユーザーにざっくりとした数値を選んでもらうときに使いましょう。
間違えられると困るような厳密な数値を入力してもらいたいときはtype="number"の使用を検討するのが良いでしょう。

346 :Name_Not_Found:2021/12/25(土) 00:49:42.07 ID:???.net
200段階あるのにマウス操作前提で幅100pxは狭すぎじゃないでしょうか

347 :Name_Not_Found:2021/12/25(土) 03:23:31.28 ID:???.net
マウスで狙って0.5pxポインタ動かすとか無理だわな

348 :Name_Not_Found:2021/12/26(日) 13:29:03.11 ID:???.net
htmlファイルに画像やcssファイルを含ませる事ができるみたいですが、こういう形式は一般的ではないのでしょうか?
ページを保存しておきたいのです。

349 :Name_Not_Found:2021/12/26(日) 14:05:56.91 ID:???.net
chromeじゃあるか知らないけれど
firefoxのアドオンにSingleFileというものがあって
それを使うと画像なども変換して1ファイルとして保存ができる

350 :Name_Not_Found:2021/12/26(日) 14:11:00.56 ID:???.net
そうです。それ使ってるんスよ。
他の環境に持っていくと開けないのかななんて。

351 :Name_Not_Found:2021/12/26(日) 14:21:17.33 ID:???.net
開けるわけない

352 :Name_Not_Found:2021/12/26(日) 15:34:22.27 ID:???.net
作ったhtmlを試しにchromeで開けば表示できるよ
画像データはbase64でエンコードされたバイナリデータでHTMLの中に埋め込まれるので
HTMLファイルのみでいい
もちろんそのHTMLファイル自体は画像ファイルなどの分、ファイルサイズが大きくなってしまう
MDN データ URL でぐぐれば解説がのっている

353 :Name_Not_Found:2021/12/26(日) 16:18:42.57 ID:???.net
SingleFileZって機能拡張だと、生成したhtmlファイルはzipのハイブリッドになってて
それを解凍した中にあるhtmlファイルを開けば、どんな環境でも見られるはず

354 :Name_Not_Found:2021/12/26(日) 17:40:35.98 ID:???.net
どうもです。
ファイルが分けられている場合、正確に保存できなかったもんですから。。。

355 :Name_Not_Found:2021/12/27(月) 11:25:27.74 ID:???.net
htmlで下位に属するセレクタに対して、全て継承するような書き方は駄目なんですか?
#header{}
#header .title_logo{}
#header .title_description{}

headerタグの中にtitle_logoとtitle_descriptionがあります。
sassだって以下をコンパイルすれば上記のようになるわけですよね。

#header{
.title_logo{}
.title_description{}
}

356 :Name_Not_Found:2021/12/27(月) 12:03:16.46 ID:???.net
駄目じゃないけどなんで駄目と思ったの

357 :Name_Not_Found:2021/12/27(月) 12:17:12.67 ID:???.net
重くなるかなって、、、

358 :Name_Not_Found:2021/12/27(月) 12:30:03.59 ID:???.net
数十バイトやぞ
どんだけ書いても適当な画像1枚分いくかいかないか

359 :Name_Not_Found:2021/12/27(月) 12:39:09.09 ID:???.net
vscodeのアウトラインを分かりやすくする目的でこう書くのは悪くないんでしょうか?
ただ、それだけのためですが。

360 :Name_Not_Found:2021/12/27(月) 12:44:47.24 ID:???.net
またおまえか
ならsass使えって言われたろ

361 :Name_Not_Found:2021/12/27(月) 13:00:47.59 ID:???.net
>>348
画像データをbase64 形式で、HTML 内に埋め込むと、
データのサイズが大きくなるので、大きい画像はダメ

ちょっとしたアイコン・SVG などに使うもの

362 :Name_Not_Found:2021/12/27(月) 13:04:55.76 ID:???.net
>>355
BEM(Block/Element/Modifier, MindBEMding)を使えば?

BlockとElementはアンダースコア2つで区切る
block__element

BlockとModifierはハイフン2つで区切る
block--modifier

ElementとModifierもハイフン2つで区切る
block__element--modifier

363 :Name_Not_Found:2021/12/27(月) 13:36:40.64 ID:???.net
>>362
thanks for your comment!!

364 :Name_Not_Found:2021/12/27(月) 13:59:25.26 ID:???.net
FLOCSSの思想が@importから@useへの移行でメンテがめんどくさくなってきた
BEMそのものは使えるから偉大だと思う

365 :Name_Not_Found:2021/12/27(月) 14:24:57.00 ID:???.net
>>362
<footer class="footer">
<div class="footer__inner">
<div class="footer__inner--title">
サイトタイトル
</div>
</div>
</footer>

.footer{}
.footer__inner{}
.footer__inner--title{}

こんな感じでおkですか?

.footer__innerに関してなんですが、footer__footer-innnerみたいにfootergが重複する書き方は望ましくないんでしょうか?
.footer__footer-inner--footer-title

こうなっちゃいますもんね

366 :Name_Not_Found:2021/12/27(月) 15:02:54.64 ID:???.net
titleはfooter__innerのモディファイアではないやろ
普通にBEMについて調べろ

367 :Name_Not_Found:2021/12/27(月) 15:05:29.77 ID:???.net
確かに、@use は、めちゃめちゃ難しい。
複雑すぎて、何を言ってるのか分からない

挫折する香具師が多そう

368 :Name_Not_Found:2021/12/27(月) 15:17:08.67 ID:???.net
>>366
基本的に、フレームはブロックとエレメントで定義するって感じですかね

369 :Name_Not_Found:2021/12/27(月) 16:07:59.97 ID:???.net
なぜ調べずに再質問するのだろう

370 :Name_Not_Found:2021/12/27(月) 17:43:52.47 ID:???.net
ワードプレス未使用、アフィ以外の別サイトへのリンクで
aタグのtarget="_blank"の脆弱性について、多くのブログ等では
最近のブラウザはrel="noopener noreferrer"属性を持っているがつけておくのが無難
とのことで、まだ見つかっていない脆弱性は別にしてこれで先ずは安心でしょうか?
現時点でこれでも危険ということはありますか?

371 :Name_Not_Found:2021/12/27(月) 18:15:53.81 ID:???.net
脆弱性?

372 :Name_Not_Found:2021/12/27(月) 18:31:54.99 ID:vQHHFZsc.net
そういうの考えるの面倒くさいから別窓リンクは辞めたわ
スマホだと別窓あまり意味なくないか?

373 :Name_Not_Found:2021/12/27(月) 20:43:40.72 ID:???.net
bemでは必ず親を継承しないといけないんでしょうか?
例えばcontainerの中にはmainとsidebarを入れる構成はよくあると思います。

そうなると、container__main,container__sidebarという名前になってしまいます。

374 :Name_Not_Found:2021/12/27(月) 21:03:26.03 ID:???.net
好きにしろ

375 :Name_Not_Found:2021/12/27(月) 21:11:27.83 ID:???.net
SASSで管理がしやすい名付け方法だから
自分一人で管理するなら自分がやりやすいように
好きに付けたらいいんじゃないかな?

376 :Name_Not_Found:2021/12/27(月) 21:27:47.28 ID:???.net
そうですか。
いちおう、継承しときます、、、。

377 :Name_Not_Found:2021/12/28(火) 20:57:58.59 ID:???.net
>>372
なんでスマホ限定なんだ?
それにいつの時代のブラウザかと

378 :Name_Not_Found:2021/12/28(火) 23:14:02.72 ID:jsoTICBS.net
>>377
今どきスマホからのアクセスが大部分だからでは
別窓だろうが同窓だろうが左にスワイプすれば戻れる

379 :Name_Not_Found:2021/12/29(水) 11:50:02.16 ID:???.net
htmlなんですが、インデントしすぎると見づらくなるんですが、何階層までという決まりはあったりするんでしょうか?

380 :Name_Not_Found:2021/12/29(水) 11:59:35.30 ID:???.net
ないよ
しなくてもいい

381 :Name_Not_Found:2021/12/29(水) 14:27:00.86 ID:???.net
今の時代、px指定することはなくなったんですか


>>380それだと見づらいので

382 :Name_Not_Found:2021/12/29(水) 14:41:32.94 ID:???.net
じゃあインデントしろやハゲ

383 :Name_Not_Found:2021/12/29(水) 15:14:45.69 ID:???.net
あるで

384 :Name_Not_Found:2021/12/29(水) 15:22:33.64 ID:???.net
>>382
わかったよ包茎

385 :Name_Not_Found:2021/12/29(水) 17:35:19.99 ID:???.net
div#abc, #abc では、どちらが良いの?

#abc で良いと思うけど、
なぜ、div#abc を使うのだろう?

386 :Name_Not_Found:2021/12/29(水) 18:41:28.85 ID:???.net
一応詳細度が違うが
そもそもidやclass以外にcss書くのダメコードだと思ってるからわからん
やる人はそのidがなんのタグかのメモのつもりとかじゃないの

387 :385:2021/12/29(水) 18:50:23.27 ID:???.net
div#abc みたいに、div とか余計なものを付けると、
少しだけど遅くなったり、間違う可能性も生じる

/* div#abc */
と、メモは、コメントに書いておけば良いと思う

388 :Name_Not_Found:2021/12/29(水) 19:12:26.05 ID:???.net
>>387
そういえばCSSのセレクタの付け方で表示速度が変わるとかあったな
今のスマホやPCでも表示速度変わるんだろうか?
もう気にする必要はないくらい速くなってそうよね

389 :Name_Not_Found:2021/12/29(水) 21:36:52.82 ID:???.net
>>378
それは意図と違うだろ
スレッドが別になるんだよ
それに世の中にはパソコンというものがあってだな(ry

そもそも脆弱性のことを理解してる?

390 :Name_Not_Found:2021/12/30(木) 03:30:34.35 ID:???.net
>>388
今の時代の機種ならそんなものを気にするレベルで表示速度には影響しない
むしろ通信速度の環境の方から考慮すればいい

391 :Name_Not_Found:2021/12/30(木) 17:52:14.33 ID:???.net
高解像度用の大きい画像を用意して軽くするために圧縮して…
って上手くいえないけどなんかすごく変な手順な気がする

392 :Name_Not_Found:2021/12/30(木) 18:07:00.94 ID:???.net
解像度とサイズは別の概念だからな
サイズ最適化はしたごしらえみたいなもの

393 :Name_Not_Found:2021/12/30(木) 20:54:46.37 ID:???.net
SASSってわざわざcssに変換してアップロードするの?
便利そうだけど手間かかるよね
ブラウザはなぜSASSを解釈してくれないんだろうか

394 :Name_Not_Found:2021/12/30(木) 21:01:35.59 ID:???.net
>>393
クソレス罪で死刑

395 :Name_Not_Found:2021/12/30(木) 21:02:55.44 ID:???.net
>>394
え?え?俺何か悪いこと言った?

396 :Name_Not_Found:2021/12/30(木) 21:26:20.30 ID:???.net
VSCodeでSASS書いて、保存時に自動でCSSに変換するようにしとけば
プレビューにもすぐに反映されるから、そんな言うほど手間じゃない

397 :Name_Not_Found:2021/12/30(木) 23:03:40.67 ID:???.net
そのまま上げてブラウザ側でjavascriptのライブラリ使って変換することもできるけど当然描画が遅れる等のデメリットの方が大きいので普通はやらない

今ならsass/lessのいいとこどりのstylus langもええで

398 :Name_Not_Found:2021/12/31(金) 01:12:07.30 ID:???.net
>>396
VSCode使ってるけど、正直知らんかった

399 :Name_Not_Found:2021/12/31(金) 01:31:38.28 ID:???.net
>>398
あ、もちろん機能拡張は入れるよ?

400 :Name_Not_Found:2021/12/31(金) 19:56:50.69 ID:???.net
VSCode の拡張機能・Live Sass Compiler を入れると、
確か、同じ作者のLive Server も入る

Live Serverは、PC 内にサーバーを立てて、そこからHTML を送るから、
ローカルファイルのアクセスにならないので、CORS を回避できる

詳細はプログラム板にある、VSCodeのスレで聞いて

401 :Name_Not_Found:2021/12/31(金) 22:20:27.42 ID:???.net
読んでると手間そうだな

402 :Name_Not_Found:2021/12/31(金) 22:29:51.06 ID:???.net
面倒なのは最初だけだよ
慣れると戻れない

403 :Name_Not_Found:2021/12/31(金) 22:32:21.29 ID:???.net
全然手間じゃないよインストールするだけだし
おれはDartJS Sass Compilerに変えた

404 :Name_Not_Found:2021/12/31(金) 22:51:23.96 ID:???.net
コンパイル環境作るめんどくささが5なら
sassにすることによるコーディング効率化は5兆くらい

405 :Name_Not_Found:2022/01/01(土) 00:17:15.19 ID:???.net
sassするにはルビー入れる必要があるって見てやめたわ

406 :Name_Not_Found:2022/01/01(土) 00:56:44.77 ID:???.net
vscodeの拡張でやるならrubyなんかいらんよ

407 :Name_Not_Found:2022/01/01(土) 03:48:49.07 ID:???.net
>>405
エディタの拡張でもgulpでもpreprosでも好きにせえ

408 :Name_Not_Found:2022/01/01(土) 17:34:02.36 ID:???.net
フリーランスで10万以上稼いでいる人は上位10%くらいですか?

409 :Name_Not_Found:2022/01/01(土) 18:41:29.01 ID:???.net
10万程度じゃ食っていけないよ学生さん?

410 :Name_Not_Found:2022/01/01(土) 19:13:42.95 ID:???.net
Ruby SASS は、もうない

C++ へ移植された

411 :Name_Not_Found:2022/01/01(土) 19:34:43.70 ID:???.net
>>408
中学生の趣味ブログなら頑張ったらそれぐらいいけるかもね

412 :Name_Not_Found:2022/01/01(土) 21:36:15.93 ID:???.net
副業で、フリーランスで月10万以上稼いでいる人は上位10%くらいですか?
本業でも月10万以上稼いでいる人は15%って聞いたんで。

413 :Name_Not_Found:2022/01/01(土) 22:09:07.15 ID:???.net
スレちがいの話ばかり
もっとえっちてーえむえるとしーえすえすの話をしてくり

414 :Name_Not_Found:2022/01/01(土) 23:00:13.22 ID:???.net
>>408>>412YOU達面白いから本当の事は何も書き込まないことにするわ

415 :Name_Not_Found:2022/01/01(土) 23:01:22.28 ID:???.net
>>412
しね

416 :Name_Not_Found:2022/01/03(月) 06:54:13.17 ID:???.net
内容物の文字数の制限ッテできますでしょうか?
overflow hiddenで切り取るくらいですかね。

417 :Name_Not_Found:2022/01/03(月) 12:00:55.82 ID:???.net
こんにちは。
Javascript と そのフレームワークを勉強したいと思います。
フレームワークは
・JQuery
・Vue
・React
の中のどれか一つだけを まずが勉強すれば良いと思うのですが、その理解で良いでしょうか。
(たとえば、JQuery と Vue の両方を同時並行で勉強しないと理解できない・・・ということはないでしょうか)

このへんが良くわからず質問してしまいました・・・

418 :Name_Not_Found:2022/01/03(月) 12:26:54.17 ID:???.net
jQueryは古典過ぎててPromiseみたいに重要な部分はJSの仕様に取り込まれた
VueとReactはどちらも人気だから好きに
海外では強いFacebookだからReactのほうが生き残る可能性は高いのかな?

419 :Name_Not_Found:2022/01/03(月) 12:39:33.34 ID:???.net
>>417
+ JavaScript の質問用スレッド vol.124 +
https://mevius.5ch.net/test/read.cgi/tech/1636525464/

420 :Name_Not_Found:2022/01/03(月) 12:47:22.37 ID:???.net
>>417
フレームワークを勉強よりもまずその前の基礎が分かってないとな

421 :Name_Not_Found:2022/01/03(月) 12:55:10.59 ID:???.net
>>418
ありがとうございます!
Javascript を学習しつつ、 Vue または React のどちらか一つに取り組もうと思います。

>>419
>>420
ありがとうございます!了解です。

422 :Name_Not_Found:2022/01/03(月) 15:51:29.45 ID:???.net
<input type="text">で半角入力に強制的に切り替えるにはどうやればいいんですか?

423 :Name_Not_Found:2022/01/03(月) 19:44:03.71 ID:???.net
カラムのサイズに関して
デバイスのサイズが色々なのでサイズ固定は良くないよと聞きます。
vwを使った指定がいいと聞きますが、具体的にどうやるんですか?

100vwいっぱい似表示されると、ワイド画面では見づらいサイトになります。
ですから、max-widthはpx指定が必要かなと思います。

また、サイドバーとメインカラムは%指定しているのですが、これらもvwで指定するのですかね

424 :Name_Not_Found:2022/01/03(月) 19:47:24.81 ID:???.net
vw使うのはwidthじゃなくて
sp時のフォントとかじゃ?

425 :Name_Not_Found:2022/01/03(月) 19:57:29.28 ID:???.net
そうですね。ワイズに関してです。

フォントにはremを使おうかと。
rootにだけフォントサイズをpxで指定して、以下はremという感じですかね。

426 :Name_Not_Found:2022/01/03(月) 20:38:55.87 ID:???.net
そういやvw使ってデザインするなら
viewportをwidth=device-widthにしないで
width 500pxとか好きな数字にしてpxでデザインした方が楽なんじゃないかと思いながら
思考停止でwidth=device-widthを使い続けてるわ

427 :Name_Not_Found:2022/01/04(火) 00:18:52.40 ID:???.net
>>422
確定された方法は無かったと思う
独自拡張でime-modeという手段がIEには用意されていたが現在は廃れて機能しなかったと思う

428 :Name_Not_Found:2022/01/04(火) 00:57:49.21 ID:???.net
>>423
何言ってるかわからんからjsfiddleなどで例を出してくれ
っていうか>>213か?

429 :Name_Not_Found:2022/01/04(火) 00:58:33.54 ID:???.net
>>426
やってみればわかるけど根本的に表示が違う

430 :Name_Not_Found:2022/01/04(火) 04:47:08.95 ID:???.net
viewportをwidth=500pxにしたとすると
1vw=1%=5pxじゃないの?

431 :Name_Not_Found:2022/01/04(火) 05:05:24.57 ID:???.net
横から似たような質問だけど
PCファーストのレスポンシブで
img{width:800px}

メディアクエリで
img{width:100%}
とやってきたけど

メディアクエリに書かずに
img{width:800px; max-width:100%}と書くほうが今風なの?
行数減らせるならこれで良いと思うけど、これのデメリットって何かある?

432 :Name_Not_Found:2022/01/04(火) 05:47:24.78 ID:???.net
imgにwidthを数値指定してる時点でオエッてなる

433 :Name_Not_Found:2022/01/04(火) 06:02:12.88 ID:???.net
>>432
%派?

434 :Name_Not_Found:2022/01/04(火) 08:44:41.46 ID:???.net
>>432
属性で指定するからいらねって事?

435 :Name_Not_Found:2022/01/04(火) 08:51:25.16 ID:???.net
pcサイトならpx指定しても問題無い

436 :Name_Not_Found:2022/01/04(火) 13:11:21.36 ID:???.net
>>428
自分でも何言ってるかよくわからないですね。
コンテナ幅をpx指定することは今どきはないと聞きました。
であれば、どうやって指定するのかなということです。


ワイド画面では横長になりますからmax-widthの指定は必要でしょう。
だったら、最初から1000px前後で固定でいいんじゃないかなと。

https://ideone.com/pWULZO

437 :Name_Not_Found:2022/01/04(火) 13:18:44.93 ID:???.net
>>417
まず、jQuery, CSS Selector から学ぶ

Vue.js, React は、VSCode, Node.js, npm/yarn, webpack/babel, package.json、
圧縮などの、asset pipeline・タスクランナーも必須で、
プロジェクトを作る、テンプレート・フレームワークだから、

軽く、jQueryの数十倍は難しい!

438 :Name_Not_Found:2022/01/04(火) 13:23:24.02 ID:???.net
vw は、Line みたいな低レベルなサイトが多い

画面の95% が真っ黒で、真ん中に画像が1つだけある。
そして、どんなに拡大しても、サイズが変わらないから、見えないまま

これが文字なら、小さくて読めないまま

絶対に拡大できない

439 :Name_Not_Found:2022/01/04(火) 13:37:45.94 ID:???.net
>>436
8の倍数とか今時はどうとか訳わからん知識を仕入れてくるのをやめたほうがいいよ
根本をわかってないから

440 :Name_Not_Found:2022/01/04(火) 13:47:38.65 ID:???.net
>>439
そうですね、もう適当にやります。
主要なサイトは1000pxくらいで固定しているところが多いみたいですね。

441 :Name_Not_Found:2022/01/04(火) 17:08:31.76 ID:???.net
>>436
>コンテナ幅をpx指定することは今どきはないと聞きました

そいつをここに連れてこい

442 :Name_Not_Found:2022/01/04(火) 17:14:51.32 ID:???.net
知恵袋におります

443 :Name_Not_Found:2022/01/04(火) 17:26:11.30 ID:???.net
ではYahoo知恵遅れのサービスを停止させろ

444 :Name_Not_Found:2022/01/04(火) 17:51:01.83 ID:???.net
本当にいいのですか?

445 :Name_Not_Found:2022/01/04(火) 18:03:44.00 ID:???.net
おk

446 :Name_Not_Found:2022/01/04(火) 19:48:04.77 ID:UsERrHAH.net
html、css、javascriptを学びたいと思っています。
今は独学で勉強中なのですが、参考書だけではわからない部分もあり
4月ころから始まる職業訓練に行こうかなとも迷っています。
独学でも会社で通用する技術を身に着けられるものなんでしょうか。
それともやはりスクールなり訓練なりを受けた方が良いのでしょうか。
諸先輩方のアドバイスを頂ければ幸いです。

447 :Name_Not_Found:2022/01/04(火) 19:52:34.45 ID:???.net
当然独学で十分
なぜなら昔と違ってネットや動画でありすぎるから
それでダメなら向いていない

448 :Name_Not_Found:2022/01/04(火) 20:15:51.90 ID:UsERrHAH.net
>>447
返信ありがとうございます。
貴重なご意見、これからの参考にさせて頂きます。

449 :Name_Not_Found:2022/01/04(火) 20:23:53.75 ID:???.net
>>437
アドバイスありがとうございます。
VueやReactが必要なケースは限られていて、ほとんど(特に小規模なもの)の場合は jQuery で足りると理解しました。
ちょうど年末に図書館で借りた「jQuery 最高の教科書」という本が手元にあるので 目を通したいと思います。

450 :Name_Not_Found:2022/01/04(火) 23:25:43.75 ID:???.net
その理解では時代に取り残されるぞ

451 :Name_Not_Found:2022/01/05(水) 03:51:00.38 ID:???.net
職業訓練だと一応仕事の斡旋もしてくれるから
いけるなら行ったほうがいい
あと独学だと向いてる向いてない気がつかない場合もあるから
実際働いてやっぱ向いてないで辞めるやつ
ほんと迷惑なんで

452 :Name_Not_Found:2022/01/05(水) 05:31:37.65 ID:???.net
(´・ω・`)・ω・`) キャー
/  つ⊂  \  怖いー

453 :Name_Not_Found:2022/01/05(水) 05:52:26.33 ID:???.net
HTMLが全く使いこなせていないのですが、勉強方法として「自分が真似したいと思う他人のHPのソースコードをよく読み込む」というのは効果がありますか?

454 :Name_Not_Found:2022/01/05(水) 06:12:08.81 ID:???.net
>>453
ある

455 :Name_Not_Found:2022/01/05(水) 07:15:07.98 ID:???.net
>>450
取り残されるのではない、しがみつくのだ

456 :Name_Not_Found:2022/01/05(水) 07:52:14.09 ID:???.net
>>455
さすがです

457 :Name_Not_Found:2022/01/05(水) 08:51:57.70 ID:???.net
>>450
了解です。
とりあえず JQuery を使えるようになって、少し遅れてVueまたはReactの勉強をしたいと思います。

458 :Name_Not_Found:2022/01/05(水) 09:17:45.83 ID:???.net
Jqueryって入れすぎるとサイト重くなるからCSSでできるならCSSで、JavaScriptでできるならJavaScriptでって分けなきゃ行けないんだろ?
極力JQueryは入れないほいがいいって

459 :Name_Not_Found:2022/01/05(水) 09:36:35.47 ID:???.net
>>458
なるほど。
ということは まずは(可能であれば) Bootstrap 等で済ますことを考えるほうが良いですかね。

460 :Name_Not_Found:2022/01/05(水) 19:25:34.83 ID:???.net
根本がわかってないパッパラパー

461 :437:2022/01/05(水) 19:43:35.66 ID:???.net
jQuery を使わず、素のJavaScript で作るとバグるだけ。
開発時間も掛かるし、低品質

うまい・安い・速いの逆。
まずい・高い・遅い

Bootstrap, Bulma, TailWind などもそう。
これらを使わず、素のCSS で作るとバグるだけ。
開発時間も掛かるし、低品質

開発時間を幾ら掛けても、低品質のままで保守できない。
絶対に高品質にならない

462 :Name_Not_Found:2022/01/05(水) 20:47:21.84 ID:???.net
>>461
だっさ

463 :Name_Not_Found:2022/01/05(水) 20:59:16.82 ID:???.net
>>461
低品質と高品質の基準が不明

464 :Name_Not_Found:2022/01/05(水) 21:34:35.15 ID:???.net
>>461
自ら無能ですって言ってるようなもんだなそれ

465 :Name_Not_Found:2022/01/06(木) 15:51:20.56 ID:???.net
InstagramやTwitterのハッシュタグ検索の結果をサイトに埋め込みたいんだけど
やり方あるのかな?

466 :Name_Not_Found:2022/01/06(木) 19:52:26.17 ID:RVZlpayP.net
質問していいでしょうか?
今、htmlを書いているのですが、ヘッダの下にあるはずのものが中に入り込むのですが
どうしたらいいでしょうか?

467 :Name_Not_Found:2022/01/06(木) 20:16:02.04 ID:???.net
閉め忘れ

468 :Name_Not_Found:2022/01/06(木) 20:35:45.90 ID:???.net
戸締まりとhtmlタグの閉め忘れに用心するのは
昭和から令和になっても変わらないよな

469 :Name_Not_Found:2022/01/06(木) 20:44:43.28 ID:???.net
戸締りはIOTでカバーできるようになるね

470 :Name_Not_Found:2022/01/07(金) 02:19:40.83 ID:???.net
要素名が連番になってて

<div id=“unit-001”>〜
<div id=“unit-002”>〜
<div id=“unit-003”>〜

unitって頭のついた要素名だけに
何かしたい時って疑似クラスでどうにかならない?
chiidはナシで

471 :Name_Not_Found:2022/01/07(金) 02:27:39.47 ID:???.net
[id^="unit-"]

472 :Name_Not_Found:2022/01/07(金) 16:38:30.55 ID:???.net
全ての行を中央揃えにしたいのですが、一々HTMLでセンタリングするのが面倒です
CSSでまとめて中央揃えにするにはどうしたら良いですか?

473 :Name_Not_Found:2022/01/07(金) 16:59:44.15 ID:???.net
text-align:center;

474 :Name_Not_Found:2022/01/07(金) 19:18:15.55 ID:???.net
<div class>

475 :Name_Not_Found:2022/01/07(金) 19:22:46.84 ID:???.net
<div class="toc">
<div class="title">もくじ</div>
<ul class="toc-ul">

</ul>
</div>

<div class="content">
<h2>header2</h2>
<p>本文本文本文</p>
<h2>header2</h2>
<p>本文本文本文</p>
</div>

javascriptでtocをつくてるです。
content内のヘッダーをqueryselectorでとって、idをつけてます。
その後liタグを作り、toc-ul内に入れとります。


liタグが無い場合、tocとtitleとtoc-ulを非表示にするという処理はCSSで出来ますでしょうか?

headerがない場合はtoc自体を挿入しないというやり方の方がスマートですかね?

476 :Name_Not_Found:2022/01/07(金) 19:47:11.43 ID:???.net
非表示にする際は、.invisible とか、何かクラスでも付ければ

477 :Name_Not_Found:2022/01/07(金) 20:25:09.77 ID:???.net
回答ありがとうございます。
子要素がない場合、親要素を非表示にするという処理部分はjsでしょうか?

478 :Name_Not_Found:2022/01/07(金) 20:31:25.47 ID:???.net
できました
よし

479 :Name_Not_Found:2022/01/07(金) 22:42:25.58 ID:???.net
>>473
教えていただきありがとうございます

480 :Name_Not_Found:2022/01/07(金) 22:57:15.58 ID:???.net
JavaScript で、visible/invisible のどちらかのクラスを付ければ?

.visible { display:block; }
.invisible { display:none; }

<div class="abc visible">見える div</div>
<div class="abc invisible">見えない div</div>

481 :Name_Not_Found:2022/01/07(金) 23:29:02.00 ID:???.net
jsスレいけって

482 :Name_Not_Found:2022/01/08(土) 00:07:08.71 ID:???.net
display:blockで表示/非表示に使うと
ブロックレベル要素(改行される)、のなんとかならんの
名前からしてvisibility:hidden使いたいのにこれもまた変なオマケがついてくるし

483 :Name_Not_Found:2022/01/08(土) 03:41:52.63 ID:???.net
>>471
おおIDでやればいいのか!
ありがとう

484 :Name_Not_Found:2022/01/08(土) 08:13:16.70 ID:dN5YKXKT.net
https://patriot.futene.net/work/imsosad/index.html
大変図々しいのですがこのページのコードをどう書いたら良いか教えて下さい。
見出しの「I'm so sad」からバックする「戻る」までを太枠の中に収めたいです。
また、動画は「更に精進していきたいです」〜「戻る」の間に入れたいです。
コードに書いてある通り、太枠内の余白はwidth:1000px、padding: 10px 50pxくらいが良いかなと思っています。

初心者の為、コードを弄っている内に収拾がつかなくなってしまいました........
勝手申し上げますが、何卒宜しくお願い致します。

485 :Name_Not_Found:2022/01/08(土) 08:18:08.07 ID:dN5YKXKT.net
スマホから見ると動画は「更に精進〜」から「戻る」の間に収まっていますが、PCから見ると収まっていません。

486 :Name_Not_Found:2022/01/08(土) 14:24:53.74 ID:???.net
wpならcocoonなどを使うのが普通なんでしょうか?
これこれで操作を覚えるのが大変そうなんですが。

html css php出来れば自在にカスタマイズ出来るし、どちらがいいんですかね。

487 :Name_Not_Found:2022/01/08(土) 14:45:39.17 ID:???.net
普通ではない

488 :Name_Not_Found:2022/01/08(土) 15:55:06.22 ID:???.net
学習コストという概念を学んだので最近は

489 :Name_Not_Found:2022/01/08(土) 16:07:28.36 ID:???.net
>>484-485
10年以上前の古い書き方だとかclass名がおかしいとかレスポンシブ化は?とか、色々とツッコミどころ満載だけども
とりあえず、必要最低限だとこんな感じ?
https://jsfiddle.net/4mb6Lzq2/
新たに枠で括りたいところはdivで括って、元々あったpと同じスタイルにして、枠内のpを適当に幅調整して、文末に<br>を追加
動画部分は便宜上、少し端折ってるけど元のコードから変えなくてもいい

490 :Name_Not_Found:2022/01/08(土) 16:29:28.23 ID:???.net
こういうわきまえてる感じの質問者の人は好感度高いわ
きっとモノ作りが好きなんだろうな
小説書いたり曲作ったりいい趣味やんな

変に色気だしてwebもわかるんだぜ的なサイトより手作り感が好感持てるわ

491 :Name_Not_Found:2022/01/08(土) 17:47:41.64 ID:???.net
そのサイトいいな
2000年当たりの個人サイトみたいで懐かしい

492 :Name_Not_Found:2022/01/08(土) 17:54:00.40 ID:dN5YKXKT.net
>>489
親切にファイルを共有して下さりありがとうございます!
今弄っている最中なのですが、自分が直したい部分を直せているので理想に近付いている気がします。
「I'm so sad」「戻る」の部分だけ中央揃えにしたいのですが、どうすれば良いでしょうか?
<p class="text-align:center;"></p>で括ってあるのですが何故か左揃えになっています

493 :Name_Not_Found:2022/01/08(土) 17:55:33.15 ID:dN5YKXKT.net
>>490
駄作しか作れませんけどね………

>>491
完全に2000年代のHPですよねw

494 :Name_Not_Found:2022/01/08(土) 18:15:50.37 ID:???.net
>>492
classは、デザインを指定したりするための分類名を割り当てるのに使うものであって
スタイルを指定するためのものじゃないので、CSSの方でpにtext-align:center;を
追加するか、HTMLの方でclassの記述をstyleに書き換えてみてください
https://jsfiddle.net/Lwcgtq54/

495 :Name_Not_Found:2022/01/08(土) 18:26:07.46 ID:dN5YKXKT.net
>>494
無事できました!本当にありがとうございます!

496 :Name_Not_Found:2022/01/08(土) 18:27:00.49 ID:???.net
>>493
flashバリバリ、jqueryで動くグニグニして
結局1周回ってシンプルに戻ってくるから、これで大丈夫
でもおまえさんはもうちょっとhtml勉強しる

497 :Name_Not_Found:2022/01/08(土) 18:27:27.42 ID:???.net
>>495
お、書いてる間に修正された、おめ

498 :Name_Not_Found:2022/01/08(土) 19:29:38.49 ID:???.net
スクロールさせるとスクロールしないでアニメーションし始めるiPhoneみたいなサイトほんとイライラする

499 :Name_Not_Found:2022/01/08(土) 21:13:53.50 ID:???.net
あぁいう系はデザイナーやプランナーのオナニー博覧会だからなぁ

500 :Name_Not_Found:2022/01/08(土) 22:39:37.66 ID:???.net
>>484
Ruby on Rails のレスポンシブ対応では、Bootstrap がほとんど

他には、Bulma, TailWind など

501 :Name_Not_Found:2022/01/08(土) 22:45:46.62 ID:???.net
たいてい、アニメーションするようなサイトは、

画像などのダウンロードサイズが大きいのを、気づかれないようにするため

502 :Name_Not_Found:2022/01/08(土) 23:17:45.00 ID:???.net
うねうねグリグリ無駄に動くサイトってその機能で多めに料金取れるとかお客さん喜ぶとかなのかな
背景で画面幅いっぱいに動画が強制再生されるページも嫌だ

503 :Name_Not_Found:2022/01/09(日) 13:02:29.40 ID:???.net
<table style="width:300px;background:#00ffff">
<tr>
<td>aaa</td>
</tr>
</table>

<div style="position:fixed;left:200px">bbb</div>

PCで横スクロールするとbbbの位置が固定されますが
F12キー押してスマホモードにするとスクロールしてもbbbが固定されません
どうすれば固定されますか?

504 :Name_Not_Found:2022/01/09(日) 17:52:49.40 ID:???.net
>>503は300pxではなくて3000pxです

505 :Name_Not_Found:2022/01/09(日) 19:46:44.04 ID:???.net
エミュレータで固定されないからといって
それが何だというのだ

506 :Name_Not_Found:2022/01/09(日) 21:52:48.79 ID:???.net
>>505
スマホ実機でも固定されないんだけど

507 :Name_Not_Found:2022/01/09(日) 22:48:36.28 ID:???.net
:root { overflow: hidden; }
body { overflow: auto; margin: 0; height: 100vh; height: -webkit-fill-available; }
とか

508 :Name_Not_Found:2022/01/09(日) 23:53:07.22 ID:???.net
最初からスマホで固定されないって書けばいいのに

509 :Name_Not_Found:2022/01/10(月) 11:02:46.80 ID:AoSQOuPX.net
age

510 :Name_Not_Found:2022/01/10(月) 21:28:02.67 ID:???.net
ChromeのDevToolのElement Toolの検索でHtmlはShift+F(Windows)でやるのだけども、
Stylesの方はどうして検索するの?

511 :Name_Not_Found:2022/01/10(月) 21:57:10.96 ID:???.net
F12→F1→ショートカット

512 :Name_Not_Found:2022/01/10(月) 23:19:14.08 ID:nwBoX0wl.net
>>511
ショートカット?

513 :Name_Not_Found:2022/01/10(月) 23:59:48.55 ID:???.net
>>512
Yes! Shortcut.

514 :Name_Not_Found:2022/01/11(火) 00:03:25.39 ID:???.net
YES KitKat

515 :Name_Not_Found:2022/01/11(火) 18:47:11.28 ID:???.net
htmlやcssをカプセル化することはできますか?
それができれば他人が作ったコードとidやclassが重複しなくていいと思ったので

516 :Name_Not_Found:2022/01/11(火) 18:57:18.11 ID:???.net
>>515
Shaow DOM

517 :Name_Not_Found:2022/01/11(火) 19:49:19.10 ID:???.net
cocoonとか使うとカスタマイズが余計めんどくなりますか?

518 :Name_Not_Found:2022/01/11(火) 19:53:18.54 ID:???.net
>>486

519 :Name_Not_Found:2022/01/11(火) 20:15:12.88 ID:???.net
>>517
まずはやってみようか坊主

520 :Name_Not_Found:2022/01/11(火) 22:06:34.09 ID:???.net
>>517
最初cocoonだったけど、こんなんじゃ何も表現できないってなって独自テーマ作ったよ

521 :Name_Not_Found:2022/01/11(火) 23:02:39.13 ID:???.net
wp始めたての時はcocoonすげえって思ったけど
3ヶ月経ったら自分でfunctionと共にテーマ作ってたわ

522 :Name_Not_Found:2022/01/11(火) 23:21:10.33 ID:???.net
>>515
SASS が、グローバルな名前空間を使う、@import を廃止にして、
スコープのある名前空間の@use に変える事にしたから、すごい影響がある

難し過ぎて、多くの人が脱落するのじゃないか?

523 :Name_Not_Found:2022/01/12(水) 00:14:54.95 ID:???.net
脱落してくれたら飯の種が増えるがそうはならんだろうなあ

524 :Name_Not_Found:2022/01/12(水) 01:38:20.58 ID:iPngkuLe.net
>>516
つまりjavascript使わないとできないってことか

525 :Name_Not_Found:2022/01/12(水) 05:58:41.83 ID:???.net
cocoonとか余計めんどく感じてきますよね、、、

526 :Name_Not_Found:2022/01/12(水) 07:01:27.33 ID:???.net
cssで変更しようと思ったらメニューで用意されているとイラっとくるcocoon

527 :Name_Not_Found:2022/01/12(水) 09:11:17.26 ID:???.net
vscode以外のエディタでおすすめありますか?
必須なのはインテリセンスですね

emaxとか使えたらかっこいい
>>526
やはり自作します
大まかにイメージ作るのには便利そうです

528 :Name_Not_Found:2022/01/12(水) 09:27:10.57 ID:???.net
そうそう自作テーマの参考には十分

529 :Name_Not_Found:2022/01/12(水) 10:13:24.93 ID:???.net
そうしときます。

530 :Name_Not_Found:2022/01/12(水) 14:00:07.15 ID:???.net
cocon触ってきましたけど、結局、コクンカスタムしたいとなると、色々いじらないといけないですね。

531 :Name_Not_Found:2022/01/12(水) 15:20:21.86 ID:???.net
というかスレ違いだから他所でやれ

532 :Name_Not_Found:2022/01/12(水) 16:52:27.75 ID:???.net
>>446
もう見てないかもしれないけど、俺は職業訓練上がりでコーダーの派遣やってる。
>>447の言う通り訓練では調べれば出てくるような基本のことばかり学ぶから、確かに独学でも出来ないわけではないだろうけど、
調べて分からない部分もあるっていうんなら訓練行くのもいいんじゃない
俺も自分でイマイチ理解しきれなかったこととか、細かいデザインで悩んだこととか聞けたから、行ってよかったと思ってるよ

ただ職業訓練に来る人って給付金目当ての人も多くて、やる気ない人とか子供みたいな人も多くてビックリした、ストレス溜まるかも
最後までポートフォリオ完成まで持って行った奴は2割、やる気なし理解できてないポートフォリオ未完成4割、途中で脱落4割
受講は無料だし俺も給付金貰ってたからそこは我慢してやってた、金あるならスクールのほうがまだ質の高い学習できるかもね

仕事の外旋はコロナ過ってこともあって無いようなもんだった、でもポートフォリオのアドバイスとかは貰えたからまぁ就職の役には立ったと思う
訓練とかスクール上がりの奴は信用出来ないって人もいるし、独学よりは訓練スクール上がりのほうがっていう人もいる
就職難易度はポートフォリオとかも重要だと思うけど、やっぱ年齢やね…

533 :Name_Not_Found:2022/01/12(水) 19:39:25.24 ID:???.net
サイトのバランスというのは、フォントサイズと余白で決まるのですか?
テキスト主体のサイトになります。

534 :Name_Not_Found:2022/01/12(水) 20:26:11.23 ID:???.net
客観的な基準が示せない(つまり主観が入る)ような質問には答えようがないんだわ

535 :Name_Not_Found:2022/01/12(水) 20:57:59.98 ID:???.net
はい。

開発者ツールでcss適用後のフォントサイズは調べられないのでしょうか?
vivaldiなのでchromeと同じです。

536 :Name_Not_Found:2022/01/13(木) 00:52:31.90 ID:???.net
computedのとこ

537 :Name_Not_Found:2022/01/13(木) 10:33:07.80 ID:???.net
>>536
ありがとうござす

538 :Name_Not_Found:2022/01/13(木) 14:03:21.54 ID:???.net
>>532
トップページ(レスポンシブ)のコーディングにどれくらいの時間かかりますか?

539 :Name_Not_Found:2022/01/13(木) 14:35:59.25 ID:???.net
css変数ってあんま使わんですか?

540 :Name_Not_Found:2022/01/13(木) 16:26:10.16 ID:???.net
>>538
規模によって変わる質問など無意味

541 :Name_Not_Found:2022/01/13(木) 17:38:33.58 ID:???.net
>>539
cssの変数定義ってそのままファイルに残っちゃうのがね
ファイル容量的にsassからcss吐き出した方が有利だからでは?
cwv対策にcssファイル小さい方がいいしね

542 :Name_Not_Found:2022/01/13(木) 17:58:27.48 ID:???.net
jsからcssに数値渡したい時は使うようにしてるな
styleを書き換えずにcss変数を書き換える
元のcssは上書きされない

543 :Name_Not_Found:2022/01/13(木) 18:26:12.59 ID:???.net
>>541
共通する部分には便利なので使っます

544 :Name_Not_Found:2022/01/13(木) 19:14:18.83 ID:???.net
ブログカードのflexでのデザインについて
ブログカードを包む要素は.wrapperです
以下のようにブログカードを2列にしたいと思います

■■
■■
■■

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

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

wrapperの幅が変わることを想定しています

545 :Name_Not_Found:2022/01/13(木) 19:37:53.32 ID:???.net
width: calc((100% - 32px) / 2);

だけど2列固定ならgridの方が簡単
wrapperに
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
するだけ

546 :Name_Not_Found:2022/01/13(木) 19:48:01.81 ID:???.net
>>545
レスポンシブにはしますけど、スマホでもpcでも2列固定ですね
ありがとうございました

547 :Name_Not_Found:2022/01/13(木) 20:06:41.27 ID:???.net
>>545
すみません、これだとコンテナからはみ出ますね
調べます

548 :Name_Not_Found:2022/01/13(木) 20:45:41.77 ID:???.net
すみません 私のミスでした

549 :Name_Not_Found:2022/01/14(金) 00:46:39.02 ID:???.net
レスポンシブれてない

550 :Name_Not_Found:2022/01/14(金) 05:20:43.51 ID:???.net
Gridのfrってなんの略?
ググったら
>外径を表す単位でフレンチと読みます
って医学関係の用語が引っかかる

551 :Name_Not_Found:2022/01/14(金) 08:54:13.88 ID:???.net
>>550
フレーム

552 :Name_Not_Found:2022/01/14(金) 15:53:12.49 ID:???.net
>>539
くっそー、、いつの間に出来てたんだ。。5年前くらいになんで無いんだよって思ってたわ
IE未対応ならまあ無理だったが。その後はscssで対応してた 
今後はこっちつかう。scssもjQueryと同じ運命ただるだろう。サンクス

553 :Name_Not_Found:2022/01/14(金) 16:45:35.85 ID:???.net
>>551
ありがとうございます
これでまた一歩、CSS Gridを覚える気力が湧きます

554 :Name_Not_Found:2022/01/14(金) 20:59:20.88 ID:???.net
ブログカードの高さというのはheightで固定するものでしょうか?
ありがちな方法を教えて下さい。

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

画像
記事タイトル
投稿日

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

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

https://arrown-blog.com
ここっす

555 :Name_Not_Found:2022/01/14(金) 22:16:11.56 ID:???.net
heightで固定しないね

556 :Name_Not_Found:2022/01/14(金) 22:31:08.97 ID:???.net
flexで、並んでるやつは高さが揃うようになってるだけ

557 :Name_Not_Found:2022/01/14(金) 22:39:45.53 ID:???.net
>>532
レスありがとうございます。
ご親切に詳しく教えて頂き感謝です。
実はご指摘頂いた有料スクールも選択肢に入れていて、
独学をもう少し進めて不明点がぬぐえないならスクールに通うか、訓練校に行こうか、
と考えている次第です。
いずれにせよ決断はもう少し様子を見てからになりそうです。
大変参考になりました。
ありがとうございました。

558 :Name_Not_Found:2022/01/14(金) 22:46:57.73 ID:???.net
金かけて行くようなもんじゃない
やりたいことググればすぐに上達する
逆に何がしたいか目的がない奴は金かけても無駄金になるぞ

559 :Name_Not_Found:2022/01/14(金) 23:46:58.89 ID:???.net
YouTube で有名な、雑食系エンジニア・KENTA の有料サロンの、
Ruby on Rails 初心者用コースには、3千人が参加しているけど、

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

KENTAは、200万円の学校をぼったくりと言って訴えられているw
マコなりの学校は80万円とか?

560 :Name_Not_Found:2022/01/15(土) 00:34:33.76 ID:???.net
>>557
スクールは金の無駄だからやめとけ
その金を作業環境やプログラム、デザイン系の専門書
またはアドビCCに費やした方がマシ
職業訓練校なりスクールなりどっちでもいいが
コーダー1本で仕事なんてできないから
どのみちプログラムやデザインの知識が必要になってくるし
まったく素人から始めるなら
そのための専門書が年間10万近くかかってくる

561 :Name_Not_Found:2022/01/15(土) 00:55:43.68 ID:???.net
焦ると学校の餌食になる
お笑い、声優、youTuber、プログラムなどスクールが市場にできるということはそういうことだ

ネギ背負った夢見る鴨が鍋に自分から入るのが養成スクール

562 :Name_Not_Found:2022/01/15(土) 05:32:03.93 ID:???.net
2008年ぐらいのphpを見てたら
html内のstyle/cssの前に
/*<![CDATA[*/
とかあるけど、これは何?ブラウザへのおまじない?

563 :Name_Not_Found:2022/01/15(土) 06:37:15.30 ID:???.net
>>562
後ろのどっかに/*]]*/があるはず
CDATAセクションでググって

564 :Name_Not_Found:2022/01/15(土) 07:18:43.31 ID:???.net
>>556
flexだと自動的に揃うんですか
ブログカードは固定したほうがいいですか?一般的に

565 :Name_Not_Found:2022/01/15(土) 09:47:42.41 ID:???.net
同じヒエラルキーの要素がいくつか横並びするなら
高さは揃ってる方が見映えいいんじゃね
ブログに限らず

566 :Name_Not_Found:2022/01/15(土) 10:39:27.71 ID:???.net
実験してみますです

567 :Name_Not_Found:2022/01/15(土) 10:42:58.89 ID:???.net
最初は人に教わる環境は必要だと思うぞ
1人だと頓挫するから鞭売ってもらう必要がある

教科書やネットに載ってない重要な事はたくさんある
それと参考書やネットが人に現場で使わない無駄な情報が多すぎる

568 :Name_Not_Found:2022/01/15(土) 10:43:54.93 ID:???.net
かといって高額なぼったくり塾にはつかまるなよ

569 :Name_Not_Found:2022/01/15(土) 10:46:15.35 ID:???.net
可変しやすい記事タイトル部分部分だけ切ることにします
文字数制限ならoverflowhiddenなり

570 :Name_Not_Found:2022/01/15(土) 10:51:00.77 ID:???.net
CSSが次から次と新しいの出してくるけど
リリース情報とかどこでチェックしてる?

571 :Name_Not_Found:2022/01/15(土) 10:51:55.23 ID:???.net
ころすけなり

572 :Name_Not_Found:2022/01/15(土) 11:15:08.11 ID:???.net
画像の大きさにブログカードを合わせるのか、ブログカードの大きさに画像をあわせるのかどちらなんでしょうか?

573 :Name_Not_Found:2022/01/15(土) 11:21:20.63 ID:???.net
デサインに合わせる

574 :Name_Not_Found:2022/01/15(土) 11:27:26.35 ID:???.net
>>557
ちなみに年齢にいくつぐらいなんだろう?
年齢が高いのなら未経験は給与は下がるだろうから折り合いつけ無いといけないよ
年齢が若く就職根ざしてるなら訓練校も悪くなかったよ

学校によるんだろうけど学校に企業説明に来てくれる企業もあって
家で悶々とさせているよりは就職を考えるときのハードルも下がった
ただし他の人も行ってるけど学ぶ姿勢がゆるい人も多いから
それに影響されずに積極的に授業外でも課題やったり質問していく姿勢持ってたら悪くないと思う
何より悩んだ時に人に聞ける環境は貴重だと感じた

575 :Name_Not_Found:2022/01/15(土) 11:28:53.07 ID:???.net
>>572
デザイン次第

576 :Name_Not_Found:2022/01/15(土) 12:03:29.99 ID:???.net
>>573
では枠が最初ですよね。
枠に合わせて画像を縮小させることで、画像のアスペ比が崩れる可能性はありますが、その点はどうしてますか?

577 :Name_Not_Found:2022/01/15(土) 12:39:36.80 ID:???.net
アスペ比とかキモイ略つかうな

578 :Name_Not_Found:2022/01/15(土) 13:06:48.19 ID:???.net
>>576
画像の縦横比を揃えるか、object-fitか

579 :Name_Not_Found:2022/01/15(土) 13:45:39.42 ID:???.net
>>578
どうもです。

https://webdesignday.jp/inspiration/technique/css/7976/
いい記事だったんで張っておきますね。

580 :Name_Not_Found:2022/01/15(土) 14:23:05.96 ID:???.net
アイキャッチがない場合の表示方法ってどうしてますか?
ブログサービス問わず使える方法といえば、背景画像の設定くらいしか思いつかないのですが

581 :Name_Not_Found:2022/01/15(土) 14:43:05.40 ID:???.net
まあ画像じゃなくてもいいですね
アイキャッチないです、という表示を出来れば

positionなど使ってみます

582 :Name_Not_Found:2022/01/15(土) 17:55:48.15 ID:???.net
>>563
亀レスすまんです
たしかにこのphpのhtmlタグにはxhtmlと書いてあるから
CDATAの中にある文字列はエスケープせずにそのままコードとして受け取ってくれ、みたいな感じ?

583 :Name_Not_Found:2022/01/15(土) 20:30:05.09 ID:???.net
ブログカードをデザインする場合、左の赤ボックスと右の黒ボックスはどのくらいの比率にしますか?
赤は固定、黒はflex-grow:1;などで目一杯伸ばしてみたんですが、これだと小さいデバイスで見た場合に、黒だけ縮み、画像の大きさはそのままです。



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

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




https://ideone.com/r9tL47

584 :Name_Not_Found:2022/01/15(土) 20:36:17.09 ID:???.net
デザインの質問やんけ
スレ違い

585 :Name_Not_Found:2022/01/15(土) 20:36:46.74 ID:???.net
黄金比に縛られると凡庸なデザインばかりになるぞ
あくまで目安だ

586 :Name_Not_Found:2022/01/15(土) 20:47:29.28 ID:???.net
>>584
もうお前がどっか行けばいい

587 :Name_Not_Found:2022/01/15(土) 20:48:30.49 ID:???.net
>>586
お前もついて行け

588 :Name_Not_Found:2022/01/15(土) 20:58:49.58 ID:???.net
自分がどういうデザインにしたいかで決めればいいのに
画像もレスポンシブにしなくていいの?

589 :Name_Not_Found:2022/01/15(土) 22:06:34.13 ID:???.net
黄金比無視してやります

590 :Name_Not_Found:2022/01/15(土) 23:02:33.85 ID:???.net
教えてちゃんには酷やがその辺のサイト見たらわかることや

591 :Name_Not_Found:2022/01/15(土) 23:28:47.27 ID:???.net
>>590お前スレタイも読めないの?安価もつけられないビビりキッズ君には酷なことやがw

592 :Name_Not_Found:2022/01/15(土) 23:54:33.89 ID:???.net
自分だったら
画像のwidthは%単位、heightはautoにするかな

593 :Name_Not_Found:2022/01/16(日) 00:06:06.88 ID:???.net
>>590
標準語を使おう

594 :Name_Not_Found:2022/01/16(日) 10:06:28.43 ID:???.net
>>588
画像もレスポンシブにしますね。
画像をレスポンシブにする=黄金比は捨てる、ちいうことになるんでしょうか?

595 :Name_Not_Found:2022/01/16(日) 10:11:26.29 ID:???.net
>>592
画像はアイキャッチなので、objectfitを使います。
画像の横幅100%ということは、画像を包む要素にpxで幅を指定することになりますよね?

596 :Name_Not_Found:2022/01/16(日) 10:30:06.80 ID:???.net
>>594
はい、レスポンシブ対応なら崩れるわ
正解なんて無いから好きにすりゃいいよ

どうしてもデザインが気になって決めかねてるのなら
自分が気に入った既存のWebサイトの比率を参考にしたらどうかね

597 :Name_Not_Found:2022/01/16(日) 10:34:26.10 ID:???.net
>>596
比率なら崩れないとは思うんですが

598 :Name_Not_Found:2022/01/16(日) 10:42:28.77 ID:???.net
>>583
PCもタブレットもスマホも全て画面が縦横比同じならわかるけど
現実は違うのでそこに同じ比率を保とうとすると無理が出るのは当然。(しかも1:1.6なんて無謀)

599 :Name_Not_Found:2022/01/16(日) 10:46:41.82 ID:???.net
>>597
横長(PC)用のデザインに縦長(スマホ)用のデザインを同じ比率でそのまんま突っ込んだらどうなるか想像してみたらいい。
仮に黄金比が美しいと仮定したとしても読みつらいよ。

webはアート作品ではない。 見て美しいね。で終わるなら糞だ。
メディアであり情報提供してアクションさせてなんぼだ

600 :Name_Not_Found:2022/01/16(日) 10:49:50.25 ID:???.net
>>597
崩れるから質問に来たんとちゃうの?
崩れなくてそれを良しとするのなら、そもそも質問にくる必要ないと思うのだが

あと文字サイズも考慮に入れて考えな

601 :Name_Not_Found:2022/01/16(日) 11:59:37.87 ID:???.net
>>591
ブログカードのheightはどうやって決めてますか?
autoだと、縦長の画像を使ったときにブログカード全体が伸びてしまうので、どこか絶対値で固定しないといけないですが

>>599
>>600
妥協してやります

602 :Name_Not_Found:2022/01/16(日) 12:39:06.61 ID:???.net
作りたいデザインに合わせて決める

603 :Name_Not_Found:2022/01/16(日) 12:43:07.88 ID:???.net
8バイマン、黄金比マンになったのか?

604 :Name_Not_Found:2022/01/16(日) 12:58:26.77 ID:???.net
バカの一つ覚えみたいに何でも黄金比が正解と思ったら大間違いだからな
球体を見ろ。あんなに美しいのに黄金比なんかじゃない。
女を見ろ。花火見ろ、自分のPCモニター見ろ。
全く黄金比じゃない。
周囲のあらゆる条件が揃ってそれぞれ出番となるのだ

605 :Name_Not_Found:2022/01/16(日) 13:24:41.25 ID:???.net
>>601
max-heightやmax-width使わんの?

606 :Name_Not_Found:2022/01/16(日) 13:52:29.88 ID:???.net
>>605
使ってみます
ブログカードのうち、大枠に指定するもんなんですかね?

607 :Name_Not_Found:2022/01/16(日) 13:53:36.84 ID:???.net
object fit使うから画像にしときます

608 :Name_Not_Found:2022/01/16(日) 15:33:39.12 ID:???.net
数十秒で答えが出るような事は、精査してから書き込みなさいよ
LINEじゃないんだから

609 :Name_Not_Found:2022/01/16(日) 15:52:42.19 ID:???.net
>>608
優しくねえやつは去れよ
要らねえんだよお前

610 :Name_Not_Found:2022/01/16(日) 15:57:39.02 ID:???.net
専スレ持ちのあの人だろうから
専スレのノリで質問しちゃうんだろうね

>>609
君も優しくなりなさんな

611 :Name_Not_Found:2022/01/16(日) 16:25:24.07 ID:???.net
>>609
そういう優しさ強要の煽りレスって、質問者と同一人物と見なされて
結果、誰にも相手にされなくなるんだけど、そういうのを狙ってるの?
それって質問者にとって全く優しくないんだけど、自覚はある?

612 :Name_Not_Found:2022/01/16(日) 16:54:30.54 ID:???.net
>>611
どうでもいいことでスレを汚すお前はどうなんだ
ただの荒らしは去れや

613 :Name_Not_Found:2022/01/16(日) 17:02:33.79 ID:???.net
>>609
黄金比マンの本音はこれか 氏ねよ

614 :Name_Not_Found:2022/01/16(日) 17:02:58.75 ID:???.net
>>611
いやいや質問者の自演だからw

615 :Name_Not_Found:2022/01/16(日) 17:06:46.35 ID:???.net
>>608
優しくねえなあ
死ねよ

616 :Name_Not_Found:2022/01/16(日) 17:07:36.43 ID:???.net
このスレはスレタイも読めねえキチガイが常駐して荒らしてるだけだな

617 :Name_Not_Found:2022/01/16(日) 17:08:49.38 ID:???.net
質問者が無駄なレスを注意されてるのを
キレて煽っちゃダメだろう

618 :Name_Not_Found:2022/01/16(日) 17:12:45.07 ID:???.net
>>614
いや、頭ごなしに同一人物認定するのもどうかと思ってさw

619 :Name_Not_Found:2022/01/16(日) 17:18:09.71 ID:???.net
実際に同一人物かどうかは知らんが、こうなってくると
せっかく作ったブログカードのサンプルも貼る気失せるな

620 :Name_Not_Found:2022/01/16(日) 17:23:33.17 ID:???.net
>>612
なるほど、忠告が質問者の利益になるというのが
全く理解できないのなら、確かにどうでもいいことだねw

621 :Name_Not_Found:2022/01/16(日) 18:42:11.12 ID:???.net
画像というのは縮小限界のようなものがあるんでしょうか?
chrome(vivaldi)のモバイルエミュで画面を縮小してくと、一定以下のところで縮小がとまります。
ブログカードは、今試行錯誤中です。

622 :Name_Not_Found:2022/01/16(日) 19:14:43.36 ID:???.net
>>609だが俺は質問者じゃないけどな
「どんな質問にも優しく答えるスレ」って書いてるのに一文字も従わず偉そうにしてる阿呆の不細工な顔よ
偉ぶる前にそのデブのお腹どうにかしろよみっともねえな
俺は今日2レスしかしてない
他ののレスは知らん

623 :Name_Not_Found:2022/01/16(日) 19:15:27.95 ID:???.net
>>610
俺に強要すんなよ
他に注意する奴らがいるだろ
と言ってもそいつは1人だけなんだろうけど

624 :Name_Not_Found:2022/01/16(日) 19:17:29.44 ID:???.net
>>611
質問者が論点じゃねえんだわ
スレのルール無視でググレカスなんて偉そうにできる立場じゃねえだろ
分かんねえならスレに来るなよ
そういうスレだろここ

625 :609:2022/01/16(日) 19:23:42.49 ID:???.net
>>621
LINEやってるか?
ここで質問した方がいいぞ
このスレはキチガイ1人が荒らしてるっぽい
5ちゃんねる運営がクソ過ぎてLINEのURL貼れねえわ

LINEのオープンチャットから行けばいい
オープンチャット「プログラミング初心者の集い」

626 :Name_Not_Found:2022/01/16(日) 19:27:07.90 ID:???.net
こうしてどんどん5ちゃんから人がいなくなる


まあ知らんけど

627 :Name_Not_Found:2022/01/16(日) 19:27:21.16 ID:???.net
ルール厨が1番ルールを無視して、すぐ上の質問にも答えず
偉そうに説教垂れて荒らしてるっていうw

628 :Name_Not_Found:2022/01/16(日) 19:43:32.57 ID:???.net
こんな日本語も読めねえからな


回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!
終わった話を蒸し返すやつは このスレにくるな!!!
自分で調べろという回答も禁止!!回答するかさもなくば何も書き込むな!!
質問側も節度あるレスで!質問前にスレ内を検索しましょう

629 :Name_Not_Found:2022/01/16(日) 19:48:40.75 ID:???.net
初心者にはLINEのオープンチャットの環境が一番いいよ
基本的にここと違って大人が多い

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

630 :Name_Not_Found:2022/01/16(日) 19:51:51.88 ID:???.net
そもそもいったい何のためのルールなんだ?っていうね
何をもって「優しい」のか「暴言」なのかは主観によるのに
他人に俺様ルールを強要するような奴は5chなんて向いてない

631 :Name_Not_Found:2022/01/16(日) 19:52:53.49 ID:???.net
object-fit使うと枠の下に余白ができるんですが、これはなんでしょうか?
アスペクト比と関係ありそうですが、調査中です。

computeではpaddingはありません。

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

https://ideone.com/W62DMT

632 :Name_Not_Found:2022/01/16(日) 19:53:10.90 ID:???.net
>>630
スレの>>1すら読まないお前は5ちゃんねるすら向いてない

633 :Name_Not_Found:2022/01/16(日) 19:56:15.90 ID:???.net
LINEのオープンチャットやってるから、LINEみたいな質問してる
ってことか。理解した。

634 :Name_Not_Found:2022/01/16(日) 19:57:23.30 ID:???.net
>>631
その部分のソース出せ

635 :Name_Not_Found:2022/01/16(日) 19:57:57.27 ID:???.net
あ、ごめん。出てた

636 :Name_Not_Found:2022/01/16(日) 20:04:25.66 ID:???.net
>>634
出せじゃねえよカス
消えろや

637 :Name_Not_Found:2022/01/16(日) 20:12:48.83 ID:???.net
>>631
emp_image imgにdisplay: block;かflex;かtable;追加してみ

>>636
質問に答えない人はちょっと黙ってて

638 :Name_Not_Found:2022/01/16(日) 20:18:35.13 ID:???.net
使えねえなあ!

639 :Name_Not_Found:2022/01/16(日) 20:19:14.66 ID:???.net
結局、ルール厨は害悪でしかない

640 :Name_Not_Found:2022/01/16(日) 20:32:11.43 ID:???.net
vertical-align: bottom;でもイケる
img下部の余白問題は過去ログにもある定番のあるあるネタだな

>>631
とりま、これでも嫁
【HTML・CSS】img要素の下に余白ができる原因と解決法
ttps://web-plus.jp/image-20211027/

641 :Name_Not_Found:2022/01/16(日) 20:43:20.43 ID:???.net
>>625
lineはやってませんね、、、。というかスマホを持っていません。

642 :Name_Not_Found:2022/01/16(日) 21:01:34.40 ID:???.net
>>637
>>640
どうも
display blockで改善しましたが、line-heightが適用されてるってことですよね。よくわかりませんが。

643 :Name_Not_Found:2022/01/16(日) 21:07:15.16 ID:???.net
>>642
imgはインライン要素

644 :Name_Not_Found:2022/01/16(日) 23:08:20.43 ID:???.net
>>636
ケツ出せや

645 :Name_Not_Found:2022/01/16(日) 23:20:02.88 ID:???.net
img下部の隙間気になって寝にくい日があったのが懐かしい
5分で寝たわ

646 :Name_Not_Found:2022/01/16(日) 23:21:09.38 ID:???.net
imgを入れるコンテナにはfont-size:0とline-height:0を入れてるわ

647 :Name_Not_Found:2022/01/16(日) 23:22:44.09 ID:???.net
>>646
へ?なんでfont-size:0?

648 :Name_Not_Found:2022/01/16(日) 23:24:06.28 ID:???.net
>>647
>>643だから

649 :Name_Not_Found:2022/01/17(月) 02:13:40.78 ID:???.net
タグの部屋404エラーか

650 :Name_Not_Found:2022/01/17(月) 08:09:52.81 ID:???.net
質問です。
メディアクエリみたいな書き方するもので
特定のプロパティを使えるかどうかで分岐できるようにするやつって
どう書くんでしたっけ?

651 :Name_Not_Found:2022/01/17(月) 08:22:39.21 ID:???.net
ベンダープレフィックスじゃなくて?

652 :Name_Not_Found:2022/01/17(月) 09:03:18.91 ID:???.net
@supportだっけ?

653 :650:2022/01/17(月) 09:58:56.25 ID:???.net
@supportsでしたありがとうございます!
忘れんようにスニペットに突っ込んどこう、、

654 :Name_Not_Found:2022/01/17(月) 10:14:53.33 ID:???.net
>>653
ごめん、sが抜けてたね

参考に置いとく
@supports - CSS: カスケーディングスタイルシート | MDN
ttps://developer.mozilla.org/ja/docs/Web/CSS/@supports
CSS @supportsの知っていると便利な使い方のまとめ | コリス
ttps://coliss.com/articles/build-websites/operation/css/css-supports-how-to-works.html

655 :Name_Not_Found:2022/01/17(月) 10:29:15.32 ID:???.net
paddingに関してです
文字が1行の場合、文字サイズに対してどのくらいのpaddingを取るときれいに見えるんでしょうか?
法則でもあれば教えて下さい。

16pxだった場合、半分の8pxを上下に割り振ってます。

656 :Name_Not_Found:2022/01/17(月) 10:33:56.37 ID:???.net
ないです

657 :Name_Not_Found:2022/01/17(月) 10:40:29.08 ID:???.net
レスポンシブのサイトを作る場合、絶対値はmainやsideと言った大枠のみで、他のpaddingやらmarginはすべてremというやり方もありでしょうか?
面倒なので、楽したい、、、
らくしてきれいに見せたいです

658 :Name_Not_Found:2022/01/17(月) 10:42:32.12 ID:???.net
お好きにどうぞ

659 :Name_Not_Found:2022/01/17(月) 10:51:01.13 ID:???.net
法則や決まったやり方など無い
とりあえず、このシリーズでも読んでみろ

プロのUIデザイナーに学ぶ!UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.9 | コリス
ttps://coliss.com/articles/build-websites/operation/design/ui-ux-micro-tips-volume-nine.html

660 :Name_Not_Found:2022/01/17(月) 11:10:55.76 ID:???.net
>>659
padもmagもfontも全部remだとかで指定すると楽になるでしょうか?

661 :Name_Not_Found:2022/01/17(月) 11:13:31.73 ID:???.net
話聞かなすぎワロタ

662 :Name_Not_Found:2022/01/17(月) 11:38:06.81 ID:???.net
楽したいからって使うようなもんじゃない

663 :Name_Not_Found:2022/01/17(月) 11:40:38.27 ID:???.net
>>662
remならルートを変えるだけで住みませんかね?

664 :Name_Not_Found:2022/01/17(月) 11:46:50.02 ID:???.net
それが楽だって思うなら、それでいいじゃん

665 :Name_Not_Found:2022/01/17(月) 11:50:23.96 ID:???.net
あと、px指定だとブラウザのスケーリングが効かないというのですが、普通に効きます。
正しい情報ですかね?

666 :Name_Not_Found:2022/01/17(月) 12:00:54.06 ID:???.net
どこ情報か書いてくれ
お前が誤読してるのか誤情報なのかわからん
今までの感じ90%お前の誤読

667 :Name_Not_Found:2022/01/17(月) 12:17:13.59 ID:???.net
viewportの話でも混ざってんじゃね?
知らんけど

668 :Name_Not_Found:2022/01/17(月) 12:18:26.78 ID:???.net
pxでスケーリングできないのはIE6あたりまでそんな糞古い話は気にしなくていい

669 :Name_Not_Found:2022/01/17(月) 14:07:43.44 ID:???.net
了解です

>>664
楽にデザイン出来る法則がほしいんです
センスがないからこそ

670 :Name_Not_Found:2022/01/17(月) 14:21:06.07 ID:???.net
vwで指定するとスケーリング使えなくなりますね
これはやめときます、、、

671 :Name_Not_Found:2022/01/17(月) 14:34:55.80 ID:???.net
画像の横幅に基づいて縦幅を決めるなんてこと出来ますかね?
ブログカードの画像の縦幅どうしようかなと。

画像は記事内最初に出てくるものを拾っています。
ですから、毎回同じ大きさ、アスヒではないです。

そこでobject-fitを使ってトリミングしています。

横幅が相対値、縦幅が絶対値だと歪な感じになるので。
https://ideone.com/hNhOPZ

セオリーがあれば

672 :Name_Not_Found:2022/01/17(月) 14:56:16.46 ID:???.net
imgではなくbackgroundでおいて
positionで浮かせればアスヒ気にしなくてもいけるよ
小さい画像ようにボーダーで枠を用意しておけば誤魔化せる

673 :Name_Not_Found:2022/01/17(月) 15:33:03.83 ID:???.net
>>672
浮かせるってどういうことですか?
困っている点はimgを包むラッパーの高さなんですが、何を指定してますか?

674 :Name_Not_Found:2022/01/17(月) 16:03:29.18 ID:???.net
>>671
画像が同じ大きさじゃないのに、画像の横幅に基づいてコンテナの高さを決めたいってこと?
その説明だとブログカードの高さは記事によって違うことになるけど、それでいいの?

675 :Name_Not_Found:2022/01/17(月) 16:30:41.85 ID:???.net
>>671
コードは↓のいずれかにbodyの中身だけ書いてhtmlとcssは分けて書いてくれる?
https://jsfiddle.net/
https://codepen.io/pen/

あと、画像は
https://picsum.photos/
https://dummyimage.com/
でも使ってダミー入れて

676 :Name_Not_Found:2022/01/17(月) 18:27:37.08 ID:???.net
>>675
https://jsfiddle.net/bgegg/au0v8q9m/11/
作りましたが、object-fit効かないですね、ここだと。

>>674
いえ、画像の横幅ではなくて、画像を包む要素の横幅に基づいて、高さを決めたいのです。
上の例で言うと.image_wrapperですね。

image_wrapperの横幅はflex:1;ですので固定値ではないです。

677 :Name_Not_Found:2022/01/17(月) 18:40:31.10 ID:???.net
効かないも何もセレクタ間違ってるじゃない

678 :Name_Not_Found:2022/01/17(月) 18:56:03.52 ID:???.net
>>676
それだとimgにobject-fit指定できてない
親セレクタが間違ってる

679 :Name_Not_Found:2022/01/17(月) 19:32:36.01 ID:???.net
>>676
可変する幅に基づいて高さを決めるなら高さも可変になるけど
どうやって幅に対する高さを決めたいの?
アスペクト比?固定値の加算?減算?viweport単位使う?
ちなみにセオリーなんて無いよ?

680 :Name_Not_Found:2022/01/17(月) 20:05:22.96 ID:???.net
https://jsfiddle.net/bgegg/au0v8q9m/11/
修正しました

>>679
>>可変する幅に基づいて高さを決めるなら高さも可変になるけど
レスポンシブってそういうもんじゃないんですか?
デバイスのサイズが変わったら、表示されている画像の大きさも変わるのでは。

>>どうやって幅に対する高さを決めたいの?
アスヒのキープですね。
vwってブラウザのスケーリングに対応していないみたいなので、使ってないです。

681 :Name_Not_Found:2022/01/17(月) 20:10:55.46 ID:???.net
一個一個の用語の意味が絶妙に間違ってて突っ込んでたらきりがないやつ

682 :Name_Not_Found:2022/01/17(月) 20:52:03.65 ID:???.net
>>680
> レスポンシブってそういうもんじゃないんですか?
盛大に勘違いしてそうな初心者を相手にしてるから、いちいち確認してるだけ

アスペクト比を固定したい&IE無視していいならaspect-ratioプロパティ使うか
IE対応させたいならpadding-topで比率指定する定番の方法があるが
アスペクト比はお好みでどうぞ

683 :Name_Not_Found:2022/01/18(火) 01:31:44.81 ID:???.net
これからの時代はもうIEは無視して構わんと思う

684 :Name_Not_Found:2022/01/18(火) 04:20:58.93 ID:???.net
むしろios無視してそうでwktk

685 :Name_Not_Found:2022/01/18(火) 06:17:49.31 ID:???.net
>>680
アスヒってなんやねん、キモい隠キャやなぁ

686 :Name_Not_Found:2022/01/18(火) 19:08:04.83 ID:???.net
>>682
aspect-ratio使うことにします。

687 :Name_Not_Found:2022/01/18(火) 19:17:46.42 ID:???.net
スケーリング後の画像サイズを調べることは可能でしょうか?
computeでは駄目でした

画像のソースにカーソルを持っていくとrenderd sizeというのが出てきますが、スケーリング後もサイズは変わりません
vivaldiになります

688 :Name_Not_Found:2022/01/18(火) 19:43:40.22 ID:???.net
可能もなにもComputedの青いとことRendered sizeが
まさに拡大縮小した後の画像のサイズなんだが

あとvivaldiだけじゃなく、せめてChrome、Edge、Firefoxでも
動作確認しような
デベロッパーツールは日本語化もできるぞ

689 :Name_Not_Found:2022/01/18(火) 19:47:08.37 ID:???.net
固定幅使ってもレスポンシブデザインと言えますか?
縮むようですけど、ちゃんと。

690 :Name_Not_Found:2022/01/18(火) 19:52:00.45 ID:???.net
レスポンシブデザインの定義って何だと思う?

691 :Name_Not_Found:2022/01/18(火) 20:28:21.18 ID:???.net
スマホ対応ですね。
pxの固定幅でもモバイルエミュレータでは縮んでますね。

692 :Name_Not_Found:2022/01/18(火) 20:39:20.88 ID:???.net
なんか変なの居着いているのは昔のアイツか新参者なのか

693 :Name_Not_Found:2022/01/18(火) 20:41:23.16 ID:???.net
ieだとobjectfit使えないですが、だとしたらその都度トリミングしなけりゃいけないのですか。
ちなみに何らかのスクリプトをアップロード出来るサーバはないです。

694 :Name_Not_Found:2022/01/18(火) 20:42:30.21 ID:???.net
それ縮んでるとは言わないから

695 :Name_Not_Found:2022/01/18(火) 20:44:38.76 ID:???.net
虫眼鏡で拡大したからって対象物が大きくなるわけではない

696 :Name_Not_Found:2022/01/18(火) 20:48:36.93 ID:???.net
もう固定幅を使っちゃいけない時代なんですか?
メディアクエリくらいには使います。

ブログカードの画像の縦横はどうやって指定していますか?

697 :Name_Not_Found:2022/01/18(火) 20:54:02.10 ID:???.net
ハチバイマンにうっかり助言してしまうと嫌だからコテハンつけてほしい

698 :Name_Not_Found:2022/01/18(火) 21:36:41.23 ID:???.net
>>695
いちおう、見た目上はデカくなるんですが。

699 :Name_Not_Found:2022/01/18(火) 22:19:24.84 ID:???.net
虫眼鏡の倍率が分かるなら計算すればよかろう

700 :Name_Not_Found:2022/01/18(火) 23:06:35.13 ID:???.net
>>698
コテハンつけてくれる?お前の私物掲示板じゃないから

701 :Name_Not_Found:2022/01/19(水) 02:03:52.44 ID:???.net
>>700
そういうお前も答える時にはコテハンつけろよ?私物掲示板じゃないから

702 :Name_Not_Found:2022/01/19(水) 02:31:41.16 ID:???.net
>>701
ほんとお前はわかりやすいなw

703 :Name_Not_Found:2022/01/19(水) 03:10:37.72 ID:???.net
ろくに詳しい状況も示さず、ぼんやりした条件しか出さない上に
書き込んでるキーワードでろくに検索もせず、回答も待たず返答もせず
立て続けに質問を連投して、殆ど会話も成立しないんじゃ
誰もまともに回答しなくなるわな

704 :Name_Not_Found:2022/01/19(水) 04:25:44.98 ID:???.net
池沼相手にエサやるならまだしも
自分が否定されると別人格持ち出して噛み付くタチの悪さ

705 :Name_Not_Found:2022/01/19(水) 05:51:41.99 ID:???.net
固定幅じゃないサイトではvwが重要になるんでしょうか?
ブログカードのアイキャッチの幅で悩んでいます。
縦はaspect-ratioにすることにしました

ieはどうでもいいです

706 :Name_Not_Found:2022/01/19(水) 06:53:26.89 ID:???.net
>>700
お前の私物じゃないとか言う奴って、自分の私物だと思ってる感あるんだよな

707 :Name_Not_Found:2022/01/19(水) 07:09:56.89 ID:???.net
>>705-706
おはよう、きょうもしつもんばかりするのかい?

708 :Name_Not_Found:2022/01/19(水) 08:58:14.24 ID:???.net
質問スレなんだから答える気のない奴らは出てけよ

709 :Name_Not_Found:2022/01/19(水) 09:15:35.96 ID:???.net
そして誰もいなくなった

710 :Name_Not_Found:2022/01/19(水) 09:16:30.10 ID:???.net
>>708
お前もな

711 :Name_Not_Found:2022/01/19(水) 09:43:34.22 ID:???.net
>>704
中立の第三者を装って煽るルール厨のエスパー荒らし君かな?

712 :Name_Not_Found:2022/01/19(水) 09:50:47.53 ID:???.net
はいはい

713 :Name_Not_Found:2022/01/19(水) 09:50:51.12 ID:???.net
>>705
何でもかんでも自分で決められないなら
テンプレート探してきてコピペしちゃえば?
ページ全体だけじゃなくパーツもあるぞ?

714 :Name_Not_Found:2022/01/19(水) 11:28:18.12 ID:???.net
アイキャッチのwidthをvw指定、px指定してみました。
px指定でもデバイスサイズに合わせて小さくなっているのですが、これはなぜですかね?
>>713
いえ、アイキャッチだけ決まればいいんですよ

715 :Name_Not_Found:2022/01/19(水) 11:36:48.10 ID:???.net
もしかすると、iphoneなどのデバイスではpx指定の処理が違うんでしょうか
500pxを指定しているボックスでも、300pxの画面幅にしたとき、画面からはみ出ることがないように縮小されるようです

716 :Name_Not_Found:2022/01/19(水) 11:38:52.22 ID:???.net
あっ、メタタグ忘れてた

717 :Name_Not_Found:2022/01/19(水) 11:42:01.19 ID:???.net
>>703
最初は悪気はない初心者だろうと思ってたけど
助言の無視具合なんかを見てると荒らしなんだろうな

718 :Name_Not_Found:2022/01/19(水) 16:12:35.03 ID:???.net
ブログカード君は中二病みたいだなw

719 :Name_Not_Found:2022/01/19(水) 16:37:46.99 ID:???.net
こいつwordpressで質問してるやつか、今頃気づいたわ

720 :Name_Not_Found:2022/01/19(水) 18:35:41.12 ID:???.net
ulとliタグを使う
横並びにする
箇条書きの丸記号は表示しない
ulの幅は全liの幅に合わせる
ulを画面の中央に表示する
liの同士の間隔はpaddingではなくmarginで設定する

これらを全部満たすにはどう書けばいいんですか?

721 :Name_Not_Found:2022/01/19(水) 18:42:00.74 ID:???.net
調べることも放棄してて草

722 :Name_Not_Found:2022/01/19(水) 19:11:04.32 ID:???.net
こうなると、もはや質問ではなく依頼

723 :Name_Not_Found:2022/01/19(水) 19:48:23.31 ID:???.net
たし蟹

724 :Name_Not_Found:2022/01/19(水) 20:39:10.38 ID:???.net
CSSゴリゴリ書いたらできるよがんばれ

725 :Name_Not_Found:2022/01/20(木) 00:09:43.20 ID:???.net
何を横並びにしたいのか

726 :Name_Not_Found:2022/01/20(木) 05:44:14.54 ID:???.net
2ヶ月前に勉強始めたばかりの初心者だけど忘れかけだから復習ついでに書き殴ってみた。

まずdisplay: flexなコンテナに複数のulを入れて横並びにすんのかな?
丸記号消すのはliだかulのlist-styleをnoneだったと思う
ulの幅?はflex:1で全部等しくなりそう
ulを画面の中央ってmargin:0 autoでなるらしいけど、横並びにして中央に表示する場合はコンテナのmarginでやるべきなのかな?
listの間隔はmargin-bottom:1rem位でいけそう

727 :720:2022/01/20(木) 08:32:45.15 ID:???.net
>>720
だけどなんとか試行錯誤してできました
現在PC使えないのであとで作ったの書きます

728 :Name_Not_Found:2022/01/20(木) 08:43:41.74 ID:HoXyEydc.net
>>720
お前さんアホっすね(笑

729 :Name_Not_Found:2022/01/20(木) 10:03:24.50 ID:???.net
>>720
flexを使え!

730 :Name_Not_Found:2022/01/20(木) 11:00:59.43 ID:???.net
暇つぶしゲーム
https://css-speedrun.netlify.app/

731 :Name_Not_Found:2022/01/20(木) 11:04:02.42 ID:???.net
>>727
解決したなら書かなくていいよ

732 :Name_Not_Found:2022/01/20(木) 11:59:26.55 ID:???.net
常に自分が主役で世の中自分中心に回ってると思ってる可能性

733 :Name_Not_Found:2022/01/21(金) 09:23:40.38 ID:FcwbGvQT.net
Googleのマイマップを<iflame>で埋め込んで表示させた時、左のリスト一覧を最初から表示させておく方法はありますか?
左上のアイコンをクリックすると左から出てくるやつです。

734 :Name_Not_Found:2022/01/21(金) 10:42:42.26 ID:???.net
>>733
スレ違い

735 :Name_Not_Found:2022/01/21(金) 13:03:35.14 ID:???.net
iflame……

736 :Name_Not_Found:2022/01/21(金) 13:08:00.62 ID:???.net
ゴメンなさい。スペルミスってる上にスレ違いでしたか。優しい人がいるかと思ったけど去りますね。

737 :Name_Not_Found:2022/01/21(金) 13:30:20.10 ID:???.net
>>736
【Google Maps】Googleマップ28【グーグルマップ】
https://mevius.5ch.net/test/read.cgi/google/1634384378/

738 :Name_Not_Found:2022/01/21(金) 14:54:24.62 ID:???.net
× 優しく教えるスレ
⚪︎ クソ住人スレ

739 :Name_Not_Found:2022/01/21(金) 15:06:04.61 ID:???.net
>>738
プギャー

740 :Name_Not_Found:2022/01/21(金) 15:16:23.60 ID:???.net
>>738
もしもし君は変な○と変なスペースは使わないように

741 :Name_Not_Found:2022/01/21(金) 15:50:49.33 ID:???.net
よろしくお願い致します
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,400italic,700,700italic&subset=latin,chinese' rel='stylesheet' />
このソースコードはどういった内容を表している記述なのか教えて頂けないでしょうか
特に「latin,chinese」の部分が気になります
フォントの名前が含まれている事やスタイルシートなど断片的には理解できるのですが…
サイトは英語なのになぜラテン語と中国語が突然出て来るのかが不思議でして

742 :Name_Not_Found:2022/01/21(金) 16:09:08.30 ID:???.net
https://jsfiddle.net/bgegg/3Lxyj5v4/

レスポンシブ作成中です。
全体幅は960pxで、mainカラムはflex 640、サイドカラムはflex 320としています
これは8の倍数です。

ここで問題があるんですが、gapも可変かつ、8の倍数とするにはどんな指定方法にしたらいいでしょうか?
だいたい、960px幅の場合、32px程度になればいいかなと考えています

743 :Name_Not_Found:2022/01/21(金) 16:16:32.74 ID:???.net
8バイマン降臨

744 :Name_Not_Found:2022/01/21(金) 18:02:03.55 ID:???.net
>>741
Googleが提供するNoto SansっていうWebフォントを使うためのリンク
詳しくはこの辺りを読んでみ

Browse Fonts - Google Fonts
https://fonts.google.com/
Get Started with the Google Fonts API ?|? Google Developers
https://developers.google.com/fonts/docs/getting_started

745 :Name_Not_Found:2022/01/21(金) 18:25:22.76 ID:???.net
flex-growを8の倍数にして、結局flex-growが2と1と一緒なの草

746 :Name_Not_Found:2022/01/21(金) 19:00:30.73 ID:???.net
>>745
想定しているデバイスのサイズが540pxであれば、2:1の場合は360px,180pxとなるはずです。
比率を8の倍数にしているわけではないです。

何が草なのか分かりませんが、、、。

747 :Name_Not_Found:2022/01/21(金) 19:12:20.26 ID:???.net
flex-growを何だと思ってんだろ・・・?

748 :Name_Not_Found:2022/01/21(金) 19:38:38.50 ID:???.net
8倍マンは荒らし

749 :Name_Not_Found:2022/01/22(土) 00:05:15.83 ID:???.net
今は写真用意するときに何種類用意するのが多数派ですか
デスクトップ用、2x、3x、モバイル用、webp、avif?こんがらがってきた ヽ(^o^)丿
モバイル用はもう全部高解像度ディスプレイでくくってしまってもいいのかな

750 :Name_Not_Found:2022/01/22(土) 00:13:15.60 ID:???.net
2倍で旧来フォーマットとwebpのみ
webpなら軽いからいちいち等倍画像とか作らない

751 :Name_Not_Found:2022/01/22(土) 00:24:03.76 ID:???.net
cs6だからwebp出力できない・・・

752 :Name_Not_Found:2022/01/22(土) 00:30:35.34 ID:???.net
>>750
2倍だけにするって決めたら頭が整理できるかもしれない
ありがとうございます
横幅いっぱいのレスポンシブ画像のこととかも考えると頭がモジャモジャしてきて

753 :Name_Not_Found:2022/01/22(土) 10:15:47.23 ID:???.net
flex-growは子要素の伸びる比率

flex-grow - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow

754 :Name_Not_Found:2022/01/22(土) 10:34:46.25 ID:???.net
8倍マンはどうやってレスポンシブ化しようと思ってんだろ?
画面幅動かすとgap幅だけ数px動くのじわるw

755 :Name_Not_Found:2022/01/22(土) 10:44:34.25 ID:???.net
>>744
ありがとうございます。ご教示頂いたリンク先を読んで、何をしようとしているかは理解できました
実際そのページ内にラテン語も中国語もないのにサイトの作者がなぜラテン語と中国語の
サブセットを要求したのかは分からないままですが、調べようがない事かもしれないですね

756 :Name_Not_Found:2022/01/22(土) 11:06:28.21 ID:???.net
>>755
ラテン語の方は元々含まれてて指定する必要は無いみたいだけど、中国語の方は何だろ?
ヘッダーが各ページ共通だとすれば、他のページで中国語が使われてるとか?
例えば中国人のコメントが書き込まれる事があるから、わざわざ対応させてたりね
まぁ、その辺は想像するしかないから、使い方が分かれば気にしなくていいかも

757 :Name_Not_Found:2022/01/22(土) 11:26:36.78 ID:???.net
>>755
サブセットをジェネレーターか何かで選んでて間違ってチェックしてそのままとかじゃないの

758 :Name_Not_Found:2022/01/22(土) 11:31:01.24 ID:???.net
>>756
確かにコメント欄はそのサイトにありますね
どんな言語で書き込まれているか一度見てみます
ありがとうございます、勉強になりました!

759 :Name_Not_Found:2022/01/22(土) 11:36:37.74 ID:???.net
>>757
ありがとうございます、もう少し調べてわざわざその言語を選んだ理由が見えて来なければ
間違ってチェックしてそのままの可能性もあると頭に置いておきます

760 :Name_Not_Found:2022/01/22(土) 20:51:31.19 ID:???.net
webpってまだSafari、iOSが対応してないんでしょ?
なんでそんなの使うの?

761 :Name_Not_Found:2022/01/22(土) 21:07:27.99 ID:???.net
>>760
え?マジデ?

762 :Name_Not_Found:2022/01/22(土) 21:19:28.01 ID:???.net
>>760
ググれ

763 :Name_Not_Found:2022/01/22(土) 21:23:01.66 ID:???.net
>>760
ページスピードインサイトで得点源だから

764 :Name_Not_Found:2022/01/22(土) 21:35:55.11 ID:???.net
WebP - Wikipedia
https://ja.wikipedia.org/wiki/WebP

対応環境
OS
Android - 非可逆圧縮は 4.0 以降、可逆圧縮は 4.3 以降[11]
Microsoft Windows 10 Creators Update以降
macOS - Big Sur 以降
iOS - 14 以降

ウェブブラウザ
Google Chrome
Mozilla Firefox 65以降
Microsoft Edge
Opera
Safari 14以降

765 :Name_Not_Found:2022/01/23(日) 02:13:41.96 ID:???.net
天下のPhotoshopも対応したしこれからはウェッピーの時代やぞ

766 :Name_Not_Found:2022/01/23(日) 03:16:01.08 ID:???.net
IEが生きてる限り無理なのよ…
そして高確率で偉いおっさんほどIE使ってるという

767 :Name_Not_Found:2022/01/23(日) 05:19:28.98 ID:???.net
IEはあと5か月で削除されるんでしょ?

768 :Name_Not_Found:2022/01/23(日) 06:10:31.94 ID:???.net
コーダー的にはIEやらSafariはさっさと死滅してけれとおもう

769 :Name_Not_Found:2022/01/23(日) 07:07:56.08 ID:???.net
appleは往生際が悪いよな

770 :Name_Not_Found:2022/01/24(月) 06:14:07.55 ID:???.net
webpはpictureでくくるのか
下位互換でimgもくくるのか面倒くさいな

771 :Name_Not_Found:2022/01/24(月) 08:51:52.30 ID:???.net
くそったれでくくる

772 :Name_Not_Found:2022/01/24(月) 10:50:29.96 ID:???.net
スマホに横スクロールバーという概念はないのでしょうか?
@media screen and (max-width: 768px) {
body
{
min-width: 320px;
}
.main{

background-color: yellow;
}
}
このように最小横幅を指定しているのですが、画面を縮小していくとbodyが320px以下になってしまいます。
320pxに達した時点で、横スクロールバーが出現するという挙動似できますか?

773 :Name_Not_Found:2022/01/24(月) 10:53:41.32 ID:???.net
画面を縮小?

774 :Name_Not_Found:2022/01/24(月) 10:58:31.37 ID:???.net
>>773
chromeのモバイルエミュレータを使用しております

775 :Name_Not_Found:2022/01/24(月) 11:02:52.16 ID:???.net
bodyにmin-widthを設定するのをやめよう
ちゃんとコンテナを作ろう

776 :Name_Not_Found:2022/01/24(月) 11:36:15.05 ID:???.net
>>772
あります
できます

777 :Name_Not_Found:2022/01/24(月) 12:26:48.47 ID:???.net
そもそも横幅320px以下のスマホを考慮する必要あるのか?っていう

778 :Name_Not_Found:2022/01/24(月) 13:43:49.43 ID:???.net
横で失礼
320px以下は意識しなくていいと思ってたけどGalaxy Foldどうしてる?

779 :Name_Not_Found:2022/01/24(月) 13:56:43.82 ID:???.net
320pxは無視するということは、それ以下はレイアウトがぐちゃぐちゃだろうが、どうでもいいということですよね。
上の例でmainに320px指定しましたが、特に320に達したからスクロールバーが出るということはないですね。
全体が縮小されたような感じになります

<meta name="viewport" content="width=device-width,initial-scale=1">

ここの指定に問題があったりしますか?

780 :Name_Not_Found:2022/01/24(月) 13:58:06.60 ID:???.net
1%以下の存在は無視してる

781 :Name_Not_Found:2022/01/24(月) 13:58:31.75 ID:???.net
あとvivaldiで動作確認ってやめたほうがいいんでしょうか?
chrome系ですけど。

782 :778:2022/01/24(月) 14:07:50.73 ID:???.net
>>780
さんくす

783 :Name_Not_Found:2022/01/24(月) 14:10:42.36 ID:???.net
>>779
あります

784 :Name_Not_Found:2022/01/24(月) 14:17:01.98 ID:???.net
webpって画像閲覧ソフトが対応してないんな
マイクロソフトpictureManagerがメインだからいちいちブラウザで表示されるとうっとおしい

785 :Name_Not_Found:2022/01/24(月) 14:17:23.92 ID:???.net
>>781
やめなくていい
足りないだけ

786 :Name_Not_Found:2022/01/24(月) 14:17:59.63 ID:???.net
スタップ細胞って結局あるんですか?

787 :Name_Not_Found:2022/01/24(月) 15:39:37.56 ID:???.net
>>786
スレが違いましてよ

788 :Name_Not_Found:2022/01/24(月) 21:06:00.20 ID:/XC14Tkb.net
パワーストーンで有名な
Hariqua(ハリックァ)
by滝日伴則@ioix(アイオイクス)
クチコミ自作自演でGoogle炎上中

789 :Name_Not_Found:2022/01/25(火) 09:02:36.69 ID:???.net
>>768
Safariは邪魔だな、コロナより先に死滅してほしいわ

790 :Name_Not_Found:2022/01/25(火) 12:33:17.91 ID:???.net
SafariならまずiPhoneからだな

791 :Name_Not_Found:2022/01/25(火) 21:31:14.95 ID:???.net
align-item centerで中央寄せした子要素の2つめだけ、上付け似できますか?
子要素にmarginを使うという手法しかないのでしょうか?

792 :Name_Not_Found:2022/01/25(火) 22:31:35.02 ID:???.net
>>791
align-itemsの設定を align-selfで個別に上書きできる
2つ目の子要素に align-self: flex-start;

793 :Name_Not_Found:2022/01/26(水) 01:51:49.53 ID:???.net
1年ぐらい悩んでいるが、1カラムのデザインで
section.hoge(width設定無し) > div.container(pcはpx, spは100%) > h2やp
みたいなので
div.containerにpadddingを指定するか、h2,pなどにpaddingを設定するかどっちが良い?
ぶれて混合してしまう・・

794 :Name_Not_Found:2022/01/26(水) 02:30:48.33 ID:???.net
デザインによるとしか
その要素そのものの余白しかつけないよ

795 :Name_Not_Found:2022/01/26(水) 03:11:21.22 ID:???.net
>>794
コンテナの内側paddingは設定しない派?

796 :Name_Not_Found:2022/01/26(水) 04:14:38.12 ID:???.net
コンテナの余白はコンテナのpadding
h2の余白はh2のpaddingというそのままの意味だよ
デザインを見てその通りにコーディングするだけ

797 :Name_Not_Found:2022/01/26(水) 04:15:39.98 ID:???.net
一応前提としてrootにbox-sizing:border-boxかけるからpaddingは全て内側ね

798 :Name_Not_Found:2022/01/26(水) 04:30:34.85 ID:???.net
>>796-797
793だけど、俺のどちらかと言うとそっちのほうが良いと思ってたから
同じで良かったわ、ぶれないように生きよう

799 :Name_Not_Found:2022/01/26(水) 08:55:47.59 ID:???.net
入れ子の子のmargin上下が親を突き抜ける、未だに勉強不足で、、食らう
paddingなら安心?

800 :Name_Not_Found:2022/01/26(水) 23:02:59.92 ID:???.net
>>793
参考に、Bootstrap の公式ページでも見れば?

801 :Name_Not_Found:2022/01/27(木) 00:51:10.15 ID:???.net
#img{
top:ウインドウの一番下より50px分上
}

画像をウインドウの一番下より50ピクセル分上に表示したい場合はどうやるんですか?

802 :Name_Not_Found:2022/01/27(木) 01:40:06.80 ID:???.net
calc(100vh - 50px);

803 :Name_Not_Found:2022/01/27(木) 02:02:13.06 ID:???.net
bottom: 50px;

804 :Name_Not_Found:2022/01/27(木) 10:12:39.32 ID:???.net
position: fixed;
bottom: 50px;

ポジションもあった方が良いかも?

805 :Name_Not_Found:2022/01/27(木) 10:22:44.59 ID:???.net
そんならpositionはstickyの方ががが

806 :Name_Not_Found:2022/01/27(木) 12:34:16.86 ID:???.net
このスレかjsスレかどっちに書くか迷ったけど
<img src="aaa.png" id="test" style="display:none">って直接タグにstyleを埋め込んで書くと
test_element.style.display="";で表示できるけど

<img src="aaa" id="test">
<style>
#test{
display:none;
}
</style>
って書くとtest_element.style.display=""で表示できない
これはどうしてですか?

807 :Name_Not_Found:2022/01/27(木) 12:35:38.94 ID:???.net
訂正:3行目はaaaではなくaaa.pngです

808 :Name_Not_Found:2022/01/27(木) 12:36:00.89 ID:???.net
そういう仕様だから

809 :Name_Not_Found:2022/01/27(木) 12:37:50.63 ID:???.net
javascriptで操作した場合のソースを見ると分かりやすいよ
CSSの記述の差し替えじゃないから
display:blockとかinline-blockとか値を指定しないと反映されないよ

810 :Name_Not_Found:2022/01/27(木) 15:29:24.86 ID:???.net
レスポンシブにおいてbodyタグは特別な意味があるんでしょうか?
画面を縮めていくと、bodyに内包されている要素がbodyタグを突き破ったりします。

811 :Name_Not_Found:2022/01/27(木) 15:41:52.79 ID:???.net
突き破ることとbodyをつきぬけることになんの関係があると思ったのか書いてくれ

812 :Name_Not_Found:2022/01/27(木) 16:31:41.03 ID:???.net
意味はあるはずだ

813 :Name_Not_Found:2022/01/27(木) 17:17:08.24 ID:???.net
こういう思いつきで脊髄反射で書いたような質問は8倍マンの予感

814 :Name_Not_Found:2022/01/27(木) 18:39:58.24 ID:???.net
分からない事は質問する前に調べよう

<body>: 文書の本文要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/body
HTML のセクションとアウトラインの使用 | MDN
https://developer.mozilla.org/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines

815 :Name_Not_Found:2022/01/27(木) 19:42:20.15 ID:???.net
https://i.imgur.com/CL8S4GE.jpg

816 :Name_Not_Found:2022/01/27(木) 20:52:38.53 ID:???.net
8倍マンはレスポンシブどうこう以前にまずHTMLの基礎を勉強した方が良い

817 :Name_Not_Found:2022/01/27(木) 21:00:23.93 ID:???.net
https://jsfiddle.net/bgegg/w8qy47d6/1/
flexなんですが、レスポンシブで縦並びに切り替えたときに、真ん中のgapが機能しなくなります。
幅がなくなります。

これはなぜでしょうか?

818 :Name_Not_Found:2022/01/27(木) 21:06:25.36 ID:???.net
高さの場合、画面高さの指定がないと駄目みたいですね。なぜか

819 :Name_Not_Found:2022/01/27(木) 21:07:13.12 ID:???.net
>>810
>bodyタグを突き破ったりします。
何それ怖い

ゴムを針でブツっと突き破られるぐらい怖い

820 :Name_Not_Found:2022/01/27(木) 22:11:07.16 ID:???.net
8倍マンはHTMLだけじゃなくCSSの基礎も必要だな
heightの初期値もよく分かっていないらしい
分からないことは先ずタグやプロパティの意味から調べる癖を付けた方がいい

821 :Name_Not_Found:2022/01/27(木) 22:17:04.68 ID:???.net
×高さの場合
○高さ方向の場合

×画面高さ
○高さ

822 :Name_Not_Found:2022/01/28(金) 06:12:29.85 ID:???.net
解決策はあるのですか?

823 :Name_Not_Found:2022/01/28(金) 06:21:25.38 ID:???.net
>>822
あるのですか?じゃなくてお前が見つけるんだよ

824 :Name_Not_Found:2022/01/28(金) 07:05:18.27 ID:???.net
スレタイ

825 :Name_Not_Found:2022/01/28(金) 08:49:26.97 ID:???.net
>>822
あるのですよ

826 :Name_Not_Found:2022/01/28(金) 10:16:56.63 ID:???.net
うむ

827 :Name_Not_Found:2022/01/28(金) 10:17:33.39 ID:???.net
>>824
解決策はあるのですか?

828 :Name_Not_Found:2022/01/28(金) 10:29:03.63 ID:???.net
それぞれのタグにどういう要素が入るのかも分からないし
理想となるデザインの完成イメージを示さないと答えようがないよ
今のところ君の頭の中にしかない

829 :Name_Not_Found:2022/01/28(金) 10:32:00.18 ID:???.net
参照先チラ見したけど、gapってクラス名なのね
同じ名前のプロパティあるから紛らわしい

で、広げても一応幅あるみたいだけど

あと、flexのショートハンド、flex-basisと混同してない?

830 :Name_Not_Found:2022/01/28(金) 11:46:00.07 ID:???.net
以前の流れを見ると、flexプロパティがどういうショートハンドなのかは分かってる気もするけど
flex-growについてはMDN貼って貰ってるのに、未だによく分かってないらしい

831 :Name_Not_Found:2022/01/30(日) 08:36:39.46 ID:???.net
優しくないやつは黙ってろ
そういうスレ

832 :Name_Not_Found:2022/01/30(日) 10:19:52.25 ID:???.net
>>831
解決策はあるのですか?

833 :Name_Not_Found:2022/01/30(日) 17:14:59.28 ID:???.net
>>832
それはあなたが見つけるのです

834 :Name_Not_Found:2022/01/30(日) 17:22:14.81 ID:???.net
>>833
解決策はあるのですか?

835 :Name_Not_Found:2022/01/30(日) 17:22:15.70 ID:???.net
>>833
解決策はあるのですか?

836 :Name_Not_Found:2022/01/30(日) 17:52:15.45 ID:???.net
見つけることが解決策なのです

837 :Name_Not_Found:2022/01/30(日) 19:11:51.31 ID:???.net
スレタイ読めない気狂いのスレ

838 :Name_Not_Found:2022/01/30(日) 19:23:10.01 ID:???.net
>>837
解決策はあるのですか?

839 :Name_Not_Found:2022/01/30(日) 20:13:38.18 ID:???.net
確かにルール厨はスレタイ読めてない

840 :Name_Not_Found:2022/01/30(日) 21:10:41.37 ID:???.net
自分で考えずにまとまらない話をしてくるのは
Z世代の特徴らしいぞ
https://news.yahoo.co.jp/articles/19593b327eac6069d8683883f988a7e6d5d5face?page=2

841 :Name_Not_Found:2022/01/30(日) 21:15:28.43 ID:???.net
>>840
むしろ偉いおっさんほどこんな印象だわ

842 :Name_Not_Found:2022/01/30(日) 22:33:15.89 ID:???.net
>>840
Z隠キャは常にオドオドして自分で手を動かさないからな
「〇〇しても良いんですかね?」
「〇〇ってどうなんですかね?」
が多いから相手する必要なし

843 :Name_Not_Found:2022/01/30(日) 22:48:53.79 ID:???.net
ここのスレタイ読めないカスは、とにかく誰かに偉そうにしたいだけのクソカスよ
優しくできないくせにスレ乗っ取り
過疎化も気にせず誰かの上に立ってりゃそれでいい
自分が気持ちよけりゃそれでいい
カスだろ?

844 :Name_Not_Found:2022/01/30(日) 22:53:06.98 ID:???.net
>>843
解決策はあるのですか?

845 :Name_Not_Found:2022/01/30(日) 22:55:11.45 ID:???.net
>>843
返答してくれなくてイライラなキッズがわかりやすくて草

846 :Name_Not_Found:2022/01/30(日) 23:53:15.18 ID:???.net
>>843
見事な自己紹介です

847 :Name_Not_Found:2022/01/31(月) 22:28:47.52 ID:???.net
position:fixed;
right:50px;
bottom:50px;
でボタンを画面に固定配置したんだけど
スマホだと横幅が長いページだと横にスクロールしないとボタンが出てきません。
スマホでスクロールしなくても画面に固定配置できる方法はありますか?

848 :Name_Not_Found:2022/01/31(月) 23:15:50.14 ID:???.net
デバイス幅に収まる横幅にする

849 :Name_Not_Found:2022/02/01(火) 00:42:00.68 ID:???.net
calcの出番だパッパッパ

850 :Name_Not_Found:2022/02/01(火) 12:13:22.93 ID:???.net
HTML5って全くわからないまま終わったみたいなんだけど
今はHTML5より前のHTMLわかれば通じる感じ?

HTML5独自の記法が頭に入らなかったんだよ

851 :Name_Not_Found:2022/02/01(火) 13:14:53.70 ID:???.net
HTML Standardに名称が変わったけど細かい仕様が変わっただけで
差し当たってHTML5と大して変わらない気がするよ
具体的にどの付近で悩んでるの?

852 :Name_Not_Found:2022/02/01(火) 13:26:17.74 ID:???.net
>>850
名前が変わっただけでHTML5からさらに追加されたり廃止されたりしていくだけだぞ

853 :Name_Not_Found:2022/02/01(火) 13:34:39.28 ID:???.net
何がわからんか整理しようとしてしらべたけど
http://www.htmq.com/html5/002.shtml
これでいいのかな

今までよくわからなかったのはヘッダ部分
の宣言とが省略されてよくわからなくなってたなあ・・・

メイン文のところは
<> </>表記で囲めば従来通りのHTMLと同じでええんやろなあ

854 :Name_Not_Found:2022/02/01(火) 14:00:25.49 ID:???.net
ヘッダはvscodeとかならかんたんに出せるから気にせんでええで

855 :Name_Not_Found:2022/02/01(火) 14:18:10.02 ID:???.net
smallとかiとか意味変わってるから気をつけろ

856 :Name_Not_Found:2022/02/01(火) 14:24:38.56 ID:???.net
>>853
ヘッダはおまじないだと思って覚えよう
エディタで保管できるから難しく考えなくていいよ
基本は<> </>表記であってる

あとはタグの増減やタグに付随された意味に注意する事
スタイルの記述はなるべくタグに直接書かずにCSSに書く事
フレームを使わない事だと思う

857 :Name_Not_Found:2022/02/01(火) 15:09:04.99 ID:???.net
>>853
>>854
標準語使え

858 :Name_Not_Found:2022/02/01(火) 16:00:11.29 ID:???.net
>>857
なんでや

859 :Name_Not_Found:2022/02/01(火) 17:12:43.56 ID:???.net
>>857
わかったで〜

860 :Name_Not_Found:2022/02/01(火) 17:58:05.52 ID:???.net
>>857
ホルホル〜

861 :Name_Not_Found:2022/02/01(火) 20:50:42.41 ID:???.net
>>849
right:calc(100vw-30px);
というふうにやったけどできなかったです

862 :Name_Not_Found:2022/02/01(火) 21:05:05.99 ID:???.net
leftにしようぜ

863 :Name_Not_Found:2022/02/01(火) 21:10:37.91 ID:???.net
某所で見かけたけど
ひょっとしてPCレイアウトのままでスマホも表示しようとしてる?
それならスマホ用に段組み組み直すのが先だ

864 :Name_Not_Found:2022/02/03(木) 18:06:58.20 ID:???.net
今AサイトとBサイトの2サイトを運用しています。
AとBはそもそもサーバ(会社)は違います。
A) aaa.example.com
B) bbb.example.com
とします。サーバ違いでサブドメインが異なる。
会員制サイトでBサイトにプログラムがありBサイトで動きます。

アカウント作成はAサイトで行いたい。
Aサイトにて<form action="https://bbb.example.com" method="post">として、
流すのは問題有りますか?起きますか?

865 :864:2022/02/03(木) 18:10:30.42 ID:???.net
Aサイトは自分が運用。Bサイトは知人が運用。
試しに自分(Aサイト)で登録フォーム作ってBに飛ばしてみたら、
アカウント作成プロセスが通りました。

866 :Name_Not_Found:2022/02/03(木) 19:03:01.37 ID:???.net
おめでとう

867 :864:2022/02/03(木) 19:14:14.81 ID:???.net
フォームを他サイト・外部URLに飛ばすのは問題のある行為なのでしょうか?

868 :Name_Not_Found:2022/02/03(木) 21:18:59.54 ID:???.net
Aの登録はユーザーもできるの?
それともユーザーは触れず自分だけで管理?

869 :Name_Not_Found:2022/02/03(木) 21:19:13.90 ID:???.net
大丈夫だ、問題ない。

870 :864:2022/02/04(金) 14:20:02.94 ID:???.net
>>868
不特定の人が登録できます。

871 :Name_Not_Found:2022/02/04(金) 15:04:42.50 ID:???.net
twitterの連携みたいなもんだろ?
問題ない

872 :Name_Not_Found:2022/02/05(土) 12:24:42.79 ID:dNX00X0l.net
電磁波犯罪被害者の症状

体が異常に熱い
ノドが異常に乾く
異常に疲れる
眠い→場所を移動するか頭の位置や方向をずらすと眠気が一気に引く(目に照射感がないか確認)

スマホを所持していないときは被害が軽減する

873 :Name_Not_Found:2022/02/06(日) 13:28:17.12 ID:???.net
>>864
Ruby on Rails では、CSRF(Cross Site Request Forgeries)対策として、

get 以外のフォーム送信には、認証トークンを入れているから、
異なるサーバーへ送られたら、認証トークンをチェックできない

同じサーバへ送信してもらわないと、ダメなのでは?

874 :Name_Not_Found:2022/02/06(日) 13:35:53.07 ID:???.net
無能だな

875 :Name_Not_Found:2022/02/08(火) 17:09:31.47 ID:???.net
こんにちは。
Bootstrap って色の指定を Primay Seconary Sucess Danger とかで指定すると思うんですけど、もっと中間色を使うことはでいないんでしょうか。

876 :Name_Not_Found:2022/02/08(火) 17:14:07.52 ID:???.net
>>875
Color (カラー) ・ Bootstrap v5.0
https://getbootstrap.jp/docs/5.0/customize/color/

877 :Name_Not_Found:2022/02/08(火) 17:36:40.31 ID:???.net
>>876
ありがとうございます!

878 :Name_Not_Found:2022/02/09(水) 09:45:53.20 ID:???.net
<style>
#box{
width:800px;height:300px;background:#ff00ff;
position:relative;overflow:hidden;
}

#text_set{
position:absolute;margin:0px;padding:0px;
list-style:none;display:flex;
left:-100px;
}

#text_set li{
margin-right:50px;background:green;font-size:30pt;
color:aqua;font-weight:bold;white-space:nowrap;
}
</style>
<div id="box">
<ul id="text_set">
<li>みかんみかん</li><li>りんごりんご</li><li>ぶどうぶどう</li>
</ul>
</div>
このよう場合boxの高さが中身のテキストの高さと自動で同じになるようにするにはどうすればいいんですか?
boxのheight:autoにすると中身表示されないしoverflow-xにしても表示されませんでした。はみ出し禁止なのでoverflow:hiddenは削除できません。

879 :Name_Not_Found:2022/02/09(水) 10:30:16.54 ID:???.net
abusoluteはそういう子

880 :873:2022/02/09(水) 11:51:55.78 ID:???.net
>>864
異なるサイトで認証する、パターンもありました

Ruby on Rails では、OmniAuth を使って、
Google, Twitter など、異なるサイトで認証することもできる

881 :Name_Not_Found:2022/02/09(水) 14:05:57.43 ID:???.net
JSで高さを取る

882 :Name_Not_Found:2022/02/11(金) 21:36:16.55 ID:???.net
今、htmlとcssを教えているんだけど、

<h3>■あれこれ<h3>
ではなく
<h3>あれこれ<h3> beforeにcontent:"■"
を記述する理由を「あれこれ」をマークアップするから■はあくまで人間用の装飾とは言ってるんだが
見た目が一緒だからいいじゃん的な感じに言われる

実際自分もそうだったけど、なにかわかりやすい言い回しないんだろうか

883 :Name_Not_Found:2022/02/11(金) 21:51:07.76 ID:???.net
あとでまとめて直しやすい
検索に拾われる時用

884 :Name_Not_Found:2022/02/11(金) 21:51:53.30 ID:???.net
人間様向け
ロボット様向け

885 :Name_Not_Found:2022/02/11(金) 22:07:37.97 ID:???.net
>>882
記号であってテキストの一部ではない
本の題名などで考えるなら、タイトルに■を含んでいるのではない限り外すべきだ とか

まあ
検索エンジン向けにはテキストで入力してしまってもやりようはあるし
contentも空にして四角い図形をスタイリングするのではなく
■を入力してしまったら結局テキストの一部として扱われたりするんだが
わざわざ擬似要素を使うならcontentは空にするわ俺なら

886 :Name_Not_Found:2022/02/11(金) 22:11:37.43 ID:???.net
width!
height!
background!

887 :Name_Not_Found:2022/02/11(金) 22:12:55.92 ID:???.net
いくつかある場合h3見出しの前に一括で設定できるじゃだめ?

888 :Name_Not_Found:2022/02/11(金) 22:42:13.77 ID:???.net
>>887
そういう話はしてないだろ

889 :Name_Not_Found:2022/02/11(金) 22:50:38.92 ID:???.net
>>885に近いけど
「見た目の装飾だから」という話ならコンテントにテキスト入力するのはなんか違うよねという感じはする
画像やCSSで矩形作る労力惜しむならh3内に入れたって大して変わらん

890 :Name_Not_Found:2022/02/11(金) 22:57:51.04 ID:???.net
>>889
そういう見方もあるのか

891 :Name_Not_Found:2022/02/12(土) 16:56:39.05 ID:???.net
こういうのが複数あったら、おかしい

<h2>■あ<h2>
<h3>■い<h3>

892 :Name_Not_Found:2022/02/12(土) 23:53:23.79 ID:???.net
俺は気にしないな
んなの入れたところで大した違いはない

893 :Name_Not_Found:2022/02/13(日) 00:01:18.89 ID:???.net
見た目だけなら気にしなくてもいいけど
SEOを気にするなら気にした方がいいって話ちゃうのん?

894 :Name_Not_Found:2022/02/13(日) 01:17:04.95 ID:???.net
beforeにテキスト入れたとき検索エンジンがどう扱うかは明確には分からんしSEO効果があるかどうかは不明では
SEO意識するならbeforeにテキストは入れずCSSでデザインした方がよさそう

895 :Name_Not_Found:2022/02/13(日) 03:12:50.55 ID:???.net
スクリーンリーダーにはcontentにテキスト入れちゃうと読んじゃうやつあるしな

896 :Name_Not_Found:2022/02/16(水) 06:44:35.85 ID:???.net
初めて投稿させていただきます。
一点どうしても自分では解決できない
問題があり質問させていただきます。

リンクをクリックするとエクスプローラで
指定したフォルダを開く処理を考え
ています。


<a href=file:///\\192.168.***.***\共有\目的のフォルダ target="_blank">保存先</a>

とし、Google Chromeで実行した所
ブラウザー上でフォルダを開いてし
まいます。
Google Chromeで目的のフォルダを
エクスプローラで開きたいのです。
知見豊かな皆様にご教示いただきたく
投稿させていただきました。

よろしくお願いいたします。
23歳OL

897 :Name_Not_Found:2022/02/16(水) 07:17:32.45 ID:???.net
おじさんキター

898 :Name_Not_Found:2022/02/16(水) 12:17:36.17 ID:???.net
ローカルにサーバ立てれば

899 :Name_Not_Found:2022/02/16(水) 19:26:20.01 ID:???.net
JS使おうね

900 :Name_Not_Found:2022/02/16(水) 21:24:54.51 ID:???.net
アクセスしたらエクスプローラーが勝手に開くサイトとか怖いw
まあ管理用機能とかなんだろうけど

901 :Name_Not_Found:2022/02/16(水) 22:32:58.20 ID:???.net
input type="file"
じゃダメなん?

902 :Name_Not_Found:2022/02/16(水) 22:38:03.31 ID:???.net
upじゃなくてdownか
すまそ

903 :Name_Not_Found:2022/02/16(水) 22:56:34.62 ID:???.net
エクスプローラーを開くための拡張かローカルサーバー作らないと無理じゃね?

904 :Name_Not_Found:2022/02/17(木) 11:35:16.67 ID:???.net
ヤフーのIE11 サポート終了の進め方
https://techblog.yahoo.co.jp/entry/2022021630265506/

905 :Name_Not_Found:2022/02/17(木) 11:58:21.37 ID:???.net
Photoshop 23.2(2022年2月リリース)でWebP保存の新規能を実装

906 :Name_Not_Found:2022/02/17(木) 15:50:01.49 ID:???.net
icoも対応して欲しい

907 :名無しさん:2022/02/17(木) 23:13:06.91 ID:y7u+buKO.net
HTMLで普通の文章の打ち方を教えてください

908 :Name_Not_Found:2022/02/18(金) 01:02:19.05 ID:???.net
普通とは?普通ではないとは?
もう少し詳しく説明を

909 :Name_Not_Found:2022/02/18(金) 18:05:42.15 ID:bMzriPwp.net
jQueryの.load()を使って外部ページ(AA)を取り込んでます。
<div id="abc"></div>に挿入するとして、
取り込んだ中のページのスタイルに手を加えたいです。
#abc sectionみたいにかければ楽なんですが無理なんですよね。

方法は無いでしょうか?

910 :Name_Not_Found:2022/02/18(金) 19:36:57.80 ID:???.net
divにstyle書いておけば

911 :909:2022/02/18(金) 20:13:51.46 ID:???.net
>>910
例えば
元ページのheaderのbackgroundは赤。
div#abcに取り込んだページ内のheaderのbackgroundは青。
にしたいのです。

912 :Name_Not_Found:2022/02/19(土) 02:16:10.69 ID:???.net
>>911
index.html
-
<div id="abc">
</div>
<div class="buffer">
</div>

target.html
-
<body>
<div class="wrapper">
<header>
<p>this is target</p>
</header>
</div>
</body>

index.ts
-
$(function () {
$(".buffer").load("./target.html", function (complete_data) {
const header = $(this).find("header");
$("#abc").append($(header[0].outerHTML));
$("#abc").find("header").css("background-color", "blue");
})
})

みたいな感じ?

913 :Name_Not_Found:2022/02/19(土) 13:59:18.52 ID:???.net
jQuery の質問は、こちらへ

+ JavaScript & jQuery 質問用スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478002550/l50

914 :Name_Not_Found:2022/02/20(日) 16:00:06.18 ID:???.net
div祭りはやっぱりだめなんだろうか…?

915 :Name_Not_Found:2022/02/20(日) 16:13:34.53 ID:???.net
用途や運用によると思う

916 :Name_Not_Found:2022/02/21(月) 11:00:29.65 ID:???.net
Firefoxだと文字がクッキリして
Chromeだとアンチエイリアシングというより拡大してぼやけてるみたいな状態です。

知人の知人にサイトを作ってもらったのですが、
知人伝いなのでなかなか連絡来ず。
cssファイルを辿っているのですが、
transform: rotateで微妙に角度付けてるわけでもないようです。
フォントサイズを小さくしてもぼやけ感が出ます。

EdgeでもぼやけるのでChromium系で全部ぼやけると思います。
文字をぼやかせる要素って何ですか?

917 :916:2022/02/21(月) 11:25:50.53 ID:???.net
Windowsのアプリケーションのプロパティ>互換性>高DPI時の
の設定を弄っても何も変わらないので、これじゃなさそうです。

918 :Name_Not_Found:2022/02/21(月) 11:33:43.48 ID:???.net
もちろんテキスト要素よね?
transformで画像のエッジはボケるのは仕様、というか改善がむずかしい

919 :916:2022/02/21(月) 11:43:49.93 ID:???.net
原因みつけました!
2段div組されてて内側のdivでの指定に問題がありました。

<div class="outline">
<div class="inline">
test
</div>
</div>

.inlineに「border-radius」の値が%指定してありました。
%以外(px, em, vw)だとぼやけないみたいです。
こんなことあるんですね。

>>918
レスありがとうございます。
画像は気になりません。

920 :Name_Not_Found:2022/02/23(水) 09:20:37.10 ID:???.net
サイトのアイコンを作っているのですが、高さ20px程度のpngだとぼやけます。
WEBフォントを使う手もありますが、これだとただの文字です。

svgはあまり使われません。

ボヤけをどうにかできないでしょうか?

921 :Name_Not_Found:2022/02/23(水) 09:51:28.23 ID:???.net
使われませんじゃなくて使え

922 :Name_Not_Found:2022/02/23(水) 10:14:16.00 ID:???.net
例えばwordpressなどでは推奨されていないんですよ。

923 :Name_Not_Found:2022/02/23(水) 10:48:27.51 ID:???.net
こんにちは。
CSSフレームワークを勉強しようと思うのですが、Bootstrap 以外で考えると Tailwind でしょうか。
今後 できるだけ無駄な経験にならないものを選択したいと考えています。

924 :Name_Not_Found:2022/02/23(水) 11:25:37.49 ID:???.net
>>922
テンプレートに書かずメディアからアップしようとしてるんじゃないだろうな?

925 :Name_Not_Found:2022/02/23(水) 11:46:17.10 ID:???.net
>>924
サバのどこかに置けってことですね
にしても、脆弱性云々とは聞きますよ

926 :Name_Not_Found:2022/02/23(水) 11:49:43.17 ID:???.net
>>925
云々ってなんだよ

927 :Name_Not_Found:2022/02/23(水) 11:50:25.79 ID:???.net
svgなんかphpに直接書け

928 :Name_Not_Found:2022/02/23(水) 12:09:14.59 ID:???.net
もしかしてpngの作成方法の問題じゃね?

929 :Name_Not_Found:2022/02/23(水) 12:42:08.57 ID:???.net
高さ20pxしかない画像をスマホなどでぼやけるとかぬかしてるとか

930 :Name_Not_Found:2022/02/23(水) 13:00:49.22 ID:???.net
SVGで書き出されてるFontアイコンなどと比べると
ぼやけて見えると言っている可能性も

931 :Name_Not_Found:2022/02/23(水) 13:16:12.09 ID:???.net
>>923
目的によるとしか

932 :Name_Not_Found:2022/02/23(水) 14:13:10.18 ID:???.net
paddingとline-heightどちらを使うべきでしょうか?
出来るだけline-heightで済ませれば、文字を基準としたem値を設定出来るので、paddingの記述を減らせますよな

933 :Name_Not_Found:2022/02/23(水) 14:32:25.34 ID:???.net
>>920
表示するサイズが決まっているのならそのサイズに合わせてpngで作れば良い
そうでないならサイズが変わっても大丈夫なようにsvgでどうぞ

934 :Name_Not_Found:2022/02/23(水) 14:37:49.74 ID:???.net
>>923
Ruby on Rails では、初心者は皆、Bootstrap。
それ以外は、Bulma, Tailwind

皆が、Bootstrapを使う理由は、外部モジュールのHTML の各部品が、
Bootstrap用のCSS も配布しているから

例えば、kaminari というpagenation を使う場合、
Bootstrap用のCSS も配布しているから

935 :Name_Not_Found:2022/02/23(水) 14:59:44.56 ID:???.net
>>920
40pxで作る

936 :Name_Not_Found:2022/02/23(水) 15:10:49.97 ID:???.net
>>933
決まっていますが、画像が小さいと粗が目立ちますね、、、

937 :Name_Not_Found:2022/02/23(水) 15:27:31.38 ID:???.net
>>925
正規版の有名どころのツールで作ったsvgなら脆弱性とか気にする必要ないでしょ
あとは本体編集するかプラグイン入れてsvg有効にするだけじゃん
プラグインなら脆弱性チェックしてくてるのもあったと思うよ

938 :Name_Not_Found:2022/02/23(水) 20:30:53.93 ID:???.net
https://imgbox.com/Z9EbP8aj
エントリーカードをdisplay:flexで並べているんですが、コンテンツ量によってカードの高さが変わりますよね。
1番と2番目であれば高さは同一ですが、3と4番目は高さが違っています。
この4つを統一した高さにしたいのですが、これは固定値を入れるしかないんでしょうか?

>>937
了解っす

939 :Name_Not_Found:2022/02/23(水) 21:39:12.83 ID:???.net
ラッパーをstretch
アイテムもflexにしてheight:100%

940 :Name_Not_Found:2022/02/24(木) 07:43:21.58 ID:???.net
>>931
そうですね。
たしかに。

>>934
ありがとうございます。
参考になります。

941 :Name_Not_Found:2022/02/24(木) 10:36:20.22 ID:???.net
>>939
1列目と2列目では高さが違いますよね。
隣り合うエントリーカードの高さには合わせることができますが、1列目と2列めの高さを同じにするのは無理ではないでしょうか?

https://jsfiddle.net/bgegg/ocpnd20e/9/

942 :Name_Not_Found:2022/02/24(木) 10:52:26.16 ID:???.net
grid使おう

943 :Name_Not_Found:2022/02/24(木) 11:34:32.55 ID:???.net
絶対同じではなくある程度幅を取って同じに、でよいなら
min-heightをem設定するというのも

944 :Name_Not_Found:2022/02/24(木) 11:46:25.11 ID:???.net
>>921
命令口調をやめろ

945 :Name_Not_Found:2022/02/24(木) 12:41:54.32 ID:???.net
>>944

946 :Name_Not_Found:2022/02/24(木) 13:11:03.44 ID:???.net
>>942
>>943
なるほど、min-heightで試してみます
あるいは高さが違ってもあきらめるです

947 :Name_Not_Found:2022/02/24(木) 13:44:24.13 ID:jMuu6DOo.net
アコーディオンなどの実装してていろいろ調べてたんだが
label + inputを使う事例がほとんどなんで
中にはセマンティックの観点から好ましくないとかまで書かれてるんだが
label使わないinputだけでもだめなんだろうか

勉強中で調べた範囲でこうもかけるよねってのができあがったんだが

948 :Name_Not_Found:2022/02/24(木) 13:57:32.71 ID:???.net
>>947
もしかしてチェックボックスなどをボタン代わりにするってやつ?
セマンティック的には明確に間違いだから素直にbuttonとjsで作ろう

949 :Name_Not_Found:2022/02/24(木) 15:26:49.81 ID:???.net
>>947
detailsタグとsummaryタグを使うようにはなってきてると感じる

950 :Name_Not_Found:2022/02/24(木) 15:53:45.93 ID:???.net
detailsとsummary使うとchrome97のページ内検索でアコーディオン勝手に開いてくれるようになったらしいね

951 :Name_Not_Found:2022/02/24(木) 15:56:18.41 ID:???.net
htmlの基本機能で実装しておくとブラウザ側で対応が進んでいってくれるのはメリットだよね
スムーススクロールの挙動もいい感じ

952 :Name_Not_Found:2022/02/24(木) 16:19:17.27 ID:???.net
>>948
いや
labelとinputの仕組みからlabel除くだけよ

953 :Name_Not_Found:2022/02/24(木) 16:21:04.70 ID:???.net
標準ぽいのあるのか

まあいいか悪いかわらないけどinputの
beforeやafterにlabelを背負わせるだけね

954 :Name_Not_Found:2022/02/24(木) 17:18:01.77 ID:???.net
個人的には標準機能として普及するまでは
軽量スクリプトに処理させたい気分

どうもネットですぐに見つかるアコーディオンは
気持ち悪い

955 :Name_Not_Found:2022/02/24(木) 17:20:37.59 ID:???.net
Bootstrap のAccordion は?

Collapse JavaScript プラグインと組み合わせて、
垂直に折りたたむアコーディオンを構築します

956 :Name_Not_Found:2022/02/24(木) 17:22:18.46 ID:???.net
クリックやタップを増やすのが嫌いなのでアコーディオン自体苦手
メガメニューでギリ許容

957 :Name_Not_Found:2022/02/24(木) 17:34:00.08 ID:???.net
面倒くさいからjavascriptは使わずhoverで開くだけにしてるわ

958 :Name_Not_Found:2022/02/24(木) 17:41:59.68 ID:???.net
hoverはスマホがなあ
タッチ基準に考えるので
PCはクリック限定になる

959 :Name_Not_Found:2022/02/24(木) 17:44:11.75 ID:???.net
意外とこういう需要ありそうな仕組みが
定まってないのね
勉強しててびっくりだわ

コーダーなのでゴリゴリ書けばいいだけなんだが
CSSだけで〜が多いので合わせてたが
うーんって感じで愚痴ってしまった

960 :Name_Not_Found:2022/02/24(木) 17:47:26.94 ID:???.net
>>955
bootstrapの話はしてないから、ちょっと黙ってて

961 :Name_Not_Found:2022/02/24(木) 19:10:06.49 ID:???.net
font awesomeのヘッダに記述するCSSなんですが、どこにあるんでしょうか?
6.0用のcssなんですが、発見できませんでした。

962 :Name_Not_Found:2022/02/24(木) 22:24:06.71 ID:???.net
「font awesome cdn」でggr

963 :Name_Not_Found:2022/02/24(木) 23:59:00.87 ID:???.net
background-image:url("https://www.sample.com/blank.gif");
のような特定の画像スタイルの要素のみ非表示にしたいのですが、
div[background-image=url("https://www.sample.com/blank.gif");] {
display:none;
}
ではうまくいきませんでした…
どのように書けばいいのでしょうか??お願いします。

964 :Name_Not_Found:2022/02/25(金) 01:09:46.14 ID:???.net
background-imageはCSSのプロパティであって、HTMLタグの属性じゃない
属性セレクタ使うならdivにstyle属性を追加してbackground-imageを指定しておくか
手っ取り早くclass追加するか、それが無理なら後はjavascriptとか?

965 :Name_Not_Found:2022/02/25(金) 08:26:27.16 ID:???.net
>>964
htmlは変更できないのでjavascriptでやるしかないっすかねぇ

966 :Name_Not_Found:2022/02/25(金) 08:33:08.93 ID:???.net
background-imageはあとで重ねがけすれば
そっちが優先されるよね

標準ではサンプルのURLを割り当てるようにしておいて

見た目画像が消えるようにダミーを重ね合わせる
CSS書いてそっちをオンオフしてみたら?

967 :Name_Not_Found:2022/02/25(金) 08:40:41.25 ID:???.net
.hoge1 {
background-image:url("https://www.sample.com/blank.gif");
}
.hoge2 {
background-image:none;
}

968 :Name_Not_Found:2022/02/25(金) 09:00:30.61 ID:???.net
hoge2をコントロールすれば画像はないようになる
https://jsfiddle.net/zvdpc5uy/

969 :Name_Not_Found:2022/02/25(金) 09:22:09.49 ID:8/EW0LOr.net
改良版
https://jsfiddle.net/fywa7Lr1/4/

970 :Name_Not_Found:2022/02/25(金) 12:17:18.43 ID:???.net
>>966
ポイントは「サイト中の特定の画像を非表示にしたい」というところなんですよ。
どうやってそれを指定するのかなと思って。

971 :Name_Not_Found:2022/02/25(金) 12:49:59.60 ID:???.net
>>970
大体はターゲットノードが
classかid持ってるだろうし
もしくはその親が持ってるだろうし
それを足がかりにかけるしかないような

972 :Name_Not_Found:2022/02/25(金) 12:55:35.11 ID:???.net
>>966
ダミーが挿入される場合はclassを付与するのじゃあかんの?

973 :Name_Not_Found:2022/02/25(金) 13:07:54.13 ID:???.net
やり方はなんでもイイよw
自分がやりたい事がターゲットにかかるように
指定するだけだし

どうも意図がわからんな

974 :Name_Not_Found:2022/02/25(金) 13:13:27.73 ID:???.net
>>968がクラスを2個設定したパターンだよ

最終的な結果はhoge2のnoneが有効になってる

あと結果のところをブラウザの
デベロッパーツール(Chromeの呼び名)
などで見てみりゃいい

いじりたいノードを選んでスタイルの
項目見ると重ね掛けした場合は
あとで重ねた方が有効という表示になるから

975 :Name_Not_Found:2022/02/25(金) 13:24:40.79 ID:???.net
すまん
>>972>>970

976 :Name_Not_Found:2022/02/25(金) 13:30:46.24 ID:???.net
>>974
>>965

977 :Name_Not_Found:2022/02/25(金) 13:32:30.42 ID:???.net
stylishとかで閲覧サイトの特定画像とか広告をCSSだけで消したいとか?

特定のCSSプロパティ値で探せるセレクタなんて無いから1つずつ探し出すしか

簡単なのはbackground-imageが指定されてるセレクタをそのままコピペしてきて
background-image: none;で上書きして消すとかね

978 :Name_Not_Found:2022/02/25(金) 13:45:37.57 ID:???.net
javascriptで
CSSを動的にいれるか
idかclass名で目的のノードの
styleを自力で書き換えるか

979 :Name_Not_Found:2022/02/25(金) 14:03:31.71 ID:???.net
重ね掛けのスタイルをjsでheadにぶっこむ場合
https://jsfiddle.net/2oaj7t4m/11/

980 :Name_Not_Found:2022/02/25(金) 15:46:12.77 ID:???.net
>>962
はい

981 :Name_Not_Found:2022/02/25(金) 15:52:04.46 ID:???.net
>>980
次スレよろ

982 :Name_Not_Found:2022/02/25(金) 15:52:48.87 ID:???.net
>>977
そうですね、閲覧サイトの特定画像をcssだけで消せないかなと。

>特定のCSSプロパティ値で探せるセレクタなんて無い

これが答えのようなので、jsでがんばります。
ありがとうございました。

983 :Name_Not_Found:2022/02/25(金) 16:43:03.81 ID:???.net
https://mevius.5ch.net/test/read.cgi/hp/1645774968
はい

984 :Name_Not_Found:2022/02/25(金) 20:34:00.63 ID:???.net
>>1にテンプレ貼ってないのでやり直し

985 :Name_Not_Found:2022/02/26(土) 03:36:23.70 ID:???.net
2022年の今、960グリッドシステムは幅が足りない?
ほとんどがスマホアクセスだから、960の12分割なんて今時ではない?

986 :Name_Not_Found:2022/02/26(土) 08:17:59.42 ID:???.net
好きにすればいい

987 :Name_Not_Found:2022/02/26(土) 08:29:23.66 ID:???.net
そんなこと言うなよブラザー

988 :Name_Not_Found:2022/02/26(土) 08:55:11.22 ID:???.net
ほとんどがスマホアクセスだから
とPCレイアウトのグリッドシステムの繋がりがわからぬ
PCは適当でいいってことならもうカリビアンコムとかみたいにPCサイトはスマホ表示を引き伸ばせばいいよ

989 :Name_Not_Found:2022/02/26(土) 09:53:01.32 ID:???.net
そういえば新規で2カラムはやらなくなったなぁ

990 :Name_Not_Found:2022/02/27(日) 12:57:55.68 ID:???.net
バックエンド(django)から取得したデータ(csv)を、djangoのテンプレートに埋め込んで?htmlのテーブルとしてブラウザに表示しています。
データの内容に従って、テーブルの行単位で個別の色をつける必要があり、django側で Tailwind のclass属性をhtmlに追加して出力することで期待通りの表示ができました。
ここまではいいのですが、表示データのソートをするため、DatatablesというJavascriptライブラリを使ったのところ、Tailwindの色の表示がおかしくなってしまいます。
Javascriptライブラリを使うことでCSSの情報が書き変わってしまったためだと思うのですが、こういうのはよくあることなのでしょうか。
解決方法をさがして悩んでいるところです。

991 :Name_Not_Found:2022/02/27(日) 13:02:36.82 ID:???.net
jsスレへ

992 :Name_Not_Found:2022/02/27(日) 13:15:57.39 ID:???.net
CSSの掛け方が悪いんじゃないの?

993 :Name_Not_Found:2022/02/27(日) 13:18:05.91 ID:???.net
ビューにCSSをかけて強調したいのか
ビューに表示されてるデータに
CSSをかけて強調したいのか

この差のように感じる

994 :Name_Not_Found:2022/02/27(日) 21:56:19.95 ID:???.net
例えば、Ruby on Rails では、

サーバー側で、pagenation にKaminari を使うと、Bootstrap 用のCSS も配布している。
クライアント側で、タグを付ける、jQuery UI のTag-it を使うと、CSS も配布している

だから常に、これらの内容がおかしくならないように、確認する必要がある

他人のモジュールを使うのは簡単だけど、整合性を保つには、
そのモジュールの内容を調べる必要がある

このスレよりも、JS スレか、WEB プログラミング板へ移動した方がよい

995 :Name_Not_Found:2022/02/28(月) 04:20:42.73 ID:???.net
>>994
いつものゴミアフィの名前入れろよカス

996 :Name_Not_Found:2022/02/28(月) 23:10:05.76 ID:???.net
そういや次スレは>>983のにするの?

997 :Name_Not_Found:2022/03/01(火) 08:24:28.66 ID:???.net
うん

998 :Name_Not_Found:2022/03/01(火) 09:02:09.98 ID:???.net
ではまた会おう

999 :Name_Not_Found:2022/03/03(木) 18:20:53.66 ID:???.net
カスケードレイヤー「@layer」でCSSの実装がどう変わるのか、仕組みと基礎知識、さまざまな使用例を徹底解説
https://coliss.com/articles/build-websites/operation/css/cascade-layers.html

1000 :Name_Not_Found:2022/03/03(木) 19:55:58.69 ID:???.net
コリス乙

1001 :2ch.net投稿限界:Over 1000 Thread
2ch.netからのレス数が1000に到達しました。

総レス数 1001
222 KB
掲示板に戻る 全部 前100 次100 最新50
read.cgi ver.24052200