ｈｔｍｌ？ｃｓｓ？が詳しい人ちょっと来て

1 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:47:21.053 ID:C9AALCX90.net

見よう見まねでサイト作ろうとしてるんだけど難しくて詰んでる
こうやってロゴとタイトルを左右に並べたいんだけどどうすればいいの？
https://dotup.org/uploda/dotup.org2345430.jpg

2 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:48:03.910 ID:In/D/bJzd.net

col

3 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:48:47.729 ID:jzqnJHB00.net

ボックス作ればいいんじゃね

4 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:48:53.296 ID:Sym98HyK0.net

週休2日しかもフレックス

5 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:50:24.232 ID:C9AALCX90.net

>>3
menu？nav？をさらにボックスに入れればいいってこと？
ボックスの位置の変え方がわからん

6 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:50:30.323 ID:kHCNAbcQ0.net

tableかfloat

7 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:51:52.015 ID:C9AALCX90.net

ロゴはヘッダーの左側、メニューは右側に配置したいんだよね
横並びじゃなくて

8 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:52:28.658 ID:NbSs25ZUa.net

寄せるのはマージンなんとかオートでいいんじゃないの

9 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:53:13.080 ID:1V3xB5mG0.net

今はtableやfloatなんて使わんぞ
flexで指定して終わり

10 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:54:14.658 ID:cQzhNin40.net

divで囲ってcssにflex書く

11 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:54:57.866 ID:hT08F6jf0.net

この程度で躓いてちゃ先が思いやられるな

12 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:55:39.733 ID:bHChbo/b0.net

そういうのはflexでいいんじゃない？

13 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:56:15.400 ID:1V3xB5mG0.net

まあ知識ないと何使えばいいか分からんだろ
こういうときはこれ使うってのが頭に入ればあとは都度調べながらでも出来るようになる

14 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:56:22.046 ID:nWva6lcKH.net

めんどくさいから画像でやってるわ

15 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:56:31.538 ID:C9AALCX90.net

flexとは・・・
ロゴもnavもdivで囲ってcssでflex使って位置を指定？

>>11
誰でも最初は一年生！！

16 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:58:36.381 ID:1V3xB5mG0.net

>>15
タイトルとメニュー囲ってる要素にdisplay: flex;
タイトルとメニューにそれぞれflex: 1;
「CSS flex」とかでググればチートシート出てくると思うからそれ参考にしなさい

17 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:59:11.418 ID:RPWP3Vpd0.net

すぐtable作っちゃう化石ですいません

18 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 11:59:49.493 ID:cQzhNin40.net

html

<div class="logo_box">
<img href='＊'>
<h1>タイトル</h1>
</div>


css

.logo_box｛
display:flex;
justify-contant:space-between;
align-items:center;
｝

19 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:00:17.040 ID:1V3xB5mG0NIKU.net

昔はCGIゲームのレイアウトとかも全部tableだったらしいな
今考えると逆にすごい

20 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:01:04.159 ID:cQzhNin40NIKU.net

justify-content

21 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:01:18.553 ID:1V3xB5mG0NIKU.net

ヘッダーならdiv要素よりheaderとかnavのほうがいいんじゃないかと思ったり

22 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:02:46.416 ID:cQzhNin40NIKU.net

>>21
スマホで打ってるからそこまでやってられんわ、それ言ったらimgはタグで囲まんといけないしcssでwidth指定もしなきゃいけない

23 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:03:15.800 ID:KJZWCjGY0NIKU.net

>>17
俺もだ
たいがいtableとpとdivでなんとかなる

24 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:05:00.561 ID:en4GwpMBaNIKU.net

見た目がシンプルなサイトで検証してスタイル確認とかすればいいんじゃない

25 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:06:44.435 ID:eAp2p+4e0NIKU.net

SSG使えばよくない？
生のHTML、CSSを0から手打ちで書く意味がわからない

26 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:09:14.584 ID:C9AALCX90NIKU.net

わかんない
もうちょっと離れて欲しいけどどうすればいいの
https://dotup.org/uploda/dotup.org2345440.jpg
https://dotup.org/uploda/dotup.org2345442.jpg

27 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:10:58.921 ID:C9AALCX90NIKU.net

今日思いつきで始めたからまだ何言われても何もわからないんだ
ｓｓｇって何

28 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:11:43.579 ID:eAp2p+4e0NIKU.net

>>27
静的サイトジェネレーター

29 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:12:24.304 ID:1V3xB5mG0NIKU.net

.containerのmargin外せば端に寄るんでないの

30 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:12:51.313 ID:Sym98HyK0NIKU.net

ディブの閉じタグ多くない？

31 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:13:25.982 ID:cQzhNin40NIKU.net

>>26
ブラウザで右クリックして検証押せ、そしたらマウスで要素みれる奴あるからなんでそんな空いてるのか調べろ

32 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:13:53.295 ID:nWva6lcKHNIKU.net

いちばん簡単な解決策は｢メニュー1｣ってなってるとこを｢メニュー1 ｣ってやる
青下線が空白にもついてくるんで無効化するとなお良い

