HTML/CSS の質問に優しく答えるスレ 30
レス数が950を超えています。1000を超えると書き込みができなくなります。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問大いに結構。分からない人は何回聞いても結構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 ありがとうございます
buttonタグも同じ用途ですか？
子要素を含めるinputみたいな立ち位置かと思ってますが >>880
ボタンとリンクは違う
リンクは「繋がってる」ものだからクリックするかどうかは関係ない
単に「繋がってる」という状態を表すもの。クリックしなくても繋がってる。
ボタンは「押すもの」押した後どうなるかは関係ない
何処かに移動するだけかもしれないし、何かしらのデータをサーバーに送るかもしれない
単に画面上に変化を与えるかもしれない
ともかく押した後のことは関知しない
単に押すことができるもの 開くと閉じるで違うのもやだしハンバーガーメニューならボタンは同じ要素だよな
それはbuttonで書くべきなのか、じゃあ
個人的にはaタグはjQueryでいちいちreturn false;って書かなきゃいけないのが面倒だからあまり好きではない 好き嫌いの話にしちゃダメなんだけど >>884
それは正しい
>>885
クローラーのためになってるか？で考えるとわかりやすいよ
ハンバーガーメニューだと出し入れするための [三] はリンクじゃない
もちろん中のリンクは、aで良い
> 個人的にはaタグはjQueryでいちいちreturn false;って書かなきゃいけないのが面倒だから
使い方間違ってるんじゃない？
aはリンクなのだから、クリックしなくても「繋がってる」と言ってる通り
jQuery（clickイベント）があってもなくても同じ意味になっていないといけない
clickイベントを使う場合は、JavaScriptで何か処理をしつつ最終的にはaのhrefを使うことになる ちなみに [三] はボタンもありだけど
チェックボックスもありだよ。
出してる状態と閉じてる状態、2値を表すものだからね 「前に戻るリンク」もリンクじゃダメなんだよね
どこにリンクされてるのか不明だから。
「前に戻るリンク」と称してどこかのページに
移動するっていうのなら間違ってないけど 学生時代軽くＨＴＭＬでサイトつくったことがあっただけで
最近会社のＨＰ作りさせられてるんだけど
（１） [長い文章]
みたいなのかいたときに
（１） ○○○○○↓
○○○○○
ってなっちゃうんですけど
（１） ○○○○○↓
○○○○○
みたいな感じに表示するのってどうしたらいいんですか？ >>876
開閉ボタンをリンク部とごっちゃになってるのかな？
<li><a>メニュー</a><input type="checkbox">
または
<li><a>メニュー</a><button></button>
このままだと見た目そのままなので開閉ボタン部分はCSSで
checkboxなら:checkedや擬似要素で色や+/-などを変えられる >>885
好き嫌いで言うならbuttonの方が嫌い。
cssで装飾する際にデフォルトの飾りを取っ払うのがめんどくさ過ぎる
iphoneも勝手に角丸やらグラデーション付けるし、PCだと変な立体的なボーダー付くし
あのボーダー逆にどうやってCSSで付けるんだ？ｗ >>892
ＣＳＳを操作する権限がなくて
数字は（）つきのままにしたいんですよね >>895
HTMLのヘッダもだめなんか？
できればそこでcounter それと（１）と○○を段組みや:first-lineなどあるが
CSS全くいじれないのではどうしようもなくね？
全角スペースでも入れとけば
ガタガタだが てかCSS一切手をつけられないんだとしたら
それ以外の部分についてもレイアウトバラバラで統一感ゼロのサイトになっちゃうんでは？？ｗ >>895
CSSができない人のためのテーブルレイアウト
<table border="0"><tbody>
<tr valign="top"><td>（１）</td><td>〇〇<br>〇〇</td></tr>
<tr valign="top"><td>（２）</td><td>〇〇<br>〇〇</td></tr>
</tbody></table>
ま、CSSも何もかもをいじくれる権限がなければできないと言っておいたほうが無難
エスカレートしてそのうち意味もなくサーバーハッキングや
ブラウザハッキング（ウイルス作成）が必要な内容を要求される >>898
ヘッダ絶対だめですね
>>899
長文が自動折り返しされたときにインデントされるようにしたいんですよね
一応なるべく使うなとはいわれてますが
個別に style="" は最低限使っていいとはいわれてます
ので <div display"table-cell"> とかつかえばできなくはないんですけど
それが正解なのかなとここにいるプロの方にききたかった
実際インデント先の改行って顧客の原稿でわりとでてくるので覚えたいかなと
むしろ改行のあと左端までまわりこんじゃっても顧客側は気にしないものなんでしょうか
この程度のことでいちいち上にきくのも使えないやつだなって思われそうで…
みなさんならどうしてるんでしょうか >>901
テーブルじゃないものをテーブルでレイアウトするのは絶対ＮＧです
ＨＴＭＬのコーディングガイドラインっていうのがあるらしくて
タグのセマンティックを無視したのはだめらしいです
どのタグにどのタグがはいるかとか alt は絶対つけろとか
ＨＴＭＬのマークアップやるなら最低限覚えろっていうので最初に覚えさせられました >>903
それでcss触れないとかあり得ないだろ
デザインに合わせるためにhtmlだけでセマンティック無視して合わせるか、セマンティック準拠してcssで合わせるかのどっちか JavaScript使えるならそこからhead内にstyle差し込んでcss使えるけどそれもだめなの？ >>904
ヘッダとかはサイト全体で統一するために自動生成するみたいで
スタイルシートはデザイン経験ある人だけがやってしたっぱには権限がないです
新人の自分は顧客の原稿みながら body の中のタグコーディングだけやってくれてっていわれてます
まあCSSがいじれないだけでスタイル指定はやっていいとはいわれてるので
できることはかわらないんですけどstyle指定使いすぎるのはよくないですよね
なのでスマートにやる方法あったりするのかなとちょっとききたかった次第です
見栄えとコードの厳格さがトレードオフになったとき
どこまで妥協してどこまでこだわるべきなのかまだわかってなくて…
企業のページで改行ずれがあるのと
ソースのぞいたときにstyle指定かいてあるのとどっちが恥ずかしいかって話になると思うんですよね
tableでメニューやレイアウト組んでるのは論外だと思いますけど
>>905
javascriptは当然ダメだと思ってきいてすらないけどおそらくダメなんじゃないかな… >>902
俺はWeb屋ではないが。
> この程度のことでいちいち上にきくのも使えないやつだなって思われそうで…
いちいち上に聞け。
というか、会社はそれ(お前が使えないという事実)込みで雇っているんだから、
聞いていいし、聞くべきなんだよ。
それで、「自分で調べろ」と言われれば調べればいいが、今はそれ以前なんだろ？
当たり前だが、会社ごとにコーディング戦略があって、それに合ってないと意味が無い。
お前のオレオレコーディングされても困るんだよ。
君の会社はこの辺がきちんと整備されているのは以下からも分かる。
> スタイルシートはデザイン経験ある人だけがやってしたっぱには権限がないです
だから、まず聞くべきだ。
そしたら多分、具体的にこうしろと指示が来るはず。
次に、聞いても有効な答えが得られなかった場合だが、
自分で適当なサイト探してF12で確認して真似しろ。
例えば889のような場合、以下ページに
https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics
1. とか表示されている部分はあり、折り返しもきちんと出来てるだろ。
ただし、そもそもエレメントにstyle付けるのはNGだと思うが。
それやったらCSSの意味がなくなっちゃうでしょ。 >>907
なるほど確かにやり方がわからないんじゃなく正解がいろいろあってコーディングポリシーの問題ですよね
上にきくことにします
結論からいってスタイル以外に折り返し回り込みをインデントさせるスマートな方法はないってことでいいんですか エレメントにスタイルつけるのはＮＧじゃないぞ
１箇所にしかでてこないようなスタイル指定を全部ＣＳＳにまかせてたらそれこそ汚らしい >>908
共同作業なら他の文書（ページ）でも同じようなケースあるのでは？
すでにそういうclassあるかもしれんから聞いてみたらいい
タグだけの問題ではないので聞いて恥ずかしいことはない
>>909
いや、汚い 顧客側が気にするか否かより君の会社、その案件でどうするかを気にしたほうがいい
ヘッダだめもその一つだが、でないと統一性がなくなってしまう
逆に余計なことしないほうがいいかも（読んでてそんな印象）
ま俺も独学ド素人だが >>889
<div style="padding-left:32px;position:relative;">
<p><span style="display:inline-block;position:absolute;left:8px;">(1)</span>本文。本文。</p>
</div>
ちなみに、CSSを使う場合::before擬似要素と
counter-incrementプロパティを利用するのがベスト 似たような疑問だけど
２列のテーブルで左が日付とか短い単語で右側に長文かいたとき折り返しで左のセルも２行になって不細工じゃん
あれスタイルなしで防ぐ方法ある？
<table>
<tr>
<th>2018年1月21日</th>
<td>ながーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい文章</td>
</tr>
</table>
みたいなの >>909
ありえん
htmlはhtmlだ、しっかり分けろ テーブルならcolgroupで幅の調整はできるんじゃない >>878
Aタグだとクリックしたらページを読み込んじゃうんじゃないの？ >>913
>>889と同じ人かな？
共に先ずHTMLのタグとCSSのデザインを分けて考えたほうがいい
基本的にはタグは見た目のためにつけるのではない
HTMLだけで見た目変えようというのがそもそも違う
HTMLだけでできない場合にdivやspanなどで囲うことはある
タグはそれでいい（俺ならdl使うが） >>893
appearanceでググると幸せになれるかもしれない
あとresetとか >>913
テーブルレイアウト時代の負の遺産だけど
セルのmin-widthは画像でつっかえ棒するんだ spacer.gifって昔流行ってたよな
IT業界なのになんてこんな不自由でアナログなんだろうって思ってた >>921
いや、あながち間違ってない
たぶんそこまでせんでいいと言われそう プロパティの前にアスタリスクつけたりCSSのハックっていくつかあるけど
実際に使ってる人いる？ ここ最近のカキコではどうみても>>921が一番無能 >>912
頼まれて見てこんなstyleだらけだったらウゲーってなるな >>926
昔はアホみたいに使ってた、というか使わざるを得なかったけど
もうツールに完全に任せられるようになったのでその辺は全く使っていない
未だにハックが必要な状況なんてあるんかね 普通のブロック要素は横幅が親要素いっぱいに広がりますが
input type=textをdisplay:blockとしてもいっぱいに広がりません
width: 100%
としてもブロック要素の挙動の再現にはなりません
ブロック要素の場合、marginも考慮されて横幅が決められますが
width:100%と指定した場合marginは考慮されないので。
input type=textにブロック要素のような挙動をさせるにはどう指定すればいいのでしょうか？ inputは、終了タグないんだから
ブロックになるわけがないやん？
どこからブロックの開始なのかはいいとして
ブロックの終わりなんてないでしょ？ >>933
>932 の「ブロック」というのはレイアウト構造の用語であって文書構造の用語ではない
>>932
input 要素などのコントロール類のスタイルは
自由にまたは統一的に制御できない部分が多い
理由はコントロールの内部ボックスツリー構造がブラウザによってまちまちだから
最近だと appearance: none というブラウザスタイルを無効化できる仕様も出てきている。
それを利用すれば（将来には）可能になるかもしれない
https://drafts.csswg.org/css-ui-4/#form-styling
https://triple-underscore.github.io/css-ui-ja.html#form-styling >>933
＞inputは、終了タグないんだから
＞ブロックになるわけがないやん？
全く関係がない
それは文法上の仕様 >>935
ありがとうございます
そうなると表示を親要素基準にしたい場合は
ブロック要素のコンテナを挟ませて、
それに対して100%にするとかしないといけないということですね appearance: noneなんてあったのか
iphoneで見たときめっちゃ崩れてて笑った
そのまま納品したけど 四角いイメージの真ん中に文字表示させてそれを
その画像おしたらボタンみたいなリンクにするのってできる？ <a href="パス"><button>文字表示</button></a>
または
<a href="パス"><img src="イメージファイルのパス"></a> input[type="submit"]
button
a
これらはcssで全部同じ見た目にできる
もちろんクロスブラウザも
ただ上でも言われてるとおり、どれでもいいわけじゃなくて目的によって使い分けるべき button
input type=button
はどう使い分けるのが良いの？
上級者のテクニックを教えろ >>943
＞どう使い分けるのが良いの？
htmlのバージョン >>942
inputはbeforeとafterが使えないので気をつけたいところ
四角いボタンで真ん中に文字があって横に矢印アイコンみたいなデザインの時
アイコン部分をうっかりbeforeで作っちゃったりすると事故る >>944
大雑把だけどformとの関連で考えるといいかも
inputはformの部品なので基本的にはformの子要素でありたい
属性でどのformの子なのか示すこともできるんだけど
buttonにはその縛りはない
あとinput[type=button]は押すとformのsubmitが発火する
buttonはそうでもない > buttonにはその縛りはない
inputもbuttonも一緒
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button
> buttonはそうでもない
inputもbuttonも一緒
submit: これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作です。
単にもともとinputの方はデザイン変えられない標準のボタンで
buttonの方は中にimg入れれば画像ボタンが作れたと言うだけ
CSSのbackground-imageで変えられるようになってからは
大した違いはない デザイン面でいうと中に子要素がもてるってのは大きな違いだな 途中送信すいません
</h1>のすぐ後に<h2>を書くのはダメなんですか? button要素で作ったアイコンのクリックでイベントが起きるようにしたのですが
クリックすると、アイコンの周囲にアクティブな要素を囲む線が残ってしまいます
この線を表示しないようにしたいのですが、どうやればいいですか？ >>950
ダメなわけがない
大見出しのすぐ後に小見出しがあるドキュメントなんて山ほどある >>941
ならなかった
というか文字がどこにもない
画像の上にテキストをのせたいんだけど
ＨＴＭＬって要素重ねるってできないのかな >>955
<a href="#">文字</a>
a {
display: block;
width: 画像の横幅;
height: 画像の縦幅;
line-height: 画像の縦幅;
background: url(パス) no-repeat 0 0;
margin-right: auto;
margin-left: auto;
}
可変したい場合はちょっと変わるけど
かなり初歩的な質問だし可変までは想定してないよね。 >>955
>ＨＴＭＬって要素重ねるってできない
できるよ（重箱だがHTMLではなく、CSSな。）
(1) 絶対位置（ position: absolute,＋親に position:relative ）
(2) 強制オバーフロー（テキストをサイズゼロのボックスに入れる＋ボックスの z-index も指定（さもないとテキストが背後に隠れる））
(3) grid レイアウト（重ねたいものを同じセルに配置する）
他にもあるかも >>955
見た目はHTMLではなくCSSのお仕事
配置を決めるスタイルプロパティにpositionてのがあって
デフォルトではほとんどの要素のこれがstaticて値になってる
これはただ書かれた順に、下へ下へと並んで積まれていくだけのスタイルなので
このままでは要素を重ねるのは難しい
値がrelativeになると、staticであった場合の座標を基準に
相対的に配置されるようになる
値がabsoluteになると、ある基準点からの絶対座標で配置される
基準点は先祖要素を順にたどって最初に見つかった
positionがstaticではない要素
この辺をうまく使って配置してみてください select, optionを使ってDropDownListを作る場合、
Category SubCategory1
[ ▼] [ ▼]
みたいに２階層にしたいのです。
こう言う場合、Categoryの選択項目に応じてSubCategory1のoption一覧を更新する必要がありますが、
どう言う手法が良いのでしょうか？
(1)全部のデータをクライアントサイドで持っていて、必要なやつを表示してそれ以外は非表示にする。
(2)Categoryの選択項目が変化する度にサーバーサイドからSubCategory1のoption一覧を取得する。
(3)それ以外
など何がお勧めですか？ >>956
わーすごいすごい
文字と絵重なってる
だいぶやりたいことに近づいてきたけど文字が左端になるし
改行いれると画像に下にでちゃう
中央に表示できないの？
あと画像の大きさ毎回調べるの大変すぎるんだけど
ＨＴＭＬじゃ自動で真ん中に表示するリンクボタンって難しいんですね >>959
3
1に近い、というか1がどういうの想定してるかわからないけど、JavaScriptに配列で持たせておいてCategoryが変更されたらSubCategory1の中身を入れ替える >>960
簡単だぞ
cssでいろいろ方法ある
多いしサポートするブラウザによるし好みにもよるからここに書くのめんどうなくらい
「css 縦横中央」とかで検索すれば大量に出てくるから好きなの選べ 検索してやってみてるけどぜんぜんうまくいかない
学校でＨＴＭＬならったけどＣＳＳのほう勉強したかった htmlのほう勉強してて正解
htmlはしっかりかけるようになっておかないとSEOにも影響する
cssはまぁ言うてもなんとでもなる >>963
とりあえず簡単に書くと
>>956に追加で、a内の文字にspanなり付けて
<a><span>ほげほげ</span></a>
の形にする
で
a {
position: relative;
}
span {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
で、どう？
>>962で書いたようにいろんな方法あるから一例ね >>965
うーん あまりかわってない…
２行目が少し上になったぐらい
やっぱりここにいるプロの方でもすぐできない難しいことみたいだしあきらめます
ありがとうございました >>967
https://jsfiddle.net/vzos55bp/2/
956だけどアプデしました。
画面幅狭めても画像が切れないようにしたよ。
改行も対応した
こんな感じでいいかな？ HTML5でバナー制作をしているのですが、
媒体の広告規定でポライトロードが必須とされているのですが、
ポライトロードの設定をする場合の具体的な記述例を教えてもらえないでしょうか。
Google Web DesignerやAnimateではUI上から設定できるということなのですが、
既にHTML5で組まれた既存版を使う為、直書きでの方法を教えください！
よろしくおねがいいたします。 >>967
そうやって煽ってコピペ出来る答えを引き出そうとしてるのは
まるっとスリット全部お見通しだ！ >>964
なにが正解だよww
css勉強してなきゃhtmlの意味ねーだろ >>968
すごい かっこよすぎる
コードだけ使わせていただきます
でもこんな簡単なことやるのにかおんな複雑なＣＳＳが必要になるんですね
自分ひとりだったら絶対たどりつけなかったです…
今作ってるのは趣味のブログだけど
会社のＨＰ制作たのむときはこんな人に頼みたい
というか自分もこんなの数日でかけるようになりたい
あともう１つききたいんですけど
画像の下に長い文章かいたときに画像の幅で折り返すっていうの画像の幅を指定せずにかけたりしますか？ × あともう１つききたい
○ あともう１つタダで作ってほしい いやまあ質問スレなんだから別にいいんじゃねーの
ページ全部デザインしてくれっていってるわけじゃないし select要素は、widthを指定しない場合、optionの最大文字数を基準に決められますが
現在選択されているoptionを基準に横幅を決めるようにしたい場合はどうすればいいですか？ >>976
どうすればいいか教えていただけませんか？
何のタグつかえばいいかヒントだけでも教えてもらえれば自分で検索してがんばってみるので >>978
タグなんてなんでもいいだろ
<div>
<img>
<p></p>
</div>
でいいんじゃね
ちょっとは自分で調べようとしろ レス数が950を超えています。1000を超えると書き込みができなくなります。
