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

1Name_Not_Found2018/03/14(水) 22:52:37.78ID:zpiIOMwj
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

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

質問側も節度あるレスで!質問前にスレ内を検索しましょう

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

■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 31
https://mevius.5ch.net/test/read.cgi/hp/1517028608/

■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html

2Name_Not_Found2018/03/14(水) 22:53:31.81ID:???
 
↓こっちが本スレです


HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/


 

3Name_Not_Found2018/03/14(水) 22:59:39.03ID:???
じゃあそっちで好きなだけscssの話ししてろ。絡んでくるな。

4Name_Not_Found2018/03/14(水) 23:00:08.20ID:???
断るw

5Name_Not_Found2018/03/14(水) 23:00:39.39ID:???
俺の巡回先が一つ増えただけのこと

6Name_Not_Found2018/03/15(木) 07:19:30.23ID:???
>>1

7Name_Not_Found2018/03/15(木) 19:23:13.07ID:???
■回答はSass/Scssを前提としないこと
 CSSでの回答とし、要望があった場合のみSass/Scssでも可

8Name_Not_Found2018/03/15(木) 20:02:50.86ID:wOWYsGva
そういう余計なこと書くからややこしくなる

9Name_Not_Found2018/03/15(木) 21:36:59.07ID:???
んじゃ

■回答はSass/Scssではしないこと

10Name_Not_Found2018/03/15(木) 22:50:32.31ID:???
SassやScssの話はも抜けへ行くこと

11Name_Not_Found2018/03/15(木) 22:53:47.86ID:???
うむ、わかりやすくなって申し分ない

12Name_Not_Found2018/03/16(金) 06:05:09.78ID:???
趣味で個人サイトを運営している者です
CSSの、@importについてなのですが、

(1)
ネット上で、
「読み込み速度が低下するので使わない方がいい」
という記事を見かけます
しかし私の体感では、
読み込み速度にそこまで大きな差はないような気がするので、
どのように理解すればいいのか、戸惑っています

単純に「速度が低下する」ということではなく、より具体的に、
例えば
・閲覧環境(ブラウザ・媒体等)によっては大きな遅延が発生する
・商用サイトでは影響が大きい
など、
どのような問題があるのか、
また、個人で運営するサイトでも考慮すべき問題なのか、
教えていただきたいです

(2)
「@importの弊害」と言われる物について
読み込み速度の低下以外に、
何か別の問題がありましたら、教えていただきたいです

13Name_Not_Found2018/03/16(金) 07:48:11.69ID:???
「読み込み速度が低下するので使わない方がいい」のソースは?

そりゃ厳密にいえばCSSをロードしてその中を解読してimportがあったらもう1回別のファイルをリクエストにいくし
import先と元で同じ要素の記述があったらオーバーライドでパーズにも無駄が生じるし
「しないよりは遅くなる」は正しいけど

50msecが100msecになるとかその程度の話
importしてページアクセスしてみて自分で問題を感じなければ無視していい

ただガラケーとか細い回線つかってるスマホとかに対しては
速度よりも容量的な意味でCSSの無駄をなくす配慮は多少あってもいいかもね
まあ馬鹿でかいjQueryとか動画ロードさせるサイトであふれてるしすずめの涙だとおもうけど

14122018/03/16(金) 08:55:56.94ID:???
>>13
ソースはいずれも個人サイトと思われるので、
具体的なURLをさらすことは控えたいと思いますが、
「@import 速度」などで検索した場合に、
検索結果の上位に表示されるようなサイトです

自分で問題を感じなければ大丈夫とのことで、安心しました

容量についてはまったく気配りができていませんでした
大きめの画像に比べればCSSファイルの方がずっと軽量なので、
おそらくガラケー等でも大きな障害にならないと思いますが、
意識して見てみたいと思います

また、import元と先とで記述が衝突しないよう、注意したいと思います

回答ありがとうございました

15Name_Not_Found2018/03/16(金) 10:28:03.35ID:???
>>13
その辺にプラスして、@importでネックになるのはファイル数に応じてHTTPリクエストが増えることだわな
毎回ハンドシェクからやる、サーバの負荷も増える、クライアントでもファイル待ちの遅延がある、あんまりいいことがない
昔は複数に分けて書いたjsファイルも、最後には1つにマージしてからサーバに置いてたもんだけど、今は違うのかな?

