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

**Name_Not_Found** · 2018/12/10(月) 23:34:18.61

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

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

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

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

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

■前スレ
HTML/CSS のどんな質問にも優しく答えるスレ 34
http://mevius.5ch.net/test/read.cgi/hp/1538966757/

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

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

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

**Name_Not_Found** · 2019/01/12(土) 00:25:00.70

>>553
type="search"は探したいキーワードを入れる場所だから合ってるんじゃね？
その文字列を探してるか探してないかはビジターの脳内での話だし

**Name_Not_Found** · 2019/01/12(土) 01:11:47.56

>>550
なついなｗ
「食事は1日1食コーディングしながら食え」とか「病院往く暇あるならコーディングしろ」とかあったな

**Name_Not_Found** · 2019/01/13(日) 22:15:55.85

A、B、C（文章）をインラインブロックで横並び、
レスポンシブで、横幅によって縦並びになるやうにしたい
内容が複数行になる場合、文字列を最終行で揃えたい
縦並びになった時、Cの下だけに余白1em分を入れたい（A、Bの下は余白なし）

なんかうまいこと実装可能？

**556** · 2019/01/13(日) 22:20:24.09

A、B、Cのかたまりをいくつか並べたいんだけど、
横並びになってる時はABCと次のABCの間に余白入れたいんですじゃ

さっきから頑張ってるけど、複数行の要素が入るとCだけ最終行で揃わなかったりしてうまくいかない

**Name_Not_Found** · 2019/01/13(日) 22:48:17.94

そんなの説明しとるサイトたくさんあるだろ

**Name_Not_Found** · 2019/01/13(日) 23:30:24.33

無職のおっさんなんだけど、
時間があるからhtmlの勉強をしたい
ドットインストールやプロゲートでも
学習をする上で問題はないかな？

**Name_Not_Found** · 2019/01/13(日) 23:40:12.80

ないよ。とっととやれ。

**Name_Not_Found** · 2019/01/14(月) 01:21:49.77

>>556
出来る。が、今日は眠たいので明日
htmlはここにでも書いておいて
http://jsfiddle.net/

とりあえず、使うのはインラインブロックじゃなくflex

**Name_Not_Found** · 2019/01/14(月) 01:30:04.80

こんなん当たり前にやってることだからちょっとググれば大量に出てくるのに

**Name_Not_Found** · 2019/01/14(月) 05:05:28.67

>>561
めんどうだしわからないから正解書いといてくれると助かるんだが？

**Name_Not_Found** · 2019/01/14(月) 09:51:43.98

>>563
うん、俺も面倒なんだ。だから書けって言ったんだ
後は自分で頑張って
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

**Name_Not_Found** · 2019/01/14(月) 12:28:14.32

ごちゃごちゃ言わずにとっとと教えろよ
このスレはどんな質問にも答えるんだろ

**Name_Not_Found** · 2019/01/14(月) 13:24:40.45

夏だなぁ

**Name_Not_Found** · 2019/01/14(月) 16:48:57.27

冬ですが

**Name_Not_Found** · 2019/01/14(月) 17:13:02.07

>>565
じゃあ答えてやる、もとのソースがわからないから書いといてね←これも質問なんだからちゃんと答えろよ？

**Name_Not_Found** · 2019/01/14(月) 18:16:03.96

>>556
Cではなく親ブロックの下に1emの余白を取ればいい

**556** · 2019/01/14(月) 22:43:38.55

>>569
おおおマジだ！なんで気づかなかったんだろう
サンクス

他の人たちもあざっした！
お仕事行ってたから上の何人かはワイじゃないやで

**Name_Not_Found** · 2019/01/15(火) 00:46:34.34

知ってる

**Name_Not_Found** · 2019/01/15(火) 02:11:31.53

誰もお前だとか思ってねえよｗｗｗ
自意識過剰だろｗｗｗ

**Name_Not_Found** · 2019/01/15(火) 03:57:28.74

>>570
本人証明するために次からid出しておけよな

**Name_Not_Found** · 2019/01/15(火) 04:05:21.98

やなこった

**Name_Not_Found** · 2019/01/15(火) 07:32:49.36

肉体を失ったから自意識しかねえんじゃｗ
過剰なくらいでちょうどいいんやで

**Name_Not_Found** · 2019/01/15(火) 09:53:27.23

id出さなければ、いくらでもやり直すことが出来るんやで

**Name_Not_Found** · 2019/01/15(火) 12:01:20.14

