HTML/CSS のどんな質問に必ず優しく答えるスレ 31
レス数が950を超えています。1000を超えると書き込みができなくなります。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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 ご質問があります。
職場でサーバーを用いない？掲示板を作ってみたいのですがphpを用いずサイトを更新していくことって可能なんでしょうか？
メモを残せる程度で良いのですが
例えばJavaScriptを利用したりとか、またはphpをサーバーを用いずに利用可能？
素人以下の知識で申し訳ありません。 不可能
javascriptはクライアント内で動作するプログラム
サーバー側でデータ変更するにはphpなりＣＧＩが必要
ウェブサーバーを経由しないでphpでp2p通信プログラムを作ることはできる
その場合も誰かがコネクションをうけて書き込みデータを保存する役割はしなければいけない メモを残せる程度っていうのが
他人にみせる必要はなく単に自分用のデータを残すだけでいいなら可能
javascriptのlocalStrage.setあたりを使えば閲覧者のローカルにデータをためて
次にアクセスしたときに再び表示させたりはできる
jsの話はすれ違いなのでこれ以上はほかスレで 文字コードで教えてください。
今までXHTML1.1でCGIプログラムのやりとりをしているページを書いていました。
試しにHTML5に書き直ししてみました。
ただCGIプログラムで文字コードはShift-JISなので、
HTML5でmeta charset="shift_jis"としました。
PCでは新しいブラウザでは問題なく使えているのですが、
iPhone 5/5c(iOS10.3.3)のSafariだと文字化けしてしまいます。
それ以降のiPhoneでは問題ないです。
これってiPhone5c/iOS10.3.3/Safari特有の問題なのでしょうか？
HTML5でシフトJISは、違う指定方法があるのでしょうか？ >>841-849
ajax のJavaScript 部分で、エラーが起こって、
それ以降の画像読み込み部分が、実行されないのかも
コンソールログに、エラーが出ているかも。
F12 開発者ツールを起動して、見てみろ
>>854
BOM 無し、UTF-8(UTF-8N)に、変換した方がよい >>855
文字コードで教えてくれと言われてるのになに日本語で答えてるんだ？アスペかな >>854
新しいSafariで問題ないのなら不具合なんでしょう
CGIのほうのContent-typeでcharsetを指定していないのなら、指定してみると良いかも >>855,857
ありがとうございます。
UTF8化したいのですが、
jcode.pl使ってるのでpmに直さないといけないですよね。
将来的には手を加えたいです。
Content-type指定してもダメでした。
HTML5に書き直したのをXHTMLに直したら、
正常に表示されました。
※iPhone5s 10.3.3ではHTML5で問題なし、
5cのみがダメっぽいですね。
まずはCGIのUTF8対応方向で変えていこうと思います。
ありがとうございました。 >>859
jcode.plって、何時代の人！？
10年以上前のプロジェクトの引き継ぎならともかく、今はperl自体がutf8対応してるからそんなのお払い箱だよ ちょっとスレチになってしまいましたが、
今ってエンコード処理させなくても使えてしまうんですね。
SJISをUTF8に変換して…、メールの時は…って難しく考えてしまってやってませんでした。
全部UTF-8Nにしてjcode部をなくしただけで、
データベースも使えるしメールも送信できるし、
今まで何を悩んでたのかな？って感じでした。
ほんと>>860の指摘の通りでした。
もうShift-JISサイトの方が珍しいし、
メールもjisに変換しなくても行けるのも驚きました。
ホント久々に触れたので感動みたいな驚きです。
ありがとうございました。 jcode.pl の事を知ってる人がいて、良かったね
漏れは検索したけど、perl は分からんし、
ライブラリには、そういう固有のやり方があるのか、と思った >>863
marqueeってなに？って思ったら
HTML5では廃止されてるタグなのね・・・ テーブルのtdとか閉じてなくね？
あとソースのtable のとこの3ってなにが入るん？
cellspacing とか cellpaddingとかかね？ >>864
先週です。
>>867 同感です。
<table ( 3 ) >
< ( 4 ) >
の答えは何でしょうか？
< ( 7 ) >はbodyを閉じるのでしょうか、htmlを閉じるのでしょうか？
trやth、td、thの中のfontは閉じなくてもいいのでしょうか？ <table>を<marquee>ｗｗｗ
つーか<html>と<body>のあいだに書いてあるのか (4)はcaptionだろうけど
(3)がわかんねｗ
summary="1月カレンダー"とか？？
widthとかalignとかborderとか何でも正解かもしれんしｗ
(7)は流れから見てhtmlの方だろうね >>863
俺も３年前にこんなことやってると知って驚愕した [ 3 ]
①HTML
②タグ
③半角
④htm
[ 4 ]
問1
https://jsfiddle.net/mxc7zy63/1/
※jsFiddleだと<body>が解釈されませんchromeはわかってくれた
①size
②color
③border
④caption
⑤tr
⑥/table
⑦/html
問2
#ffffff → 白
#00ff00 → グリーン
問3
⑧#ff0000
⑨#0000ff
問4
クロ
問5
(イ) → エ、文字を斜体にする命令
(ウ) → オ、センタリングにさせる命令
(エ) → イ、文字を左右に動かす命令
(オ) → キ、背景全体に色をつける命令 >>861
860読み返したら随分きつい言い方してたわ、ごめん
解決できたようで何よりでした まぁHTMLの授業がある自体マシでは
わしの中学生の時はキーボードを押す練習しかなかったからな
キーボード配列がテストに出るレベル 最近の学生はプログラミングが授業で学べるのがええな
裏山 CSSはデリミタに_ではなく-を使いますが
ID名やクラス名もデリミタに_ではなく-を使う方がいいのでしょうか？ >>881
<blockquote>
<p>CSSはデリミタに_ではなく-を使いますが</p>
</blockquote>
それどこ情報？ >>882
プロパティ名に使われているハイフンのことじゃね？
background-colorとかfont-sizeとか selectを全面に広げたペインのある場合も
そのselectはnavなどのブロックレベル要素に入れた方がいいのでしょうか？
インラインレベル要素を直接レイアウトのレベルに置くのはなんだか抵抗がありますが
なくても問題ないコンテナ要素ならない方がいいんじゃないかとも思います
どうなのでしょうか？ >>886
直接レイアウトしてるブロックの子にするのが気持ち悪いのはわかる
俺もよく<p>とかに入れてる
でもこういうのはもうポリシーの問題に近いので
良し悪しは人に決めてもらうのではなく、自分で決めること
だと思ってる >>886
あと何かしらの要素に入れておいたほうが
裸で置いておくよりも
後々デザインの為にCSSを書くときに都合が良いことが多い >>887-888
決まったセオリーがあるというわけでもないのですね
ではシンプルさよりも気持ち悪いという感覚の方を重視してコンテナを使おうと思います
ありがとうございました >>880
h1は文字を大きくしますとか教える授業だぞ
あれならないほうがまし >>890
うわ～酷いな、そうやってアメリカや東欧州などから遅れていくわけだ とはいえどう教えるかって難しいよな
大学生ぐらいなら見出しを意味し、ブラウザで見たときの文字が大きくなるデフォルトスタイルになってることが多い
っていってもいいけど小学生ぐらいなら文字が大きくなるって教えるしかないんじゃね
「h1は文字を大きくする(ために使う）」はひどいが
「ためしにh1をかいてみましょう 大きくなりましたね」ぐらいのことしかいえないだろう <h1>は知らんけど
従姉妹に娘に教えてあげてって頼まれたときに
「改行するときは<p>と書きます」って教えてると知った時は戦慄した
そんですごく迷った
本当のことを教えてしまうと、たぶん学校では役に立たないだろうし
かと言ってこんな20年前のやり方を教えてしまうのもどうかと
幸い、その子はまったくやる気がなかったんで
おっちゃんやっとくから遊んどいでって言って、普通にコーディングしたった 小学生でもわかる
pは段落、brは改行
h1は大見出し、大きくしたいならCSSという物を使う >まったくやる気がなかった
それが正解
下手に覚えるならやらんほうがマシ
小学生でもやってるのか知らんが、教科書の「この部分」でわかるだろ まあでも学校の先生には少しわりーことしたな、とは思う
彼らだって専門家でもないのに、知らんなりに指導要領通りに一生懸命やってるだけなんだろうし
そこに
class以外の属性がほとんどないのに色や大きさが変わってたり
<marquee>じゃないのに動いてるのがあるの持ってこられても
わけわかんなかっただろうなと 何気に教科書って h,p,img,strong,i,ul,table、段組みなどいい教材なんだよな >>895
小学生でもわかる
pは段落、brは改行
h1は大見出し、
ここまではいいけど
>大きくしたいならCSSという物を使う
これが小学校では範囲外なんだよね
小学校で負の数って概念にふれちゃダメなのと同じ リセットCSSは使うのが普通なのでしょうか？
今まで使っていなかったのですが、ブラウザ間の差異を知らなかったせいで
変なハマり方をしたので、使った方がいいのかと思ってきました
今まで使っていなかった理由は、
ブラウザによるふるまいの違いも知っておいた方がいいのでは？と思っていたからです >>900
ブラウザ間の差異に煩わしい思いしたくないから使う 子どもの話全部真に受けてるのがやばいわｗ
pを改行ってその子どもがそう覚えてただけかもしらんだろ >>900
知っておくのは大事だけど、ブラウザ間の問題解決が目的ではないよ >>903
あー言葉足らずですまん、口伝ではないのよ
プリントで要素の説明が幾つか書かれてるのを見たんだ
先生が個人で作ったにしては手の込んだデザインのプリントではあったけど
教科書や副読本的のコピーではなかったっぽいんで
全国でそうしているかどうかはわからんよね
断言ぽく書いてすまんかった 画像のように三分割したいのですがうまく行きません
二列目のはじまりを揃えて、三列目は大きな画像を表示させたいです
https://i.imgur.com/S37cxsn.png >>908
やっていたのは一つ一つの文字にクラス名付けてcssの方で整えようとしてました
テーブルで簡単に出来るんじゃと思い試している最中です flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
（気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります）
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか？ >>911
ありがとうございます！
重ね重ねすみません。画像の高さがautoになっていますが、1·2列目の全体の高さと合わせたい場合はどうすれば良いでしょうか全体の枠組みが画像に合わせるのではなくて1·2列目にと考えています。言葉足らずですみません。 flexあるから今の人はもうfloatとか勉強しないの？ <style>
<!--
.mainArea{ width:800px; font-size:150%; }
.borderBox { border:solid 5px #000; display:flex; padding:1em; justify-content:space-between; }
.borderBox > ul {list-style:none; display:flex; flex-wrap:wrap; align-content:space-between; width:15em;}
.borderBox > ul > li {margin:auto; inherit; display:flex; justify-content:space-between;}
.borderBox > ul > li > div {width:6em; margin:0 1em;}
-->
</style>
<div class="mainArea">
<div class="borderBox">
<ul>
<li><div>サークルＫ</div><div>良い</div></li>
<li><div>ローソン</div><div>微妙</div></li>
<li><div>ファミマ</div><div>悪い</div></li>
<li><div>セブン</div><div>良い</div></li>
</ul>
<p><img src="http://placehold.jp/300x300.png";></p>
</div>
</div>
１，２列目にあわせるって 画像のほうが確実にちいさいってこと？ まあ顧客の原稿でもよくあるパターンだよな
どの線をどこにあわせるのか
あいたスペースはすべてつかうのかつめるのか
こっちが推測してデザインしたのに意図が違うってごねられるの >>912
1、2行目のことかね？
1、2行目に何か特別な意味があって、画像は1、2行目と関連があって
高さを合わせたい
ということで良いかね？ >>914
すみません。そのコードで解決しました。
ありがとうございました。
助かりました。 >>916
すみません、こちらの説明がおかしくて。
最初に書いていただいたコードで解決しました。
画像の高さはこちらの勘違いです。
ありがとうございました。 >>914
これみておもったけど
flex-direction: column; で縦にalign-contentする方法ってないの？
これ幅固定して無理やりwrapさせてalign-contentしてんだよね？ >>910の件ですが
flexboxをやめたらうまくいきました
便利なのでやたらflexboxとgrid layoutを使っていたのですが
完全上位互換とは言えないようですね >>919
中のやつらの高さがfixされてればmargin:autoでいけんじゃね しらんけど 質問です
<div class="button">ボタン</div>
のようなHTMLであるとき
CSSは
div.button{
}
.button{
}
のどちらの表記がいいんでしょうか？
やはり前者ですか？ >>923
例えば、divだけじゃなく
<a class=“button”>ボタン</a>
などで同じスタイルを使うなら後者
divとaで全く違うなら前者
個人的には後者推奨で
<div class="button button-red">ボタン</div>
のように、共通クラスと、派生クラスで管理することが多いです >>923
要は「div.button」で表記だとclassはdivにしか適応されない
aとかｐとか他の複数の要素にも使うのなら「.button」にしておく >>926
そうじゃなくてclass名を半角スペースで区切って複数で記述すると
別々のclassのスタイルを同時に適用できるということ
例えばボタンの形と中のテキストのサイズやカラーを別にしたい時とか 詳細クラスのときしかつかったことないけど
ふつうに２つ分のクラスももてるの？
他の言語だと多重継承できないこと多いけど
.button{}
.button.color-red{}
じゃなくて
.button {}
.color-red {}
でも適用される？ >>923
原則、後者の方が汎用性高いので後者で行えばいい
そしていずれ前者が必要な時が出てくる
その時に前者が必要な理由を理解すればいい >>921
z-indexのある他のブロック要素ではどうなのだろう？
と思って試してみたら、flexbox同様、
要素が他の要素のoutlineより上に来ました
それで要素のbackgroundをtransparentにしたところ、
outlineの塗りつぶしが避けられると分かりました
おそらくflexboxでも同じやり方で解決できると思います
ありがとうございました outlineって何のことだろう
borderのことならbox-sizingでいいんじゃ
つーかもう
body * {box-sizing:border-box}は必ずいれてるわ >body * {box-sizing:border-box}
ああ、やはりそうなるか。
自分も毎回記述してて疑問に思ってたんだが
それやっても支障でないんだね >>933
なんのことかはわからんが
outlineてのはあるにはあるよね
クリックしたときにでる点線のやつ >>924
>>925
>>927
>>931
ありがとうございます
基本は後者でやって
必要であればクラスを複数同時に当てたり
前者を使ったりってことなんですね 複数のクラスを使うのは、複数の概念を組み合わせる場合
例えば、色のクラスと、テキストの右寄せとか。
赤色で、右寄せとか >>937
> 複数のクラスを使うのは、複数の概念を組み合わせる場合
当たり前ではないかと 規模が大きくなるとクラスが3個以上になることもあるが
どっかのスレでそれが理解できないのがいたな でもマルチクラスは分かりづらいし単純に冗長だから
クラスを組み合わせるのはsass側で解決して
シングルクラスにした方が良いよ 本来、cssは装飾に対する意味付けで、直接的なデザインとしての指定ではないほうがいい
例えば.text-redではなく、.text-strongのほうがいい
とは言え最近はcssを環境によって切り替えることもないし、bootstrapのようにデザイン指定として使うほうが楽だね >>941
text-ってのもおかしんだけどなｗ
テキストをstrongにするって言ってるわけだから 開始タグと終了タグの間の、タグの中身に相当する部分の呼び名は何ですか？ >>944
そうです
要素の内容、あるいはコンテントですね
ありがとうございました >>940
マルチクラスすらのしらないのにsassですかwww
頭わいてるのかお前
やっぱsass様はコミュ障なんだねぇ 土日はsass様が沸きやすいね
会社で相手にされなくてストレスたまってんだろうなぁ おかしいな？ 俺平日の夜も普通に書き込んでるけど？ でも、SASS の利用率は、海外では100%、日本でも50% はある レス数が950を超えています。1000を超えると書き込みができなくなります。