16Name_Not_Found2018/03/16(金) 10:41:59.35ID:???
webフォント使う時代に気にするほどのことじゃないな

17Name_Not_Found2018/03/16(金) 11:57:25.32ID:???
逆に考えるんだ。
モバイルで遅いので簡単に速くしたい、こういうとき、@importは解消し、日本語Webフォントはやめる。どうしても使いたいならせめてサブセット化

18Name_Not_Found2018/03/16(金) 20:59:16.75ID:???
見通しが悪くなるから、HTMLから普通に2個呼んだ方がいい
というのは見かける

19Name_Not_Found2018/03/16(金) 22:57:23.43ID:???
>>15
> 昔は複数に分けて書いたjsファイルも、最後には1つにマージしてからサーバに置いてたもんだけど、今は違うのかな?

今はそれをsassでやるよ
sassで@importを使うと、そのファイルをマージしてくれる


【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる
https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/


更にsassはファイルを結合するだけじゃなく、空白改行などを削って
サイズを小さくしてくれたりする

20Name_Not_Found2018/03/16(金) 23:00:50.11ID:???
あ、jsファイルのマージの話じゃないからねw
CSSファイルのマージの話。

21Name_Not_Found2018/03/16(金) 23:52:34.48ID:???
出た!Sass !wwwww

22Name_Not_Found2018/03/17(土) 00:00:01.90ID:???
そりゃでるでしょ。それが解決策なんだから

23Name_Not_Found2018/03/17(土) 00:10:10.05ID:???
sassとかバカか

24Name_Not_Found2018/03/17(土) 00:12:06.19ID:???
解決策はお前が自分で立てたスレ↓に引っ込むことだろ
https://mevius.5ch.net/test/read.cgi/hp/1519547237/

25Name_Not_Found2018/03/17(土) 00:12:47.49ID:???
基本的にcssの問題点を解決するものだから、
cssでできないことがあったらsassに手を出すのが良い
文法は互換性があって、すべてのcssはsassとしても使える

26Name_Not_Found2018/03/17(土) 10:40:42.30ID:???
>それが解決策

この人なんでこんなにずれてるの?
話にならないレベルだね
荒らしが目的なんだろな

27Name_Not_Found2018/03/17(土) 18:45:20.17ID:???
フォントの英文名の調べ方ってどうやるんですか?
Windows10の「フォント」から調べても
Yu Gothic UI Semilight
とかやたら長く書いてあって、どこからどこまでか分かりません
結局ネットで検索して書いてます

28Name_Not_Found2018/03/17(土) 21:22:27.75ID:???
>>27
それ全部でフォント名

29Name_Not_Found2018/03/17(土) 21:54:01.14ID:???
>>28
でも
Yu Gothic UI Semilight
と記述すると逆にちゃんと表示されません
Yu Gothic UI
とすると正しく表示されますが。
なので正式名称とは・・?ってなります

30Name_Not_Found2018/03/17(土) 22:09:50.74ID:???
フォントファミリー

31Name_Not_Found2018/03/18(日) 02:42:13.52ID:???
はいまた土日のsassキチ登場ですね。
毎週毎週ご苦労様ですがそろそろお薬の時間じゃないですか?

32Name_Not_Found2018/03/18(日) 02:45:37.57ID:???
そこは毎日だろ?w
帰宅するんだからさ

33Name_Not_Found2018/03/18(日) 02:51:59.26ID:???
>>29
' でくくって
'Yu Gothic UI Semilight'
で、どう?

34Name_Not_Found2018/03/18(日) 03:46:52.88ID:???
input type=textで表示されるコンポーネントの、
一般的な、web以外でも通用する名称は何なんでしょう?
とりあえずテキストフォームと呼んでいますが
textareaもテキストフォームに含まれてそうで、あまりぴったりきません

35Name_Not_Found2018/03/18(日) 03:48:54.54ID:???
web以外っていうと紙も含まれるの?

36Name_Not_Found2018/03/18(日) 04:33:41.37ID:???
1行テキスト入力エリア

複数行テキスト入力エリア

37Name_Not_Found2018/03/18(日) 04:38:19.74ID:???
記入欄でいいだろ
以下の記入欄に回答を書きなさい

38Name_Not_Found2018/03/18(日) 05:29:27.89ID:???
HTMLとCSS初心者に使わせるなら
ATOMとSublime Textどっちいがいいかな