解答者の質が上がれば考えるわ

**Name_Not_Found** · 2019/01/15(火) 12:12:30.89

preタグの先頭に空白が何個かあっても
＜pre＞_____文字列１
________文字列２
＜/per＞
表示すると除去されてしまいます。
でも、途中にある空白（文字列２の前にある）は、除去されません。
そう言う仕様ですか？

**Name_Not_Found** · 2019/01/15(火) 14:19:39.00

>>578
再現しない、typoをどうにかしろ
http://jsfiddle.net/ncg4wspx/

**Name_Not_Found** · 2019/01/15(火) 14:24:09.20

HTML に直接書いても、勝手に除去されない

たぶん、JavaScript か何かの、trim か何かで、
先頭・末尾の連続した空白類が、除去されているのだろう

**Name_Not_Found** · 2019/01/15(火) 14:32:56.50

半角スペースは一個にまとめられる
それこそperタグにでもなっているんじゃないか

**Name_Not_Found** · 2019/01/15(火) 14:39:00.77

>>577
質の低い質問にはそれなりの回答しかつかない

**Name_Not_Found** · 2019/01/15(火) 14:52:12.54

実際、まともな回答してもスルーして、丸投げコードの回答が感謝されるだけ
最も、解決済でもスルーしているきらいがあるがな
(忘れたころにレスしてる奴は巡回中に思い出しただけ)

**Name_Not_Found** · 2019/01/15(火) 17:55:36.55

質問です

:hover{ ... }
というふうに書いた時に、最前面の要素にだけスタイルが適用されるようにする方法ってないんでしょうか？
これを書いただけだと、小さい要素にホバーしただけでその背景（親）のノードもすべて...が適用されてしまいます

**Name_Not_Found** · 2019/01/15(火) 18:28:50.42

>>584
全称セレクタ状態だから、classなりidで適用範囲を制限しろ
(こんな質問ばっかかよ…)

**Name_Not_Found** · 2019/01/15(火) 18:40:06.97

ええ疑似要素って要素書かなくても機能したの！？
ずっと知らなかったわ
:hover{
color: red !important;
}

確かにhoverで全部redになった
ってか疑似要素を単独で使う場面ってある？

**Name_Not_Found** · 2019/01/15(火) 18:45:02.85

>>586
:hoverはどう見ても疑似クラスだろ
何で疑似要素になるんだ？

> ってか疑似要素を単独で使う場面ってある？
疑似クラスなら発想次第であるんじゃないのか
:checkedあたりは扱いやすそうだが

**Name_Not_Found** · 2019/01/15(火) 18:48:23.08

「適当にコードを書いてみたら、動きませんでした。基礎勉強？何それ美味しいの？」な質問が多過ぎ
根本が分かってないから、「～だと思うんですが」が大抵間違っていてgdgd

**Name_Not_Found** · 2019/01/15(火) 18:56:20.83

>>587
すまん、疑似要素のコード書いてて混ざった
確かに:checkedは使えそう

**Name_Not_Found** · 2019/01/15(火) 18:57:31.05

:hover{ ... }をa:hover{ ... }
と脳内変換して読んでてずっと意味がわからなかった
まさか質問が本当にそのままだなんて・・・怖い・・・

**Name_Not_Found** · 2019/01/15(火) 19:20:03.47

中級者が偉そうにできるスレって少ないから
質問者も察してあげて

**Name_Not_Found** · 2019/01/15(火) 19:27:46.65

基本を勉強していれば絶対しないような質問だろ

**Name_Not_Found** · 2019/01/15(火) 19:32:56.73

基本て何から勉強したらいい？
アルファベット？

**Name_Not_Found** · 2019/01/15(火) 19:35:09.19

HTML/CSSのチュートリアルサイトを一から読んだら？

**Name_Not_Found** · 2019/01/15(火) 19:38:49.74

>>593
https://developer.mozilla.org/ja/docs/Web/CSS

**Name_Not_Found** · 2019/01/15(火) 19:54:33.84

リファレンス出して終わる質問多いけど、出しても「難しくて分かりません」でスルーされるのが目に見えているという
地道な勉強が嫌いでてっとり早く済まそうとする人が多いよね

**Name_Not_Found** · 2019/01/15(火) 20:14:08.51

>>593
勉強の仕方の勉強じゃね？
小中高で習うことだが

**Name_Not_Found** · 2019/01/15(火) 20:14:42.22

