HTML/CSS の質問に優しく答えるスレ 27

1 ：Name_Not_Found ：2017/05/20(土) 19:13:26.64 ID:???.net

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

類似質問大いに結構。分からない人は何回聞いても結構
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/

2 ：Name_Not_Found：2017/05/20(土) 19:19:16.63 ID:???.net

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

3 ：Name_Not_Found：2017/05/20(土) 19:48:25.55 ID:???.net

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

4 ：Name_Not_Found：2017/05/20(土) 22:37:51.89 ID:???.net

>3
一括だとjsになる

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

5 ：Name_Not_Found：2017/05/21(日) 01:45:44.40 ID:???.net

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

6 ：Name_Not_Found：2017/05/21(日) 08:03:46.72 ID:???.net

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

7 ：Name_Not_Found：2017/05/21(日) 11:15:52.00 ID:n45lLItz.net

: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>

8 ：Name_Not_Found：2017/05/21(日) 11:30:06.88 ID:???.net

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

9 ：Name_Not_Found：2017/05/21(日) 11:39:06.67 ID:???.net

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

10 ：Name_Not_Found：2017/05/21(日) 13:05:52.16 ID:???.net

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

11 ：Name_Not_Found：2017/05/21(日) 16:28:20.03 ID:n45lLItz.net

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

12 ：Name_Not_Found：2017/05/21(日) 16:38:25.18 ID:???.net

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

13 ：Name_Not_Found：2017/05/21(日) 16:57:41.39 ID:???.net

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

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

14 ：Name_Not_Found：2017/05/21(日) 17:21:39.58 ID:???.net

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

15 ：Name_Not_Found：2017/05/21(日) 18:41:21.65 ID:???.net

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

16 ：Name_Not_Found：2017/05/21(日) 18:48:43.66 ID:???.net

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

17 ：Name_Not_Found：2017/05/21(日) 20:23:32.44 ID:???.net

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

18 ：Name_Not_Found：2017/05/21(日) 21:06:11.95 ID:???.net

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

19 ：Name_Not_Found：2017/05/21(日) 22:31:22.23 ID:???.net

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

20 ：Name_Not_Found：2017/05/22(月) 00:47:24.75 ID:???.net

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

21 ：15：2017/05/22(月) 01:14:08.92 ID:???.net

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

22 ：Name_Not_Found：2017/05/22(月) 01:40:39.35 ID:???.net

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

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

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

23 ：Name_Not_Found：2017/05/22(月) 03:09:31.84 ID:dPG6Pv89.net

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

24 ：Name_Not_Found：2017/05/22(月) 03:25:28.39 ID:???.net

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

25 ：Name_Not_Found：2017/05/22(月) 07:20:47.01 ID:???.net

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

26 ：Name_Not_Found：2017/05/22(月) 11:03:52.95 ID:+XpcZui+.net

包茎は美しい
童貞は天使

27 ：Name_Not_Found：2017/05/22(月) 12:11:41.97 ID:???.net

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

28 ：Name_Not_Found：2017/05/22(月) 16:08:24.15 ID:???.net

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



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

29 ：Name_Not_Found：2017/05/22(月) 16:15:05.07 ID:???.net

>>27
line-clamp

30 ：Name_Not_Found：2017/05/22(月) 17:12:51.40 ID:???.net

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

31 ：Name_Not_Found：2017/05/22(月) 18:03:41.99 ID:LLo8GGde.net

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ソースを書き加えて使っていますが
何か間違っているのでしょうか？

32 ：Name_Not_Found：2017/05/22(月) 18:28:33.32 ID:???.net

npm init
npm install bulma --save

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

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

33 ：Name_Not_Found：2017/05/22(月) 19:17:06.93 ID:???.net

>>29
>>30

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

34 ：Name_Not_Found：2017/05/22(月) 20:15:27.50 ID:???.net

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

35 ：Name_Not_Found：2017/05/22(月) 20:58:00.40 ID:???.net

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