39Name_Not_Found2018/03/18(日) 06:08:22.20ID:???
sass様が建てた本スレ過疎って笑うわww

40Name_Not_Found2018/03/18(日) 06:52:17.62ID:???
別に笑わんから自分のスレから出てこないでほしい

41Name_Not_Found2018/03/18(日) 09:42:47.85ID:nON2Jkmg
なんでそんなsassを目の敵にしてるんだ?

42Name_Not_Found2018/03/18(日) 10:15:14.26ID:???
(スレ違いだから)
俺様が使いこなせないから

43Name_Not_Found2018/03/18(日) 11:04:33.60ID:???
使いこなせてるが質問者も使ってるとは限らないから
それが当たり前のように持ち出す輩がうっとうしいから

sassを目の敵にしてるのではなくてsassを前提にしてる輩が目の敵

44Name_Not_Found2018/03/18(日) 13:26:42.19ID:???
愉快犯でやってるんだから相手するだけ無駄
ガチでSCSS推しのつもりなら完全に逆効果

45Name_Not_Found2018/03/18(日) 16:33:40.15ID:???
scssってならまだわかるけど今さらsassってw

46Name_Not_Found2018/03/18(日) 16:38:14.19ID:???
プロジェクトの名前がSassなんだよ。
実際に使ってる文法はscssが主流

47Name_Not_Found2018/03/18(日) 17:07:16.70ID:???
へー、そうだったんか

48Name_Not_Found2018/03/18(日) 17:16:38.28ID:???
時代はAdobeが一押しのBootstrap

49Name_Not_Found2018/03/18(日) 18:29:38.29ID:???
いちいち触んな

50Name_Not_Found2018/03/18(日) 18:57:48.12ID:???
htmlタグで文字のフォントを変えたいんですが、いわゆる新聞書体?の様なフォントにするには何と指定したら良いですか?

51Name_Not_Found2018/03/18(日) 23:19:38.02ID:???
セリフとサンセリフの違いをいつもわすれる
なんかいい覚え方ないかな

52Name_Not_Found2018/03/18(日) 23:27:11.77ID:???
覚え方というかそのまま訳すと
セリフ=飾り
サンセリフ=ノン飾り=飾りなし
意味がわかれば思い出しやすいかと

53Name_Not_Found2018/03/19(月) 00:20:17.67ID:???
>>34
windows apiだとtextbox

54Name_Not_Found2018/03/19(月) 01:09:37.54ID:???
sans-serifの方がserifよりも後に出てきたということは分かるので
旧来の筆の書体を再現した書体→serif
印刷に最適化した新しい書体→sans-serif

55Name_Not_Found2018/03/19(月) 02:19:45.01ID:???
>>52,54
おお、なるほど
これなら忘れなさそう

56Name_Not_Found2018/03/19(月) 02:20:01.60ID:???
ありがとね

57Name_Not_Found2018/03/19(月) 10:49:50.70ID:???
>>34
テキストフィールドと呼んでいる

58Name_Not_Found2018/03/19(月) 10:56:06.06ID:???
sass絶対許さないマンは
なにがそんなにお気に召さないのか…

十数年前にいたcss絶対許さないマンみたいだ

59Name_Not_Found2018/03/19(月) 11:55:58.06ID:???
スレ違いだからだ。
縄文式土器のスレに弥生式土器の宣伝に来るな。

60Name_Not_Found2018/03/19(月) 13:15:04.58ID:???
>>58
許さないマンだけど別にsassOKスレなら喜んでsassの話するよ
「ここはsass無しのスレ」だからな?
どうしてもsass絶対書くマンだとしてもsassで回答したのでこっちへって誘導してくれるなら問題ない
現状単に荒らしにきてるだけじゃん

61342018/03/19(月) 13:17:56.54ID:???
沢山の回答ありがとうございます
「テキストエリア」と差別化できているので、
「テキストフィールド」が一番よさそうだなと思いました
ありがとうございました

62Name_Not_Found2018/03/19(月) 13:21:21.51ID:???
sass大好きなんだけど、みんなscss形式で書くからsassのインデント派な自分は肩身が狭い
hamlみたいにすっきり書けるの所がいいのに

63Name_Not_Found2018/03/19(月) 13:49:16.59ID:???
>>60
誰が決めたのそれ?

64Name_Not_Found2018/03/19(月) 14:17:04.47ID:???
>>63
お前以外の全員だろ

