HTML/CSS の質問に優しく答えるスレ 27©2ch.net

**Name_Not_Found 転載ダメ©2ch.net** · 2017/05/20(土) 19:13:26.64

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問大いに結構。分からない人は何回聞いても結構
HTML / CSS の事なら何でもOK
ただし、JavaScript や PHP などはスレ違い / 板違い。該当スレ / 該当板でどうぞ

+ JavaScript & jQuery 質問用スレッド vol.6 + [無断転載禁止]©2ch.net
http://echo.2ch.net/test/read.cgi/hp/1465566635/

質問するときはIDを出すためにメール欄を　age　にすることをおすすめします

回答してくれる方は優しい人のみ！
質問者に対して暴言を吐く人はこのスレを見るな！！

質問側も節度あるレスで！
質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS の質問に優しく答えるスレ 26
http://echo.2ch.net/test/read.cgi/hp/1489201345/

**Name_Not_Found** · 2017/05/20(土) 19:19:16.63

+ JavaScript & jQuery 質問用スレッド vol.7 +
https://echo.2ch.net/test/read.cgi/hp/1478002550/

**Name_Not_Found** · 2017/05/20(土) 19:48:25.55

レスポンシブでフォントのサイズを
PCで20pxの個所はスマホで16px
PCで16pxの個所はスマホで12px
のように一括で制御する方法ってありますか？またそれはもう実際使ってますか？

**Name_Not_Found** · 2017/05/20(土) 22:37:51.89

>3
一括だとjsになる

cssだとこんな感じ
/* 常通 */
* {
font-size: 1em;
}
/* PC */
media (min-width:501px){
.big {
font-size: 20px;
}
}
/* モバイル */
media (max-width:500px){
.big {
font-size: 16px;
}
}

**Name_Not_Found** · 2017/05/21(日) 01:45:44.40

いやremか%指定でいいだろ

**Name_Not_Found** · 2017/05/21(日) 08:03:46.72

20pxと16pxの包含ブロックのタグが違うはずだろ

**Name_Not_Found** · 2017/05/21(日) 11:15:52.00

:root {
--heading: 20px;
--sub-heading : 16px;
}
@media screen and (max-width: 768px) {
:root {
--heading: 16px;
--sub-heading : 12px;
}
}

.a-1,
.a-2 {
font-size: var(--heading);
}
.b-1,
.b-2 {
font-size: var(--sub-heading);
}

<p class="a-1">pc 20px : sp 16px</p>
<p class="a-2">pc 20px : sp 16px</p>
<p class="b-1">pc 16px : sp 12px</p>
<p class="b-2">pc 16px : sp 12px</p>

**Name_Not_Found** · 2017/05/21(日) 11:30:06.88

答えがまちまちという事はまだ一般的な手法が確立されていないという事？
Sassで変数にしてしまえばいいんだろうけど、開発環境に依存する方法はあまり好きではなくて

**Name_Not_Found** · 2017/05/21(日) 11:39:06.67

一般的な手法が確立されるほどのメジャーな内容ではない

**Name_Not_Found** · 2017/05/21(日) 13:05:52.16

>>9
ランディングページのような文字サイズに規則性が少なく（全く無いわけではない）、
セクション毎にデザインをしているようなチラシ系ページのレスポンシブって普通にありませんか？
そういうのを効率化したいのですが

**Name_Not_Found** · 2017/05/21(日) 16:28:20.03

Sassの変数使う、ネイティブがいいならpolyfillつきでCSS Variablesしかないでしょ

**Name_Not_Found** · 2017/05/21(日) 16:38:25.18

背景画像を画面いっぱいに固定させて表示させたいのですが
cssで設定するセレクタはhtml、bodyまたはそれ以外のどれが適切なのでしょうか？
ちなみにheader部分に設定すると画面上の部分だけがほんの少し間が開いた状態（背景画像が表示されず真っ白）で表示されてしまいました。

**Name_Not_Found** · 2017/05/21(日) 16:57:41.39

>>12
どっちでも
それが間違いなく最上位の要素なら、html
更に背景を設定する可能性があるなら、body
慣れてないならbodyにしておいたほうが無難とは思う

ただ、wordpressの場合はhtmlに設定しないほうがいい
管理バーとバッティングしてめんどくさいことになる可能性がある

**Name_Not_Found** · 2017/05/21(日) 17:21:39.58

>>13
ありがとうございますbodyに設定してみたら上手く表示されました
自分はwordpressを使ってるんですが確かにログインしてる状態だと
スマホで見た時に最上部に表示される管理バーがたまにヘッダー部分と被っちゃっておかしくなっちゃいますね

**Name_Not_Found** · 2017/05/21(日) 18:41:21.65

例えばこの楽天のサイトで、
http://travel.rakuten.co.jp/yado/tokyo/A.html
左側にある宿泊地を
大分類　[北海道]を選択すると
中分類　[札幌市内、定山渓、、、]
などのように、中分類の表示項目が変化しますが、これはどうやっているのでしょうか？
全部のデータをどこかに持っていて入れ替えているのでしょうか？
こういうメニューを作成する場合の一般的な手法を教えて下さい。

**Name_Not_Found** · 2017/05/21(日) 18:48:43.66

>>15
jsで要素の中身を変更している
個人的には中身を入れ替えるんじゃなく、表示／非表示を変更するほうが良いと思うけどな
そうすれば、東京→大阪→東京と入れ替えても選択肢は維持される

**Name_Not_Found** · 2017/05/21(日) 20:23:32.44

>>16
解説ありがとうございました。
大変参考になりました。

**Name_Not_Found** · 2017/05/21(日) 21:06:11.95

どうせ参考になってないくせに

**Name_Not_Found** · 2017/05/21(日) 22:31:22.23

大変参考になりませんでした。

**Name_Not_Found** · 2017/05/22(月) 00:47:24.75

>>15
実装させたいらJavaScriptのスレで質問すると良いですよ。

15 · 2017/05/22(月) 01:14:08.92