36 ：Name_Not_Found：2017/05/22(月) 21:01:39.65 ID:???.net

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

37 ：Name_Not_Found：2017/05/22(月) 21:10:07.97 ID:???.net

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

38 ：Name_Not_Found：2017/05/23(火) 12:32:31.52 ID:4zAH7YKX9

超初心者なのですがお尋ねします

無料ブログBloggerなどで自分のブログにiframe↓を使って他のサイトのwidget
を表示させたいのですがうまくいきません。HTML欄に入力しても表示されません
でした。どうすればうまく表示させられますか

<iframe width="650px" height="310px" src="//widget.sentryd.com/widget----------------" ></iframe>

39 ：38：2017/05/23(火) 13:22:12.00 ID:4zAH7YKX9

すみません
自己解決しました

40 ：Name_Not_Found：2017/05/25(木) 11:57:05.38 ID:ENMglAQD.net

すいません、教えてください。
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;
…

41 ：Name_Not_Found：2017/05/25(木) 12:17:13.89 ID:OjbW563s.net

>>40
-webkit-appearance: none;

42 ：Name_Not_Found：2017/05/25(木) 12:31:16.28 ID:ENMglAQD.net

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

43 ：Name_Not_Found：2017/05/25(木) 19:29:57.72 ID:???.net

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

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

44 ：Name_Not_Found：2017/05/25(木) 19:58:17.48 ID:???.net

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

45 ：Name_Not_Found：2017/05/25(木) 20:11:24.04 ID:???.net

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

46 ：Name_Not_Found：2017/05/25(木) 20:11:55.31 ID:???.net

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

47 ：Name_Not_Found：2017/05/25(木) 20:33:27.74 ID:???.net

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

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

>>46
個人的には普段Chrome

48 ：Name_Not_Found：2017/05/26(金) 00:28:10.55 ID:zN4cHzIx.net

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

49 ：Name_Not_Found：2017/05/26(金) 02:34:27.95 ID:???.net

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

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

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

50 ：Name_Not_Found：2017/05/26(金) 09:31:40.32 ID:???.net

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

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

51 ：Name_Not_Found：2017/05/26(金) 10:59:07.72 ID:???.net

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

52 ：Name_Not_Found：2017/05/26(金) 11:15:31.95 ID:???.net

CSSの方が軽くなるでしょ

53 ：Name_Not_Found：2017/05/26(金) 12:53:32.69 ID:???.net

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

54 ：Name_Not_Found：2017/05/26(金) 12:54:30.89 ID:???.net

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

55 ：Name_Not_Found：2017/05/26(金) 13:28:33.78 ID:???.net

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

56 ：Name_Not_Found：2017/05/26(金) 16:01:13.59 ID:???.net

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

57 ：Name_Not_Found：2017/05/26(金) 20:53:35.53 ID:???.net

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

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

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

58 ：Name_Not_Found：2017/05/26(金) 20:56:13.32 ID:???.net

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

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

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

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

59 ：Name_Not_Found：2017/05/26(金) 21:04:16.74 ID:???.net

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

60 ：Name_Not_Found：2017/05/26(金) 21:46:40.34 ID:???.net

>>59
あげあし厨かよ

61 ：Name_Not_Found：2017/05/29(月) 11:06:48.21 ID:a4eYAfkz.net

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

62 ：Name_Not_Found：2017/05/29(月) 14:36:15.82 ID:???.net

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

63 ：Name_Not_Found：2017/05/29(月) 18:42:31.26 ID:???.net

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

64 ：Name_Not_Found：2017/05/29(月) 19:41:10.43 ID:6WDUis/I.net

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

65 ：Name_Not_Found：2017/05/29(月) 21:08:38.46 ID:???.net

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

66 ：Name_Not_Found：2017/05/29(月) 21:10:01.01 ID:???.net

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

67 ：Name_Not_Found：2017/05/29(月) 21:12:25.70 ID:???.net

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