65Name_Not_Found2018/03/19(月) 14:18:44.93ID:???
>>64
勝手に俺巻き込むなよ

66Name_Not_Found2018/03/19(月) 14:32:19.94ID:???
>>62
なんだかんだでもう数年もすればsassが主流になってるだろう

67Name_Not_Found2018/03/19(月) 14:35:11.31ID:???
flexboxで、flexアイテムにmarginを設定しても
flexコンテナのpaddingや、
他のflexアイテムのmarginと相殺されません
アイテムの並びが固定されている場合は、
スタイル指定を調整することでうまく等間隔に配置できますが
並びがレスポンシブに変わる場合にはそれはできません
コンテナとアイテムの間、アイテムとアイテムの間に
等しくマージンを設定したい場合はどうしたらいいのでしょうか?

68Name_Not_Found2018/03/19(月) 17:06:19.25ID:???
calc()使っても駄目かね?

69Name_Not_Found2018/03/19(月) 17:25:53.28ID:???
一方にのみ設定してみたり、
擬似クラスを使ってみるとか?
コードがあれば分かりやすいかも

70Name_Not_Found2018/03/19(月) 20:58:58.35ID:???
>>66
てことは主流でないもので回答してる輩がいるわけか

71Name_Not_Found2018/03/19(月) 21:00:26.16ID:???
>>67
並びがレスポンシブに変わる場合、ってのがよくわからんが
marginは上下と左右で違うことはOK?

72Name_Not_Found2018/03/19(月) 21:05:17.31ID:???
要はスマホサイズ時にボックスが縦並びになる時に
意図したようなmarginサイズになって並ばないってことでしょ

73Name_Not_Found2018/03/19(月) 21:37:27.96ID:???
>>67
相殺はいつでも起こるわけじゃないんだ
https://jsfiddle.net/ys64afy1/16/

74Name_Not_Found2018/03/19(月) 22:08:28.27ID:???
ある要素を浮かせて特定の場所に表示させるのってどうすんでしたっけ

position:absolute

float; left
かなんかだったとおもうのですが
できません

75Name_Not_Found2018/03/19(月) 23:03:30.11ID:EI3D6ctE
>>74
前者であってる
それと一緒にleft、right、top、bottomで座標を決める

その要素から親要素を辿っていって
最初にpositionがstatic以外の要素が座標の基準になる
そのような要素がなかったら<body>が基準になる

76Name_Not_Found2018/03/19(月) 23:14:01.11ID:???
>>75
例えばJSで75のコメントの要素を浮かせてスレ上部に移動させるとするとどうすればいいですか?
前試しにやったらできたのですが。。。

elm = document.getElementById("75")
elm.setAttribute("style", "position:absolute; top:100; left100")
をコンソールで実行しても移動しないのです

77Name_Not_Found2018/03/19(月) 23:25:29.47ID:???
left の:が抜けてますが脱字です。無視して下さい。

78Name_Not_Found2018/03/19(月) 23:52:50.08ID:EI3D6ctE
>>76
それは書き方がおかしい

var elem = document.getElementById('75');
elem.style.position = 'absolute';
elem.style.left = '300px';

これでこんな感じにズレる
https://i.imgur.com/WsW5mcZ.jpg

79Name_Not_Found2018/03/19(月) 23:55:14.58ID:???
>>76
top、leftは単位が必要
100px、100%、100emなど

80Name_Not_Found2018/03/20(火) 00:42:12.98ID:???
>>67
そもそもmargin設定したかったらflexbox使う必要なくない?
> * を inline-block にして margin つければいいんじゃないの
flex 使うからには space-around か between で任せたいから使うんでしょ

81Name_Not_Found2018/03/20(火) 05:16:51.68ID:???
>>50
これ答えてはもらえないですか

82Name_Not_Found2018/03/20(火) 06:34:53.28ID:???
<html style="font-famiry:書体;">
とか?

83Name_Not_Found2018/03/20(火) 08:15:08.47ID:???
L↔R

84Name_Not_Found2018/03/20(火) 08:42:06.42ID:???
ザノッキンオンャドォ

85Name_Not_Found2018/03/20(火) 11:25:35.74ID:???
>>81
font-family: serif;

見た目を変えるのはHTMLの仕事ではないので
CSSでやろう

86Name_Not_Found2018/03/20(火) 12:17:52.68ID:???
>>82
>>85
ありがとうございます試してみます。
全体のフォントをそうしたいのではなく一フレーズだけ変えたいのでhtmlかなと思ったのですがど素人なものですみません。