他で聞くことにします
ここはレベルの低いスレですね

**Name_Not_Found** · 2017/05/22(月) 01:40:39.35

>>3-11
body {
font-size: 62.5%;
}

これで、PC用ブラウザのデフォルト 16px を、10px にできるから、
1em = 10px で計算できるから、分かりやすい

px を使うと、フォントサイズが固定されるから、お勧めしない

**Name_Not_Found** · 2017/05/22(月) 03:09:31.84

>>22
body {
font-size: 10px;
}
じゃだめなの？

**Name_Not_Found** · 2017/05/22(月) 03:25:28.39

>>22
それをした上で1.6remとか2.2remにすればいいよね。

**Name_Not_Found** · 2017/05/22(月) 07:20:47.01

>>21
お前偽者。しかも童貞。それも包茎。

**Name_Not_Found** · 2017/05/22(月) 11:03:52.95

包茎は美しい
童貞は天使

**Name_Not_Found** · 2017/05/22(月) 12:11:41.97

文字数を制限して表示させたいのですが何か用方法ないでしょうか？
ブラウザによって表示方法が変わってしまうで困っています。

**Name_Not_Found** · 2017/05/22(月) 16:08:24.15

>>22
俺も最初>>5でrem指定にすればいいと思ったけど、PCは20pxでSPは16pxって任意のピクセルを指定することが出来ない。
remで統一できるのはジャンプ率だけ。
結局実現出来るのは>>7だけじゃない？
あと一瞬sassとかのプリプロセッサの変数でも出来そうな気がするけど、プリプロセッサはメディアクエリ内で変数を定義することができない。

結論正当は>>7だけ
IE11用にpolyfillを使うかフォールバックつけたほうがいいけどね

**Name_Not_Found** · 2017/05/22(月) 16:15:05.07

>>27
line-clamp

**Name_Not_Found** · 2017/05/22(月) 17:12:51.40

>>27
行数制限ならtrunk8おすすめ
文字数制限ならサーバサイドで制御すべき

**Name_Not_Found** · 2017/05/22(月) 18:03:41.99

CSSフレームワーク　BULMA　について質問です。

http://bulma.io/documentation/overview/start/

Use NPM (recommended):
＞npm install bulma

BULMAを始める3つの方法の、運営オススメのnpm install bulmaをしたのですが
その次の手順がわかりません

結局CDNから直接
https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css
を読み込むようにHTMLソースを書き加えて使っていますが
何か間違っているのでしょうか？

**Name_Not_Found** · 2017/05/22(月) 18:28:33.32

npm init
npm install bulma --save

bulmaを使いたいhtmlを開いて
<link rel="stylesheet" href="node_modules/bulma/css/bulma.css">
を加える

公式サイトの説明が不親切だな

**Name_Not_Found** · 2017/05/22(月) 19:17:06.93

>>29
>>30

ありがとうございます。
早速やってみます。

**Name_Not_Found** · 2017/05/22(月) 20:15:27.50

マイナーなフレームワークって
結局クライアントも含め関係者全員に覚えさせなきゃいけないのでは？

**Name_Not_Found** · 2017/05/22(月) 20:58:00.40

フォントサイズ指定ってピクセル使わない方がいいんだろうけど
他人が作成したデザインデータがピクセル指定だから
コード側もピクセル指定した方が楽なんだよな。47pxはえーと何em？
端数じゃんウゼー！それの子要素、孫要素どうすんねん！みたいになるから

**Name_Not_Found** · 2017/05/22(月) 21:01:39.65

あとＩＥなどの違うブラウザ同士比べると
文字の大きさが微妙に違ってたりの問題も面倒。文字数依存のデザインだと崩れるし

**Name_Not_Found** · 2017/05/22(月) 21:10:07.97

>>35
別にピクセル指定でもいいぞ

**Name_Not_Found** · 2017/05/25(木) 11:57:05.38

すいません、教えてください。
inputボタンのCSS指定で以下のような記述していて、
PC、Androidは問題ないのですが、iOS端末だとボタンのデザインが全然違うものになります。
iOSではボタン色がやや青いグレー、radiusが25pxくらいの半円です。
safari以外のアプリでも表示がおかしいのでiOS特有の状態のようです。
原因わかりますでしょうか。

― HTML
<form name="search" method="POST" action=“hoge.php">
<input id="search" type="submit" value="search">

