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 背景を白にしてるんだけど、 他のサイトに比べて青白く見えるんだけど、原因がわからない
文字は黒と灰色で構成されてるんだけど、全対的に見るとすごい青白く見える
原因わかる人教えてほしい 質問ですが、フォントの種類で画面の明るさって変わります？
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個目って設定できるのでしょうか？ h2タグの見出しタイトルが連続することがあるんですが、設定できるのでしょうか？ >>115
n個目 css
でぐぐれ
ただ、liの最初と最後以外で指定するのはやめておいたほうがいい
大抵間に何か入る こういう時にどうしていますか？
何度も使うデザインはCSSにかいてクラス等で反映させるのが基本ですが、
ページのデザインが大体出来上がってきた頃に、
部分的に「ここには共通のデザインをクラスで反映させているけど、margin-bottomを少し増したいな」とか
「ここだけletter-spacingをあけて強調したいな」と思った時は該当箇所のタグのstyleに直接書いちゃいますか？
それとも新規にクラスを作ったりとCSSを編集しますか？ >>118
＞該当箇所のタグのstyleに直接
インラインのstyleはもう絶対にやめとけ
保守の時に死ぬ
素直にクラス作るといい >>119
ほんとこれ
１箇所だけ…と思っても何ヵ所か増えて最後にレスポンシブで死ぬ で、結局クラス作って書き直すハメになるんだよな
で、これを聞いて尚、>>118はインラインで書くんだよな
歴史は繰り返される DDDでindexに流し込むファイルが変わるならそのファイルに<style scoped>で追加する >>114
あざっす。
そのタグを挿入する前にもう一度スマホから閲覧したら、なぜか文字化けしてなかったんだけど、iOSをバージョンアップしたからですか？ http-equiv="refresh" タグで質問。
リダイレクト先がPC閲覧の場合は「○○.com」に飛ばしたいのですが、
リダイレクト先がスマホ閲覧の場合は「△△.com」に飛ばしたいです。
どうすれば、デバイスごとに複数のページに分別して飛ばすことが出来ますか？ 構造化データを導入するメリットは、検索結果がリッチになりやすいということでしょうか？ 質問です。
質問内容もHTMLに書いてあります。
https://jsfiddle.net/0bLros06/#&;togetherjs=Uzwkb9RsK2
黒いバーをウィンドウ幅に対して中央にもってきたいです。
よろしくお願いします。 >>133
ほい
https://jsfiddle.net/0bLros06/1/
左右だけじゃなく上下もできるよ
もし中央に寄せたい内容物がボックスより大きくなる可能性があるときは
数値を0じゃなくじゅうぶん大きい負の値にして
なんでそうなるか知りたかったら
CSSの仕様書のmargin: autoとposition: absoluteのところに書いてあるよ >>134
早い！早いよ！
ありがとうございます。
margin: autoとposition: absolute調べてみます。 Firefoxです
下記のradikoのHPを開いて、続いてYahooのHPを開きます
その後、左上にある
前のページに戻ります、という左向きの矢印ボタンを押すと、radikoのページに戻るのですが、
すると、右矢印の次のページへ進みますというボタンが消えてしまうのです
htmlでそんな仕掛けをしてるのかなと思って、radikoのページを名前を付けて保存でウェブページ完全というので保存し、
保存したhtmファイルを開いて、同様にYahooのHPに行ってから左矢印ボタンでradikoページに戻ると
今度は右矢印ボタンは消えずに残っています
これはどういうことなのでしょうか。なぜ右ボタンが消えるのでしょうか
右ボタンが消える仕組みを教えてください
http://radiko.jp/#!/live/RN1 >>136
window.historyでも見てみれば？ javascriptで、window.historyオブジェクトとかDOMがあるのはわかりました。
が、何かそういうスクリプトで仕掛けをしてるのなら、
名前を付けて保存で完全保存したファイルを開くと、ボタンが消える現象が起きないのが不思議です おっしゃってることが良くわからなかったので、履歴で今日というところを全部削除して
まず、radikoを開きました。 次にYahooへ行って、さらに深く入って
履歴に次々に表示されることを確認して、戻るボタンでradikoに戻ったら、今度は、進むボタンが消えません
なんなんだ？
一旦Firefoxを完全に終了させてFirefoxを起動しなおして、今度は、radikoを表示、次にYahooHPにだけ行って
すぐにRadikoに戻っても、もう進むボタンは消えなくなりました
わけわからん。 radikoの時間帯によって違うのかなw .form-line.form-line-column {
padding-left: 18px !important;
}
に関して}の移置はあくまでその場所でないとだめか。
これは左端のマージンを18pxあけているということか
また !important;とは
スマソこれがCSS始めてで {}の書き方は以下のような感じ
!importantは他のスタイルシートの設定よりも優先するっていう意味やで
.form-line.form-line-column {
padding-left: 18px !important;
}
.form-line.form-line-column {
padding-left: 300px;
}
例えば同じ名前のスタイルが2つあると普通は後ろのスタイルが優先されるんだけど
!important;をつけると、つけられた方が優先される
つまりこの場合、上が優先される
padding-leftは箱の中身の左側の余白を設定する
padding-left: 18px
| →18px|
padding-left: 3px
| →3px|
margin-leftは箱の外側の左側の余白を設定する
margin-left: 18px
→18px|箱| >>140
進む、戻るはブラウザの履歴をたどっているのに他ならんけど
その履歴がwindow.historyに入っているのよ hoverについて質問です。
メニュー一覧になるdiv#subの中にa hrefタグを数個貼り、#info、#mainのようなidをそれぞれに付けました。
その後cssで#sub ul li a#info｛background-image: url(〜〜)｝で画像を挿入して表示されました。
ここからが行き詰まってしまったのですが、hoverはどう書けば良いのでしょうか？
#infoの画像にマウスを乗せると別の画像に変わるようにしたいのです。
#sub ul li #info a:｛background-image: url(〜〜)｝など書いてみましたが無理でした。
｛｝の前はなんと書けば良いですか？
わかる方がおられましたらご教授して頂けると嬉しいです。 >>145
早速レスを頂きありがとうございます。
試してみましたが動きませんでした… #sub ul li a#info｛background-image: url(〜〜)｝
の記述で画像だしてたのに
#sub ul li #info a:｛background-image: url(〜〜)｝
セレクタの順序変えたら動くわけ無いでしょ $img_path:'/img';
#sub ul li a#info {
&:hover {
background-image: url(#{$img_path}/bg.png) no-repeat;
}
}
上記を、SassMeister に入力してみ
https://www.sassmeister.com/
結果は以下となる
#sub ul li a#info:hover {
background-image: url(/img/bg.png) no-repeat;
} 質問です。
<html><head></head>
<body>
<a href="file:///c:/windows/system32/notepad.exe">メモ張</a>
</body></html>
を書いてメモ張が開けますが、警告(?)が出て[実行]を押さないと開けないんです。どうすれば出ないようにできますか? ビジネスフォーマットの件です。
練習でビジネスフォーム作成をしています。Firefoxで右クリックするとViewPageSource
というのがでてきます。これらのコードの段階からどんなフォーマットになっているかを
みるにはどのようにすればいいでしょうか >>151
無理
ブラウザからローカルファイルは触らないほうが良い。はっきり言ってすげーめんどくさいし、仕様変更で使えなくなる可能性が大
googleスプレッドシートなどを使ったほうが良い
>>152
言ってる意味がよくわからないけど、F12キーの開発ツールの方が見やすいと思う >>151
その「メモ帳」の notepad.exe が virus.exe だったら、とても危ないので警告は絶対必要になる。
それでも、警告と似たような見かけのダイアログで繰り返しアンケートに答えさせ、間にホンモノの実行ダイアログを挟んでおいて、うっかり OK をクリックさせようと騙すページもあり得るので、そんなダイアログで .exe を開けること自体がすでに望ましくない。 書き方的に自分用のウェブアプリとかじゃないの
みんな自分と同じ環境だと思ってる人が多いな >>153だけどそれはわかった上での回答だよ
そういうのは、昔やった ローカルファイルは、Node.js, Electron とかを使う。
つまり、ブラウザではなく、PC 内にサーバーを立てる
まあ、Firefox では、直接ローカルファイルにアクセスできるらしいが それもうクラウドサービスにすりゃいいんじゃないっすかね… >>150
hoverがわかんない奴にsassとかw
どっかいけよ無能 質問ですが、スマホページでタイトル見出しの上に細長いバナー広告がある場合ってだいたいどれくらいの余白が必要なのでしょうか？
見出しのフォントサイズは18pxです。
今、30px取ってるですがどうも広く取りすぎてるので縮めたいのですがどれくらいが理想的なのでしょうか？
15pxか、20pxくらい必要でしょうか？ >>160
知らん多かろうと少なかろうto,gooleにあわせておけば違和感は少ないｘ Sassのextendってよく使いますか？
HTMLにマルチクラスでいいような気がするんですが 「button要素をaタグで囲むのは駄目」ときいたのですが、
button要素にリンクをはる場合どう記述するんが適切ですか？ >>162
それで済んでるのならそれでいいんじゃない？
1バイトでも削りたい時とかに
mixinとextendはよく考えて使い分けたい >>162
設計や仕様によるだろうね
完全に100%仕様が決まっているなら使ってもいいけど、
正直webって仕様が変わりまくるからとてもじゃないけど使えない
>>163
buttonをaで囲むのは最悪かな。どのブラウザでどう動くのか全くわからない。絶対にaで囲んではいけない
buttonのｃｌｉｃｋイベントにイベントをバインドするだけでいい >>162
個人的にはなんでマルチクラスタやBootstrapのような
HTMLをごちゃごちゃと肥大化させるようなものが流行ってるのか理解できない
HTMLにはシンプルにクラスを1つ書いておいて（もしくは何も書かない）
CSSの方で頑張ればいいじゃないか
そうすれば見た目を変える時、本当にCSSだけの修正で済む
> 1バイトでも削りたい時とかに
1バイトでも削りたいとは思わないな。単にメンテナンス性のため
HTMLをごちゃごちゃさせたくない メンテ性のためにマルチクラスにしてるんだけどね
OOCSSの考え方になるのかな？ ほかの設計方法も勉強してみますー >>166
ごちゃごちゃ扠せたくないのはわかるが、限度がある
headerにしても、h2にしても、設計・仕様によって容易に見た目が変わる。
なんだったらhtml自体が5.2になればどうなるかわからない
はっきり言おう、君は未熟だ
html5でhタグを全部h1にした俺が断言する classは大体bodyにつけると問題がなくなる
body.className ul
ダメ化 いや、だから容易に見た目が変わるから
HTMLにごちゃごちゃ書きたくないんだよ。
HTMLにごちゃごちゃ書いてあったら
メンテナンスの時大変だろ
> html5でhタグを全部h1にした俺が断言する
それは単におまえがバカなだけ >>170
htmlにある程度classを書いて置かないとそれこそ大変なんだよ
＞> html5でhタグを全部h1にした俺が断言する
＞それは単におまえがバカなだけ
しらねーよ > htmlにある程度classを書いて置かないとそれこそ大変なんだよ
だから1つで十分だって言ってるんだが >>167
> メンテ性のためにマルチクラスにしてるんだけどね
sass（scss）を使わない場合は、それが限界だってだけ >>166
CSSが使い物になるか？って頃から
CSSだけでデザイン変更って甘言をよく見るけど
実際そんなことほとんどなくね？
ずっと企業サイトとウェブアプリケーションしか作ってないから
小規模サイトではそんなことないのかもしれんけど >>163
button要素がいらない
aだけでいい Bootstrapとか初めて聞いた
プログラミングの世界って「僕の考えた最強のやり方」が沢山あって面白いね
お前には最強かもしれないけど俺には最低だーなんてのも沢山ありそうだけどw >>175
アホか死ねボケ
>>176
時代遅れすぎ
とりあえずbootstrap入れておけば大抵「それっぽく」なりクレームも少なくなる、というのは常識だろう
その上で取捨選択はしている >>177
アホはお前だろ
buttonにリンク付けるなボケ
リンクはaだろ >>178
煽り合い仕様と思って前提が決まっていないことに気づいた
>>163の場合、buttonのclickもfalse、submitもない、aもreturn falseで何か別の事をやろうとしている可能性が30%ぐらいある >>176
uikitって聞いたけど、違うんかな？ >>163だけど、人の質問に勝手に怒って勝手に煽っている>177等は何なの？
>>165はJSですよね。
buttonクリックで新しいタブでリンクを開くようにしたいのですけど、何と書けばいいですか？ button>aはコーダーなりたての頃に書いてFirefoxで動かないことに気づいてやめたな >>181
いや、だからaだけにすればいいだけだよ
なんでbuttonにこだわるの？ >>179
return falseするなら、それはリンクではないのでa要素でマークアップするのは不適切 >>181
a要素にterget属性を付けるだけで良い
button要素は不要 >>183
>>185
CSSフレームワーク使ってて、button要素に丁度いいデザインがありまして。
だからbutton使いたいんですよね。 >>186
ならそのボタンのCSSをaに持ってくる
divやpぐらいなら別にどっちでもいいと思うけど、
buttonとaは機能が強すぎる
ここで変なhtml書くとまともに動かなくなるぞ 仕様的に正しい>>175に対して>>177の突っ込みがわからない
ダウンロードさせるaを、他のbutton（これは普通にボタンの機能）と並べる手前
appearance: buttonで見た目buttonにしたのだがNGだろうか？ >>175
> button要素がいらない
> aだけでいい
buttonはユーザが押すものaはどこかへのリンク
押すものと、つながりを示すもの意味は全く違う。
ボタンは押さなければ意味がないが
リンクは押さなくても意味がある
その典型的な例がクローラー
クローラーはリンクというドキュメントのつながりをたどる >>189
だがdownloadの場合は操作上リンクというよりbuttonに近いよね
他の機能と並べる場合は更に >>190
そりゃアンカしてるからそうだろうな
どうした？ >>182
動かないのが正解なんだけどね
button要素のコンテンツモデルははフレージングなんだけど
インタラクティブコンテンツを内包することは出来ないのよ
だからa要素を中に入れるのはNG
でもそれ以外ならOKで、a要素でやるのと同じように、img要素とかを入れてもいい
やる人少ないけど >>193
細かくありがとうーもちろん仕様は理解した上で使ってないよ
p>aとbutton>spanでスタイル揃えたいとき(input使いたくないとき)なんかは便利なのかな >>194
input要素との違いは子要素持てるかどうかなんだろうね
MDNだとクリックやタップした時のfocusの違いにも言及してるね >>186
デザインだけの話ならaでもbuttonでも同じだよ
例えばbootstrapでclassにbtn付ければaもbuttonもsubmitも同じボタンデザインになる
なのでデザインのためにおかしなタグを使うのはやめた方がいい
リンクはって遷移させるんならaにすべき >>191
ダウンロードなんて機能はないよ。
リンクした結果それがファイルに相当するものなら
ブラウザが勝手にダウンロードするだけ。
物によってはダウンロードせずにブラウザ内に表示するだろ？
特定のリソースに結びつかないものはボタン
リソースに結びついているものはリンク >>198
うん、だからそのhtmlをブラウザが判別するんだよ
ダウンロードって機能は本質的にないんだよ
そもそも論を言えば全部ダウンロードだし ■ このスレッドは過去ログ倉庫に格納されています