87Name_Not_Found2018/03/20(火) 12:30:08.01ID:UBbYMift
>>86
それもCSSでやるのだよ
書体を変えたい要素のスタイルをCSSで書く

88Name_Not_Found2018/03/20(火) 15:15:27.15ID:???
>>86
そういうのはspanのclass指定でいいじゃね?

89672018/03/20(火) 15:56:30.68ID:???
回答ありがとうございました
皆様のレスを読んで、根本的にmarginの相殺に関して誤解していたと気づきました
相殺するのは縦marginだけで、しかも縦marginが全て相殺するわげではないのですね
どうしたかについてですが

Mastering Wrapping of Flex Items : Creating gutters between items
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

ここを見ると、アイテムやコンテナの間に自由にマージンを設定するには
現状ではラッパーを使うしかないようです
場合によってはコンテナのpaddingとアイテムのmarginだけでも可能ですが
コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅を変えるなどしたい場合は
ラッパーを使うしかないようです
見た目のためだけのHTML要素を使うのはなるべくなら避けたいですが、
今の時点では仕方ないですね
row-gapとcolumn-gapというのが将来Flexboxにも追加されるそうなので、
それが実装されれば解決するのかもしれません
ありがとうございました

90Name_Not_Found2018/03/20(火) 15:57:39.31ID:???
×コンテナ-アイテム間の幅と、コンテナ-コンテナの間の幅
○コンテナ-アイテム間の幅と、アイテム-アイテムの間の幅

でした

91Name_Not_Found2018/03/20(火) 17:05:22.60ID:???
>>78
>>79

ああ、単位か
ちょくちょく忘れる
ありがとうございました。

92Name_Not_Found2018/03/20(火) 18:31:10.64ID:???
>>87
う〜ん面倒…と思ってしまいますがそれが基本中の基本ですよね
css苦手意識が強くて極力弄りたくないと思ってましたがそれじゃダメですね、がんばりますありがとうございます

>>88
そういう答えが欲しかったんです!
でもcssがんばってみますありがとうございます

93Name_Not_Found2018/03/20(火) 21:18:40.55ID:c11TXgNj
<table cellpadding="10">のようにテーブル内にあるセル全部の余白をcssで設定するには
どうすればいいんですか?
<table style="padding:10px">だとテーブルの外枠だけしか余白が設定されないので

94Name_Not_Found2018/03/20(火) 21:22:33.95ID:UBbYMift
>>93
border-collapse:separate;
border-spacing: お好み値;

marginみたいに縦横書けるよ

95Name_Not_Found2018/03/21(水) 10:39:16.98ID:LwnUScG2
>>94
それセル間のスペースだったで
やりたいのはセル内にスペースをつけたいってこと
<td style="padding10px;">だとそのセルだけにしかスペースが適用されないけど
それをテーブル内にあるセル全体に適用したいんです

96Name_Not_Found2018/03/21(水) 12:11:12.38ID:???
>>95
<td style="padding10px;">を全部のセルに書く
またはcssで
td {padding10px;}

97Name_Not_Found2018/03/21(水) 12:23:37.71ID:???
まあcssでやった方がスマートではある

98Name_Not_Found2018/03/22(木) 01:36:47.36ID:???
emは、親要素のフォントサイズが基準になると、教則本などには書いています
フォントサイズの指定にこの単位を使った場合は、その通りだと思いますが
この単位をwidthなどに使った場合、
親要素のフォントサイズではなく自要素のフォントサイズが基準になっているように思います
たとえば
#parent {
font-size: 13px;
}

#child {
font-size: 30px;
width: 10em;
}
のようにすると、#parentのfont-sizeを変えても#childの幅は変わりませんが
#childのfont-sizeを変えると#childの幅も変わります
emが親要素基準になるのはフォントサイズ指定に使った場合だけなのでしょうか?

99Name_Not_Found2018/03/22(木) 02:01:30.07ID:???
「プロとして恥ずかしくない 新・CSSデザインの大原則」には
font-sizeは親要素基準、それ以外は自要素基準と書いてありました
このことに触れてもいない本とかオンライン学習とか、結構多くないですか?

100Name_Not_Found2018/03/22(木) 03:01:22.57ID:???
フォント指定なら単位はremでやれば?

新着レスの表示
レスを投稿する