― CSS
input[value="search"] {
background-color: #224488;
color: #ffffff;
border-style: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 6px;
…

**Name_Not_Found** · 2017/05/25(木) 12:17:13.89

>>38
-webkit-appearance: none;

**Name_Not_Found** · 2017/05/25(木) 12:31:16.28

>>39
おおお！同じになりました！
ありがとうございます！！

**Name_Not_Found** · 2017/05/25(木) 19:29:57.72

わかる方いたら教えてください。

HTMLでスマホサイトをコーディングしているのですが、iponeやアンドロイド、Safariから見ると謎の ×マークが表示されます。(正確には×を四角で囲んだような表示です)
コードにはパッと見おかしなところはないです。
Safariの開発ツールで調べるとHTML上で $0 というものが勝手に追加されているようですが、ローカルではこの$0は存在しません。
理由がわかる方、消し方がわかる方いれば教えてください。

**Name_Not_Found** · 2017/05/25(木) 19:58:17.48

>>41
それ画像が表示されてないんじゃなくて？

**Name_Not_Found** · 2017/05/25(木) 20:11:24.04

imgのリンク切れだろうけど、$0が気になった
内部的にどうなっているんだろう・・
http://be-a-prgrmr.hatenablog.com/entry/2015/03/05/031954

**Name_Not_Found** · 2017/05/25(木) 20:11:55.31

macの人がよく使うブラウザって何でしょう？

**Name_Not_Found** · 2017/05/25(木) 20:33:27.74

>>42
画像は表示されててその後ろに×がついてました。
色々いじってたらいつの間にか消えました・・・なんでだろう？

>>43
ありがとうございます、知識が低くて見てもよく分かりませんでした。
時間あるときにそのサイト参考に勉強して原因探ってみます。

>>44
個人的には普段Chrome

**Name_Not_Found** · 2017/05/26(金) 00:28:10.55

ページに参考になったならなかったボタンと
そのボタンを選ぶと、コメント欄があらわれるようにしたいんですが、実装の仕方おしえてください。

**Name_Not_Found** · 2017/05/26(金) 02:34:27.95

普通のボタンは押すだけのもので、選べるものではない（状態を持たない）ので
:focus 疑似クラスを使うくらいしか思いつかないな

.comment { visibility: hidden }
.button:focus ~ .comment { visibility: visible }

みたいな感じか
チェックボックスかラジオボタンなら、:checked 疑似クラスを使える

**Name_Not_Found** · 2017/05/26(金) 09:31:40.32

隠しチェックボックスを作る
ボタンを<label>でくくり隠しチェックボックスに連動させる
.hid_chkbx:checked ~ .comment {なんらかの形で表示}

css3だけで作るスライダーなんかで使われてる手法

**Name_Not_Found** · 2017/05/26(金) 10:59:07.72

素直にjsで制御したほうが楽で簡潔だろ

**Name_Not_Found** · 2017/05/26(金) 11:15:31.95

CSSの方が軽くなるでしょ

**Name_Not_Found** · 2017/05/26(金) 12:53:32.69

cssのみで要件を達成できるならcssのみでやってもいいと思うけど、cssではやれることが限られる、
中途半端に実装して「やっぱjsでやらないと無理だわ、やり直し」ってことにならなきゃいいが

**Name_Not_Found** · 2017/05/26(金) 12:54:30.89

jqueryで制御したほうが楽ですよ

**Name_Not_Found** · 2017/05/26(金) 13:28:33.78

普通にaタグだかでボタン作って表示/非表示処理すればいいんでないの？
わざわざ隠しチェックボックスとかを設けてややこしくする理由がわからん

**Name_Not_Found** · 2017/05/26(金) 16:01:13.59

>>53
実際の意味は「選択したらコメント欄が現れる」だから
見た目はボタンだろうが内部ではラジオボタンで表現するのが HTML的には正しいんじゃね

**Name_Not_Found** · 2017/05/26(金) 20:53:35.53

>>53
HTML的にはフォーム要素を使って
データをPOSTするのが正しいから

フォームという標準のインターフェースを満たしていれば
デザインは後から変えられる。そうすることでデザイナーと
プログラマの仕事の分担が可能になる

プログラマとしては何のデザインも当たっていないフォームを使ってアプリを作る
デザイナはそこにデザインを割り当てる。
どうしても実現不可能なデザインであればJavaScriptを使うしかないが
その場合でも標準のフォーム相当を実現するように作る

**Name_Not_Found** · 2017/05/26(金) 20:56:13.32

> ページに参考になったならなかったボタンと
> そのボタンを選ぶと、コメント欄があらわれるようにしたいんですが、実装の仕方おしえてください。

この仕様であれば標準のフォームだけで作るならば

○ 参考になった
◎ 参考にならなかった
　　[ コメント欄 ]

というインターフェースになる。
これがスタートライン。
必要ならばここにデザインを割り当てる

**Name_Not_Found** · 2017/05/26(金) 21:04:16.74

ラジオボタンって単語を使ってあげて欲しかった

**Name_Not_Found** · 2017/05/26(金) 21:46:40.34

>>57
あげあし厨かよ

**Name_Not_Found** · 2017/05/29(月) 11:06:48.21

>>44
いくつかのアクセス解析結果からいえばChrome
次いでSafari

**Name_Not_Found** · 2017/05/29(月) 14:36:15.82

素朴な疑問だが、初心者が>>53のようにa要素でボタンを作りたがるのは何故なんだろう
IE6のhover疑似クラスのバグでa要素が乱用されたサンプルコードの弊害なのか？

**Name_Not_Found** · 2017/05/29(月) 18:42:31.26

>>60
昔はデフォルトでカーソルが変わるのが便利って考えたことがあるな
今はもうbuttonで作ってるけど、たまにtype=button"忘れてsubmitしてんっほおおおおってなるな

**Name_Not_Found** · 2017/05/29(月) 19:41:10.43

>>60
button要素IEだと押し込むエフェクトかからない？

**Name_Not_Found** · 2017/05/29(月) 21:08:38.46

>>61
button要素でもカーソル変わるし、cursorプロパティがある
CSSを知らない初心者が昔でいう物理要素を使う感覚なんかな

**Name_Not_Found** · 2017/05/29(月) 21:10:01.01

>>62
よく分からんけど、focusとかactive疑似クラスで上書きできるんじゃないかね

**Name_Not_Found** · 2017/05/29(月) 21:12:25.70

>>63
もう10年前の話だけど、確かsafariかopera、ネットスケープがbuttonに対して変なデフォルトcssだったと思う
それに右も左もaに対してイベントつけろ、return falseで問題ないという謎の風潮だったから従ってた。ちゃんと勉強すればよかったんだけどね
あの頃は誰もがにわかで、本物は一握りだったな

**Name_Not_Found** · 2017/05/29(月) 21:21:58.22

>>65
今はもっとにわかだらけだよ
コピペコーダーばかりで話にならない

**Name_Not_Found** · 2017/05/29(月) 22:02:48.38

>>60
> 素朴な疑問だが、初心者が>>53のようにa要素でボタンを作りたがるのは何故なんだろう

a要素を使う場合とbutton要素を使う場合が区別できていないから。
もしくは見た目で決めようとしているから。

a要素はアンカー（リンク）でフォーム関連はbutton要素を使う。
見た目で a要素か button要素かを決めるのではない。
見た目を変えるのはCSS。適切な用途の要素を使うべき

**Name_Not_Found** · 2017/05/29(月) 22:03:49.85

>>65
今もあるな。return falseとjavascript:void(0)
この2つは使う必要がない物

**Name_Not_Found** · 2017/05/29(月) 23:46:50.65

>>64
一応あるけど誰もやってない。正確にいうとIEではbutton要素をクリックすると右に1px下に1px移動するエフェクトがつく。これ結構気になってあまりbutton要素使いたくない。

**Name_Not_Found** · 2017/05/29(月) 23:53:47.52

IEのシェア率すごい下がってるから気にしなくなったな
モバイルを考慮すると1割ぐらいじゃないか。楽天とかはもう少し上がるかも知れんけど
いまだにIE使ってるのなんてリテラシー低い層だから細かいことは気にしなくていいと思う

**Name_Not_Found** · 2017/05/30(火) 00:07:28.56

>>69
自分の周囲でやっていることに合わせる風習なのだな
構造ではなく、見た目ありきでマークアップするのは意図的なのか、初心者故なのか

**Name_Not_Found** · 2017/05/30(火) 00:10:51.78

「IEの変な仕様を避ける」というのは故意だろう
俺は正しいと思う
諸悪の根源はIEなのは満場一致だろう

**Name_Not_Found** · 2017/05/30(火) 00:17:04.03

>>65
デフォルトCSSのまま使おうとしてa要素に行き着くのだな
自分の観測範囲で行われている周囲に合わせれば、とりあえず問題ない」と短絡的に考えてしまう傾向もありそうだが…

**Name_Not_Found** · 2017/05/30(火) 00:18:54.43

>>72
いや、制作者CSSで上書きすればいい、という意見が大多数だと思うけど

**Name_Not_Found** · 2017/05/30(火) 01:34:07.60

初心者が質問して初心者がググってレスしてるやつ多いのかもな

**Name_Not_Found** · 2017/05/30(火) 02:28:40.73

昔はHTMLコーダーいうたらブラウザ内部のプログラムの事や
IE6の後方互換のうんちゃらかんちゃら部分がとか細かい仕様まで把握してる人もいた
そういう意味では私はド素人

**Name_Not_Found** · 2017/05/30(火) 02:37:49.14

そういう意味だけじゃなくて
他の意味でもド素人だろ

**Name_Not_Found** · 2017/05/30(火) 09:27:33.68

>>67
「コメントフォームを開くためのリンク」なんだからaタグでも問題なくね？
ボタン押した瞬間にデータがPostされてるわけでもなしに
それともユーザーに選択を問うようなものはPostの有無に関わらずボタンで実装すべきなんか？

**Name_Not_Found** · 2017/05/30(火) 18:54:45.17

>>78
HTML <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a

それはハサミで釘打っちゃいかんのか？と言う質問と同じ
結果は同じだが、適切でない

**Name_Not_Found** · 2017/05/30(火) 19:24:52.42

>>79
でも同一ページ内の場所を示すならaタグokなんだろ？じゃあ問題ないじゃん

<a href="#no">参考にならなかった</a>
<a href="#yes">参考になった</a>

<div id="no">
<form>
・・・
</form>
</div>

<div id="yes">
ありがとうごさいました
</div>

ってするのは何が悪いんだ？

**Name_Not_Found** · 2017/05/30(火) 19:52:58.26

>>80
何もわるくないよ
悪いのは極端に物事をきめつけようとする基地外だからな。

**Name_Not_Found** · 2017/05/30(火) 22:16:13.08

>>78
> 「コメントフォームを開くためのリンク」なんだからaタグでも問題なくね？

「コメントフォームを"開くための"リンク」って言ってしまったらアウト
コメントフォームへのリンクであればOK

リンクっていうのは、何かの地点と何かの地点を
結びつけるもの。だからリンク（接続・連結）という。

aタグを使うならば、何かと何かをリンクさせないといけない。
つまりコメントフォームにはidが振られており（例 id="comment-form"）
aタグのhrefはページ内リンク（例 href="#comment-form"）と
なっていなければいけない

そして重要なのは、今回の場合はページ内リンクになるだろうけど、
別のページからのリンクであっても同じように表示されないといけないということ
（もちろん同じように表示されるように作ることは可能）

つまり、ブラウザのURLに http://example.com/page.html#comment-form と入力するのと
http://example.com/page.html を表示して、<a href="#comment-form">コメントフォーム</a> を
クリックして移動するとの両方で同じように表示されなければいけない。

aタグというのはページもしくはページ内のIDに対するリンクであるという考え方が重要
（未だにテーブルタグでレイアウトするような人にならないように注意ｗ正しい使い方をしましょう）

**Name_Not_Found** · 2017/05/30(火) 22:32:36.77

> （もちろん同じように表示されるように作ることは可能）

ちなみに、これが実現方法の一つな。:target疑似クラスを使う
（他にはJavaScriptを使う方法もあるだろう）

http://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html
http://demo.bitsofco.de/the-target-trick/hide-show.html (デモ)

どうして:target疑似クラスなんてものが作られたかというと、
それこそリンクをリンクとして正しく使いましょうという話で
その正しい使い方における画面表示の制御方法として生まれたわけだよ。

**Name_Not_Found** · 2017/06/01(木) 20:26:07.17

CSSのBEM記法ってブロックで捉えるわけだけど
ブロックが4階層とか5階層になったらその分エレメントの名前を書き連ねなきゃダメなの？
それともキリのいいところでブロック名を仕切り直すんかな？
でもキリのいいところって言われても入れ子になってる時点で独立して存在できるブロックとは言い辛いし
結局そんな入れ子構造になるコーディングするのが悪いってことなんかね

**Name_Not_Found** · 2017/06/01(木) 20:29:38.25

BEMは会社のコーディング規約として導入するものだ
あんなもんソロで覚えるもんじゃない。めんどくさいだけだぞ

**Name_Not_Found** · 2017/06/01(木) 20:31:23.02

>>85
最近部下が2名できて、今後も増えていきそうだからそろそろコーディング規約を作らなきゃなって思っていろいろ調べてるんだわ

**Name_Not_Found** · 2017/06/01(木) 22:36:06.43

見出しテキストの色が1文字ずつ違うデザインを貰ったのですが、実装するには1文字ずつspanなどで囲ってスタイルを書くことになるんでしょうか？
そういうソースはやはりSEO面を考えるとよろしくないでしょうか？
例えばソースは普通に書いて、JSを使ってspanで囲む処理を施すなどしても同じことでしょうか？

**Name_Not_Found** · 2017/06/01(木) 23:29:10.84

＞1文字ずつ違うデザイン
パチンコ屋かよｗ
俺なら差し戻す

どうしてもそれで行く場合はspanで囲むしか無い。jsなんて使わんわアホらしい
<span class="str_a">ア</span><span class="str_ho">ホ</span>

**Name_Not_Found** · 2017/06/02(金) 00:11:38.44

パチンコ屋なんだろ？
問題ないのに差し戻すなよ

**Name_Not_Found** · 2017/06/02(金) 00:51:35.42

見出しが 50個くらいあったら js 使うかな
それでもタグで囲む？

**Name_Not_Found** · 2017/06/02(金) 02:12:59.87

なんらかのスクリプト言語つかう

**Name_Not_Found** · 2017/06/02(金) 07:50:12.92

>>90
想像してワロタ

**Name_Not_Found** · 2017/06/02(金) 15:54:35.70

普通は画像にしちゃうでしょｗ
デザインした側も画像を想定してると思うんだけどｗ

**Name_Not_Found** · 2017/06/02(金) 17:49:00.94

実装側としてはモジュール化して使い回したほうが修正や運用が楽かなとは思うのですが…
とは言いつつ今のところ使ってる箇所は少ないですし、デバイスフォントでやろうとしたらどんな方法になるのかちょっと興味があったので… でももう面倒なので画像にしようと思います

ちなみにパチンコ屋ではないです、ありがとうございました。

**Name_Not_Found** · 2017/06/02(金) 18:40:44.80

>>94
＞実装側としてはモジュール化して使い回
ここまでひどいものはどう考えても画像にしたほうが良い

**Name_Not_Found** · 2017/06/02(金) 21:56:45.21

backgroundにグラデーションかけてテキストをtransparentにしたりしてうまいこと出来ないのかねぇ
出来そうで出来ないよなぁ

**Name_Not_Found** · 2017/06/02(金) 23:04:16.48

>>86
だからなに？

**Name_Not_Found** · 2017/06/02(金) 23:05:43.91

>>97
過去レスよめ

**Name_Not_Found** · 2017/06/02(金) 23:18:42.71

cssのコーディング規約は正直、めちゃくちゃ難しいと思う
あまりにも自由度が高すぎる

**Name_Not_Found** · 2017/06/03(土) 09:36:25.23

うん。
こうしなさい系は無理でしょうね。
これはダメ系なら可能かなあ。

**Name_Not_Found** · 2017/06/03(土) 10:44:49.28

実際ガチガチ大手以外は他人のCSS見て発狂しつつやってるんかね？だいたいのファウルラインだけ守ってればお互い空気読んでできるんかなぁ

**Name_Not_Found** · 2017/06/03(土) 11:29:05.09

大元がidで指定されてたりしてしねよってなることはあるよね

**Name_Not_Found** · 2017/06/03(土) 12:26:57.92

経験少ないと色々苦労するのがcss

**Name_Not_Found** · 2017/06/03(土) 13:35:28.40

id指定はjs以外で使わないでくれ
頼む

**Name_Not_Found** · 2017/06/03(土) 14:05:53.63

基本的な改行とかのルールですら策定してたら2時間も経ってた
グーグルのやつ丸パクリでも良かったんだけど
とりあえずBEMは反発ありそうだし俺もめんどいから採用見送るがOOCSSみたいなのにはならないようにしたいな

**Name_Not_Found** · 2017/06/03(土) 14:23:33.69

＞グーグルのやつ丸パクリ
これは止めといたほうが良い
googleのコーディングは特殊で、全部div、要素へのcss割当は一切しないというもの
<div class="a"><div class="b"><div class="c">・・・
のような形になっている
SEOを考えなくてもいいから考え方がまるで違う

**Name_Not_Found** · 2017/06/03(土) 14:24:33.80

とりあえずsassでいいんじゃないか
scssにもあるけど、入れ子は便利だし読みやすい

**Name_Not_Found** · 2017/06/03(土) 14:56:52.68

>>89
わろたw

**Name_Not_Found** · 2017/06/03(土) 17:31:34.55

>>106
しばりがあると間抜けなコーディングになるよな

**Name_Not_Found** · 2017/06/03(土) 20:27:44.01

sassをコンパイルする際にファイルパスにマルチバイト文字が含まれるとエラーが出るのですが、
なんとかマルチバイト文字が含まれる環境でコンパイルさせることは出来ないでしょうか？

**Name_Not_Found** · 2017/06/04(日) 00:41:56.51

XHTMLにおいてのdl要素の使い方はHTML5と同じですか？

**Name_Not_Found** · 2017/06/04(日) 02:17:57.99

>>107
同意
つかもう素でcss書くのはよほど小さいサイトじゃないとしたくない……

**Name_Not_Found** · 2017/06/04(日) 09:40:06.38

>>110
osや使っているツールくらい書けよ。
だから君はいつまで経っても初心者なんだよ

**Name_Not_Found** · 2017/06/04(日) 16:07:23.02

CSSの質問です

ttp://www.keni-customize.net/custom-midashi-design-555/
ここの見出しサンプル8をブログで使用していますが、
borderの線と次の行に表示されるブログの文との間隔を広げたいです

どうすれば良いでしょうか？

**114** · 2017/06/04(日) 16:33:24.62

早く答えろ

**Name_Not_Found** · 2017/06/04(日) 16:46:49.88

>>115
なりすましはやめてください

**Name_Not_Found** · 2017/06/04(日) 17:28:11.55

>>116
ソースがないからさっぱりわからないゾ
https://jsfiddle.net/4qjbskr4/

**Name_Not_Found** · 2017/06/04(日) 17:51:57.79

>>116
6行目を下記にする
margin: 0 0 1em 1.5em;

**Name_Not_Found** · 2017/06/04(日) 20:07:14.32

>>117-118
試してみたけど直りませんでした…
どうやらブログの見出し編集機能や改行のせいで詰まっていたみたいで、書き直してみたら直りました
お手数おかけして申し訳ありません

**Name_Not_Found** · 2017/06/04(日) 22:45:17.46

>>119
初歩からやりなおせよ

**Name_Not_Found** · 2017/06/04(日) 22:54:49.88

>>120
７六歩

**Name_Not_Found** · 2017/06/05(月) 01:30:34.77

フフ、穴熊だな

**Name_Not_Found** · 2017/06/05(月) 08:36:04.86

>>110
ファイルの先頭にcharset指定
日本語使わない場合は指定無しでok

基本はすべての.scssに入れるよ

**Name_Not_Found** · 2017/06/05(月) 11:52:18.62

今までtableでレイアウトデザインしてたけど
昨今はもうtableは良くないとのことだけど
table使わずにCSSでそれっぽくみせるのってどういう方法があるの？

**Name_Not_Found** · 2017/06/05(月) 11:54:57.42

ブラウザの表示倍率を変えても背景画像は変化しないんだけどなんで？

**Name_Not_Found** · 2017/06/05(月) 13:00:02.49

>>124
おまい最低10年遅れてるぞ。

**Name_Not_Found** · 2017/06/05(月) 13:28:01.44

>>125
フォントサイズだけ変えてるんじゃね？

**Name_Not_Found** · 2017/06/05(月) 13:53:24.56

>>127
フォンとか？！

**Name_Not_Found** · 2017/06/05(月) 18:49:10.62

ベンダープレフィックスは、すでにサポートされているプロパティに対しては機能しないのです？
例えば、IEのみ背景色を黒にしたい時の-ms-background-color:#000;など。
よろしくお願いします。

**Name_Not_Found** · 2017/06/05(月) 18:58:23.55

>>124
色々あるけど最近はflexが主流

個人的に好きなのはdtをfloatで浮かせてddを下に潜らせるやつ
あれ妙に使い勝手がいい

**Name_Not_Found** · 2017/06/05(月) 19:00:10.36

>>129
機能しないとは限らないが、いずれしなくなる
ベンダープレフィックスなしを必ず併記すること

**Name_Not_Found** · 2017/06/05(月) 19:29:43.50

>>126
役立たずは黙れよ。

**Name_Not_Found** · 2017/06/05(月) 20:38:09.89

テスト

**Name_Not_Found** · 2017/06/05(月) 22:16:29.79

>>124
昨今って・・・
いつの話をしてるんだよ。
前科持ちの極悪人が出所してきたのか？w

**Name_Not_Found** · 2017/06/05(月) 22:22:14.85

>>124
＞今までtableでレイアウトデザインしてたけど
すげーな。
h1とかのHタグはどうなるんだ？thの中に入れるのか？
まあレスポンシブもtableでも不可能ではないよな。相当面倒そうだが

**Name_Not_Found** · 2017/06/05(月) 22:32:54.39

htmlのtableはなぜヘッダ固定スクロールすらできないのですか
標準化委員会はちゃんと仕事してください

**Name_Not_Found** · 2017/06/05(月) 22:38:48.99

table内でpositionが効かなくなるのは何故ですか

**Name_Not_Found** · 2017/06/05(月) 22:50:23.50

>>137
効くよ

**Name_Not_Found** · 2017/06/06(火) 02:40:17.33

>>124
電話端末ならスマホとPHSぐらいズレてますな

**Name_Not_Found** · 2017/06/06(火) 07:51:31.48

>>136
これ何でだろうな
需要も凄まじく多いのに
未だにデファクトな方法すらない

**Name_Not_Found** · 2017/06/06(火) 09:23:40.58

言われてみればそうだよね。
エクセルとかではよくやってるだろうに。

**Name_Not_Found** · 2017/06/06(火) 14:27:26.63

>>140
jqで出来ないの？

**129** · 2017/06/06(火) 14:58:35.03

>>131
返答が遅れて申し訳ないです。
教えていただいたことを生かして勉強します。

ブラウザごとにレイアウトやデザインを変える場合はCSSハック？というものがよいのでしょうか。
てっきりベンダープレフィックスで分岐するような感じにするのかと思ってました。
いまだに何か大きな勘違いをしている気がします。

**Name_Not_Found** · 2017/06/06(火) 17:04:12.25

ベンダープレフィックスってデザインの分岐とかでなく
古いブラウザ対策とかそんな感じで使うんでないんかな

**Name_Not_Found** · 2017/06/06(火) 19:00:30.55

>>143
良くわからん内はブラウザごとに差異が無いように記述した方がいい
あとIE9以前は切り捨てるとかにした方がいい。めんどくさすぎる

**Name_Not_Found** · 2017/06/06(火) 19:41:35.65

端末ごとならわかるが
ブラウザごとにレイアウトやデザインを変えるケースなんてあるか？
もしやるならUAで分岐がいいと思うが。
ハックなんて死語になったな

**Name_Not_Found** · 2017/06/07(水) 00:41:28.71

IE8お断りと表示されるサイトとかかな

**Name_Not_Found** · 2017/06/07(水) 02:06:12.99

ff display:sticky;

**Name_Not_Found** · 2017/06/07(水) 08:55:45.46

ieは11以外無視で良い

**Name_Not_Found** · 2017/06/07(水) 09:34:14.15

11以外はサポート終了してるしな

**Name_Not_Found** · 2017/06/07(水) 09:35:25.77

ネスケはサポートしていませんｗ

**Name_Not_Found** · 2017/06/07(水) 12:22:04.33

自分で、全ブラウザの機能を調べて対応するのは、何年も掛かる

SASS を使えばいい。
bourbon など他人が作った、モジュールを読み込めば、自分で考える必要がない

**Name_Not_Found** · 2017/06/07(水) 13:16:54.08

現実的にはそうなのかも知れないけどそれは思考停止みたいで抵抗あるなぁ

**Name_Not_Found** · 2017/06/07(水) 13:47:22.88

>>153
jQuery教の信者がわくぞ

**129** · 2017/06/07(水) 15:38:44.57

皆さんレスありがとうございます。
今の自分には手に余るので無難に作成していきたいと思います。
ありがとうございました。

**Name_Not_Found** · 2017/06/07(水) 17:09:10.72

IE6を無視できるようになってからwebの進化が飛躍した気がする。
昔は透過pngすら面倒だったもんな

**Name_Not_Found** · 2017/06/07(水) 17:44:32.11

ベンダープレフィックスの話が出てたから色々いじってたんですけど
IEにだけ効かせるのって-ms-をプロパティの前に付けるだけじゃなかったでしたっけ？？
やってみたら機能しなかったデス(´・ω・`)

**Name_Not_Found** · 2017/06/07(水) 18:58:26.51

>>157
ベンダープレフィックスは試験的なものだし、プロパティによる
あまりに古いプロパティはベンダープレフィックスを付けると逆に動かない

**Name_Not_Found** · 2017/06/07(水) 20:04:12.53

>>158
そうだったんですね
レスThanksです
ベンダープレフィックス･･･恐ろしい子

**Name_Not_Found** · 2017/06/07(水) 22:10:28.89

ブラウザ間の非互換って人類規模で見たらとんでもない額の損失になるんじゃないか
サイトの数だけ非互換対応の工数がかかるわけだろ
異星人はそのへんもっと協調してスマートにやってるかもしれない

**Name_Not_Found** · 2017/06/07(水) 22:20:46.93

> ブラウザ間の非互換って人類規模で見たらとんでもない額の損失になるんじゃないか

言葉が違うことのほうが、人類規模で見たらもっととんでもない額の損失になるよ
いちいち翻訳しなければいけない。本、映画、なんでも

**Name_Not_Found** · 2017/06/07(水) 22:59:56.15

だあね

**Name_Not_Found** · 2017/06/07(水) 23:08:20.19

ナノでサイトを作りました。デザインはテンプレを借りました。
背景素材とは別に背景色を変更したくて、色の変更欄から変更しようとしたのですが白のまま選択した色になりません。
何が邪魔をしているのかわかる方いらしたら教えてください。エラーが出たので画像で失礼します。

全体レイアウトに入っているもの
http://fast-uploader.com/file/7052397827746/

HEAD・HTML詳細のHEAD内に入っているもの
http://fast-uploader.com/file/7052397455786/

**Name_Not_Found** · 2017/06/08(木) 00:24:25.50

怖くて開けん

**Name_Not_Found** · 2017/06/08(木) 08:45:25.87

>>152
sass使うことなんて当たり前
タスクランナー使おう。

**Name_Not_Found** · 2017/06/08(木) 08:50:02.27

めんどクセェよ
sassなどのメタcssを直接読み込めるように標準規格化しろ

**Name_Not_Found** · 2017/06/08(木) 08:56:42.93

css4で使えるようになると思うけど、まともに使えるようになるのは更に5年、10年後かもな

**Name_Not_Found** · 2017/06/08(木) 14:33:56.39

そもそもcssにバージョンという概念消えたからcss3だのcss4だのは存在しない

**Name_Not_Found** · 2017/06/08(木) 15:50:22.02

>>168
詳しく

**Name_Not_Found** · 2017/06/08(木) 18:08:27.76

>>169
https://drafts.csswg.org/css-2017/#css-levels
https://triple-underscore.github.io/css-snapshot-ja.html#css-levels

**Name_Not_Found** · 2017/06/08(木) 19:30:26.91

css4とみんながいい出したらLEVEL4と定義しそう

**Name_Not_Found** · 2017/06/08(木) 22:35:05.65

CSSのバージョンがなくなるって
現場的にはなんかちょっとめんどくせーな
説明するのにさ

**Name_Not_Found** · 2017/06/09(金) 01:51:36.03

>>124
懐かしいネタだな
でも講師も生徒も馬鹿ばかり集めてる専門学校だと
未だにテーブルレイアウトやfloatを必死に教えてるところもある

**Name_Not_Found** · 2017/06/09(金) 02:00:06.46

そろそろポトペタGUIで制作して
キレイなflexboxレイアウトのHTMLソースで出力してくれる
アプリケーションが出てもおかしくない時期だな

そういうのないの？

**Name_Not_Found** · 2017/06/09(金) 03:44:24.02

>>173
どこ？

**Name_Not_Found** · 2017/06/09(金) 08:38:15.43

>>170
Selectors Level 4 を CSS4 として解説してる日本語サイトが多い気がする
厳密には CSS だけの仕様ではないので、間違ってはいるんだが
https://triple-underscore.github.io/selectors4-ja.html

**Name_Not_Found** · 2017/06/09(金) 09:29:27.68

他に呼び名がないからね
仕方ないね

**Name_Not_Found** · 2017/06/09(金) 15:05:56.21

結論としてはスレチかもしれませんが、方法論としてどうすべきか分からなかったため
まずは質問させてください。
（昔HTMLをかじったり自鯖立てたりした程度の知識です）

動的にHTMLを生成するにはCGIに吐かせるしかないでしょうか？
多少凝ったページデザインでも、すべてCGIに吐かせるのでしょうか？
ページデザインが変更になったら、CGIですべて対応？

やりたいことは、品目選択ページで複数品目を選択したら、次のページでその選択した
品目を一覧形式（TABLE）で表示しつつ、また新たな項目を入力させるという感じの
ことをしたいのですが、CGIで実現可能だろうと思いつつ、長い目で見た場合
ページデザインが変更になったときの手間が大きすぎるのではないかと思いました。

今時の技術としては、普通にHTMLでページを作りながらも一部分だけ動的に追記・書き換えるような
うまいものがもしかしてあるのかなと思って質問させていただきました。

よろしくお願いします。

**Name_Not_Found** · 2017/06/09(金) 15:44:52.58

静的(内容が固定なものを静的、Staticという)HTMLとJavascriptを組み合わせて
一部分だけfetchやjQueryのAjaxを使って書き換えることは可能
またそういうwebアプリケーション向けのJavascriptフレームワークがある
ReactやVue.jsがそれ
初心者にはVue.jsのほうが分かりやすいと思う

サーバー側のテンプレートエンジンを使って一部分だけを書き換えたHTMLを出力することもできる
大抵のweb系言語には備わってるが、やってることは基本全部同じ
文法が若干違うだけ

流行りは前者だけど、フロントエンドエンジニアとバックエンドエンジニアの2人、あるいはどちらも出来るスーパーエンジニア1人を用意する必要があるので人的コストは高い
後者はバックエンドエンジニア1人で何とか出来るので楽

**Name_Not_Found** · 2017/06/09(金) 17:03:45.66

>>178
考え方はあってるよ
んでその変更の手間をどうにかしたいってみんな考えてて
プログラムと見た目を可能な限り切り離す工夫がたくさんある
MVCとかMVPとかMVVMとかでググると知りたいことが見つかるかもしれない

**Name_Not_Found** · 2017/06/09(金) 18:19:04.29

>>179
とてもわかりやすい解説でありがとうございます。
質問しなければとうていたどり着けなかったように思います。
勉強しなければいけないことが膨大にあることも分かりましたが、
なんとか頑張ってみます。
ありがとうございました。

>>180
ググってみて最初は概念の話かふむふむと見ていたのですが、
.NETやWPFの話が出てきてかなりイメージがつかめてきました。
ありがとうございます。

**Name_Not_Found** · 2017/06/09(金) 18:36:01.58

WPFは明後日の方向だぞ
それはWindows上で動作するスタンドアロンアプリケーションだ
HTML5/CSS3/Javascriptを駆使したwebアプリケーションを作りたいなら
Java、Golang、Node.js、Python、Ruby、PHP、ここから自分にあった言語を学びなされ

**Name_Not_Found** · 2017/06/09(金) 18:39:11.50

どちらにせよHTMLとCSSを効率よく記述するにはNode.jsで作られたビルドツールが必要なので
サーバーサイドもNode.jsにしたほうがいいかもしれない
覚えることが少なくて済む

**Name_Not_Found** · 2017/06/09(金) 19:57:10.40

サーバーサイドレンダリングでゴリ押しするより
フロントはフロントに集中してサーバーサイドはREST APIに集中したほうが生産性も品質も高いしスキルも要らないよね？

**Name_Not_Found** · 2017/06/09(金) 21:02:05.76

>>173
floatダメなの？

**Name_Not_Found** · 2017/06/09(金) 21:08:22.59

最近はinline blockが基本だろ

**Name_Not_Found** · 2017/06/09(金) 21:11:15.48

>>186
使い分ける状況とかもあるわけでなく
inline-blockさえ使っておけばいいんでしょうか？

**Name_Not_Found** · 2017/06/09(金) 21:59:51.93

>>187
そんなことはない
横並びする要素がinline-block以外でなければいけないこともある
要素同士の間に改行やインデントがあることもある

なので横に並べる手段は
floatもinline-blockもtable-cellもflexも全部使えなきゃ困る

**Name_Not_Found** · 2017/06/09(金) 22:05:19.38

>>187
flexを死ぬほど勉強しろ。
これだけでほとんどのパターンに対処できる

昔はこうしてたな
li {
display:inline-block;
}
<li>list1
<li>list2
<li>list3
綴じ括弧を省略すれば改行やインデントは考慮しなくて良くなる
ただエディタによっては
<li>list1
　<li>list2
　　<li>list3
と入れ子として解釈されることがあるので、かなり不便
flexが広まってくれたお陰で、このあたりは無理しなくて良くなった

**Name_Not_Found** · 2017/06/09(金) 22:38:51.46

それW3C ＯＫなの？

**Name_Not_Found** · 2017/06/09(金) 22:42:20.42

liは省略可能だけど気持ち悪いから1行でも必ず閉じるね

**Name_Not_Found** · 2017/06/09(金) 22:43:53.47

>>190
ok
liとdd、他幾つかは省略できる。
bodyは開始タグすら不要
しかし可読性と気持ち悪さでつい書いてしまうな

**Name_Not_Found** · 2017/06/09(金) 23:09:09.25

省略できるぐらいならいいけど
モノによっては閉じタグ書いちゃダメって仕様にした馬鹿は何を考えてたんだろうな

**Name_Not_Found** · 2017/06/10(土) 00:17:30.47

古いIEは切り捨ててFlexboxのみでいいよ
どうしても対応しなきゃいけない場合はポリフィルしろ
https://github.com/jonathantneal/flexibility

**Name_Not_Found** · 2017/06/10(土) 02:12:18.40

そもそもfloatはテキストの回りこみでtableは表組みなわけで
他に方法がなかった昔ならともかく現在では横並びのレイアウトのために使うのはバッドノウハウになりつつあるのでは

**Name_Not_Found** · 2017/06/10(土) 06:54:03.06

新規開発でflexbox使わないのは有り得ないな

**Name_Not_Found** · 2017/06/10(土) 07:56:12.18

□□　テキストテキス
□□　トテキストテキ
ストテキストテキスト

古臭い段組みだけど、こういうレイアウトの時はfloatを使う？

**Name_Not_Found** · 2017/06/10(土) 08:08:43.22

>>197
それがfloatの本来の使い方だと思う

**Name_Not_Found** · 2017/06/10(土) 15:58:37.39

CSS何で記述してる？手書き？VSCode的なの使ってる？

**Name_Not_Found** · 2017/06/10(土) 16:20:07.65

sublimetextでベタ打ち
cssはテキトーになってきたわ。