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 もう生のPHPなんて扱うことないんじゃないか
フレームワーク覚えていかに使いこなすかのほうがよほど有益で安全だと思う PHPってフロントエンドじゃWordPress触れる程度の実力で十分な気がする
バックエンドやるってんなら当たり前のように知識ないと無理だけど
知識あるに越したことないけどね。大体フォームなんかは会社でフォーマットがある気がする >>205
ボタンを置きたくて、かつ、子要素を取りたくない時 htmlのソース上はタグを改行やインデントで整列させたい
でもタグ間の空白類が邪魔、ってときどうすればいいですか
<body>
<div>
</div>
<div>
</div>
</body> わかりづらい上に適当じゃない例でした
<html><body><input><input><input></body></html>
と、それぞれの<input>の前に改行・タブが入ったときとを比べると
後者は<input>の間に隙間ができると思います、これです >>219
猛反発されるのを承知で書くが
<タグ>なかみ</タグ
> <タグ>なかみ</タグ> >>221
あと隙間っていうのはおかしいかも
半角スペース1個だよ
HTML内の連続する半角スペース、タブ文字、改行文字は
1個のスペースにするって、ティムたんが決めた >>225
これ目から鱗
cssでwhite-spaceがあるんだし、trimできたっていいじゃんな >>227
ちゃんと調べたわけじゃないけど
HTML内の英文を途中で改行したりさらにインデントしたりすることを考えて
こうなっているんだろうなと
んでこのスペースをなんとかする方法は
スタックオーバーフロウとかでもよく見たから
英語圏でもうっとおしがられてるんだろうに
なんで残ってんだろう… 空白類も空白類以外の文字も<input>も全部インライン要素だから
単純にタグとタグの間の空白類を除去してしまうと
"a b c d"の空白も
"<span>a</span> <span>b</span> <span>c</span> <span>d</span>"の空白も
等しくなくなってしまいそう、とか
ブロック要素でオプション的に指定できるようにすればそれで済むもするが {% spaceless %}{% endspaceless %}使ってるな
smartyの時代は{strip}{/strip}だった >>226
HTML では要素と要素の隙間の空白列（ inter-element whitespace という用語が定義されている）は、ある種の文脈では無視するものとされているが、
半角スペース1個であったかのように扱うと決めているのは CSSのはず
（DOM が半角スペース1個になるわけではないし、ティムは関わってないんじゃないか？） >>219
<li>なら終了タグ省略で>>225と同じになるぞ
<ul>
<li>1こめ
<li>2こめ
<li>3こめ
</ul>
これは
<ul>
<li>1こめ
</li><li>2こめ
</li><li>3こめ
</li></ul>
と同じ どこもかしこも、なんで記事にもっと読むとか、続きを読むとかをアホみたいに入れてるの？
これって、SEO対策なんかな？
読むユーザーから矛盾してると思うんだけど、これ意味あるんか？ SEO対策なんてものは存在しない
何をやった所で意味があるかないかなんかわからないんだから >>219
インライン要素の改行は隙間ができる
対処法としては
①
<span>テキスト</span><!--
--><span>テキスト</span>
のように改行をコメントにする
②
<div class="wrapper">
<span>テキスト</span>
<span>テキスト</span>
</div>
のように改行するインライン要素を何かで囲む
んで、CSSで
.wrapper {
letter-spacing: -.4em;
}
.wrapper span {
letter-spacing: normal;
}
のように親要素の文字間をつめて、子要素の文字間をノーマルに戻すことで回避できる
他にも上のレスであるように閉じタグ省略とかタグの書き方工夫したりとかもあるから
自分の好きなのでいいと思うよ それよく見るし俺も使うけど、
0.4emって何のことなの サイトのCSS（と、それに付随するHTMLのクラス名）を修正しようと思います。
クラス名を分かりやすく改名したり、必要ないクラスを消したり、2つに分けていたクラスを一つにしたり等あると思います。
この作業をするにあたって注意すること、アドバイス等ありましたら教えてください。 影のinsetについてなんですが
box-shadow: 0px -15px 30px -2px white inset;
などとすると４方向に影がつきます
垂直方向だけ、または横方向だけに影をつけることは出来ますか >>238
横レスで申し訳ないけど、remとemの使いどころがよく分からんのだけど
どういう時に使うの？ jqueryの.css() で何らかの属性を取得した場合、
帰って来る英単語は小文字であると保証されていますか？
たとえば
white-spaceの値を取得すると'pre'だったのですが、'PRE'とか'Pre'などに
なる可能性もありますか？ 書いたとおりに取得されるで良いんじゃないの？
全部小文字で書いてれば迷うこともない >>235
ユーザーの離脱率、ページ閲覧時間は年々短くなっている
少しでも興味をもたせようという計らい
>>243
emは死ぬほど使うよ
pxで指定すると非常にめんどくさいことになる
>>245
強ければ小文字に変換したら？ >>235
上の通りと、広告の表示回数が増える
結果SEO対策の１つとなってる
>>243
emは文字サイズほぼ全てで使ってる
固定サイズ枠の中からはみ出したくないとき除いて px指定って本当に使わなくなったな
widthは%、marginはem remはルート(html？body？)の割合だっけ
px指定と比べた時の利点って、フォントサイズを一括で調整しやすいとかになるのかな？ いちおう豆知識として説明しておくと「em」はアルファベットの「M」のこと
アルファベットにはそれぞれ形と名称が定義されてて、形の定義が「M」でその名称が「em」
なので「em」で「エム」と読む
「M」は縦横ともに幅一杯使うから印刷業界でこの大きさを1とする単位として「em」が使われるようになった
それが今も残ってる 最近はhtmlにfont-size:62.5%かけてremだな
疑似要素ではIEでバグがあるからem
メディアクエリもem。pxはsafariで拡大したときにバグる 拡大縮小は動作保証外にしてるわ
chromeでも結構バグるのに手に負えない 243だけど皆さんありがとう
width以外はpx指定してたから勉強し直そう ＜input type="search"/＞
で、IEはクリアのxアイコンが出るのですが
[ x]
chrome, FFは出ません。どうしたら出せますか？ >>259
クリアのアイコンの実装は義務付けられていない
実装されてない場合は出しようが無い
何らかの隠しオプションはあるかもしれないが >>260
ありがとうございました。
>クリアのアイコンの実装は義務付けられていない
そう言うのはどこを調べれば書いてあるのでしょうか？ W3Cなどで大体のブラウザの共通仕様は書かれているけど
＞義務付けられていない
を調べるのは大変かも ＨＴＭＬの動画を見たんですが、ダブルクォーテーションを入力した時に
１回の入力で""と２つ同時に画面に出て間にカーソルが入ってました
とても便利だなと思ってお尋ねしたいんですがどうしたらいいのでしょうか？ >>261
論理的なふるまいを除く UIの詳細はブラウザの裁量に任されることが多い。
入力方式など、最適なUIはプラットフォームに依存するので。
その例だと IE は Windows のしきたりに合わせてクリアアイコンを付けているのかも（ Windowsは使ってないので憶測だが）。
Chrome やFF はマルチプラットフォームなのでWindows のしきたりよりプラットフォーム間の一貫性を優先しているように思われる。 クリアアイコンってあれもともとSafariが始めたものだろ >>265
付け加えると、ブラウザの裁量が暗黙の了解になってるので、仕様にはわざわざ書かれない（特に必要な場合に限り、指定される） Foxのコンソールに毎回
XML パースエラー: タグの対応が間違っています。終了タグが必要です: </meta>
のエラメが出てうっとうしい
メタタグは終了タグいらないんじゃなかったっけ >>260
お前の書き方が悪い
意味もわからずコピペばかりしてるからだ >>270
<!DOCTYPE html>
でもいるの？ >>272
いらない
>>271
htmlと似た別言語。はっきり言ってスゲー書くのがめんどくさい
詳細はめんどいからぐぐって もしhtml5でもそのエラーが出るならURLを教えて欲しい
拡張機能か、iframe内のエラーような気もする >>274
今気がついたが
・ローカルだと出る
・ローカルでApache(3.2.1)だと出る
・サーバーにアップすると出ない
HTML(A)←ajaxで読み込み－HTML(B) ってことしてて、両方のheadに
<meta name="viewport" content="width=device-width,initial-scale=1.0">
の記述があり、B側の行をエラー表示してる
ちなみにどちらのファイルもname="robots"など他のメタタグあり
Chromeだとローカルでも出ず
スレチなのでこの辺にしときます
>>259見て思い出しただけなので >>275
Content-Typeの問題。
> Content-Type: text/html
終了タグを閉じなくても良い(HTML)。
> Content-Type: application/xhtml+xml
全てのタグを閉じなくてはならない(XML)。
DOCTYPEが何であろうが、XML準拠である事が強制される。 >>278
はい、正解、おめでとう
でも、答えが出るまで3時間かかりました >>280
礼儀のなってない奴だな
教えてもらっておきながら、上から目線の態度が鼻につく >>278
text/htmlに当たると思うがそれでもいるということ？
他のブラウザでエラーが出ないのはなぜ？
>>281
そら別人だよ Content-Typeの問題なら鯖で出ないのはなぜ？ 色々な妨害してくるのは、荒らしだから、相手をするな。
無視しろ
質問者は、荒らしと間違われないように、age て、ID を表示すること。
sage で書かないように
sage で書くと、荒らしと区別がつかないから 教えてもらいたいという人が>>280のようなこと書くわけないな。
しかも常時2chにへばりついてるわけでもなかろうに3時間は早いほうだろ。
いつもの詳しい人かな。 >>283
その辺はブラウザごとに色々あんじゃね？
ガラケーのXHTML書くときに
使えるブラウザとそうでないのあってイライラきたじゃん？ 最初の質問者ではなく便乗質問でもageたほうがいいのかな
日変わったらidも変わるから意味ないようなキガス >>264
なるほど！早速使ってみます
ありがとうございました Templateのアンケートフォームをカスタマイズしたいのです。なんかCSSを使えばできるみたいですが、
その場合、どんなツールが必要でしょうか。 cssでボックスの内側に単純なグラデーションをかけたいですが、どのような記述をすればいいでしょうか
boxshadowだと４方向のグラデーションになります text-alignの変更をアニメーションさせることはできますか？ >>293 テキストエディターでライブビューのあるものでお勧めのものありますか。
フォームだけですけど、HTMLは本当に必要ないのでしょうか >>295
atom
後半は何を言ってるのか分からん
必要ならすれば良いだけだよ >>289
ならchromeの開発者ツールでいいんじゃね >>297 プログラマーでないと難しいのではないか プログラミング言語じゃなくてマークアップ言語でしょ？ 間違えた
htmlがマークアップ言語で
cssはスタイルシート言語だった ＵＲＬの、「これ」って記事の、画像の赤丸で囲ってあるところに広告入れたいのですが、
ＣＳＳのどこに入れたらいいのかわかりません。教えてください。
お願いします。 http://dietsokuhou.liblo.jp/archives/5300274.html >>300
例えばフォトショで
とあるテキストレイヤーを選択して
文字パネルのフォントサイズのところに「20」って入れる
みたいな作業に近い 例えば
<div>
<a href=xxx>hoge1</a>
"hoge2"
<a href=yyy>hoge3</a>
</div>
って記述されてる場合に、CSSで『hoge2』を選択、指定するにはどうすれば？ <div> "hoge2" </div>
<div>hoge2</div>
下じゃないの？
<div>に、id, class とか付けないと、すべての<div>でしか選択できない。
その<div>だけを選択したいのなら、id, class などで特定すべき
メールアドレスに「sage」と入れたら、ID は出ない >>310
どうもお世話になります
hoge2には<div>は付いておらず上下の<a>hoge</a>の間に
挟まれる形で直接記述されてます
どうにかしてhoge2だけを指定できないものかと思いまして そもそもhoge2がpにもdivにも囲われずタグなしってどうよ 近い形でいくと、5chの板一覧（http://menu.5ch.net/bbstable.html）における
"/"のような記述状態です >>307
div:not(a) {};
つうかpとかで囲っとけよ。。。 なんかうまくいきませんね
jsとかで拾ってタグ振り直す方が現実的な感じですかね
もう少し自力で格闘してみます
とりあえずお付き合い頂いてどうもありがとう ■ このスレッドは過去ログ倉庫に格納されています