プロになっても学ぶべき事はたくさんある

**Name_Not_Found** · 2019/01/15(火) 21:38:45.21

>>597
一応大卒だけどいまだにそれ分かんない

**Name_Not_Found** · 2019/01/15(火) 22:00:47.50

>>585
いや適用範囲を制限したくはなくて、全要素のhover時のスタイルを指定したいんです。見たまんまです。
ただし、要素が重なってる時に最前面＝最子孫要素だけに適用させたいんです
hoverだけの需要でしょうがそれを指定する方法はないんでしょうか

**Name_Not_Found** · 2019/01/15(火) 22:05:50.67

>>600
条件は初めに全部書け
JavaScriptでやれ

**Name_Not_Found** · 2019/01/15(火) 22:18:29.74

俺でもマウントとれるレベルのやついないかなあ
↓
初級者質問スレ巡回
↓
お、これいけるな！
↓
こんなこともわからないのかよｗｗｗちょっとは勉強しろよｗｗｗ

毎日この繰り返しです

**Name_Not_Found** · 2019/01/15(火) 23:10:08.93

ある程度レベルが上がるとマウントなんて取ろうと思わない
カブトムシに相撲でケンカ売らないだろう、それと同じ

**Name_Not_Found** · 2019/01/15(火) 23:20:20.84

こんなに伸びてて説得力ないっすよ解答者様方ｗｗ

**Name_Not_Found** · 2019/01/15(火) 23:21:00.22

これマウントか？
口は悪いが、回答してるような

**Name_Not_Found** · 2019/01/15(火) 23:31:07.66

>>602-604がマウント君だったという落ち

**Name_Not_Found** · 2019/01/15(火) 23:40:13.43

みんな必死過ぎ

**Name_Not_Found** · 2019/01/16(水) 04:03:59.76

>>599
学校で教えてる勉強の仕方は主に

・雑多な情報から要点を見抜く
・データや原理を整理して限られた時間で覚える
・求められる解答を理解して過不足なく正確に答える

この３つ
俺らのお仕事に当てはめると

・無数の解説サイトから有用なものを見抜く
・日々増える言語、メソッド、アプリを空き時間で覚える
・書くべきコードを理解、エラーなくデプロイ、事故なくランニング

こんな感じ
もしくは

・客や営業の妄言から要点をエスパー
・ツールを駆使して情報を整理共有、打ち合わせ用に要点は記憶
・客の満足するサイトを作るが、予算以上には働かない

**Name_Not_Found** · 2019/01/16(水) 07:16:19.11

>>600
>最前面＝最子孫要素だけに
こういう指定方法は、有るかな？
条件が難しすぎる

それら全部に、特定のクラスを付ければ？

**Name_Not_Found** · 2019/01/16(水) 07:28:52.10

>>600
ない
あと一番深い要素が最前面とは限らん

**Name_Not_Found** · 2019/01/16(水) 13:13:15.53

リンゴ出してきて「ねぇ早くミカンにしてよ？え？できないのwww？レベル低ww」とか言ってる質問者だからなぁ

**Name_Not_Found** · 2019/01/16(水) 13:24:36.11

え？まだ続けるの？？

**Name_Not_Found** · 2019/01/18(金) 02:09:40.88

スマホで縦長になるページの下の方にあるナビゲーションゾーンに
ページ内のどこからでも１タップで飛ばす仕組みを作りたいんだけど
何か良い方法ない？

**Name_Not_Found** · 2019/01/18(金) 02:24:20.36

>>613
position: fixedなボタン表示しといてonclickでナビゲーションゾーンの要素にscrollIntoView()すれば？

**Name_Not_Found** · 2019/01/18(金) 13:40:11.29

飛ばすだけなら<a href="#navi">で十分じゃね

**Name_Not_Found** · 2019/01/18(金) 14:39:11.36

scrollInToViewって
ホイホイお勧めできる程度には実装広まりました？

**Name_Not_Found** · 2019/01/18(金) 17:39:07.64

>>616
93.45%
https://caniuse.com/#feat=scrollintoview

引数で簡単にトランジション時間設定できるしブラウザヒストリ変わらないしいいんじゃないかな

**Name_Not_Found** · 2019/01/18(金) 17:42:25.20

すいません誰か教えてください。