68 ：Name_Not_Found：2017/05/29(月) 21:21:58.22 ID:???.net

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

69 ：Name_Not_Found：2017/05/29(月) 22:02:48.38 ID:???.net

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

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

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

70 ：Name_Not_Found：2017/05/29(月) 22:03:49.85 ID:???.net

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

71 ：Name_Not_Found：2017/05/29(月) 23:46:50.65 ID:6WDUis/I.net

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

72 ：Name_Not_Found：2017/05/29(月) 23:53:47.52 ID:???.net

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

73 ：Name_Not_Found：2017/05/30(火) 00:07:28.56 ID:???.net

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

74 ：Name_Not_Found：2017/05/30(火) 00:10:51.78 ID:???.net

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

75 ：Name_Not_Found：2017/05/30(火) 00:17:04.03 ID:???.net

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

76 ：Name_Not_Found：2017/05/30(火) 00:18:54.43 ID:???.net

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

77 ：Name_Not_Found：2017/05/30(火) 01:34:07.60 ID:???.net

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

78 ：Name_Not_Found：2017/05/30(火) 02:28:40.73 ID:???.net

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

79 ：Name_Not_Found：2017/05/30(火) 02:37:49.14 ID:???.net

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

80 ：Name_Not_Found：2017/05/30(火) 09:27:33.68 ID:???.net

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

81 ：Name_Not_Found：2017/05/30(火) 18:54:45.17 ID:???.net

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

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

82 ：Name_Not_Found：2017/05/30(火) 19:24:52.42 ID:???.net

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

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

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

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

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

83 ：Name_Not_Found：2017/05/30(火) 19:52:58.26 ID:???.net

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

84 ：Name_Not_Found：2017/05/30(火) 22:16:13.08 ID:???.net

>>80
> 「コメントフォームを開くためのリンク」なんだから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に対するリンクであるという考え方が重要
（未だにテーブルタグでレイアウトするような人にならないように注意ｗ 正しい使い方をしましょう）

85 ：Name_Not_Found：2017/05/30(火) 22:32:36.77 ID:???.net

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

ちなみに、これが実現方法の一つな。: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疑似クラスなんてものが作られたかというと、
それこそリンクをリンクとして正しく使いましょうという話で
その正しい使い方における画面表示の制御方法として生まれたわけだよ。

86 ：Name_Not_Found：2017/06/01(木) 20:26:07.17 ID:???.net

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

87 ：Name_Not_Found：2017/06/01(木) 20:29:38.25 ID:???.net

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

88 ：Name_Not_Found：2017/06/01(木) 20:31:23.02 ID:???.net

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

89 ：Name_Not_Found：2017/06/01(木) 22:36:06.43 ID:???.net

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

90 ：Name_Not_Found：2017/06/01(木) 23:29:10.84 ID:???.net

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

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

91 ：Name_Not_Found：2017/06/02(金) 00:11:38.44 ID:???.net

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

92 ：Name_Not_Found：2017/06/02(金) 00:51:35.42 ID:???.net

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

93 ：Name_Not_Found：2017/06/02(金) 02:12:59.87 ID:???.net

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

94 ：Name_Not_Found：2017/06/02(金) 07:50:12.92 ID:???.net

>>92
想像してワロタ

95 ：Name_Not_Found：2017/06/02(金) 15:54:35.70 ID:???.net

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

96 ：Name_Not_Found：2017/06/02(金) 17:49:00.94 ID:???.net

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

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

97 ：Name_Not_Found：2017/06/02(金) 18:40:44.80 ID:???.net

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

98 ：Name_Not_Found：2017/06/02(金) 21:56:45.21 ID:???.net

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

99 ：Name_Not_Found：2017/06/02(金) 23:04:16.48 ID:???.net

>>88
だからなに？

100 ：Name_Not_Found：2017/06/02(金) 23:05:43.91 ID:???.net

>>99
過去レスよめ