HTML/CSS の質問に優しく答えるスレ 30
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構HTML / CSS 関係の事なら何でもOK
質問するときはIDを出すためにメール欄を age にすることをおすすめします
回答してくれる方は優しい人のみ！質問者に対して暴言を吐く人は このスレを見るな！！終わった話を蒸し返すやつは このスレにくるな！！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 29
http://mevius.2ch.net/test/read.cgi/hp/1503136885/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494233240/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html display:flexした時に、親要素のulが内包したli要素の高さを認識しないんだが
どうしたいい？ >>17
それinlineになってるか、ulにheight設定されてるんじゃないか？
普通に認識するよ >>18
その通りでした。さすがです。
失礼しました<(_ _)> word-wrap: break-word;
word-break: break-all;
って同時に使えるの？ word-break: normal;
word-wrap: break-word; 両方指定するとword- break: break-allの方が優先されん？ >>23
そのページでも
なお、body{ word-break: break-all; word-wrap: break-word; overflow-wrap: break-word;}のように両方のプロパティを記述した場合は、word-break: break-all;だけを指定した場合と同じ動作となります。
と書いてるな 質問です
flexを使ってaタグの2行×2列のナビボタンを作りたいです。
条件としては、左右の高さを統一し、テキストを上下中央配置にする事を保つ事です。
見た目はできているのですが、リンク範囲がおかしいです。
https://jsfiddle.net/g33n5wh5/
↑これのリンク範囲をボタン全体にするにはどうしたらよいでしょうか？ すいません条件追加です。
pxなどの固定幅はナシで可変の方法でお願いします。 >>26
と言う割にはすでに固定幅使われてるような…
中のa要素もflexに >>27,>>29
うわぁありがとうございます.:*゜.:。:.(´∀｀).:*゜:。:. https://adminlte.io/
管理画面用のフレームワークなら、これが最強なん？
adminLTって有名なの？ <ol>
<li>aaa
<li>bbb
<li>ccc
</ol>
の番号部分だけの色や大きさを変えるにはどうすればいいんですか？ >>32
そのスタイルを書けば良いとしか…
パソコン全体で言えば
「マウスのボタンを押すことをクリックと言います」くらいの基本なのでここで聞くよりも
CSS 入門
でググったほうがわかりやすいと思うよ >>33
いや、そんなに自明でもないんじゃ？
>>32
番号部分は疑似要素であり、親（ li ）のスタイルを継承するので
番号部分だけスタイルを変えるためには、それをセレクトする疑似要素を使うことになる
その疑似要素はたしか ::marker だが、サポートしているブラウザはまだないと思う あーすみません
> の番号部分だけ
の「番号」を見逃してた
ほんとすみません
罰としてちょっと田んぼの様子見てきます… >>32, 34
代替案として
<ol>
<li><span></span>aaa
<li><span></span>bbb
<li><span></span>ccc
</ol>
のようにして、
counter で <li> の番号は消すかわりに <span> に番号をふっておき
span に番号用のスタイルをあてがう方法が考えられる スマホ用のページで文字サイズ、18pxってデカすぎかな？
グーグル推奨してるのが、16pxだけど
最近、女性用のサイトとか文字小さいサイト多いから、文字サイズ大きいサイトにしようと思うんだけど、デカすぎると見にくくなんかな？ 1画面内に収まる情報量が少なくて大丈夫な情報サイトとか読み物系サイトなら別にいいんじゃない
ECだと無理 wordpressで既存のテーマを編集したいんですが、何から勉強すればいいんでしょうか
CSSが理解出来れば楽勝ですか？ 質問です。
flexを使ってtableのセルの縦のマージと同じような見た目（実際は結合してない）は可能でしょうか？
https://jsfiddle.net/tfr9q05x/
上記の2のli高さを1＋3の高さにしたいんです 画像表示で詰まっています
以下の条件を満たしたいのですが…
前提
・レスポンシブでブラウザの大きさによって親要素widthが変わる
・画像は様々な比率のものがある
実装したい画像表示
・可能な限り親のwidthにあわせて画像を展開表示したい（縦横のアスペクト比は保つ）
・ただし画像の縦表示が350px以上になったら展開をストップしたい
・ストップしたら親要素のcenterに表示したい
画像に「width100％ max-height:350px」とするとアスペクト比が保たれず（縦350で横いっぱいになってしまう）
「width:auto max-height:350px」とすると画像本来の大きさ以上に広がらない
他にも色々設定したのですがうまくいかず…
どうかご教授お願いします >>48
object-fit プロパティで半分は解決するだろう
ところで展開とはなんぞや？ >>49-50
ありがとうございます。試してみます
展開というのは本来の画像の大きさより大きく表示するという意味合いで使ってました object-fitで解決しました！こんな便利なものがあったんですね
ありがとうございました IE対応してましたっけか >>object-fit >>45
メニューのリストなのにＨＴＭＬ側にリストタグを使ってはならないのは何故ですか？
>>47
こんなのがあるとは知りませんでしたありがとうございます。
flexでは無理という事ですね？ マテリアルデザインって、結局、ボックスシャドウを使いこなせないとできないんだな >>55
リストとなるものなら<ul>要素で間違いはないと思うよ
gridに関してはIEが正式に対応してないから個別に対応する必要があるみたいね
flexじゃ作れなかったわ 少し前からネットで見るようになってきた、
ユーザー名の頭文字を大きくしてバッジのようにしたアイコンの名前は何ですか？ gmailの右上に出るアレみたいなやつか？
名前なんかあるんかな たまに見かけるのだが、特定の機能の名前を質問する人って何が目的で知りたいんだ？
その機能を実装するライブラリをぐぐるためか？ UIの名前が分からないと
そのUIを追求できないですよね？
まず名前を確認するというのは基本だと思います >>61
> そのUIを追求できないですよね？
そんなことはないと思うけど。
要件さえ分かっていれば機能を実装する事が出来る。
名前なんかより「要件」や「アルゴリズム」の方が重要だと思うな。
例えば、Ajaxという言葉を知らなくても同様の機能を実装できるよね。 専門学校にもいるなあ
何にでも呼び名があると思ってる子 道端に落ちてる変わった形の石に対して
「あの石の名前なんだと思う」っていう
子供の頃の会話を思い出した
名前は川瀬だった 名前といえば、マウスを乗せると何かが起こる、のことを
「オンマウス」と呼ぶ人が一定数いる
もちろん意味はわかるから声には出さんけど
心の中では「オンマウス何だよ！」と思ってしまう キュレーションサイト最近作ってるけど、灰色文字、灰色背景こんなにいっぱい使うとは、思わなんだわw
なんで、どこもかしこも灰色文字、灰色背景ばっか使うんだろう？
まるで、win95、98時代のUIに逆戻りした気分だわw >>70
つ onmouseover属性、onmouseout属性 >>72
モノトーンの汎用性と便利さ。階調つける為とコントラスト落とす為にグレーになる
仮に特定の色相に同系色のフォントなんて使ったらそのサイトでしか使えないから。
キーカラーと写真を際立たせるのは無彩色。 onmouse〜属性のonは「マウスで」であって、マウスが上に乗っていることを表しているわけではないんだよな
そういうのはmouseover >>32
亀だが。昔同じことやってこれで濁してた。
<ol>
<li><span>あああ</span></li>
<li><span>いいい</span></li>
</ol>
ol {
color:
font-size:
}
ol span {
color:
font-size:
} 昔の不便な頃からやっている人は
考えて創意工夫する習慣が付いてるだろうな。 端末ごとに文字サイズ合わせようと思ったら、メディアクエリでしかできないんかな？
幅320サイズ、375サイズ、414サイズに合わせるのが面倒い https://ja.wordpress.org/themes/fara/
というテーマを見て思いついたんですが、再背面の背景に薄くスライダーを表示させるのって変でしょうか？ 背景画像がスライドショーするサイトなら昔からよくあるよ >>83
ありがとうございます！
ちょっと試してみます cssでclearっていうプロパティあるじゃん
何がクリアなの？ 調べればわかることは調べた方がいいよ
それが出来ないなら向いてないし辞めた方がいい >>89
日本語にも存在するぞ。
>まっさらな状態に初期化すること。データクリアなど。
ｃｓｓの場合floatをクリア（解除）するって事。 BSスカパー!やWOWOWなどで録画したものをパソコンに入れたのですが、容量が6GB以上ありDVDに焼こうと思ったのですが、焼けません。どうすればDVDに焼くことができますか？
時間は２時間以内の
物なんですが、容量がオーバーしているためDVDRに焼けません。圧縮？すればいいんでしょうか？
あまり詳しくないため簡単にできる方法やサイトとかあれば教えて下さい。よろしくお願いいたします。 画像がブラウザの幅を超えた時の為に、max-width:100%と設定してるのですが
これだと縦に引き延ばされた画像になってしまいます
比率を保ってブラウザの幅へ縮小するにはどうしたらいいですか？ その条件だけならheight:autoでいいんじゃね？ >>96-98
どっちのやり方でもできました、ありがとうございました 背景を白にしてるんだけど、 他のサイトに比べて青白く見えるんだけど、原因がわからない
文字は黒と灰色で構成されてるんだけど、全対的に見るとすごい青白く見える
原因わかる人教えてほしい 質問ですが、フォントの種類で画面の明るさって変わります？
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
今これでやってるんですが、白背景でフォントカラーが#444でiPhone6で見ると画面が青白くなります。
ブログ系では#444がベストって書いてあったので入れたんだけど、長文だと画面が暗く感じます。
検証で、グーグルのRobotoを振ったらPC上では明るく感じたんだすけどフォントの種類で端末の見栄えが変わったりするのでしょうか？ そりゃ変わるよ。画面太い文字や文字間のスペースが小さいなど
文字が白だとして画面における白の部分が多ければ多いほど明るくなる。 見やすい行間ってありますでしょうか？ 16ｐｘで読みやすいように1.7emにしましたけど、これって広すぎますでしょうか？
行間の平均がわからないですがだいたいどれくらいなのでしょうか？
line-height、サイトによってばらばらで書き方も異なるので迷いまくりです。
16pxでline-heightってどれくらいなのでしょうか？ 自分のサイト、
パソコンで閲覧すると文字化けしないけど、
スマホで閲覧すると文字化けする。
タグのどこをいじればいいですか。 >>110
＞見やすい行間ってありますでしょうか？
ない
強いて言えば他のサイトと同じ形にする
bootstrapってフレームワークに従えばいい
これを最初に入れておき、グリッドシステムを使えば行間やらpaddingがそれっぽくなる >>110
新聞みたいにぎっちり詰まってるのか
ブログのようにスペースがゆったりしてるのか
などで違ってくるから上の人が書いてるように他を参考に
蛇足かもしれんがpx指定だとユーザが変えられないので特別な理由がない限りem指定などがいい >>111
先ずその前に
HTMLのhead
<meta charset="utf-8">
CSS
@charset "utf-8";
などと書いて、かつそのエンコードで保存してる？ 2個目のh2タグのデザインを変えたいんですけど、2個目って設定できるのでしょうか？ ■ このスレッドは過去ログ倉庫に格納されています