ページ内リンクにジャンプするのではなくて、ページ内リンク部分のテキストを　ボックスかなんかで表示するということはできないでしょうか。
例えば5ch掲示板のように >>1 にマウスをかざしたら＞＞1さんのテキストが表示されるみたいにしたいのです。
これはjsとかの領域になるのでしょうか。
マウスホバーとかツリービューとかでググりましたがいまいちわかりませんでした。ヒントワードだけでも教えてくださればありがたいです。

**Name_Not_Found** · 2019/01/18(金) 18:31:26.44

ヒントワード：js

**Name_Not_Found** · 2019/01/18(金) 18:37:03.66

>>617
IEは11でもオプション使えないから騙されるなよ
あと時間は指定できないから騙されるなよ

**Name_Not_Found** · 2019/01/18(金) 18:41:12.15

IEはいいよもう…

**Name_Not_Found** · 2019/01/18(金) 19:14:08.34

対応してるっていっても機能のほとんどが制限されるから、そこまで使い道ないよ

**Name_Not_Found** · 2019/01/18(金) 19:53:52.71

WEBデザイナーを副業にすれば月5万は稼げるとプログラミングスクールで言われたんだけどマジ？

**Name_Not_Found** · 2019/01/18(金) 20:05:57.78

まじめに副業すれば、何やってもそれくらい稼げるだろ

**Name_Not_Found** · 2019/01/18(金) 20:15:34.07

>>618
ツールチップと言う
けどこれモバイル対応できないから、あんまり頑張っても仕方ない部分ではある

>>623
営業努力次第でかなり上下する

**Name_Not_Found** · 2019/01/18(金) 21:09:34.37

>>619
ありがとうございます！

>>625
ありがとうございます！
まさに求めていたものです。

**Name_Not_Found** · 2019/01/18(金) 21:55:32.86

下記のようなhtmlのページが何個もある場合で、
全てのhtmlのヘッダーやフッターをちょっと変更したい時に更新が大変なのですが
cssみたいに１つのヘッダーを読み込むみたいなことはできるのでしょうか？

■　ヘッダー　（ここを更新したい）
□　本文1
□　本文2
■　フッター

**Name_Not_Found** · 2019/01/18(金) 22:42:36.02

**Name_Not_Found** · 2019/01/18(金) 22:47:01.17

質問です
CSSの大きさの単位でvhを使ったときの最大値を決めたいんですが
@mediaで切り分けるしかないですかね

幅・高さはmax-widthやmax-heightでいいんですが
その他のプロパティは

**Name_Not_Found** · 2019/01/18(金) 23:10:40.57

>>627
サーバーサイド言語でやればよい

>>629
そゆこと
max-vhとかほしいよな

**629** · 2019/01/18(金) 23:17:00.14

>>630
やっぱそうかー
すべてのプロパティにmax-とmin-ほしいですねー

**Name_Not_Found** · 2019/01/18(金) 23:23:17.44

>>627
phpで別ファイルを読み込む
htmlで別ファイルを読み込む方法もあるけど、避けたほうが良い。理由は忘れた
この際だしwordpressでも入れて見たらいいかもね

**Name_Not_Found** · 2019/01/18(金) 23:35:02.98

>>617
ありがとー

**Name_Not_Found** · 2019/01/19(土) 00:35:47.84

>>627
htmlとcssのみだとできないんでないかな
俺はejsを使ってる

**Name_Not_Found** · 2019/01/19(土) 00:36:41.66

あー
おすすめは絶対しないけど
iframeでできないこともないか?

**Name_Not_Found** · 2019/01/19(土) 00:49:29.77

PHPはデフォでインストールされてるだろうからSmartyでも使えばいいんじゃね

**Name_Not_Found** · 2019/01/19(土) 09:12:02.10

>>627
htmlからヘッダー部分切り出して別ファイル(header.htmlとか)にして、元あったとこ(index.htmlとか)は
<?php include 'header.html'; ?>
とする
そして .htaccess に

<FilesMatch "\.html$">
AddType application/x-httpd-php .html
</FilesMatch>

を追加する
これで実現できる

**Name_Not_Found** · 2019/01/19(土) 16:00:49.72

SCSS でも、main.scss に、_a.scss など、各コンポーネントのパーシャルファイルを読み込む

HTML, JavaScript でも、フレームワークを使うと同じ。
各コンポーネント別に作って、index.html, bundle.js みたいなファイルに読み込む

各コンポーネントごと、別々に作って、後でまとめるようにする

>>618
スマホでは無理だけど、ツールチップみたいなイベントで、
jQuery などで、内容を取得するのかも？

