HTML/CSS のどんな質問に必ず優しく答えるスレ 31
■ このスレッドは過去ログ倉庫に格納されています
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
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 >>110
そりゃブラウザだろｗ
HTMLやCSSをどのソフトで作成して保存してるのかっていう話でしょ >>93
頼むから一度、web制作会社に身を投じる事を経験してから独立してくれ。
業界経験すらない素人が起業とかマジやめてくれ。
店舗だったらどう？材料、機材、店舗、集客、客層、ライバル、立地、経理、とか経営の事わからないでお店だす気する？
市場の評価（クオリティ）と価格を破壊するだけだからマジやめて。 素人でもいきなり起業できちゃう業界って思われてる時点でこの業界もダメだなこりゃｗ
単価が上らん訳だ・・ >>111
んー FC2ホームページのソース表示で編集ってやつだけどあれ何っていうエディタなのかな
タグに色つくからすごい見やすいです 日本のWEBは終わってるから今から勉強するなら英語とセットでしっかり勉強してアメリカかカナダ行きなさい。
20年遅れてるんだよ。君が生まれる3年前のアメリカのWEBに、日本はやっと追いついたんだ >>104のスタイルで
<ul class="button">
<li><a href="#">次へ</a></li>
<li><a href="#">前へ</a></li>
<li><a href="#">上へ</a></li>
</ul>
ってやるだけでなんで３つともボタンになるの？
ＵＬ全体が１個のボタンになりそうなのに すごいclass名だ
せめてbuttonsとかにしてほしい >>118
自分の書き方は基本的に単数形だな
<ul class="button"><li><a>
でも
<li class="button"><a>
でも
<p class="button"><a>
でもいける >>118
複数形とか命名センスなさすぎ
せめてbuttonContainerとかbuttonListとかでしょ >>118
わざわざ文字数増やしてどうすんのbtnでしょ母音無しが基本 CSSだけで縦横のサイズが異なる画像を等間隔で並べる方法ってあります？
float:leftを使えば自動的に横に並び、
入りきらない分は次の行に行きますが、
画像に正方形じゃないのがあると上下の位置がガタガタになって上手く並びません。
また、なぜか一行だけ右端に一個だけ配置されて次の行に行く場合がありました。 .justifyLayout > * {
display : inline-block;
}
.justifyLayout img {
vertical-align: middle;
}
<ul class="justifyLayout">
<li><img src="http://placehold.jp/100x200.jpg";></li>
<li><img src="http://placehold.jp/200x200.jpg";></li>
<li><img src="http://placehold.jp/200x100.jpg";></li>
<li><img src="http://placehold.jp/200x100.jpg";></li>
<li><img src="http://placehold.jp/200x200.jpg";></li>
<li><img src="http://placehold.jp/100x200.jpg";></li>
</ul> ごめんこれもいる
ul.justifyLayout {
list-style-type: none;
} 縦横比がばらばらなだけでサイズ近いのがそろってるならそれでいいけど
サイズ自体もばらばらなら正方形の固定サイズのboxを並べて
max-width min-width指定するほうがきれいかもね >>119-121
すまん普段しないから変なことしてしまった
普段ならliにbuttonかulにnavをラップしてそのnavにclass付けるとこだわ >>123-125
ありがとうございます。
右に一個だけ配置される行が出来る現象は無くなりました。
＞サイズ自体もばらばらなら
幅は%で固定にしていますが
そもそもこの並べ方だと、他よりかなり縦に長い画像があるとその行だけ縦に長くなりますね
max-heightとoverflow:hiddenを指定すると、縦の長さは短くなりますが、画像は上の方だけが切られて表示されます
あまり縦に長い場合は画像を予め表示したい部分だけ切る加工をするか
画像に余白を付けるしか無いのかもしれません 仕様をはっきり定義すれば何とでもできるが先に定義しないと
今 width: きめうちで横幅固定してるんだろうけどそれだと縦長の画像は拡大される
width: を max-width: にかえて height:auto; と max-height: 指定すれば高さも上限で縮小することもできる
その場合もちろん縦長の画像の横幅はせまくなるのでそろわなくなるが 質問者じゃないけど width の 33% の正方形に自動縮小して表示ってできる？
pixやem使わずに縦に横幅の%指定と同じ長さにするってＣＳＳできるのかな 親要素からの指定はないんじゃないかな
vw使えば画面全体からの割合幅はとれるけど
メニューと２列になってたりbodyにmarginやpadding設定してあったりしたらうまくn等分にはならないだろうけど >>129
思いっきり質問で笑った
できる
css 比率 固定
とかでぐぐればなんぼでも答えが出てくるよ
ただ個人的にはあまり好きではないな >>129 はアスペクト比を固定して拡縮したいって意味だったのかな
だったらできるね
てっきりwidthの33%分の長さと同じ高さの正方形に収めたいって意味かと思ったわ いわゆる3分の1にしたいときって
calc(100% / 3)
33%
33.333%
とかのうちどれ使ってる?
古いieに対応しなくちゃだめーとかだと
33.333%
かな? HTMLやCSSのソースをタグをエスケープして
キーワードやタグにハイライトつけてHTMLに変換する方法ってないですか？ >>134
calc(100% / 3)
でいいんじゃね
古いのに対応させるなら、もうざっくりと33%でいいと思う >>135
ハイライト コード html
あたりで検索すれば割りと出て来る jsライブラリみたいなのはあるけどどれも大変そう
左の入力欄にはったら右のテキストエリアのハイライト付のHTMLソースでてくるみたいなお手軽サイトないんですね…
あきらめます＞＜ 世の中いろんな暇人がいるとは言えそんな特殊な要望にピンポイントでこたえてるツールなんてあるにしても探すの大変そう…
自分だったらライブラリ使ってnodeスクリプト書くけどめんどくさいならhttps://codepen.io/penとかにコード貼るとハイライトされるからそれコピーしてWordとかのhtml保存対応のリッチテキストエディタに張り付けてhtmlで保存すれば？ まぁこの人は質問して答えをそのまま使いたいだけの人だから適当にあしらえばいい >回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！ >>134
sassのpercentage使うのが主流じゃない？
33.33333%にコンパイルされる 定期的に現れるsass使えば基地はなんなの？
そもそも今回なんて質問の意味すら理解できてないし >>145
ああそれいつも思う
sassは別スレにした方がいい
話変わってくるからな ごく普通の二つのselectをdivの中に入れて横並びにしました。
＜select＞
＜option＞111＜/option＞
＜option＞222＜/option＞
＜/select＞
＜select＞
＜option＞１１１＜/option＞
＜option＞２２２＜/option＞
＜/select＞
optionの文字列は最初のやつは全部半角文字、二番目のやつは全角文字です。
そうすると何故か、
[111][２２２]のように水平に並ばずに、二番目のselectが数ピクセル上にずれて表示されます。
原因と対策を教えてください。 >>147
テキストの baseline が整列しているからじゃないか？
optionを vertical-align: top にすれば上端が整列するかもしれないが
コントロールなので効かないかも >>147
半角数字（英数）と全角数字（日本語）だからじゃない？ vertical-align: topで解決するね >>148>>149>>150
select {
vertical-align: top;
}
で解決しました。ありがとうございました。 jQueryスレできいたのですがこちらの方がいいと思って来ました
<tag data-hoge=値>でなく
HTML <tag hoge=値>
CSS [hoge] {}
は独自属性(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） >>152
翻訳版だけど。
＞独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、
＞ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
http://www.html5.jp/tag/attributes/data.html
好き勝手に付けたらバッティングする可能性が普通にあるから"data-foo"となっている 変なおじさんスレできいたのですがこちらの方がいいと思って来ました
HTML <unkochinchin></unkochinchin>
CSS unkochinchin {}
は独自要素(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） HTMLは決まった仕様があってそれに則って書かれる文書だから仕様にないタグや属性使うことは違反だぞ
「これが違反」というのではなく「これじゃないのが違反」て感じ
絶対ダメだ使うなというほど強制力はないので使いたければ使えばいい
ただブラウザによって表示や挙動がおかしくなる可能性はある 違反している要素や属性を使い過ぎるとバリデータがエラー出しまくって面倒になる問題もある
属性名は data-* で OK
要素名はハイフン入りの名前を利用すれば、カスタム要素として認識してくれる
（ごく少数の例外はあるが） >>152
HTMLの文法の原文
http://www.w3.org/html/
ここに書かれているタグ、タグ属性以外は文法違反
ただしあくまで標準規格としての文法であって
これとは別にブラウザ独自のタグなどをブラウザベンダーが定義していることもある
また、廃止されたものもあるので、昔は文法に適合していたが今は文法違反というものもある プログラムから入った人からしたら
始めてHTML触ってみて
ユーザー関数も変数も使えない言語なんてびっくりだろうな >>159
そんなことないぞ
HTMLはプログラム言語じゃなくてマークアップ言語だから別物って認識あるし、むしろ文書としてみたら「見出し」とか「リスト」とかになってるから仕様書や設計書書くのと同じ感覚 >>160
そうなのか。
確かにたまにプログラマーっぽい人がcssの質問とかしてるの見ると決して侮ってない感じはするな
自分だったら完全にバカにして適当にあしらっちゃいそうだわ
まあそんな考えだからプログラマーにはなれないわけだが CSSを思いのままに制御するのは本当に難しい。
プログラマーの心の平穏を乱しそうな要素がてんこ盛りで、気を抜いたら殺されてしまう。
そりゃみんな決死の覚悟で臨むに決まってる。 CSSって、
p{color:red;}みたいな簡単なのもあれば、
.classname #idname>input[type="checkbox"]:checked+a:hover{font-size:100px;border:dashed 10px blue;border-radius:30%;color:rgba(128,256,64,0.7);}
みたいなのもあるからな。(まあこんな書き方普通はしないけど) css、一般的な事なら一通りできるし困ってないけど
めちゃくちゃ簡単かと聞かれたらそうは思わないなあ
他人の書いた複雑なcssは触りたくない >>165
それはcssが複雑なんじゃなくて他人が書いたものが複雑なだけのような… >>153
そこ（やMDNなど）は見てます
>>158も、違反というのがわかりません
まあdata-を無くす理由はないのですがね
以前社内で話題になってたので
お2人共どうもでした
>>156
おちょくってるつもりでしょうが元文書いた本人（私）は全く腹も立たないほど
ひねりもないしつまらないし、こんなんで心満たせるのだなと逆に感心 >>159
全然違うから気にもしなかったぞ
jsは最初戸惑ったがな、スコープとか巻き上げとか
カリー化とか未だにようわからんｗ jsはundefined周りがぶっとんでることに注意すればまぁなんとか なんでそんなにundefinedがわからんのかがわからんけどな
nullはnullという値が入ってる
undefinedは未入力を意味するってだけだと思うんだけどな Htmlでボタンをキラキラっと光らせることは可能ですか？ >>174
CSSを使わないなら
キラキラっと光る画像をボタンに使うとか >>175
Cssは使います。カーソル合わせたときにボタンが光ると面白いなーと思っております。 >>176
CSS使うならできる
どんなキラキラなのかで難易度変わるけど >>176
:hoverとGIFアニメを使ったらどうだろ >>172-173
すまん、今は大分マシになったらしい
undefinedって昔は変数で、undefinedに代入できたりするびっくり仕様だったんだよ >>169
適合、違反の定義から始めないといけなさそうなんだけど
HTMLの基本ルールはXMLと同じだけど
< > の記号で囲まれた「タグ」を使う
< >開始タグ </ >終了タグをセットで使う
XMLと異なり、タグに使える単語（文字列）は列挙されたものに限る
一部のタグは終了タグを持たない
で、なぜ３つめのルールが決められてるかというと、文書の解析に使うため
XMLでは、通常は自分でXMLタグを定義し、自分でそれ専用の解析ツールを作るけど
HTMLはそうではない
HTMLの解析はブラウザという汎用ツールを使うため、そのブラウザの規格に合わせてタグを使わなきゃいけない
というわけです >>169
それはあなたに何をおちょくられているのか理解できる頭がないからです。
hogeという属性が違反であるソースを探しています
unkochinchinという要素が違反であるソースを探しています
同じこと。
仕様にいちいち〜は違反ですという形式で書いてあるわけないでしょうが。
hogeが違反ですと書いたらfugaはどうなんだの答えも書かないといけない。
果たして仕様書がそんなアホなつくりになってるのか、常識で考えようね。 functional cssってのが流行ってるらしいけど
それって何？ CSSでオリジナルのドロップダウンリストを作る時
▼マークは画像でやるしかないのでしょうか？
検索すると背景画像でやる例が多いようです CSSがいいならCSSでもできる
画像ならなにも考えなくて楽
Data URLスキームでもいい CSSだけでテキストを円形や扇型に表示することって出来ますか？ CSSの詳細度が高いと良くないらしいですけど
どうしてですか？
cssstats.com
で詳細度のグラフ？が見られますが
見方が良く分かりません ありがとうございます
CSSWARPというジェネレートサイトを見つけることができました そもそもCSSの詳細度って何ですか？
どんなCSSだと高くなる（または低くなる）んですか？ それCSSで一番に覚えなきゃいけないことだし、聞くより自分で調べてしっかり理解した方がいいと思う
詳細度の点数計算とかややこしいし
ここで中途半端に聞いたら勘違いしたままになるぞ
「とにかくセレクタをいっぱい書けば強い」とか「あとに書いた方が強い」とかいまだに言う人いるし fc2のサイトなのでNGワードにひっかかってURLを載せられないのですが
ドロップダウンメニューのCSSで
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
と、テーブルを挿入しているコードがあります
動作を確かめてみたところ、
これがないとドロップダウンメニューの上部に空白が出来てしまうようです
しかし動作原理が分かりません
何故tableを挿入すると空白がなくなるのでしょうか？ 画像がテーブルレイアウトされてる古いサイトのソース今のサイトにもってきたら
画像が巨大化してはみでるんだけどＨＴＭＬいじらずにＣＳＳだけでテーブルにおさめるのってどうしたらいい？
tdにwidth30%とかかいても小さくならないんだけど > 詳細度の点数計算とかややこしいし
なんかすっかりそういうのを意識しなくなったな。なんでだろ？
一つはIDは原則的として使わずクラスをメインとして使うようにしているからだろう
もう一つはsassを使って階層化してるから外で定義されたものを中で定義したもので
上書きすると自然に認識してるからだろう。ともかく何も意識せず特に悩むこともなくなったよ そういや誰が言い出したか知らんけど100点だから10点だか
適当な点数を定義して10点が11個あつまれば110点で100点に勝てる！
みたいな間違った計算の解説まだやってる人いるの？
あれ余計ややこしくしてるだけじゃんかよ
style属性が最優先なのは感覚的にわかるだろ？
これは属性に書くものでセレクタじゃないから例外
あとは ID > クラス（疑似含む）> 要素名（疑似含む）> 全称セレクタの
4つしかなくてそれぞれ優先順位も感覚的にわかると思うんだけど
なんであんな馬鹿げた計算とか言い出したんだろ
考え方を簡単に書くならば、
セレクタにIDが一つ以上あれば優先度3、クラスが一つ以上あれば優先度2、
要素名が一つ以上あれば優先度1、全称セレクタは優先度0
（IDとセレクタの両方があっても合計なんてしません。最大の優先度になります）
優先度が同じなら、最大の優先度の数が多いものが勝つ
それも同じなら後に書いたもので上書きされる。
たったこれだけのルールなんだけどな。計算なんかいりませんって 「なんだよ、style属性に直書きされてんじゃん！効かないはずだよ… はい、!importantと。これでよし。」 >>199
今でもそれ生き残ってるのか、すごいな…
あれはね
90年代終盤に早々にCSSに手を出していた人達のなかでまことしやかに語られてたのよ
たぶん当時、海外のサイトかなんかで書かれてたのがそのまま広まっちゃったんだと思う
まだグーグルもなかったし、なによりまともにCSSをレンダリング出来るブラウザもなく
多段セレクタなんて書くような時代じゃなかったから、しゃーなしだと思う
この頃、すみけんたろうって人が書いたスタイルシートウェブデザインって本が名著で
これ読んだ人は正しく理解してたとは思うけど、なかなか知ってる人は少なかった
その後数年、テーブルレイアウト全盛が続くんだけど
Netscape6やMacIE5の登場、MTの流行、JIS X 8341-3の件などで
CSSを書く人が急に増えてウェブ制作板でもCSSのスレが熱くなったのが02〜03年くらい
その頃はまだ、100、10、1の足し算するのは間違ってるよって言ってもキチガイ扱いだったな
Dreamweaverメーリングリストで有名だったおばさんにすっごい噛みつかれた思い出 社内のＨＰ移行でテーブルレイアウトで画像並べてる古いページをもってきたら
画像サイズがそろわなくなったんだけどどうしたらいい？
ＨＴＭＬかわってないのにＣＳＳがかわったせいなんだろうけど
td { width: 30% } とかかいても画像にあわせた幅まで拡大される… >>202
セルの大きさは中身優先なんで
<img width="100%">としてみたらどうだろうか 画像を
・縦横比を維持
・全体がブラウザウインドウに収まるうに
・可能な限り大きく
表示するにはどうCSS指定したらいい？
imgタグとimgタグの外側のタグでの指定方法を教えて >>206
img｛width:100%;
height:auto;｝ >>208
こっちはエスパーじゃないんだからさ…
なんの下が何に対してどうはみ出るか書けよ >>206
max-width: 100%;
max-height: 100%;
俺がよくやるのは
<div class="box"><img></div>
.box{
position: relative;
width: 幅;
height: 0;
padding: 高 0 0 0;
}
img{
position: absolute;
margin: auto;
left: -1000px; right: -1000px; top: -1000px; bottom: -1000px;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
こんな感じ ■ このスレッドは過去ログ倉庫に格納されています