33 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:13:57.827 ID:1V3xB5mG0NIKU.net

ブラウザの開発者ツールで直接CSS弄れるからそっちで確認して変えたやつをCSSにコピーとかすると楽だよ

34 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:15:04.236 ID:C9AALCX90NIKU.net

>>28
ggったけどこれまた難しそうなあれだな・・・

>>29
おお！！寄った！！
けど左右の余白が無くなってしまった！！
下にあるメインコンテンツと幅合わせたいから余白が欲しいんだけどどうすれば・・・

>>30
多かった・・・

35 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:16:11.184 ID:eAp2p+4e0NIKU.net

.containerはまだしも.menuって必要？

36 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:16:48.609 ID:Sym98HyK0NIKU.net

>>34
200pxの数字を小さくすればいい

37 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:19:19.277 ID:C9AALCX90NIKU.net

>>31
わからん・・・

>>32
あとでいじってみる！

>>33
初めて知った何この神機能

>>35
いらなさそう・・・

38 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:19:50.475 ID:1V3xB5mG0NIKU.net

あとこういう時はmarginで幅決めるんじゃなくてwidthで幅決めてmargin: autoで中央に寄せるやり方のほうがいいと思う

39 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:21:00.575 ID:1V3xB5mG0NIKU.net

>>37
開発者ツールはフロント開発に必須だから今のうちから慣れとくとよろし

40 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:28:06.317 ID:C9AALCX90NIKU.net

widthにした！！
いい感じじゃない！？
https://dotup.org/uploda/dotup.org2345448.jpg

41 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:30:22.075 ID:nWva6lcKHNIKU.net

メディアクエリのために幅とかは%で書いた方が良いよ

42 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:30:24.651 ID:C9AALCX90NIKU.net

メニューだけ若干左に寄ってるんだけどこれぴったり右端に合わせることってできる？
https://dotup.org/uploda/dotup.org2345450.jpg

43 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:30:28.980 ID:1V3xB5mG0NIKU.net

やったじゃん

44 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:31:41.329 ID:1V3xB5mG0NIKU.net

>>42
.containerのpaddingの50pxってとこ0にしたらいいと思う

45 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:32:02.580 ID:C9AALCX90NIKU.net

>>39
頑張るぜ！！

>>41
レスポンシブとかなんかあれのあれだな！！
なんか便利だったし今度から%で指定する癖付けようと思う

46 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:33:23.284 ID:en4GwpMBaNIKU.net

マージンパディングくらいは分からないとキツくない？
基礎的なやつどっかで勉強した方が

47 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:33:51.173 ID:C9AALCX90NIKU.net

きたあああああああああ
https://dotup.org/uploda/dotup.org2345453.jpg

48 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:36:00.985 ID:1V3xB5mG0NIKU.net

初々しくてなんかいいっすね

49 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:36:46.226 ID:C9AALCX90NIKU.net

ありがとうありがとう！！！
文字見ただけで解決できるのめっちゃすごい
わかんないのにひとりでやるのがいかに馬鹿だったか知った
ちゃんと教本買ってじっくりやってみる
ありがとう！！！！

50 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:36:54.793 ID:nWva6lcKHNIKU.net

阿部寛のHP作ろうぜ

51 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:38:00.971 ID:329S+nGJrNIKU.net

よくわからんけどおめでとう

52 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:39:11.306 ID:eAp2p+4e0NIKU.net

神フロント開発者誕生の瞬間か
立ち会えて光栄

53 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:39:31.149 ID:C9AALCX90NIKU.net

>>50
触れてみてわかる
あのHPも意外と手が込んでいるものなのだと

>>51
小さな一歩だけど嬉しいぜ
VIPには神がいた

54 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:41:56.688 ID:cQzhNin40NIKU.net

出来たのか、おめでとう

55 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:42:08.141 ID:C9AALCX90NIKU.net

>>52
色々教えてくれて感謝
がんばる

56 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:45:32.480 ID:1V3xB5mG0NIKU.net

こういうスレ書き込むときって間違ったこと言ってないかヒヤヒヤするよね
Qiitaとかに書くより緊張するわ

57 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:45:37.008 ID:vPUXV8X+0NIKU.net

ここ読めばだいたい何でも作れる
https://www.w3schools.com/howto/default.asp

58 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:45:47.405 ID:C9AALCX90NIKU.net

>>54
こっちこそありがとう！
ずっとわからんくて悩んでたからめっちゃ嬉しい

59 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:47:36.218 ID:C9AALCX90NIKU.net

>>56
君に教えてもらったことはたぶん一生忘れない
ありがとう！！！

>>56
うわすげえ！！！こんなのあるんだ！！！

60 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 12:49:19.159 ID:D+x1miXD0NIKU.net

>>57
へー
ここいいな
教えてくれてありがとう

61 ：以下、？ちゃんねるからVIPがお送りします：2020/12/29(火) 13:20:42.338 ID:e2oYqrdv0NIKU.net

悪くないな