**Name_Not_Found** · 2019/01/19(土) 22:46:35.70

便利なものがたくさんあるんだから使えばいいのに

**Name_Not_Found** · 2019/01/19(土) 22:51:55.72

便利といって使いまくると跡でな・・・

**Name_Not_Found** · 2019/01/20(日) 18:37:28.34

画像遅延ロード系のスクリプト使う時、src属性書いてますか？

**Name_Not_Found** · 2019/01/20(日) 22:46:54.44

>>641
書かないのでは

**Name_Not_Found** · 2019/01/20(日) 22:52:08.22

読み込み中orダミーの画像指定しないとaltに書いた文字列が丸見え

**Name_Not_Found** · 2019/01/21(月) 09:16:41.31

見せるためのaltだろう
何も恥じることはない

**Name_Not_Found** · 2019/01/21(月) 10:52:19.30

初歩的な質問ですがサイトを作る場合に
一から手打ちorDreamweaverで作るのか
どっかからコードを丸々コピーしてきて中身を入れ替えるのか
どっちが一般的なのでしょうか？

**Name_Not_Found** · 2019/01/21(月) 10:55:53.07

>>645
個人で作るなら、今はwordpress等のCMSでテンプレート入れてサクサク作って終わり
コードなんて打たない

もうちょっとこだわりがあるならテンプレート自体を作る
業者の場合は色々分かれる

**Name_Not_Found** · 2019/01/21(月) 11:01:03.26

>>646
えー
つまり自分ではデザインしない人の方が多いということ？
どっかでそれ数えてるもの？

**Name_Not_Found** · 2019/01/21(月) 11:07:49.89

>>646
派遣コーダーの仕事としてはどうでしょうか？
会社によって違うかもしれませんが、コーダーの仕事と言えばデザイナーがデザインしたものをスライスで切ってDivに当てはめていくみたいのが未だに一般的でしょうか？
テンプレートとは枠組みの事ですか？
つまらない質問でスミマセン。

**Name_Not_Found** · 2019/01/21(月) 11:20:30.15

>>647
サイトの割合は以前どこかで見た
もう一回探してみたけど、ソース出てこなかった。許して
・テンプレートそのまま使ってる人が多い
・テンプレートを使ったサイトを量産している人が多い
のどちらかだろうなぁ、と考えていたのは覚えている

製作者に占める割合は分からない
これは個人を含めると計測は出来ないだろう

>>648
派遣先による
wordpressのテンプレートに画像ポンポン当てはめてハイ終わり、10万円、ってとこもあれば
一からデザイン細かく作って50～100万円ってとこもある

俺がよくやるのは
・全体デザインをデザイナーと考える。テキストや画像の位置をざっくり
・使う画像はデザイナーが決める。よっぽど変だったら「それ何か変じゃね？」と言って作り直してもらう
・後はパーッとコーディングして終わり
ちなみにdivはもう殆ど使わないよ。section、dl、ulが多い

**Name_Not_Found** · 2019/01/21(月) 11:23:36.11

>>649
ありがとうございます
わかりやすいです
それとやっぱりwordpressも覚えといた方が良さそうですね
しかしdivがもう古いとはショック…

**Name_Not_Found** · 2019/01/21(月) 11:34:13.69

>>650
いやいや
新しいとか古いとかいう問題じゃねえよ
個人の意見に振り回されちゃいかんw

**Name_Not_Found** · 2019/01/21(月) 12:27:16.88

>>650
> divがもう古い

Google「えっ？」
Amazon「えっ？」
Apple「えっ？」

**Name_Not_Found** · 2019/01/21(月) 12:46:02.47

>>650
divが古いとは言ってないんだが・・・

「セマンティック」とか言われてるんだけど、
単になんでもかんでもdivで囲むんじゃなく、
適切な要素で記述し、検索エンジンに内容を伝えやすくしましょうって流れになっている

<ul>はさすがに使っていると思うけど、他にもヘッダーは<header>、グローバルメニューは<nav>などが推奨される

これにより、ちゃんとセマンティックを意識してコーディングしているサイトは検索結果に表示されやすくなる・・・
というはずだったんだけど、ぶっちゃけdivで全部書いても全然変わらんわ。ﾊﾊﾊ

まぁ人間が見た時に見やすい、チームの開発が楽になるという利点はあるので、使いこなせないとマズイ

>>652
googleは何で書いても関係ないからな
全部divと知った時は驚いたけど
amazonとappleはコンテンツが最強すぎる