HTML/CSS のどんな質問に必ず優しく答えるスレ 31

1Name_Not_Found2018/01/27(土) 13:50:08.11ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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

2Name_Not_Found2018/01/27(土) 14:35:46.39ID:???
次スレ立てる人は「も」を忘れないように

3Name_Not_Found2018/01/27(土) 15:27:47.66ID:???
「も」が無いのか
「どんな」が有るのか

4Name_Not_Found2018/01/27(土) 16:13:21.66ID:???
「必ず」もあるぞ

5Name_Not_Found2018/01/27(土) 18:49:42.53ID:???
前スレに書いてしまった。 キャプション折り返す奴はこれでいいだろ

<style>
.hoge{
display: table;
width: 0.1%;
}
</style>

<figure class="hoge">
<img src="https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png">
<figcaption>
あともう1つききたいんですけど
画像の下に長い文章かいたときに画像の幅で折り返すっていうの画像の幅を指定せずにかけたりしますか?
</figcaption>
</figure>

6Name_Not_Found2018/01/27(土) 19:09:03.68ID:???
俺が書けたりします(できます)て答えたのに
できないって事で勝手に進めるなよな

7Name_Not_Found2018/01/27(土) 20:06:05.07ID:???
やっぱりここにいるプロの方でもすぐできない難しいことみたいだしあきらめます
ありがとうございました

8Name_Not_Found2018/01/27(土) 20:16:00.62ID:???
今度はなりすましもNGって書いておかないとな
すぐにバレるのに

9Name_Not_Found2018/01/27(土) 21:19:22.18ID:???
>>7
>>5に回答書いただろ?

10Name_Not_Found2018/01/27(土) 21:49:37.89ID:???
996 名前:Name_Not_Found[sage] 投稿日:2018/01/27(土) 21:23:01.87 ID:???
>>994
わああああああああ
素敵すぎます
できるだけじゃなくてこんなシンプルにかけるんですね
ありがたく使わせていただきます
作ってもらってばっかりでほんと申し訳ないんです

HTML勉強したのが4.01トラディショナルとかだったので
float left ぐらいでしか特殊レイアウトできなくて
いまdisplay スタイルでいろんなことができちゃうんですね
ほんと学校でCSS勉強したかったです><

11Name_Not_Found2018/01/28(日) 01:56:48.90ID:???
>>10
トラディショナルじゃなくて、
トランジショナルな。

12Name_Not_Found2018/01/28(日) 08:04:15.30ID:1G5DWVyR
親となるブロック要素の、最初の子要素にmargin-topがあると
親ブロック要素そのものの位置が変わってしまうように見えるのはなぜでしょうか

* { margin: 0; padding: 0; }
div.parent { background-color: pink; }
p.child { background-color: green; margin-top: 30px; }
p.test { background-color: blue; }

<div class="parent"><p class="child">child</p></div>

上のように書くと、divの座標自体が30px分下にずれてしまいます
最初に30pxの高さのdivの背景色pinkが、次に背景色greenのpの領域が、表示されるものとばかり考えていました

<div class="parent"><p class="test">test</p><p class="child">child</p></div>
このように最初の子要素にmarginを持たない<p>が入る場合は期待通りになります

13Name_Not_Found2018/01/28(日) 08:11:12.50ID:1G5DWVyR
何が困るのかというと
>>12の例では親ブロック要素が30px分下がった位置から開始されてしまうため
親ブロック要素の高さを固定値で指定していて高さが300pxだとすると
親ブロック要素が終わる位置が330pxになってしまいます

最初の子要素にmarginではなくpaddingで指定しておけば
>>12の例ではおおよそ期待通りになります
marginではなくpaddingなので当然これはこれで困る場面もあるんですが

どういう仕組みでこういうことになるんでしょうか

14Name_Not_Found2018/01/28(日) 08:21:48.89ID:1G5DWVyR
自己解決しました
CSSの仕様にきっちり書かれてました・・・

15Name_Not_Found2018/01/28(日) 12:47:04.90ID:???
お、おう?

16Name_Not_Found2018/01/28(日) 14:13:47.77ID:BJnubKTh
ttp://vr-lab.voyagegroup.com/entry/2016/11/16/122115
ここのサイトを参考にしてHTMLのDIV要素をA-Frameライブラリで描画しようと思ったんだけど、
VR空間に描画した平面オブジェクトのほかに元となるDIV要素も表示してしまうのって何とかならないかな
元のDIV要素だけ消したくてCSSのdisplayプロパティやvisibilityプロパティも試してみたんだけどVR空間での表示も消えてしまうんだよね

17Name_Not_Found2018/01/28(日) 14:21:20.15ID:+A6VtUQD
自作のWEBサイトで、自分がアクセスした場合には、[管理者]みたいなボタン
を表示したいのです。
自分のIPアドレスが固定ならそのIPで判断できますが、IPアドレスがよく変わるんです。ですのでIPアドレスで判定する方法が使えません。
良い方法を教えてください。

18Name_Not_Found2018/01/28(日) 15:18:19.65ID:???
それphpとかrailsとかでやる話ではなくて?
ブラウザ側でやるの???

19Name_Not_Found2018/01/28(日) 15:22:39.57ID:+A6VtUQD
>>18
サーバー側です

20Name_Not_Found2018/01/28(日) 15:55:40.47ID:???
じゃこのスレの担当分を回答しときますね。
<button>[管理者]</button>

21Name_Not_Found2018/01/28(日) 16:36:36.48ID:???
>>17
アクセスしてきた人をいわゆる"認証"以外で判断する方法はない
管理者用ログインページのURLをリンク・公表せずに、ブラウザのアドレス欄に直入力するのがベスト

URLを公表していなくても通信傍受などでバレることはあるのでパスワード制限は必須

22Name_Not_Found2018/01/28(日) 16:55:23.52ID:+A6VtUQD
>>21
ありがとうございます。
良く分からないのですが、
私の自宅からそのサイトにアクセスしていて
誰がどういう手段で通信傍受をするのでしょうか?
簡単な例を教えて下さい。

23Name_Not_Found2018/01/28(日) 17:06:03.28ID:???
>>21
スレ違いに甘い顔して調子に乗らせたんだから最後まで責任とれよ?逃げんなよ?

24Name_Not_Found2018/01/28(日) 17:29:15.52ID:???
>>17>>22
ログインすればいいだけだろう
そういうシステムを0から作るよりも、wordpressを覚えてログイン周りだけはwordpressに任せたほうが良い

25Name_Not_Found2018/01/28(日) 17:35:46.61ID:???
>>22
通信傍受をマネする人が出ないとも限らないのであえて難しい方法で

パソコンにウイルスを仕込んで、アクセスしているURLを入手する
一般的にはキーロガーも一緒に仕込んでURLとパスワードをセットにして入手するでしょうけどね

26Name_Not_Found2018/01/28(日) 17:54:09.19ID:???
>>21のせいでスレ違いのレスが増えていく…

27Name_Not_Found2018/01/28(日) 17:58:12.82ID:???
>>12のマージン相殺ってなんで横方向では起きないんだろうか
歴史的経緯とか?組版由来?

28Name_Not_Found2018/01/28(日) 20:17:09.73ID:???
>>22
私たちはGoogle先生に常にアクセスを報告してます

29Name_Not_Found2018/01/28(日) 22:31:26.58ID:???
質問ですが、facebookの個人アカウントの投稿内容をタイムラインとして運営サイトに埋め込みたいのですが、
上手くいきません(タイムラインとしてサイトに表示されない)

どうすればタイムラインとして表示可能でしょうか?

30Name_Not_Found2018/01/29(月) 02:05:28.52ID:???
>>29
これ見てもダメなら駄目なんだと思う(色々な意味で)
https://usortblog.com/easy-facebookpage-embed/

31Name_Not_Found2018/01/29(月) 07:39:54.93ID:???
何も表示されないならタグミスだし
違うものが表示されるなら埋め込んでるURLが違うだけだからこのスレの範疇じゃない

32Name_Not_Found2018/01/29(月) 10:32:47.26ID:???
アドブロックが有効になっていましたというオチを期待

33Name_Not_Found2018/01/29(月) 14:02:27.11ID:???
やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci

この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです

掻い摘んで説明すると

・創価学会は、町内会や老人会、PTA、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
 90年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた

・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
 防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった

・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
 創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
 防パトに尾行や監視、付き纏いをさせるようになった

・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
 不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった

・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
 私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
 防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた(防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官)
 ※これに加えて防犯要員が同様のお願いをして回る

・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った

つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕

詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/

34Name_Not_Found2018/01/30(火) 02:09:36.05ID:???
DWのCS3使ってるんだけど、
Sassと互換性ないからSassを覚える気になれない。
どうしたもんかのお

35Name_Not_Found2018/01/30(火) 05:36:59.69ID:???
いま必要ないものを無理に学んでも
ほとんどの場合は幸せにならない

36Name_Not_Found2018/01/30(火) 07:51:35.64ID:???
>>34
いまドリ使ってる人中々いないぞ

VScode
Brackets
Atom
SublimeText
などなどフリーの高機能エディタの方が圧倒的に現場で使われてる

37Name_Not_Found2018/01/30(火) 11:14:37.31ID:???
>>36
vsc まだまだ微妙
brackets プチフリ多発
atom 重い
sublime バグあり
dw 検索便利

お前のいう現場はどこのなんの現場で何に使われてるの?
ほんとに圧倒的というほど現場を見てきたの?

38Name_Not_Found2018/01/30(火) 11:52:03.78ID:???
brackets→VSCodeと来たけどオーサリングソフトも使ってみたいぜ。
まだまだDWなの?Museってどう?使いもんになってる?

39Name_Not_Found2018/01/30(火) 12:25:10.92ID:???
俺は旧dw→dwcs→bracket→dwcc→sublimeだけどたまにdwも使うな

テーブルとか作るの楽だし確かに検索も使いやすいよね
他のはプレビュー機能がなぁーって感じもする

museは結局position.absoウンコ書き出しだろ

40Name_Not_Found2018/01/30(火) 12:37:27.60ID:???
>>37
お前はGoogleも知らないのか?

41Name_Not_Found2018/01/30(火) 12:50:20.19ID:???
museダメなのか…がっくし
どうせブラウザでの挙動確認しながらやるのでプレビューはいいんだがローカルサーバー立てるのbracketsはデフォの稲妻ボタン一発で楽だったな。
VSCodeではコマンドで立ち上げてる。拡張機能あるんだろうけどなまくらして調べてない。

42Name_Not_Found2018/01/30(火) 13:56:21.13ID:???
DWなんて正規表現使うときしか開かんわ
拡張出来ないし無駄な機能多いし起動遅いし

43Name_Not_Found2018/01/30(火) 14:16:46.08ID:???
>>40
知らなかったらなんだ?
じゃあgoogleで圧倒的な現場の数を確認できる方法おしえてよ

44Name_Not_Found2018/01/30(火) 14:45:42.26ID:???
>>43
現場で仕事したことある?

https://www.slideshare.net/mobile/uzuflat/2016-66421027
2年前のアンケートですらドリとそれ以外とで圧倒的な差があるのは見てわかるよね?

逆に圧倒的にドリ以外のエディタが使われてないソースを提示しておくれよ

45Name_Not_Found2018/01/31(水) 02:25:26.58ID:???
>>44
SublimeTextがDWの2倍以上あるね
たぶん今はAtomが一番で、SublimeTextが二番
DWは三番以下に落ちていそう

46Name_Not_Found2018/01/31(水) 08:00:38.97ID:???
>>45
今はAtomとVScodeで1位で2位争ってる気がするな。
うちの会社では半数以上がAtomからVScodeに乗り換えてた
Sublimerはガクっと減った印象。DW使いはここ数年で見かけたことないわ

47Name_Not_Found2018/01/31(水) 08:08:51.06ID:???
俺もSublimeTextからatomに乗り換えた
atomは当初、PCとの相性か何かでものすごく重かったんだけど今はそんな問題なくなってるみたいね

しかしMSがVScodeなんて神アプリダストは思わなかったゾ

48Name_Not_Found2018/01/31(水) 08:22:29.42ID:???
AnglarはVScodeとTypeScriptで開発されてるらしいゾ。

49Name_Not_Found2018/01/31(水) 12:23:13.40ID:???
DW 対 フリー高機能エディター(全て) ってくくりは流石にハンデ有りすぎるだろwww
イラレフォトショつかうためにCC入ってりゃ一緒に使えるんだしウェブデザイナーってくくりでいったらフリーソフトみたいなもんじゃないの

50Name_Not_Found2018/01/31(水) 12:28:15.53ID:???
うちは地方都市だけど
Webデザイナーの求人見てたら
まだちょくちょくフォトショイラレに加えてDW使える方
って条件をよく見るよ
むしろDW以外のソフト名が書かれてるのは見たことないw

51Name_Not_Found2018/01/31(水) 12:29:41.61ID:???
DWはいいのに後継のmuseがダメなのはなぜ?
position.absoウンコ書き出しってどういうこと?
使ってみたことある人くわしく教えて

52Name_Not_Found2018/01/31(水) 13:50:35.88ID:???
>>50
Adobe使うんだからdwはデフォ、使えて(使ったことあって)当たり前でその他のフリーエディターは個人で効率アップで使うならお好きにどうぞってかんじでだろうね

53Name_Not_Found2018/01/31(水) 13:58:16.58ID:???
>>51
MuseはDWの後継じゃないよ
どちらかというとビルダーとかのどこでも配置系の流れ

54Name_Not_Found2018/01/31(水) 14:16:41.70ID:???
ハンデもクソも無いけどな。実際にDWが現場で使われてるか使われてないかって話じゃないの?
まぁもしも社員全員がDW使ってるような会社があんならロクな制作会社じゃないだろうな。まじで。

55Name_Not_Found2018/01/31(水) 19:15:10.72ID:???
>>54
DWかどうかは別として環境統一してないほうがロクな会社じゃないだろ…
数人規模とかなら別だけど

56Name_Not_Found2018/01/31(水) 20:12:31.68ID:???
Atom 194件
Sublime 205件
Dreamweaver 5483件

求人件数 indeed調べ

57Name_Not_Found2018/01/31(水) 20:22:18.28ID:???
>>55
おいおいEditorConfigも使えないDWで環境統一できんのかよ

58Name_Not_Found2018/01/31(水) 20:25:35.88ID:???
>>55
現場でお仕事したことないからそんなこと言えるんだろうな。ほんとに現役のコーダー(笑)さんですか?

59Name_Not_Found2018/01/31(水) 21:35:09.28ID:???
日本語不自由なのかな?

60Name_Not_Found2018/01/31(水) 21:40:28.73ID:???
DWって使ったことないんだけどすぐに覚えられるのかな?

61Name_Not_Found2018/01/31(水) 21:41:29.98ID:???
覚えることなんてコーディング以外になにかあんのか?

62Name_Not_Found2018/01/31(水) 21:43:55.48ID:???
いやソフトの使い方とかw

63Name_Not_Found2018/01/31(水) 22:34:19.41ID:???
DWをただのテキストエディタとして使えばいいよw
そうすりゃDWのクソな使い方を覚える必要はない

64Name_Not_Found2018/02/01(木) 07:58:34.09ID:???
DWは削除のショートカットが間違いやすいという恐怖仕様だったな
あれのせいで使うのやめた

65Name_Not_Found2018/02/01(木) 10:48:32.37ID:???
dwこだわってるやつ多すぎだろw
はなからビヘイビア?とか使ってる奴なんていないしコードかくのってスクラッチ前提だろ
余計な機能がついてて分かりにくい!とかさー使うわなきゃいいだけじゃんそんな機能
重いとかいうけど別にどれもたいして変わらないーって思ったけどカフェでノート勢か!そりゃ重いのきになるねw

66Name_Not_Found2018/02/01(木) 11:06:14.75ID:???
重さはエディタによってまじで違う。重さの違いがわからないなんて、対したソース書いたこと無いんだろうな

67Name_Not_Found2018/02/01(木) 11:16:27.85ID:a8OQoX1n
自分今台湾のシリコンバレーと言われている場所へ週に何度か行って
現地のエンジニアさんと一緒に仕事するんだけど
DW使ってるの一人も見たことないw
VSCが一番多いかな。

DWでも良いけど効率落ちるよね。
社内がソレ指定してるんなら仕方ないが。

68Name_Not_Found2018/02/01(木) 11:24:14.23ID:???
世界的に見ても超絶圧倒的にVSCだろうな
DW指定の会社なんて素人集団だろ。テーブルレイアウトとかしてそう

69Name_Not_Found2018/02/01(木) 12:02:22.64ID:???
わかりやすいDWディス基地の再来www
あんな過去ソフトほっときゃいいのに相当根が深いな

70Name_Not_Found2018/02/01(木) 12:06:31.96ID:???
丁度いいからvscで聞きたいんだけどtag〜tagの選択ってどうしてる?
sublimeでいうとctrl+,のやつ
ショートカットみても乗ってないんだよね

71Name_Not_Found2018/02/01(木) 12:30:44.57ID:???
Adobeってフォトショやイラレについては圧倒的なシェアのはず?なのに
DWについてはダメダメなのね

72Name_Not_Found2018/02/01(木) 12:59:18.81ID:???
>>70
閉じてShiftクリックで全選択しちゃうわ

>>71
フォトショやイラレはそれに変わるツールが中々ないからな。
コーディングに関してはメモ帳でもできることだし、それだけツールが充実してる

73Name_Not_Found2018/02/01(木) 19:41:50.90ID:???
<td>にvertical-align設定してもきかないんだけどなんでかな…

<td style="vertical-align:top">
連絡先:<span style="display:inline-block">mail<br>twitter</span>
</td>

これで連絡先の部分が下にくっついちゃってかっこわるい
上にくっつけたいんだけど…

74Name_Not_Found2018/02/01(木) 20:08:33.00ID:???
>>73
vertical-align:top;をspanに移してみる

75Name_Not_Found2018/02/01(木) 20:40:47.63ID:???
わああ すごいすごい
うまくいきました!!!
ありがとうございます!

でも span の範囲の外なのになんで valaign されるの???
なんでこうなるのかぜんぜん意味がわからない…

76Name_Not_Found2018/02/01(木) 23:24:57.08ID:???
inline-blockだもん

77Name_Not_Found2018/02/02(金) 07:07:20.74ID:???
>73-74
これ何で変わるの?
flexに頼り切りだからマジでわからん

78Name_Not_Found2018/02/02(金) 07:44:50.23ID:???
またわからないことがおこったんだけど…

<div style="display:inline-block; min-width:33%; margin:0">1</div>
<div style="display:inline-block; min-width:33%; margin:0">2</div>
<div style="display:inline-block; min-width:33%; margin:0">3</div>

これでなんで3行になっちゃうの?
横に3つならべたいんだけど

79Name_Not_Found2018/02/02(金) 07:46:41.49ID:???
ごめん3行じゃない 折り返して2行になっちゃう

80Name_Not_Found2018/02/02(金) 07:46:50.31ID:???
ならないよ

<div>1</div><div>1</div><div>1</div>
div {
display: inline-block;
min-width: 33%;
}

81Name_Not_Found2018/02/02(金) 07:47:24.56ID:???
paddingかなんかはいってるんじゃない
それか改行文字が半角スペースになっているか

82Name_Not_Found2018/02/02(金) 09:00:13.65ID:???
親要素にletter-spacing: -.4em;
インラインブロックにした子要素にletter-spacing: normal;

ググれば15秒で解決するから、少しは自分で調べよう

83Name_Not_Found2018/02/02(金) 19:28:16.43ID:vDE/ead1
CSS animationで文字をゆっくりと移動させるとChromeで見た場合に文字が点滅したような状態になってしまいます
検索して出てきたちらつきを抑える対処法はやってみても変わりませんでした
これはどう直せばいいでしょうか?

https://jsfiddle.net/kc01rckj/

84Name_Not_Found2018/02/02(金) 19:45:23.72ID:???
最初にDWがSassに対応してなくて覚える気がしないって書いた者だけど、
HTML/CSS中心の作業ならDW以外だと結局何のエディタがいいのかわからないんだが
この条件満たせるのってDW以外は無いよね・・?

・文字コード変換ができる(重要)
・ecc-jp、shift-jisにも対応している(重要)
・html、jQuery、phpのシンタックスエラーをその場で知らせてくれる(重要)
・html/cssの入力補完機能(候補表示)がある(重要)
・Sassに対応している

・フォルダ丸ごと置換できる(どこを置換したかの結果も表示)(やや重要)
・正規表現が使える(やや重要)

・htmlの入れ子構造が表示される(重要度低)
・タブで複数ファイル開けて、タブ自体に閉じるボタンが付いてる(重要度低)
・ブラウザプレビューに複数のブラウザ登録できる(重要度低)
・テーブル構造が視覚的にわかりやすい(重要度低)
・クリッカブルマップ使える(重要度低)

85Name_Not_Found2018/02/02(金) 19:55:15.71ID:???
>>80,81
ありがとうございます
改行せずに1行でかいたらおりかえさなくなりました

タグの外に改行入るだけでもダメなんですね…
うー;; ソースかなりみにくくなる…

86Name_Not_Found2018/02/02(金) 20:09:35.39ID:???
>>84
どのエディタでも大抵できるよ。フリーだから落として比べてみるといいよ

DW使ってると馴染みないと思うけど、
他のエディタはエクステンション追加で機能拡張できる。
他にもやりたいと思ったことが大抵はエクステンションで解決するはず。

拡張性の高さで言えばAtomかBracketsかな
ただ、今からその手のエディタに手を出すならVScode一択と言ってもいいくらい世界的に流行してる

87Name_Not_Found2018/02/02(金) 20:54:52.10ID:???
>>85
flex使え
<div>
<p>a</p>
<p>a</p>
<p>a</p>
</div>

div {
display: flex;

}
p {
width: 33%;
border: solid 1px red;
}

88Name_Not_Found2018/02/02(金) 22:15:33.04ID:???
>>83
俺のChromeはなんともない

89Name_Not_Found2018/02/02(金) 22:26:20.21ID:???
>>83
スマホのChromeで見たけど別にちらついたりはしなかったよ?

90Name_Not_Found2018/02/02(金) 22:28:36.54ID:???
>>83
ディスプレイ周りがしょぼいんじゃないか

91Name_Not_Found2018/02/02(金) 22:31:51.06ID:???
感情の原因はそれを感じる者自身の固定観念・価値観・自己ルール
解釈の原因は情報発信者ではなく受信者。誤解の原因も解釈者
「言葉 風紀 世相の乱れ」はそう感じる人の心の乱れの自己投影
問題解決力の低い者ほど自己防衛の為に礼儀作法やマナーを要求する
憤怒は無知 無能の自己証明。中途半端な知識主ほど辛辣に批判する
論理的思考力の低い者ほどデマ宗教フェイク迷信に感化傾倒陶酔洗脳
史上最も売れているトンデモ本は聖書。神は人間の創造物
全ては必然。偶然 奇跡 理不尽 不条理は思考停止 視野狭窄の産物
人生存在現象に元々意味価値理由目的はない
「真実は一つ」は錯誤。執着する者ほど矛盾を体験(争い煩悩)する
宗教民族領土貧困は争いの原因ではなく「理由口実動機言訳切欠」
社会問題の根本原因は低水準教育。必要なのは適切十分な高度教育
体罰は指導力・問題解決力の乏しい教育素人の独善甘え怠慢責任転嫁
死刑は民度の低い排他的集団リンチ殺人。「死ねば償える」は偽善
核武装論は人間不信と劣等感に苛まれた臆病な外交素人の精神安定剤
投票率低下は社会成熟の結果。奇人変人の当選は議員数過多の徴候

感情自己責任論 〜学校では教えない合理主義哲学〜 m9`・ω・)

92Name_Not_Found2018/02/02(金) 23:53:10.01ID:???
自分のハードウェアの問題だったのですね
回避はできないようなので諦めます

93Name_Not_Found2018/02/03(土) 00:36:12.49ID:S1dYxsZQ
フリーランスでWebデザイナーになりたいと思っている、17歳です。四月から通信高校に2年間通います。

通うのは週に一度だけなので、他の日はwebデザイナーになるための勉強を独学でしようと思っています。ちなみにすでに少しhtml cssをやっています。フリーランスでやっていくにはなんの知識が必要ですか?phpは?
あと、卒業したらフリーランスしながらも他の仕事をして稼ぎたいです。例えば、ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。などです。
どう思いますか?

94Name_Not_Found2018/02/03(土) 01:18:24.24ID:???
>>86
流行と出来るかできないかは別だろ…
vcsはhtml/cssエディタでみたら上にあげてる項目ほとんどできないじゃん?
その他のエディタもタグのアウトライン関連は弱いしbracketはdwが吸収したしっしょ?(もちろん開発が続いてるのは知ってる)
vscや他のフリーエディターが悪いっていってるわけじゃなくてさ

95Name_Not_Found2018/02/03(土) 07:06:51.36ID:???
>>93
>ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。
意味がわからん

他の仕事なんてやってる暇ないぞ
ひたすら最先端のデザインとツールの使い方を覚え無くてはならない

今はweb系のバイトで働くのが一番の近道
うまく行けば仕事も取ることができるだろう

96Name_Not_Found2018/02/03(土) 08:46:10.63ID:???
>>94
おいおい大抵できるぞ。使ったことあるか?
流行るのには理由がある、それだけ使い勝手が良いってこと
使い勝手悪ければ流行らない

97Name_Not_Found2018/02/03(土) 09:15:25.06ID:???
物心ついたときにパソコンに入ってたのがDWだったから…コード画面以外の機能ほとんどさわったことない

98Name_Not_Found2018/02/03(土) 09:50:59.69ID:???
このスレではDwの話は終わり

99Name_Not_Found2018/02/03(土) 10:06:09.22ID:???
エディタ関連の話はこのスレで話すよりググったほうがいい

まぁ大半がググれば解決するようなことばっかなんだけどな

100Name_Not_Found2018/02/03(土) 11:24:28.90ID:???
>>96
Pluginの解説が英語だけだと躊躇するタイプなんじゃね?
英会話じゃないんだから
海外のサイトでも落ち着いて読めば理解できるのにな

101Name_Not_Found2018/02/03(土) 11:30:33.47ID:???
<div class="button large">
<a href="#">ホーム</a>
</div>

みたいな書き方してるサイトで

<div class="large">
<a href="#">ホーム</a>
</div>

ってやっても large にならないんだけど
特定のクラスと一緒にかいたときだけ反応するクラスみたいなのつくれるの?

102Name_Not_Found2018/02/03(土) 12:08:19.09ID:???
>>101
.button.large{〜〜〜}

103Name_Not_Found2018/02/03(土) 12:38:40.52ID:???
クラスを2個ならべると自分より下のクラスに適用ってきいたんですけど
同一階層で並べても大丈夫なんですね
教えていただいてありがとうございます

104Name_Not_Found2018/02/03(土) 12:47:47.89ID:???
あれ;; おおきくならない なんで?
これどっかまちがってる?

<style>
<!--
.button a { border:solid 1px black; text-align:center; text-decoration:none; }
.button a:hover { opacity:0.5; }
.button .large a { font-size:large; padding:0.5ex 1ex; }
-->
</style>

<div class="button large">
<a href="#">ホーム</a>
</div>

105Name_Not_Found2018/02/03(土) 13:30:19.18ID:???
>>104
あれ;;?じゃねーよ
それがどうやったら>>102と同じに見えるんだ?
聞くのはいいけどちゃんと見てやれよ

106Name_Not_Found2018/02/03(土) 13:31:13.34ID:???
>>103
この2つは別物

.button.large{〜〜〜}
.button .large{〜〜〜}

107Name_Not_Found2018/02/03(土) 13:43:22.18ID:???
ごめんなさい くっつけてかかないといけないんですね
ありがとうございます

108Name_Not_Found2018/02/03(土) 13:46:20.14ID:???
君エディタ何つかってんの?

109Name_Not_Found2018/02/03(土) 13:52:40.68ID:???
1つ買ってるよ?

110Name_Not_Found2018/02/03(土) 14:00:48.85ID:???
>>108
>>107ですけど自分ですか? エディタ? Chromeですけど

111Name_Not_Found2018/02/03(土) 14:17:52.72ID:???
>>110
そりゃブラウザだろw
HTMLやCSSをどのソフトで作成して保存してるのかっていう話でしょ

112Name_Not_Found2018/02/03(土) 15:59:21.34ID:???
>>93
頼むから一度、web制作会社に身を投じる事を経験してから独立してくれ。
業界経験すらない素人が起業とかマジやめてくれ。

店舗だったらどう?材料、機材、店舗、集客、客層、ライバル、立地、経理、とか経営の事わからないでお店だす気する?

市場の評価(クオリティ)と価格を破壊するだけだからマジやめて。

113Name_Not_Found2018/02/03(土) 16:02:17.10ID:???
素人でもいきなり起業できちゃう業界って思われてる時点でこの業界もダメだなこりゃw
単価が上らん訳だ・・

114Name_Not_Found2018/02/03(土) 18:08:24.99ID:???
>>111
んー FC2ホームページのソース表示で編集ってやつだけどあれ何っていうエディタなのかな
タグに色つくからすごい見やすいです

115Name_Not_Found2018/02/03(土) 18:35:31.99ID:???
日本のWEBは終わってるから今から勉強するなら英語とセットでしっかり勉強してアメリカかカナダ行きなさい。
20年遅れてるんだよ。君が生まれる3年前のアメリカのWEBに、日本はやっと追いついたんだ

116Name_Not_Found2018/02/03(土) 23:56:03.90ID:???
>>104のスタイルで

<ul class="button">
<li><a href="#">次へ</a></li>
<li><a href="#">前へ</a></li>
<li><a href="#">上へ</a></li>
</ul>

ってやるだけでなんで3つともボタンになるの?
UL全体が1個のボタンになりそうなのに

117Name_Not_Found2018/02/04(日) 00:03:17.24ID:???
>>116
.buttonにaがついてるでしょ

118Name_Not_Found2018/02/04(日) 00:13:11.31ID:???
すごいclass名だ
せめてbuttonsとかにしてほしい

119Name_Not_Found2018/02/04(日) 00:24:44.69ID:???
>>118
自分の書き方は基本的に単数形だな

<ul class="button"><li><a>
でも
<li class="button"><a>
でも
<p class="button"><a>
でもいける

120Name_Not_Found2018/02/04(日) 00:59:06.65ID:???
>>118
複数形とか命名センスなさすぎ
せめてbuttonContainerとかbuttonListとかでしょ

121Name_Not_Found2018/02/04(日) 01:00:57.65ID:???
>>118
わざわざ文字数増やしてどうすんのbtnでしょ母音無しが基本

122Name_Not_Found2018/02/04(日) 01:07:19.89ID:???
CSSだけで縦横のサイズが異なる画像を等間隔で並べる方法ってあります?

float:leftを使えば自動的に横に並び、
入りきらない分は次の行に行きますが、
画像に正方形じゃないのがあると上下の位置がガタガタになって上手く並びません。

また、なぜか一行だけ右端に一個だけ配置されて次の行に行く場合がありました。

123Name_Not_Found2018/02/04(日) 06:45:39.81ID:???
.justifyLayout > * {
display : inline-block;
}

.justifyLayout img {
vertical-align: middle;
}

<ul class="justifyLayout">
<li><img src="http://placehold.jp/100x200.jpg"></li>
<li><img src="http://placehold.jp/200x200.jpg"></li>
<li><img src="http://placehold.jp/200x100.jpg"></li>
<li><img src="http://placehold.jp/200x100.jpg"></li>
<li><img src="http://placehold.jp/200x200.jpg"></li>
<li><img src="http://placehold.jp/100x200.jpg"></li>
</ul>

124Name_Not_Found2018/02/04(日) 06:48:07.55ID:???
ごめんこれもいる

ul.justifyLayout {
list-style-type: none;
}

125Name_Not_Found2018/02/04(日) 08:12:23.41ID:???
縦横比がばらばらなだけでサイズ近いのがそろってるならそれでいいけど
サイズ自体もばらばらなら正方形の固定サイズのboxを並べて
max-width min-width指定するほうがきれいかもね

126Name_Not_Found2018/02/04(日) 09:30:58.66ID:???
>>119-121
すまん普段しないから変なことしてしまった
普段ならliにbuttonかulにnavをラップしてそのnavにclass付けるとこだわ

127Name_Not_Found2018/02/04(日) 12:33:11.85ID:???
>>123-125
ありがとうございます。
右に一個だけ配置される行が出来る現象は無くなりました。

>サイズ自体もばらばらなら

幅は%で固定にしていますが
そもそもこの並べ方だと、他よりかなり縦に長い画像があるとその行だけ縦に長くなりますね
max-heightとoverflow:hiddenを指定すると、縦の長さは短くなりますが、画像は上の方だけが切られて表示されます

あまり縦に長い場合は画像を予め表示したい部分だけ切る加工をするか
画像に余白を付けるしか無いのかもしれません

128Name_Not_Found2018/02/04(日) 17:33:44.08ID:???
仕様をはっきり定義すれば何とでもできるが先に定義しないと
今 width: きめうちで横幅固定してるんだろうけどそれだと縦長の画像は拡大される
width: を max-width: にかえて height:auto; と max-height: 指定すれば高さも上限で縮小することもできる
その場合もちろん縦長の画像の横幅はせまくなるのでそろわなくなるが

129Name_Not_Found2018/02/04(日) 19:04:00.88ID:???
質問者じゃないけど width の 33% の正方形に自動縮小して表示ってできる?
pixやem使わずに縦に横幅の%指定と同じ長さにするってCSSできるのかな

130Name_Not_Found2018/02/04(日) 19:26:12.40ID:???
親要素からの指定はないんじゃないかな
vw使えば画面全体からの割合幅はとれるけど
メニューと2列になってたりbodyにmarginやpadding設定してあったりしたらうまくn等分にはならないだろうけど

131Name_Not_Found2018/02/04(日) 19:26:46.27ID:???
>>129
思いっきり質問で笑った
できる
css 比率 固定
とかでぐぐればなんぼでも答えが出てくるよ
ただ個人的にはあまり好きではないな

132Name_Not_Found2018/02/04(日) 19:30:33.32ID:???
>>129 はアスペクト比を固定して拡縮したいって意味だったのかな
だったらできるね
てっきりwidthの33%分の長さと同じ高さの正方形に収めたいって意味かと思ったわ

133Name_Not_Found2018/02/04(日) 20:07:06.62ID:???
>>129
できる

134Name_Not_Found2018/02/04(日) 20:33:13.47ID:Z2Ku3KdF
いわゆる3分の1にしたいときって
calc(100% / 3)
33%
33.333%
とかのうちどれ使ってる?

古いieに対応しなくちゃだめーとかだと
33.333%
かな?

135Name_Not_Found2018/02/04(日) 20:34:15.45ID:???
HTMLやCSSのソースをタグをエスケープして
キーワードやタグにハイライトつけてHTMLに変換する方法ってないですか?

136Name_Not_Found2018/02/04(日) 20:49:41.96ID:???
>>134
calc(100% / 3)
でいいんじゃね
古いのに対応させるなら、もうざっくりと33%でいいと思う

137Name_Not_Found2018/02/04(日) 20:50:46.89ID:???
>>135
ハイライト コード html
あたりで検索すれば割りと出て来る

138Name_Not_Found2018/02/04(日) 21:03:58.62ID:???
jsライブラリみたいなのはあるけどどれも大変そう
左の入力欄にはったら右のテキストエリアのハイライト付のHTMLソースでてくるみたいなお手軽サイトないんですね…
あきらめます><

139Name_Not_Found2018/02/04(日) 23:24:04.74ID:???
世の中いろんな暇人がいるとは言えそんな特殊な要望にピンポイントでこたえてるツールなんてあるにしても探すの大変そう…
自分だったらライブラリ使ってnodeスクリプト書くけどめんどくさいならhttps://codepen.io/penとかにコード貼るとハイライトされるからそれコピーしてWordとかのhtml保存対応のリッチテキストエディタに張り付けてhtmlで保存すれば?

140Name_Not_Found2018/02/04(日) 23:45:08.08ID:???
PHPなりで作ればいいんじゃね
簡単だろ

141Name_Not_Found2018/02/05(月) 01:03:27.69ID:???
まぁこの人は質問して答えをそのまま使いたいだけの人だから適当にあしらえばいい

142Name_Not_Found2018/02/05(月) 07:55:54.62ID:???
>回答してくれる方は優しい人のみ! 質問者に対して暴言を吐く人はこのスレを見るな!!

143Name_Not_Found2018/02/05(月) 09:08:45.52ID:???
どれが暴言?

144Name_Not_Found2018/02/05(月) 10:21:35.60ID:???
>>134
sassのpercentage使うのが主流じゃない?
33.33333%にコンパイルされる

145Name_Not_Found2018/02/05(月) 11:22:25.33ID:???
定期的に現れるsass使えば基地はなんなの?
そもそも今回なんて質問の意味すら理解できてないし

146Name_Not_Found2018/02/05(月) 11:43:01.48ID:???
>>145
ああそれいつも思う
sassは別スレにした方がいい
話変わってくるからな

147Name_Not_Found2018/02/05(月) 14:52:28.14ID:???
ごく普通の二つのselectをdivの中に入れて横並びにしました。
<select>
 <option>111</option>
 <option>222</option>
</select>
<select>
 <option>111</option>
 <option>222</option>
</select>
optionの文字列は最初のやつは全部半角文字、二番目のやつは全角文字です。
そうすると何故か、
[111][222]のように水平に並ばずに、二番目のselectが数ピクセル上にずれて表示されます。
原因と対策を教えてください。

148Name_Not_Found2018/02/05(月) 15:03:04.48ID:???
>>147
テキストの baseline が整列しているからじゃないか?
optionを vertical-align: top にすれば上端が整列するかもしれないが
コントロールなので効かないかも

149Name_Not_Found2018/02/05(月) 16:51:35.96ID:???
>>147
半角数字(英数)と全角数字(日本語)だからじゃない?

150Name_Not_Found2018/02/05(月) 17:00:01.06ID:???
vertical-align: topで解決するね

151Name_Not_Found2018/02/05(月) 17:19:22.91ID:???
>>148>>149>>150
select {
 vertical-align: top;
}
で解決しました。ありがとうございました。

152Name_Not_Found2018/02/05(月) 20:30:36.78ID:???
jQueryスレできいたのですがこちらの方がいいと思って来ました
<tag data-hoge=値>でなく

HTML <tag hoge=値>
CSS [hoge] {}

は独自属性(?)で違反らしいのですがそのソース(原文)を知りたいです
(確かにいいともありませんが)

153Name_Not_Found2018/02/05(月) 21:07:23.09ID:???
>>152
翻訳版だけど。

>独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、
>ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
http://www.html5.jp/tag/attributes/data.html

好き勝手に付けたらバッティングする可能性が普通にあるから"data-foo"となっている

154Name_Not_Found2018/02/05(月) 21:09:23.81ID:???
変なおじさんスレできいたのですがこちらの方がいいと思って来ました

HTML <unkochinchin></unkochinchin>
CSS unkochinchin {}

は独自要素(?)で違反らしいのですがそのソース(原文)を知りたいです
(確かにいいともありませんが)

155Name_Not_Found2018/02/05(月) 21:20:50.04ID:???
HTMLは決まった仕様があってそれに則って書かれる文書だから仕様にないタグや属性使うことは違反だぞ
「これが違反」というのではなく「これじゃないのが違反」て感じ
絶対ダメだ使うなというほど強制力はないので使いたければ使えばいい
ただブラウザによって表示や挙動がおかしくなる可能性はある

156Name_Not_Found2018/02/05(月) 21:20:51.69ID:???
>>154
面白くなさすぎて腹立つ
何考えてるの

157Name_Not_Found2018/02/05(月) 21:43:21.75ID:???
違反している要素や属性を使い過ぎるとバリデータがエラー出しまくって面倒になる問題もある
属性名は data-* で OK

要素名はハイフン入りの名前を利用すれば、カスタム要素として認識してくれる
(ごく少数の例外はあるが)

158Name_Not_Found2018/02/05(月) 22:13:33.49ID:???
>>152
HTMLの文法の原文
http://www.w3.org/html/

ここに書かれているタグ、タグ属性以外は文法違反

ただしあくまで標準規格としての文法であって
これとは別にブラウザ独自のタグなどをブラウザベンダーが定義していることもある
また、廃止されたものもあるので、昔は文法に適合していたが今は文法違反というものもある

159Name_Not_Found2018/02/05(月) 22:28:44.73ID:???
プログラムから入った人からしたら
始めてHTML触ってみて
ユーザー関数も変数も使えない言語なんてびっくりだろうな

160Name_Not_Found2018/02/05(月) 22:38:12.66ID:???
>>159
そんなことないぞ
HTMLはプログラム言語じゃなくてマークアップ言語だから別物って認識あるし、むしろ文書としてみたら「見出し」とか「リスト」とかになってるから仕様書や設計書書くのと同じ感覚

161Name_Not_Found2018/02/05(月) 22:54:31.62ID:???
>>160
そうなのか。
確かにたまにプログラマーっぽい人がcssの質問とかしてるの見ると決して侮ってない感じはするな

自分だったら完全にバカにして適当にあしらっちゃいそうだわ
まあそんな考えだからプログラマーにはなれないわけだが

162Name_Not_Found2018/02/05(月) 23:03:58.14ID:???
CSSを思いのままに制御するのは本当に難しい。
プログラマーの心の平穏を乱しそうな要素がてんこ盛りで、気を抜いたら殺されてしまう。
そりゃみんな決死の覚悟で臨むに決まってる。

163Name_Not_Found2018/02/06(火) 08:53:42.72ID:???
めちゃくちゃ簡単だよ

164Name_Not_Found2018/02/06(火) 17:18:46.17ID:???
CSSって、
p{color:red;}みたいな簡単なのもあれば、
.classname #idname>input[type="checkbox"]:checked+a:hover{font-size:100px;border:dashed 10px blue;border-radius:30%;color:rgba(128,256,64,0.7);}
みたいなのもあるからな。(まあこんな書き方普通はしないけど)

165Name_Not_Found2018/02/06(火) 17:23:21.34ID:???
css、一般的な事なら一通りできるし困ってないけど
めちゃくちゃ簡単かと聞かれたらそうは思わないなあ
他人の書いた複雑なcssは触りたくない

166Name_Not_Found2018/02/06(火) 18:02:32.86ID:???
>>165
それはcssが複雑なんじゃなくて他人が書いたものが複雑なだけのような…

167Name_Not_Found2018/02/06(火) 19:23:13.91ID:???
>>164
そういう単体のルールじゃなくて。

168Name_Not_Found2018/02/06(火) 20:46:24.29ID:???
というルールにするんだ

169Name_Not_Found2018/02/06(火) 22:02:03.96ID:???
>>153
そこ(やMDNなど)は見てます
>>158も、違反というのがわかりません

まあdata-を無くす理由はないのですがね
以前社内で話題になってたので
お2人共どうもでした

>>156
おちょくってるつもりでしょうが元文書いた本人(私)は全く腹も立たないほど
ひねりもないしつまらないし、こんなんで心満たせるのだなと逆に感心

170Name_Not_Found2018/02/06(火) 22:12:10.18ID:???
>>159
全然違うから気にもしなかったぞ
jsは最初戸惑ったがな、スコープとか巻き上げとか
カリー化とか未だにようわからんw

171Name_Not_Found2018/02/06(火) 22:38:45.48ID:???
jsはundefined周りがぶっとんでることに注意すればまぁなんとか

172Name_Not_Found2018/02/06(火) 23:25:14.43ID:???
なんでそんなにundefinedがわからんのかがわからんけどな

nullはnullという値が入ってる
undefinedは未入力を意味するってだけだと思うんだけどな

173Name_Not_Found2018/02/06(火) 23:38:45.28ID:???
undefinedは未入力じゃないぞ未定義だぞ

174Name_Not_Found2018/02/06(火) 23:39:09.46ID:???
Htmlでボタンをキラキラっと光らせることは可能ですか?

175Name_Not_Found2018/02/06(火) 23:42:35.39ID:???
>>174
CSSを使わないなら
キラキラっと光る画像をボタンに使うとか

176Name_Not_Found2018/02/06(火) 23:48:57.42ID:???
>>175
Cssは使います。カーソル合わせたときにボタンが光ると面白いなーと思っております。

177Name_Not_Found2018/02/06(火) 23:53:17.09ID:???
>>176
CSS使うならできる
どんなキラキラなのかで難易度変わるけど

178Name_Not_Found2018/02/06(火) 23:57:08.57ID:???
>>176
:hoverとGIFアニメを使ったらどうだろ

179Name_Not_Found2018/02/07(水) 00:02:38.69ID:???
マウス前提の効果とかなんて前時代的な

180Name_Not_Found2018/02/07(水) 00:54:44.04ID:???
吉良吉良光

181Name_Not_Found2018/02/07(水) 07:06:44.18ID:???
>>172-173
すまん、今は大分マシになったらしい
undefinedって昔は変数で、undefinedに代入できたりするびっくり仕様だったんだよ

182長くなったスマソ2018/02/07(水) 07:27:37.35ID:???
>>169
適合、違反の定義から始めないといけなさそうなんだけど
HTMLの基本ルールはXMLと同じだけど

< > の記号で囲まれた「タグ」を使う
< >開始タグ </ >終了タグをセットで使う
XMLと異なり、タグに使える単語(文字列)は列挙されたものに限る
一部のタグは終了タグを持たない

で、なぜ3つめのルールが決められてるかというと、文書の解析に使うため

XMLでは、通常は自分でXMLタグを定義し、自分でそれ専用の解析ツールを作るけど
HTMLはそうではない
HTMLの解析はブラウザという汎用ツールを使うため、そのブラウザの規格に合わせてタグを使わなきゃいけない

というわけです

183Name_Not_Found2018/02/07(水) 09:20:23.66ID:???
>>169
それはあなたに何をおちょくられているのか理解できる頭がないからです。
hogeという属性が違反であるソースを探しています
unkochinchinという要素が違反であるソースを探しています
同じこと。
仕様にいちいち〜は違反ですという形式で書いてあるわけないでしょうが。
hogeが違反ですと書いたらfugaはどうなんだの答えも書かないといけない。
果たして仕様書がそんなアホなつくりになってるのか、常識で考えようね。

184Name_Not_Found2018/02/07(水) 09:42:11.84ID:???
functional cssってのが流行ってるらしいけど
それって何?

185Name_Not_Found2018/02/07(水) 16:55:01.60ID:???
>>184
流行ってない

186Name_Not_Found2018/02/07(水) 20:36:51.38ID:???
>>184
SCSSの関数のことじゃね?

187Name_Not_Found2018/02/07(水) 21:57:40.04ID:???
CSSでオリジナルのドロップダウンリストを作る時
▼マークは画像でやるしかないのでしょうか?
検索すると背景画像でやる例が多いようです

188Name_Not_Found2018/02/08(木) 00:09:50.10ID:???
CSSがいいならCSSでもできる
画像ならなにも考えなくて楽
Data URLスキームでもいい

189Name_Not_Found2018/02/08(木) 07:52:46.35ID:???
CSSだけでテキストを円形や扇型に表示することって出来ますか?

190Name_Not_Found2018/02/08(木) 08:23:01.76ID:???
CSSの詳細度が高いと良くないらしいですけど
どうしてですか?

cssstats.com
で詳細度のグラフ?が見られますが
見方が良く分かりません

191Name_Not_Found2018/02/08(木) 08:52:57.02ID:???
読み込みに時間かかるから

192Name_Not_Found2018/02/08(木) 09:24:09.15ID:???
>>189
出来る
ググれ

193Name_Not_Found2018/02/08(木) 10:35:28.39ID:???
ありがとうございます
CSSWARPというジェネレートサイトを見つけることができました

194Name_Not_Found2018/02/08(木) 15:11:22.46ID:???
そもそもCSSの詳細度って何ですか?
どんなCSSだと高くなる(または低くなる)んですか?

195Name_Not_Found2018/02/08(木) 19:02:58.60ID:???
それCSSで一番に覚えなきゃいけないことだし、聞くより自分で調べてしっかり理解した方がいいと思う
詳細度の点数計算とかややこしいし
ここで中途半端に聞いたら勘違いしたままになるぞ
「とにかくセレクタをいっぱい書けば強い」とか「あとに書いた方が強い」とかいまだに言う人いるし

196Name_Not_Found2018/02/08(木) 19:46:57.83ID:???
fc2のサイトなのでNGワードにひっかかってURLを載せられないのですが
ドロップダウンメニューのCSSで
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
と、テーブルを挿入しているコードがあります
動作を確かめてみたところ、
これがないとドロップダウンメニューの上部に空白が出来てしまうようです
しかし動作原理が分かりません
何故tableを挿入すると空白がなくなるのでしょうか?

197Name_Not_Found2018/02/08(木) 20:20:08.48ID:???
画像がテーブルレイアウトされてる古いサイトのソース今のサイトにもってきたら
画像が巨大化してはみでるんだけどHTMLいじらずにCSSだけでテーブルにおさめるのってどうしたらいい?
tdにwidth30%とかかいても小さくならないんだけど

198Name_Not_Found2018/02/08(木) 23:28:10.88ID:???
> 詳細度の点数計算とかややこしいし

なんかすっかりそういうのを意識しなくなったな。なんでだろ?

一つはIDは原則的として使わずクラスをメインとして使うようにしているからだろう
もう一つはsassを使って階層化してるから外で定義されたものを中で定義したもので
上書きすると自然に認識してるからだろう。ともかく何も意識せず特に悩むこともなくなったよ

199Name_Not_Found2018/02/08(木) 23:29:06.68ID:???
そういや誰が言い出したか知らんけど100点だから10点だか
適当な点数を定義して10点が11個あつまれば110点で100点に勝てる!
みたいな間違った計算の解説まだやってる人いるの?
あれ余計ややこしくしてるだけじゃんかよ


style属性が最優先なのは感覚的にわかるだろ?
これは属性に書くものでセレクタじゃないから例外

あとは ID > クラス(疑似含む)> 要素名(疑似含む)> 全称セレクタの
4つしかなくてそれぞれ優先順位も感覚的にわかると思うんだけど
なんであんな馬鹿げた計算とか言い出したんだろ

考え方を簡単に書くならば、
セレクタにIDが一つ以上あれば優先度3、クラスが一つ以上あれば優先度2、
要素名が一つ以上あれば優先度1、全称セレクタは優先度0
(IDとセレクタの両方があっても合計なんてしません。最大の優先度になります)

優先度が同じなら、最大の優先度の数が多いものが勝つ
それも同じなら後に書いたもので上書きされる。
たったこれだけのルールなんだけどな。計算なんかいりませんって

200Name_Not_Found2018/02/08(木) 23:58:52.05ID:???
「なんだよ、style属性に直書きされてんじゃん!効かないはずだよ… はい、!importantと。これでよし。」

201Name_Not_Found2018/02/09(金) 07:05:09.23ID:/GJ7tYlY
>>199
今でもそれ生き残ってるのか、すごいな…

あれはね
90年代終盤に早々にCSSに手を出していた人達のなかでまことしやかに語られてたのよ
たぶん当時、海外のサイトかなんかで書かれてたのがそのまま広まっちゃったんだと思う

まだグーグルもなかったし、なによりまともにCSSをレンダリング出来るブラウザもなく
多段セレクタなんて書くような時代じゃなかったから、しゃーなしだと思う

この頃、すみけんたろうって人が書いたスタイルシートウェブデザインって本が名著で
これ読んだ人は正しく理解してたとは思うけど、なかなか知ってる人は少なかった

その後数年、テーブルレイアウト全盛が続くんだけど
Netscape6やMacIE5の登場、MTの流行、JIS X 8341-3の件などで
CSSを書く人が急に増えてウェブ制作板でもCSSのスレが熱くなったのが02〜03年くらい

その頃はまだ、100、10、1の足し算するのは間違ってるよって言ってもキチガイ扱いだったな
Dreamweaverメーリングリストで有名だったおばさんにすっごい噛みつかれた思い出

202Name_Not_Found2018/02/09(金) 07:53:40.89ID:+aQ89E1/
社内のHP移行でテーブルレイアウトで画像並べてる古いページをもってきたら
画像サイズがそろわなくなったんだけどどうしたらいい?
HTMLかわってないのにCSSがかわったせいなんだろうけど
td { width: 30% } とかかいても画像にあわせた幅まで拡大される…

203Name_Not_Found2018/02/09(金) 07:56:47.54ID:???
htmlあげて

204Name_Not_Found2018/02/09(金) 07:57:45.49ID:/GJ7tYlY
>>202
セルの大きさは中身優先なんで
<img width="100%">としてみたらどうだろうか

205Name_Not_Found2018/02/09(金) 08:09:50.75ID:???
>>202
>>123-124
とか?

206Name_Not_Found2018/02/09(金) 13:21:57.29ID:???
画像を
・縦横比を維持
・全体がブラウザウインドウに収まるうに
・可能な限り大きく
表示するにはどうCSS指定したらいい?
imgタグとimgタグの外側のタグでの指定方法を教えて

207Name_Not_Found2018/02/09(金) 13:31:39.95ID:???
>>206
img{width:100%;
height:auto;}

208Name_Not_Found2018/02/09(金) 13:36:05.27ID:???
>>207
これだと下がはみ出ちゃうんだよね

209Name_Not_Found2018/02/09(金) 15:10:18.97ID:???
>>208
こっちはエスパーじゃないんだからさ…
なんの下が何に対してどうはみ出るか書けよ

210Name_Not_Found2018/02/09(金) 15:49:15.77ID:/GJ7tYlY
>>206
max-width: 100%;
max-height: 100%;

俺がよくやるのは
<div class="box"><img></div>

.box{
position: relative;
width: 幅;
height: 0;
padding: 高 0 0 0;
}

img{
position: absolute;
margin: auto;
left: -1000px; right: -1000px; top: -1000px; bottom: -1000px;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}

こんな感じ

211Name_Not_Found2018/02/09(金) 16:22:00.82ID:???
ゴメンよ仕事中で長文書けなかったんだ
object-fit: contain;
width:100vw;
height:100vh;
でいけたっぽい

212Name_Not_Found2018/02/09(金) 19:41:54.91ID:+aQ89E1/
>>203
さすがに会社のHPなんで勝手にソースはるわけにいかないけど

<table>
<tr>
<td><img></td><td><img></td>
</tr>
<tr>
<td><img></td><td><img></td>
</tr>
</table>

みたいになってるだけです

>>204
だめでした

>>205
いや HTMLはできればかえたくないんですよね
ゆくゆくは1からかいておきかえるべきなんですけど
同じような書き方のページが大量にあるのでとりあえずCSSだけで体裁をととのえたいんです

213Name_Not_Found2018/02/09(金) 20:43:16.81ID:???
>>212
こういうことじゃないのん?
https://jsfiddle.net/dxywb5cv/

214Name_Not_Found2018/02/09(金) 22:02:45.91ID:+aQ89E1/
>>213
こういうことなんですけどなんでこれうまくいってるんだろう
&:ってセレクタはじめてみたけど同じようにtdにwidth %つけてるだけにみえる

外側のテーブルに100%つけるのが必要だったのかな
来週出社したらためしてみまわすわ
ありがとうございます

215Name_Not_Found2018/02/09(金) 22:29:58.97ID:???
>>214
念のためだけど
SCSS
だということに注意

216Name_Not_Found2018/02/09(金) 23:41:34.70ID:???
この5chの投稿欄ってtextareaですよね。
rows="5" cols="70"
となっていますが、入力する時には[ENTER]を押すと5行よりも沢山の
改行を入力できます。
これはなぜですか?
5行を超えるような改行の多い文書は入力出来ないようなtextareaを作成する事は出来ますか?

217Name_Not_Found2018/02/10(土) 00:37:46.05ID:???
>>216
表示する枠の高さが5行分ってだけ

218Name_Not_Found2018/02/10(土) 00:40:15.95ID:???
>>212
な?だからcssがうまくいかねーっていってのにscss書くとかほんと意味不明なんだけどさぁ
どっか別のスレたててやってくんない?

219Name_Not_Found2018/02/10(土) 00:46:52.27ID:???
>>218
でも質問に答えてないお前のほうがいらないよ?

220Name_Not_Found2018/02/10(土) 02:19:45.05ID:???
object-fit: cover;使えばええやん

221Name_Not_Found2018/02/10(土) 02:56:35.21ID:???
もっとブラウザで対応していればね

222Name_Not_Found2018/02/10(土) 09:17:10.97ID:???
sassも使えないのかよゴミ

223Name_Not_Found2018/02/10(土) 09:23:18.87ID:???
display:flex;って多用してるやついる?
俺は便利すぎてデフォがblockのタグは一括指定してるくらいの基地外だわ

224Name_Not_Found2018/02/10(土) 09:33:33.79ID:???
tachyonsってのがどうやらFunctional CSSとらを標榜してるCSSフレームワークのようだが
Bootstrapのように一つのCSSクラスに大量のスタイルを定義するかわりに、
一つの事しかやらないCSSクラスを大量に定義して
それを組み合わせて使えばCSSの変更が他ページに影響を及ぼすようなトラブルが無くなり最強って事らしいが
それってどうなの?HTML側のclassがコピペだらけになりそうな気がする

http://tachyons.io

従来のCSSフレームワークのやり方だと
他のページの表示に影響出ないようにCSSをコピーしたら
CSSが膨れ上がる上に
どれ使ってんのか使ってないのか良く分からなくなるってのはある
結果CSSがコピペとデッドコードだらけに

225Name_Not_Found2018/02/10(土) 10:19:25.22ID:???
>>219
答えてるんですけど?はぁw?

226Name_Not_Found2018/02/10(土) 10:34:12.67ID:???
>>225
気に食わない人追い出すとか言う話は
このスレと関係ないんで他でやってくんない?

227Name_Not_Found2018/02/10(土) 10:43:51.20ID:???
>>226
相手すんなよ

228Name_Not_Found2018/02/10(土) 10:54:54.23ID:???
>>224
結論はscssを使うのが最強ってことになると思うよ

まず一般論としてHTMLに限らないが、「名前」をつけるのは
大変な仕事なので「名前」はなるべくない方がいい。
また覚えることも少ない方がいい

だからbootstrapもそうだが、こちらでクラス名を用意しておきました。
さあ覚えてください。なんてのは間違ったやり方

名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
あるclassを起点にしてHTML要素の構造にスタイルを適用していく
そうするとHTMLは凄くシンプルになる。

デザインはscssの中ですべてを解決
何かを共通化したければ共通化できるし分離もできる

> 他のページの表示に影響出ないように
それはページごとにIDをつければ解決できるが
scssの@extendをうまく使えば安全に共通化してCSSサイズの削減ができる

> どれ使ってんのか使ってないのか良く分からなくなるってのはある
名前(class名)を少なくするというのは、使われている所を探す労力も減る

229Name_Not_Found2018/02/10(土) 11:23:53.70ID:???
このスレでやるなって話なのにしつこいな
はいたCSSはればいいだろ

230Name_Not_Found2018/02/10(土) 11:29:19.66ID:???
CSSの質問の答えがまずSCSS覚えろってねえ…
仕事でCSSさわり続けるならともかく
このスレにくるようなやつなんてむしろCSS1行かいたら人生で2度とCSSさわる機会ないようなやつだろ

231Name_Not_Found2018/02/10(土) 12:38:01.38ID:???
SCSSとCSSの互換性は高く、
すべてのCSSはSCSSとして解釈できる

つまりCSSを覚えている人は、
そのままCSSの機能追加みたいな感じで
SCSSが使える

232Name_Not_Found2018/02/10(土) 12:45:17.04ID:???
HTMLの構造を指定してCSS書くのは嫌だな
同じコンテンツをあるページでは部分的に、
あるページではメインコンテンツとして使用したり、
動的だと間にタグが入ったり、タグ自体を変更することがしょっちゅうあるもん

233Name_Not_Found2018/02/10(土) 12:48:15.97ID:???
>>232
構造が変わっても同じデザインを
割り当てたいと言いたいんだろうけど
理由になってないよ

構造が変わればデザインも変えるのが普通なんだから

234Name_Not_Found2018/02/10(土) 12:56:38.00ID:???
>>226
scssで書かれてもcssにコピペして動かないんて他でやってくんない?

235Name_Not_Found2018/02/10(土) 13:05:11.86ID:???
>>233
そんな事は無い。
自分は最初からレスポンシブ前提で書くから
どういう箇所で使用されようがデザインがある程度対応できるようにクラスで書く。

例えば、メインコンテンツの投稿日時のCSSをこんな風に書居てしまった場合、
main > article > footer >time

後からサイドバーにも投稿の紹介を掲載したい場合に、一切使えないよね。

236Name_Not_Found2018/02/10(土) 13:23:12.60ID:???
>>226
scssはスレ違いだからお前が出ていけ。

237Name_Not_Found2018/02/10(土) 13:33:52.34ID:???
>>235
なにが使えないのかわからないが?

まず第一に俺が書いた
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく

を、あんたが書いた main > article 〜 は
満たしてないので話にならない

せめて一番最初はclassにならないといけないし、
投稿日時はfooterに入れるとは限らない。

だからその場合は、.posted-at > time という風に
classを起点にしてHTML要素の構造にスタイルを適用するし、
サイドバーに表示したいなら、そのまま使える。

繰り返すが、なにが使えないのかわからない

238Name_Not_Found2018/02/10(土) 13:39:10.46ID:???
HTML/CSSのスレなんだからscss知らなくても分かる回答すべきじゃないの
それ以外のもの使うのは勝手だけど回答するときはCSSの出力で答えればいいだけじゃん

239Name_Not_Found2018/02/10(土) 13:41:12.70ID:???
いたよなjavascriptスレでcoffeescript宣伝奴
結果coffeescriptはどうなりましたか?
どんなに優れたcssプリプロセッサだろうがaltjsだろうが、結局はブラウザが解釈できるcss/jsに変換される。
生のcssの知識が無駄になることはないがcssプリプロセッサはありうる。
最近sassじゃなくpostcssの採用が増えているようだね。
このように標準規格であるhtml/css/jsより上のレイヤーでゴニョゴニョする系の技術は流行り廃りが激しくすぐ陳腐化する。
下位レイヤーのhtml/css/jsの知識は上のレイヤーに何を使おうがずっと役に立つ。

240Name_Not_Found2018/02/10(土) 13:43:00.11ID:???
postcssもcssじゃないんでこのスレから出ていってください

241Name_Not_Found2018/02/10(土) 13:48:15.24ID:???
>>240
こいつsass奴。バレバレwww

242Name_Not_Found2018/02/10(土) 13:49:42.95ID:???
>239
> 最近sassじゃなくpostcssの採用が増えているようだね。
cssnextと言いたいのか?

postcssはcssの拡張文法を取り扱うための仕組みで
どんな文法に対応するかは使うプラグイン次第

例えばこれを使うとpostcssでscssが使える
https://github.com/postcss/postcss-scss

243Name_Not_Found2018/02/10(土) 13:51:56.52ID:???
>>239
> いたよなjavascriptスレでcoffeescript宣伝奴
> 結果coffeescriptはどうなりましたか?

結果TypeScriptはどうなりましたか?

結局文法が重要ってことだよ。
sassはcssと異なる文法だが
scssはcssの文法の拡張

JavaScriptはTypeScriptコードとして使えるように
CSSはSCSSコードとして使える

244Name_Not_Found2018/02/10(土) 13:57:06.37ID:???
>>242
つまりプロジェクトによって採用されるのがsassとは限らないんだね。やっぱりsassのオレオレ拡張仕様は標準規格じゃないし、頼れるのはcssの知識しかないね。

245Name_Not_Found2018/02/10(土) 13:58:39.65ID:???
プロジェクトに採用されるのがsassとは限らないというのは
sassになるかもしれないということ
sassになったらcssの知識はいらない

246Name_Not_Found2018/02/10(土) 14:00:42.23ID:???
>>243
TypeScriptはJavaScriptコードとして使えないように
SCSSはCSSコードとして使えない

JavaScriptスレでTypeScriptのしつこい宣伝をすれば、
ここでのお前のように叩き出される。

247Name_Not_Found2018/02/10(土) 14:02:10.87ID:???
scssっていうのはcssの知識が活かせるところが強いね。

cssの文法はscssの文法としても通じるから
そのまま移植すればOK

cssで何か知識を入れたらscssでも活かせる

何度も同じセレクタを書かなくていけない買ったのが
ネストで書けるようになったのが強い
これは標準ではできないこと

248Name_Not_Found2018/02/10(土) 14:02:50.95ID:???
>>246
> TypeScriptはJavaScriptコードとして使えないように
> SCSSはCSSコードとして使えない

そっち方向は、変換すれば使えるのでは?

249Name_Not_Found2018/02/10(土) 14:08:05.10ID:???
>>245
lessやstylusになったらsassの知識は使えない
所詮one of themの非標準仕様。
CSSの重要性には比較にもならない。

250Name_Not_Found2018/02/10(土) 14:10:41.40ID:???
>>248
じゃ変換済みのコード貼れカス

251Name_Not_Found2018/02/10(土) 14:17:58.68ID:???
OOCSSで書いてるけどすごい楽

252Name_Not_Found2018/02/10(土) 14:31:39.24ID:???
というかここで質問するような初心者の人は
そもそもSCSSって何?って人も普通にいるんでは?

253Name_Not_Found2018/02/10(土) 14:40:12.76ID:???
>>252
散々繰り返し言ってるのにscss基地がマウントとるためだけにグダグタいってんだよね

254Name_Not_Found2018/02/10(土) 15:51:45.74ID:???
>>237
書いた例は分かりやすくる為に極端にしたんだよ。

>繰り返すが、なにが使えないのかわからない

↑イメージ力がなさそうなのでもう一例書こうか?

投稿ページでは投稿タイトルがH1だが
投稿の一覧ページでは投稿タイトルがH2になる。
ごくありふれた例だよな?
こいうのも使えない。

もう一例だそうか?
「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
これは構造を指定する意味が全くない。

いいかげん理解してよ

255Name_Not_Found2018/02/10(土) 16:03:33.01ID:???
つーかさー、
>.posted-at > time という風に
これって超が付くほど普通の書き方だよね?
構造でもなんでもないよね?今更書く事じゃないよね?

最初に書いてたのは↓これじゃん?
>名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
>そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
>あるclassを起点にしてHTML要素の構造にスタイルを適用していく

これが「.posted-at > time という風に」の事を指しているなら
何今更3行も使ってごく一般的な事書いてるの?って思うんだが?
都合が悪くなって意味を変えたんでしょ?

256Name_Not_Found2018/02/10(土) 16:34:26.46ID:???
くそっ、バレたか

257Name_Not_Found2018/02/10(土) 16:52:20.63ID:???
>>255
的を射すぎてて草

258Name_Not_Found2018/02/10(土) 17:28:19.30ID:???
.posted-at > time は超が付くほど普通の書き方たが構造でもなんでもないは嘘だろ。
posted-atクラス直下のtime要素、って構造だろ。
超が付くほど単純な構造だけど構造でもなんでもないは嘘。

259Name_Not_Found2018/02/10(土) 18:56:31.97ID:???
HTML/CSS のどんな質問に必ず優しく答えるスレ 31

260Name_Not_Found2018/02/10(土) 19:00:10.08ID:???
優しくなりたいね

261Name_Not_Found2018/02/10(土) 20:40:52.79ID:???
>>255
> これが「.posted-at > time という風に」の事を指しているなら
> 何今更3行も使ってごく一般的な事書いてるの?って思うんだが?

だから? 一般的なこと、正しいことを書いたらダメなのか?

> 都合が悪くなって意味を変えたんでしょ?

「あるclassを起点にしてHTML要素の構造にスタイルを適用していく」
ってかいてあるよね?

それがどういうことなのか、お前が解釈したことを
言ってみて

262Name_Not_Found2018/02/10(土) 20:51:46.21ID:l5P9wiGA
>>183
全然違うわ

263Name_Not_Found2018/02/10(土) 20:59:14.79ID:???
>>262
亀レス乙。よっぽど悔しかったんだねww

264Name_Not_Found2018/02/10(土) 21:02:50.80ID:???
>>258
> posted-atクラス直下のtime要素、って構造だろ。
その通り

.posted-atクラスは直下にtime要素を持つ構造であるということ
つまりクラスに対してHTMLの構造が定義されるというわけ
(もちろんその定義は .posted-atクラスは直下はtime要素しか
書いてはいけないという意味じゃないよ)


考え方によってはHTML構造があとから変わっても問題ないように
細かくclassをつけて、そのclassごとにデザインを
適用するってのが有るけど、あれとは対極

HTMLを制御できないJavaScriptライブラリが
作り出すHTMLのようなものは、細かくclassを定義して
部分ごとにスタイルを適用できるようにするってのはありだけど
自分らで書くHTML/CSSで同じことをやるのはコストが割に合わない

リセットCSS的な用途を除き、HTML要素に直接スタイルを
割り当てるのはだめだけど「あるclassを起点にする」ならば
それ以下はHTML要素(構造)に対してスタイルを割り当ててよい
でないと名前が多くなりすぎて、これ何のクラスだ?ってなって大変なことになる
そこまで手間かけることじゃねーよってな

265Name_Not_Found2018/02/10(土) 21:29:52.31ID:l5P9wiGA
>>263
お前さんのように暇じゃないのでな
悔しいのはつまらないと指摘されちゃったほうだろ

266Name_Not_Found2018/02/10(土) 21:34:34.04ID:???
>>265
顔真っ赤か?くやしいのうwww

267Name_Not_Found2018/02/10(土) 22:02:41.31ID:???
>>261
一般的、というか普通に皆メインはそう書いているだろう事を何で今更書いたの?

@.posted-at p span + time{プロパティ}
A.posted-at > time{プロパティ}  
B.posted-at time{プロパティ}

”いわゆる”構造指定のセレクタとあえて言われればば@Aなどを連想するが。
Bはごく普通に皆が普段使用している書き方。構造もざっくり指定しているがあえて構造セレクタとは言わない。
@Aは汎用性が無いが、時と場合によっては有用で一般的には使えない。
Bは今更言わなくても一般的で他に方法はない
ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
みんながそうしているとでも思ってたの?

つーか、>>254は理解できた?
まずこちらの質問に回答してよ

268Name_Not_Found2018/02/10(土) 22:12:14.90ID:???
もうみんな質問とかそっちのけで揉めまくっててワロスw

269Name_Not_Found2018/02/10(土) 22:16:05.88ID:???
まあ、クレーム付いているのはsassをしつこく押しつけてた1人だけっぽいけどなw

270Name_Not_Found2018/02/10(土) 22:23:20.97ID:???
>>267
> ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
> みんながそうしているとでも思ってたの?

自分が見たことないから、そうしてる人は一人もいないと思ったの?

271Name_Not_Found2018/02/10(土) 22:23:43.18ID:???
>>266
お前もしつこい
data-の有無であって名称の付け方ではない
183が頓珍漢なことは間違いない

272Name_Not_Found2018/02/10(土) 22:26:30.19ID:???
>>267
> 投稿ページでは投稿タイトルがH1だが
> 投稿の一覧ページでは投稿タイトルがH2になる。
> ごくありふれた例だよな?
> こいうのも使えない。

だから何が使えないの?

何度も言うが「あるclassを起点にしてって」書いてあるとおり
classを起点にしてない時点で、H1にもH2にも直接スタイルを適用してはいけない


.post-page H1
.post-list H2

俺が言ったとおりにやると、それぞれ何のページかがわかるんだから、
それぞれで適切なスタイルを適用すれば良い。
別々にすることもできるし違ったスタイルにすることもできる

だから、何が使えないの?

273Name_Not_Found2018/02/10(土) 22:33:02.65ID:???
> もう一例だそうか?
> 「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
> これは構造を指定する意味が全くない。


構造を指定する? 構造は指定するものじゃないが。定義するものだが?

コンバージョンボタン(.conversion-button)というものを作ったら、
そのボタンは、単に自分自身がinput type="button"要素であってもいいし、
<button class=".conversion-button"><i>アイコン</i><span>説明</span></button> みたいに
「コンバージョンボタンというのは中にi要素でアイコン、span要素で説明という構造を持っているものです」
という定義をして

この構造ををあらゆる場所に出現させることができる。
どこで出現させたとしても、「あるclassを起点にして」
つまり.conversion-buttonを起点にするから
どこで指定しても同じスタイルが適用できる。

構造の中にある要素にはわざわざクラスを付ける必要はない。iとかspanでよいと
何度も言ってるんだが?

いいかげん理解した?

274Name_Not_Found2018/02/10(土) 22:34:43.53ID:???
いつまでつづけんの

275Name_Not_Found2018/02/10(土) 22:37:23.37ID:???
.posted-at > timeが構造でもなんでもない(>>255)
といいつつ
構造指定といわれて.posted-at > timeを連想する(>>267)
というのがどういうことかわからなかったが
まあいいかw

276Name_Not_Found2018/02/10(土) 22:40:09.31ID:???
id表示がないから誰がどのレス書いてるのかさっぱり分からないw

277Name_Not_Found2018/02/10(土) 23:00:25.99ID:???
>>270
コミュ力大丈夫か?
皆がそうしていると思った = 一人もいない  なぜそうなるの?大丈夫?

>>272
WordPressとか動的サイト作った事ないでしょ?
それぞれのページとか概念がおかしいし、わかる必要が無いんだよ。どこでも使えなきゃいけないんだよ。

.post-page H1
.post-list H2
だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
H1かH2でなければいけなくなるから使えない。
要するに使えないんだよ。

どうしたらよいか
.titleで1回書くだけ書けばいい
どうしてもデザインを分けたい場合だけ、.親クラスを指定する。タグの指定は汎用性を落とすから使わない。

278Name_Not_Found2018/02/10(土) 23:02:17.58ID:???
>>267をよく見てわかったわ

> ”いわゆる”構造指定のセレクタとあえて言われればば@Aなどを連想するが。


>>267は構造を"定義する"という考え方がないんだな。
(誰かの手によって)そういう構造になっている時に
セレクタで"指定する" という考え方しかないんだ
だから構造指定のセレクタとか言ってるわけか

だから俺は重要なこととして何行も使って 構造を"定義する" と 言ってるんだよ

もちろん.posted-atという構造を定義する場合、どのように定義すべきかは
決まってるわけじゃない。単に定義するという話で特に制限はない
(ただし同じクラスに二種類の定義をするのもダメとは言わないが混乱するだけだろう)
つまり以下のどういう構造でも良い(セレクタで書いてないのは意図的だからな)

@.posted-at の中に p があって、その中に span があって、それに隣接して time があるという構造
A.posted-at の直下に time があるという構造
B.posted-at の中に time があるという構造

.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
その場合は定義を厳密にして、 .posted-at の直下にpがあって〜とすればよい。

ここまでが .posted-at という構造の話で
その構造に対してデザインを適用する時のセレクタをどうするかはまた別の話

定義すべき「あるclassを起点としたHTMLの構造」というのはHTMLレベルの話で
それにデザインを適用する時のセレクタはCSSレベルの話であるということ
とは言えセレクタは構造通りに指定するのが誤爆しにくくなるのは言うまでもないがな

279Name_Not_Found2018/02/10(土) 23:03:10.21ID:???
>>277
> 皆がそうしていると思った = 一人もいない  なぜそうなるの?大丈夫?

箱の中に赤いボールしかないと思ったんでしょ?
なら青いボールは一つもないよ
当たり前だろう?

280Name_Not_Found2018/02/10(土) 23:04:45.87ID:???
>>273
理解してないのお前だよw
ボタンがbuttonタグじゃなかったら使えないよね?
aタグだったりinput type="button"だったらダメだよねそれ?

てか理解する気ないならしなくていいよ。
その手法で頑張って。

281Name_Not_Found2018/02/10(土) 23:07:42.65ID:???
別のスレでやってくれないか

282Name_Not_Found2018/02/10(土) 23:10:27.27ID:???
>>277

> .post-page H1
> .post-list H2
> だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
> H1かH2でなければいけなくなるから使えない。
> 要するに使えないんだよ。
>
> どうしたらよいか
> .titleで1回書くだけ書けばいい

それは俺と同じことを言ってるだけだが?

H1とH2で区別しないなら.titleでいいだろ?

.post-page .title
.post-list .title

投稿ページとリストページで区別付けないなら
.titleと省略できるだろうな

.titleというclassを起点として中にHTML要素がない(定義しない)という
俺が言った一番シンプルなパターンだ

283Name_Not_Found2018/02/10(土) 23:11:47.24ID:???
指定じゃない定義!ドヤァとかさぁ
もうscss基地と同一人物なのまるだしじゃねーか…
ここはあなたの売れないscss本の後書き欄じゃありませんから自分でスレ立ててそっちで構造定義!scssで解決!ってやってください

284Name_Not_Found2018/02/10(土) 23:12:57.99ID:???
>>279
長い上に全く意味不明

>.posted-atという構造を定義する場合、どのように定義すべきかは
>決まってるわけじゃない。単に定義するという話で特に制限はない

なら普通にCSSセレクタ定義するのと何が違うの?

>.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
>中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな

だから最初からそこを指摘して使えないっていったんだって

なんのこっちゃ

285Name_Not_Found2018/02/10(土) 23:14:23.14ID:???
定義って言いかっただけにしか見えんw

286>>282の続き2018/02/10(土) 23:15:42.64ID:???
> 名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
> そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
> そうするとHTMLは凄くシンプルになる。

名前は必要な所(.title)につけて、「そのclass以下にある要素」が無いと言うだけ

もし構造を以下のように定義した場合は
<header class=".title"><h1>見出し</h1></header>

h1というHTMLタグで区別できるならh1にclass名を付ける必要がなく
単に .title > h1 とすればよいと言ってる。

明確ではないが
<header class=".title"><h1>見出し</h1></header> という構造
<header class=".title"><h2>見出し</h2></header> という構造
という2つの構造を定義すれば

.title > h1 と .title > h2 で投稿ページと投稿一覧ページが区別できるから
別々のスタイルを適用することもできるし、別々のスタイルを適用することもできるだろう。

だけど .title だけだと同じスタイルしか適用できない

最初に書いたこれ↓であれば、同じスタイルでも違うスタイルを
適用することが可能になるし意味が明確になる。
> .post-page H1
> .post-list H2

この場合の"構造" は .post-page の中にh1があるという構造
.post-list の中にh2があるという構造 ということになる

287Name_Not_Found2018/02/10(土) 23:17:20.14ID:???
>>284
> なら普通にCSSセレクタ定義するのと何が違うの?

自分で "CSS" セレクタと書いてしまっているだろ?
HTMLの構造を決める段階で CSSを意識してしまってる

CSSをどうするかは後から考えろ。
まずHTMLの構造を定義するという話。


ここまで説明する必要があるってことは、
やっぱり当たり前の考えではなかったとうことだろうなw

288Name_Not_Found2018/02/10(土) 23:18:52.12ID:???
>>284
> だから最初からそこを指摘して使えないっていったんだって

それは定義が悪いだけで。"中に" じゃなくて "直下に" って
定義にすれば(場合によっては別の定義が必要かもしれんが)

そうすればできるよね?
反論有る?

289Name_Not_Found2018/02/10(土) 23:19:42.20ID:???
>>276
まだ草1個だからまだましかな
3つ生やしたらそいつは終わってる

290Name_Not_Found2018/02/10(土) 23:19:47.44ID:???
>>279
皆→大多数を指す(全てではない)

その糞例えにあえて付き合うなら

箱の中に赤と緑と青があって90%が赤
つまりそれが「大多数」であり、「皆」な。

皆という単語は100%の意味を持たない。

一般的な会話もできないの?

291Name_Not_Found2018/02/10(土) 23:20:15.16ID:???
> なら普通にCSSセレクタ定義するのと何が違うの?

だからCSSセレクタは、選択するための書き方であって
定義ではないと

"CSSセレクタ定義"でググっても2件しかでてこないわw

292Name_Not_Found2018/02/10(土) 23:21:09.21ID:???
>>290
その理屈だと「見たことがない」は
お前が見たこと無いだけだろw
で終わる話だよな

293Name_Not_Found2018/02/10(土) 23:25:42.42ID:???
>>287
>>288

>定義にすれば
そこからもうだめ。
動的の経験をもっと積まないと話にならないよ。
つまり汎用性がないから使えないんだよ。いずれわかるだろう

294Name_Not_Found2018/02/10(土) 23:26:28.99ID:???
>>293
反論しろよw

295Name_Not_Found2018/02/10(土) 23:27:09.19ID:???
>>292
そうだよ?見た事あるの?
そのサイトのURL出してよ。

めずらしくないんでしょ?たくさんあるよね?

296Name_Not_Found2018/02/10(土) 23:37:46.03ID:???
>>295
はいどうぞ
https://kuroeveryday.blogspot.jp/2017/03/css-structure-and-rules.html

どれもひどいもんだね

俺のやり方ではこの例はこうなる

<h1>title</h1>
<ul class="menu">
<li>link</li>
<li class="active">active</li>
</ul>


HTMLもシンプルだし最低限のclassしか必要としない
menuという起点となるclassがあって

liはulの直下と書けば良いのだから不要
どうしても無理なパターン(この場合はactiveが近いな)にのみ
classをつける

297Name_Not_Found2018/02/10(土) 23:40:39.86ID:???
>>271
しつこいのはお前だろ暇人w
>>183のレス先たどってみろよ。data-の話題と関係ないんだが。
暇人の上に文盲かwww

298Name_Not_Found2018/02/10(土) 23:40:51.60ID:???
まあ実は、少しだけ命名規則が有るわけだが
今回言いたいこととは関係ないので、>>296には含めていない

既存のやぼったいフレームワークとは反対の考え方だから
俺独自のフレームワークとして公開したほうが良いかもな

まあフレームワークとして公開するような規模でもないし
単に考え方、最初にHTMLの構造を定義しましょうという話なんだが
(そうすればこんな複雑なフレームワークを持ちいらなくてもCSSセレクタは書けるようになる)

299Name_Not_Found2018/02/10(土) 23:44:31.73ID:???
OOCSS、BEM、SMACSS、FLOCSS、RSCSSといった設計思想は
CSSありきで、その設計をHTML側に反映させましょうというやり方だから
HTMLもCSSもあんなに複雑になるんだよな。
CSSが複雑なHTMLでも対応できるように考慮されてるから
大抵はシンプルで終わるHTMLに大規模対応の設計思想が組み込まれてしまう

俺の設計思想は方向が逆でまずHTMLの構造を定義しましょうという
思想だから、HTMLがシンプルになりCSSもシンプルになる
だからといって大規模なHTMLに対応できないか?と言われれば
そうではなく、それこそ俺がここに書いてない簡単な命名規則で対応できるレベル

300Name_Not_Found2018/02/10(土) 23:46:50.31ID:???
>>296
俺もこれ
もう最近はフレームワークとか使ってない
フレームワークのcssを打ち消したりする手間がしんどい
1から自分で書いたほうが色々と早い

301Name_Not_Found2018/02/10(土) 23:51:54.05ID:???
あらためてみると RSCSS が > を使うようで
一番俺の考えに近いのかな?

その他のフレームワークで、例えばBEMが

<ul class="menu">
 <li class="menu__item--large">link</li>
 <li class="menu__item--active">active</li>
</ul>

このように、menu_item--large みたいな長ったらしい
クラス名になってるのは、 ul の 直下にある li という構造を
前提としてないからこうなるんだよ

確かに .menu の直下に .menu__item--large がないかもしれないじゃないか!
って言われれば、そのとおりなのだが、それはHTMLの構造が定義されてないから起こることで、
.menuの直下にliがあってそれが(クラス名は付けないが) .menu__item--large 相当です。
と定義してしまえば、それに反することはないから、わざわざ .menu__item--large なんてものは
作らなくて良くなる。

302Name_Not_Found2018/02/10(土) 23:56:51.10ID:???
なお、俺が言ってるやり方っていうのは > を多用するのでscssと相性が良い
使わないと見づらいし、scssで階層構造を作ってしまえば
そのリンク先のRSCSSのサンプルのように
scssを見るだけでも階層構造によってある程度HTMLの構造が把握することができる

OOCSSとかBEMとか普通のCSSでも書けるのはメリットかもしれないけど
名前から階層構造を判断しなきゃいけない

303Name_Not_Found2018/02/11(日) 00:02:03.95ID:???
専ブラ使ってる方は、
NG Word 追加、正規表現にチェックをつけて、
sass|scss
と入力、連鎖あぼーんにチェックをつけてOKです。

304Name_Not_Found2018/02/11(日) 00:07:01.11ID:???
>>296
いや一個一個id振るとか古より伝わるcssでもなんでもなく、そんなやり方してるやつ古より皆無だろ…何いってんのこのひと。
しかも 自分のやり方はこうだ!ドヤ してるがまたそれも当たり前のことだしむしろそれが古より伝わる書き方なんですけど一体なにを学んだらそんなマウント脳になれるんだろう

ってかもうどっちがscss!定義!マンだかわからないからほんと他でやってください

305Name_Not_Found2018/02/11(日) 00:11:46.73ID:???
うむ、RSCSSっていつから有るんだと思ったらgithubのリリースからすると
2015年2月っぽいちょうど俺がHTML/CSSを触らなくなった頃か

俺がOOCSS(2012年ごろ?)を聞いたときはなにクソな設計思想だなって
おもって、それを踏まえたBEMとかでてきて、
本来は既存のフレームワークを使いましょう派である俺だが、
俺のやり方とは真逆だ、ムキーって思っていたら
同じ方向性のRSCSSってのが出ていたんだな。


RSCSSはVariantsとか命名規則に少し違いが有るようだが、
俺がそれまでやっていたやり方と近いようだ。
これなら採用しても良いかも

ってか、クラス名ハイフンで初めてOKだったのかよw
俺はこれをstateと呼んでいて、is- をプリフィックスとして
使いましょうって命名規則にしてたわ

ElementsとかNested componentsとかLayoutsとか
なんとなく区別したほうが良さそうだが、そこまでいるかー?って考えで
逃げていたのがちゃんと書いてあって参考になるわ

306Name_Not_Found2018/02/11(日) 00:13:34.91ID:???
>>304
え?idに一個一個振るとかいう古代のCSSの話じゃなくて
OOCSSとかBEMとかの話なんだけど?

で、お前これらのフレームワークを見たことなかったんだよね?
それは認めないとw

307Name_Not_Found2018/02/11(日) 00:14:25.08ID:???
>>303
はい、ぜひともそれやってください。
そうすれば俺の書き込みが見えなくなるので
くだらない反論もしてこなくなります。

俺だけの意見が残って万々歳ですw

308Name_Not_Found2018/02/11(日) 00:19:46.60ID:???
>>307
ここはあなたの意見を残すスレではありません。
HTML/CSSの質問に答えるスレです。

309Name_Not_Found2018/02/11(日) 00:25:14.03ID:???
>>296
それ違うよね?
誰も古代のCSS設計を紹介しているサイトのURL貼ってなんていってないよね?

俺が言っているのは、
全て1つ1つクラス指定をしている、実際の具体的なサイトのURLを貼ってっていってるんだが。
わかってるよね?
無かったんだよね?

310Name_Not_Found2018/02/11(日) 00:26:30.05ID:???
後出しですが質問です。classは要素ごとに細かく書いたほうが良いのでしょうか?
あとBEMやOOCSSなどのCSSフレームワークと
sass(scss)について教えてください。
HTMLとCSSに関係がある話だと言うことは分かっています。

311Name_Not_Found2018/02/11(日) 00:28:21.02ID:???
>>309
OOCSSやBEMは古代じゃないよ?
まずそこが分かってない。

そして具体的なサイト?
公式サイト見ればいいじゃん。

そういうフレームワークを提唱しているサイトが
自分で使ってないわけないんだから
そんなことにも気づかなかった?

あ、そうか、そういうフレームワークを提唱しているサイトで
使われていることがわかったから「古代のCSS設計」のみに
限定したんだね。卑怯だなぁw

で、OOCSSやBEMのサイトみてきてよ

312Name_Not_Found2018/02/11(日) 00:32:33.13ID:???
>>310
わざとらしいwwwww

313Name_Not_Found2018/02/11(日) 00:35:15.23ID:???
>>312
わざとだよw 今度から自分の意見を書くときは
質問を書こうかなと思ってねw

314Name_Not_Found2018/02/11(日) 00:36:07.60ID:???
>>311
おいおい・・OOCSSやBEMの話なんてしてないし、
そのあんたが紹介したサイトが「古代のCSS設計」ってタイトルだからそう書いたんだが?
具体的にそのサイトのソースのCSS記述も見たけど
おもいっきりタグで指定してますが?
html body .content-outer {
クラスだけで1つ1つ指定しているサイトではありませんよね?

公式サイトって具体的なそのページのURLで示してよ
今見たページはクラスで全て書いてなかった。タグ指定で書いてたから。

315Name_Not_Found2018/02/11(日) 00:37:48.55ID:???
sass君がやたら凄い勢いでカキコしてるな
気持ちの動揺が隠しきれなくなったか

316Name_Not_Found2018/02/11(日) 00:38:16.25ID:???
次スレからIDつけて

317Name_Not_Found2018/02/11(日) 00:40:25.36ID:???
>そのあんたが紹介したサイトが「古代のCSS設計」ってタイトルだからそう書いたんだが?

何を見てるんだ? タイトルだろ? <title>タグみたか?
見てないにしろページの一番上には
「OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける」と
書いてあって、これがタイトルだが?

でお前は、どの部分だけしか見てないって?
「古代のCSS設計」の部分しか見てないって?
ページの途中にある<h4>でしかない「古代のCSS設計」が
タイトルだって思ったって?
他にもある<h4>のOOCSSやBEMは見てなかってって?
そういいいたいのかな?

318Name_Not_Found2018/02/11(日) 00:41:19.73ID:???
ちなみにBEMとか命名規則の手法が話題になったのってかれこれ3年以上前だぞ

319Name_Not_Found2018/02/11(日) 00:42:48.73ID:???
経験が浅い人は3年前でも古代なのかな?

320Name_Not_Found2018/02/11(日) 00:43:30.92ID:???
てか真面目な話これは本当に良くないよ。
シンプルにスレ違いなんだって。
質問スレでなんだこの横暴…
自治で解決出来ないならダメ元で規制依頼でもしてみます?

321Name_Not_Found2018/02/11(日) 00:43:38.06ID:???
>>317
うん、見てなかった。タイトルの件は間違えたよ。うん。

で?

おれは結局どこのソースをみればいいの?
どこでクラスだけで全て記述されたサイトがたくさん確認できるの?
そのURLを早く貼ってよ

322Name_Not_Found2018/02/11(日) 00:43:58.87ID:???
少なくともそのサイトの人はOOCSSなんかと比較して
「古代」と言ってるわけで、それぐらい読み取れないとダメだよね

323Name_Not_Found2018/02/11(日) 00:44:23.16ID:???
>>321
はいどうぞ?
https://getbootstrap.com/

324Name_Not_Found2018/02/11(日) 00:46:15.80ID:???
クラスだけ(まさかHTMLなしって意味!?)で
全部記述されたサイトというのが何を求めてるのか知らんが
bootstrapはOOCSSの設計が使われてる、クソなフレームワークの一つだね
ほらHTMLを見て!あんなにたくさんクラスが書かれてる
メンテナンス大変そうw

325Name_Not_Found2018/02/11(日) 00:46:32.46ID:???
>>323
クラスじゃないですが?
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}

a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}

326Name_Not_Found2018/02/11(日) 00:49:15.99ID:???
>>325
言うと思ったんで、じゃあ>>264を振り返りましょうか?

> リセットCSS的な用途を除き、HTML要素に直接スタイルを
> 割り当てるのはだめだけど「あるclassを起点にする」ならば

はい、すでに反論済みです。それはリセットCSSです

327Name_Not_Found2018/02/11(日) 00:49:37.24ID:???
>>306
え…oocssとかbemってのは命名規則に基づく設計思想?であってフレームワークじゃないよね?フレームワーク使ってるかどうかなんて関係なくね??
またマウント脳?
しかも設計思想?の話だったら古のcssから続く話だからあってるよ??
日本語大丈夫?

328Name_Not_Found2018/02/11(日) 00:49:45.38ID:???
荒れちゃった
関係ない人ゴメンね

329Name_Not_Found2018/02/11(日) 00:50:57.81ID:???
リセットの意味もわかって無さそうだね

330Name_Not_Found2018/02/11(日) 00:51:30.20ID:???
俺が言ってることをすり替えてきそうな
流れを感じるので

>>228で俺が言ったことを再掲しておきますね

> 名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
> そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
> そうするとHTMLは凄くシンプルになる。

331Name_Not_Found2018/02/11(日) 00:51:54.89ID:???
>>329
わかってるなら、反論しろよw

332Name_Not_Found2018/02/11(日) 00:53:14.81ID:???
>>327
だからOOCSSという設計思想を使ってるフレームワークである
bootstrapを出しましたよ?

ここまでで何か問題が?

333Name_Not_Found2018/02/11(日) 00:53:25.29ID:???
>>331
リセットってのは初期化する事
デフォルトのスタイルを「無効化」する事

334Name_Not_Found2018/02/11(日) 00:54:16.65ID:???
>>327
> しかも設計思想?の話だったら古のcssから続く話だからあってるよ??

それ日本語になってない。
誰かほかの人、こいつが何を言いたいかわかるか?
わかった人は答えてくれ(多分いないから)

335Name_Not_Found2018/02/11(日) 00:55:24.80ID:???
>>333
リセット
re - set
再 - 設定

初期化はformatやinitializeだし
無効化はdisable

英語のレベルで間違ってるぞw

336Name_Not_Found2018/02/11(日) 00:56:56.10ID:???
>>335
https://dictionary.goo.ne.jp/jn/231054/meaning/m0u/

すべてを元に戻すこと。最初からやり直すこと。
機械や装置を、作動前の初めの状態に戻すこと。

337Name_Not_Found2018/02/11(日) 00:57:55.87ID:???
話それるけど

> リセットの意味もわかって無さそうだね

こういうレスする理由わかっただろ?
なぜ自分の意見を言わないのか。

自分の意見に自信がないから、
それは間違ってる(だけど正しいことは言わない。自分が間違ってることがばれるため)
という言い方をするんだよ


こうやって>>329の考えをひきだすと
>>333のようにボロが出るわけさ

338Name_Not_Found2018/02/11(日) 00:58:53.63ID:???
>>336
そこに
> 2 機械や装置を、作動前の初めの状態に戻すこと。セットしなおすこと。

セットし直すことって書いてあるけど?
また見えなかった?また?w

339Name_Not_Found2018/02/11(日) 00:59:55.11ID:???
ここは意見を言うスレではありません。
スレタイを読んでください。

340Name_Not_Found2018/02/11(日) 00:59:56.29ID:???
>>335
>リセットCSS的な用途

これどういう意味で使ってた?
リセットCSSで>>325みたいに文字色やフォントファミリー指定するのか?
そこからずれてるぞ

341Name_Not_Found2018/02/11(日) 01:00:21.50ID:???
無効化するんじゃなかったのか?
こんどははじめの状態に戻すって言い始めたぞw

342Name_Not_Found2018/02/11(日) 01:00:51.37ID:???
>>340
指定するぞ?
ブラウザごとに初期値が違うんだから

343Name_Not_Found2018/02/11(日) 01:01:12.17ID:???
周囲とトラブルばっかり起こしそうな奴だな

344Name_Not_Found2018/02/11(日) 01:01:41.21ID:???
>>340
リセットCSSでフォントをリセットしてる例

http://www.acky.info/tips/css/00020.html

各ブラウザーのデフォルトスタイルを揃えるリセットCSS
http://m-school.biz/dev/css-coding/025-css-browser-reset.htm

345Name_Not_Found2018/02/11(日) 01:03:39.70ID:???
リセットCSSとノーマライズCSSの違いを教えて!

346Name_Not_Found2018/02/11(日) 01:04:52.93ID:???
>>332
いやだからそのフレームワークを見たことあるのかは関係なくない?
命名規則や設計なんてcss覚えた頃からみんな当たり前に考えてるもんじゃん
なんでわざわざフレームワークなんて産廃だしてきたの?

347Name_Not_Found2018/02/11(日) 01:09:53.24ID:???
>>345
リセットCSSというのはブラウザのCSSを再設定して
ブラウザ毎に差異をなくすること。手法の名前
だからどのリセットCSSを使いましょうか?という話が出てくる

Normalize.cssというのはリセットCSS実装の一つで
有用なデフォルトのスタイルは維持して、それ以外の
問題になるものだけをリセットしましょうという方針で作られたもの
http://necolas.github.io/normalize.css/ のみを意味する

348Name_Not_Found2018/02/11(日) 01:12:38.80ID:???
>>346
> なんでわざわざフレームワークなんて産廃だしてきたの?

やっぱりお前の認識はずれてるなw

それとも世間は産廃だと思ってますよ
その前提のもとに話をしてますよねって
言うことにしたいからそういったのか?


まずこう言おうか?

「私はフレームワークは産廃だと思っています」と
そうすれば自然な流れだとして
なぜ産廃だと思っているのか?とお前に聞く流れになるだろ?

話を進めよう

なぜお前はフレームワークが産廃だと思ったのか?
Bootstrapは今も更新し続けられている有名なフレームワークの一つだ

349Name_Not_Found2018/02/11(日) 01:13:17.76ID:???
>>345
超超端的にいうと

リセットcssは
マージンパディングが0
限りなくcssに値がないようなプレーンな状態

ノーマライズcssは
各ブラウザで差がなくなるように調整した値[否0]

350Name_Not_Found2018/02/11(日) 01:17:08.85ID:???
>>348
あんなhtmlに、ましてタグ一個にあんだけclass振るなんて産廃以外のなにもの?
更新されようが今時使ってる奴なんているの?
有名なのもbootstrapプププ方面だよ?

351Name_Not_Found2018/02/11(日) 01:17:37.13ID:???
> リセットcssは
> マージンパディングが0
> 限りなくcssに値がないようなプレーンな状態

それはリセットCSSの一つで Universal Selector ‘*’ Reset と呼ばれている

https://cssreset.com/scripts/universal-selector-css-reset/

他のリセットCSSでも含まれているものが有るが
必ずしも0にする必要はない

352Name_Not_Found2018/02/11(日) 01:21:29.49ID:???
>>348
あと俺は一貫してscss推し基地、定義マン、フレームワークバカはこのスレにふさわしくないと思ってるからな
クリーンなhtml/cssで簡潔に質問者に答える、それがこのスレ。

353Name_Not_Found2018/02/11(日) 01:22:00.89ID:???
>>350
おまえは本当に何の役にも立たないことしか言わないなw
言っとくが俺は最初からbootstrapはクソだって言ってるからな?

bootstrapのようにあんなにclassを多用するのはだめだ
俺のやり方ではclassは最小限であるって話をした所で

お前が、classを多用するやつなんて見たことないって言ったから
(俺が批判しているものの一つである)bootstrapを持ってきてやったんだろうが

でbootstrap使ってるやつ? 全世界で 16.7% 使われてるよ
https://w3techs.com/technologies/overview/javascript_library/all

お前、知らないこと多すぎだろ
それでよく勝ち目のない討論仕掛けたよなw

354Name_Not_Found2018/02/11(日) 01:22:33.79ID:???
>>352
誰もお前の思っていることを語れなんて言ってない

355Name_Not_Found2018/02/11(日) 01:26:25.96ID:???
>>353
討論する気なんてないし>>352なんでどっかでてってくださいっだけ、それ以外はほんと俺の非でかまわないんでどっかいってください

356Name_Not_Found2018/02/11(日) 01:29:22.11ID:???
結局どっか言ってほしいがために、
無知な頭まで仕掛けてきたってわけかw
それでボコボコにされてりゃ世話ないな

357Name_Not_Found2018/02/11(日) 01:31:04.31ID:???
classを多用するもんなんか知らないと言っておきながら
classを多用するbootstrapを前から知っていたかのような
顔するのやめなよ? バレないと思ったかもしれないが
こうやって指摘されると恥ずかしいだろ?w

358Name_Not_Found2018/02/11(日) 01:32:10.17ID:???
>>353
あと誰かと勘違いしてるがおれはその話の中にはでてきたやつじゃないからな…classを多用するやつなんて〜は俺じゃないしこのスレは
scss!定義! マン1人
なぜかフレームワークをだしてくる1人
その他scssフレームワークはスレ違い派 多数
で進んでるからふたりがいなくなれは解決なんだよ

359Name_Not_Found2018/02/11(日) 01:33:08.26ID:???
「でてってください」に答えると
出ていくことはありません。ってはっきり言っておこうか?

絶望したろ?w


出ていくことがあるとしたら俺が飽きた時ぐらい。
これからもHTML/CSSに関連はする話を続けます。

360Name_Not_Found2018/02/11(日) 01:33:56.22ID:???
> で進んでるからふたりがいなくなれは解決なんだよ

少なくとも俺はいなくならないから解決しないってことだな

361Name_Not_Found2018/02/11(日) 01:35:34.39ID:???
この板で
sassやscssで検索してもスレないんだな……

362Name_Not_Found2018/02/11(日) 01:36:10.63ID:???
>>347
なるほどありがとうございます

363Name_Not_Found2018/02/11(日) 01:36:44.34ID:???
>>361
少なくともお前のレスは有るはずだが?

364Name_Not_Found2018/02/11(日) 01:37:07.92ID:???
あ、この板でかw

そりゃsassやscssはこのスレの担当だからね

365Name_Not_Found2018/02/11(日) 01:37:44.42ID:???
>>356
誤字で日本語不自由みたいだから書き直して

366Name_Not_Found2018/02/11(日) 01:38:50.42ID:???
>>364
このスレの担当じゃないから建てろって話でまとまっただろ記憶喪失か?

367Name_Not_Found2018/02/11(日) 01:39:28.59ID:???
>>365
え?もっかい書いて良いのかい?

結局どこかに言って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかw
それでボコボコにされてりゃ世話ないな

368Name_Not_Found2018/02/11(日) 01:39:55.71ID:???
荒らすためにわざとやってるとしか思えん

369Name_Not_Found2018/02/11(日) 01:40:35.56ID:???
>>366
どこでまとまった?
お前の意見以外でまとまったとみなせるような
レス教えて

370Name_Not_Found2018/02/11(日) 01:41:25.82ID:???
>>364

> そりゃsassやscssはこのスレの担当だからね



sassやscssはこのスレの担当だとまとまりました

371Name_Not_Found2018/02/11(日) 01:42:54.95ID:???
>>367

まだ誤字があるからもう一回ちゃんと書いてください。日本語かけるよね?

372Name_Not_Found2018/02/11(日) 01:44:19.19ID:???
「誤字」ですよね?じゃあ誤字である所を示してください
誤字以外は示さなくていいですよ。日本語わかるよね?

373Name_Not_Found2018/02/11(日) 01:45:18.77ID:???
一応「誤字」の定義書いておくか。こいつが日本語読めるか知らんけど

https://www.weblio.jp/content/%E8%AA%A4%E5%AD%97

ご じ [1] [0] 【誤字】
あやまった形の文字。あやまって使った別の字。印刷物の誤植についてもいう。

374Name_Not_Found2018/02/11(日) 01:46:30.99ID:???
あれ?
scss推し定義マンとフレームワークマンは別の人?誰を応援すればいいの?

375Name_Not_Found2018/02/11(日) 01:47:00.03ID:???
全部荒らしの自演
自演じゃなければ同類

376Name_Not_Found2018/02/11(日) 01:47:17.16ID:???
>>374
ありがとう!気づかなかったよ
じゃあもう一回書くね!

結局どこかに行って欲しいがために、   
無知な頭でバトルを仕掛けてきたってわけかw  
それでボコボコにされてりゃ世話ないな 


感謝の気持ちでもう一回!

結局どこかに行って欲しいがために、 
無知な頭でバトルを仕掛けてきたってわけかw 
それでボコボコにされてりゃ世話ないな  


さらにしつこく煽ってもう一回!!

結局どこかに行って欲しいがために、  
無知な頭でバトルを仕掛けてきたってわけかw  
それでボコボコにされてりゃ世話ないな 

377Name_Not_Found2018/02/11(日) 01:48:20.27ID:???
>>374
> scss推し定義マンとフレームワークマンは別の人?誰を応援すればいいの?

お前ん中で自分の都合がいいように解釈すればいいよ
そうすりゃ安心感を得られるだろ?

378Name_Not_Found2018/02/11(日) 01:48:33.58ID:???
>>372
どこかに[言って]欲しい→行って

379Name_Not_Found2018/02/11(日) 01:49:04.57ID:???
>>378
あ、すんません、レス早すぎましたw

380Name_Not_Found2018/02/11(日) 01:49:57.81ID:???
>>378
アンカー間違えたので訂正

ありがとう!気づかなかったよ 
じゃあもう一回書くね!  

結局どこかに行って欲しいがために、    
無知な頭でバトルを仕掛けてきたってわけかw  
それでボコボコにされてりゃ世話ないな   


感謝の気持ちでもう一回! 

結局どこかに行って欲しいがために、    
無知な頭でバトルを仕掛けてきたってわけかw   
それでボコボコにされてりゃ世話ないな   


さらにしつこく煽ってもう一回!!  

結局どこかに行って欲しいがために、    
無知な頭でバトルを仕掛けてきたってわけかw   
それでボコボコにされてりゃ世話ないな  

381Name_Not_Found2018/02/11(日) 01:50:43.30ID:???
>>380
お前苦しんで死ね

382Name_Not_Found2018/02/11(日) 01:52:40.68ID:???
>>376
やっと気づいたか
宿題のように反復ご苦労様。
これで間違えることはなくなりそうだね
ちなみにボコボコってどこ?
いつのまにか攻撃先が変わってるんだけど俺参加し始めたの古代のCSSw云々あたりなんだよね

383Name_Not_Found2018/02/11(日) 01:53:12.77ID:???
>>381
お前の夢はどれも叶うことはないよw

384Name_Not_Found2018/02/11(日) 01:54:58.41ID:???
>>382
> ちなみにボコボコってどこ?

IDでてないからわからんねw

少なくともbootstrapが使われていることを
知らなかったやつとか当てはまるね

385Name_Not_Found2018/02/11(日) 01:56:54.06ID:???
同一人物か知らんけど、

classを多用する書き方があることを知らなかったやつも
俺がボコボコにしたやつの一人だろうな

386Name_Not_Found2018/02/11(日) 01:59:22.21ID:???
俺を追い出そうとしたやつ

sassやcssフレームワークの話をしてるやつは
ボコボコにしたというより、俺を追い出せなくて
かわいそうに感じる人だな

387Name_Not_Found2018/02/11(日) 02:02:28.66ID:???
>283>304>327
>346>350>352
>355>358>365


>>384
はい、俺が書いたのこれ
タブってそうなやつ(文字直せとか)は省いた
で、どれだろ?

388Name_Not_Found2018/02/11(日) 02:05:01.09ID:???
>>387
じゃあお前はbootstrapが使われてないことを知らないやつだなって
ボコボコにしたやつ 兼 かわいそうな人だな。
いくら夢見ても俺が出ていくことはないよ?

389Name_Not_Found2018/02/11(日) 02:09:15.70ID:???
>>388
ん?
[bootstrapが使われてないことを知らないやつ]そんなやついたか?

390Name_Not_Found2018/02/11(日) 02:12:23.89ID:???
現実がみじめなおじさん、標準規格のHTML/CSS質問スレで初心者の質問にスレ違いで非標準のsass/scssの話をしてマウントを取るの巻

なお現実のみじめさは変わらない模様wwww
理由はお察しwwwww

391Name_Not_Found2018/02/11(日) 02:13:06.51ID:???
>>389
いたな

> 更新されようが今時使ってる奴なんているの?

って書いてるしな。

使ってるやつは16.7%もいる

392Name_Not_Found2018/02/11(日) 02:13:33.45ID:???
>>390
ここは質問に答えるスレです

393Name_Not_Found2018/02/11(日) 06:29:20.91ID:???
>>391
日本語読める?
つ か わ れ て な い こ と を し ら な い や つ

394Name_Not_Found2018/02/11(日) 09:35:34.73ID:???
全体の5/6なら
個人向けなら切り捨てるな
業務ならしぶしぶサポートか

どうでもいい話を続けるやつほど
現場では使えない

395Name_Not_Found2018/02/11(日) 11:49:53.56ID:???
今何の話してるのかすらわかりにくい

396Name_Not_Found2018/02/11(日) 11:51:40.13ID:???
>>394
お前何の話してるの?
言っておくけどブラウザシェアの話はしてないよ

397Name_Not_Found2018/02/11(日) 12:21:36.73ID:???
>>297
は?data-の話題そのままだがお前の脳内で勝手に分岐してんだろ

398Name_Not_Found2018/02/11(日) 13:03:05.11ID:???
>>397
これか

>>167の、HTML5違反をして、独自属性をつけるって話?の箇所
>data-hogeでなく

”data-”の有無の話だな。後は知らん

399Name_Not_Found2018/02/11(日) 13:15:09.87ID:???
ダブルコーテーション全角って気持ち悪い…
"data-"無しの独自属性とか何考えてるのって思う

400Name_Not_Found2018/02/11(日) 13:25:48.37ID:???
半角は元の書き込みとの区別とHTML的な意味から外すためだろ
何考えてるでなくその根拠の話だったぞ
終わってるのだからもういいよ

401Name_Not_Found2018/02/11(日) 15:20:46.73ID:???
>>397
分岐してるのは>>169だが?
え、見えない読めない分からない?マジ文盲ワロタwwwww
>>169の話題Bに対するレスを話題Aに対するレスと勘違いwww
日本語の読めたら勘違いしようがないレベルだがw
文盲じゃあしょうがないなwwww

402Name_Not_Found2018/02/11(日) 16:22:54.45ID:???
<div>
  <button>ボタン</button>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</div>
この場合、divにtext-align:center とするとボタンが中央揃えになるのは良いのですが、
li内の「項目1」などの文字も中央揃えになります。
それは回避したいのですが、どうすれ良いですか?

403Name_Not_Found2018/02/11(日) 16:29:34.47ID:???
>>402
button {
display:block;
margin: 0 auto;
}

404Name_Not_Found2018/02/11(日) 16:30:07.78ID:???
width忘れてた

button {
width: 100px;
display:block;
margin: 0 auto;
}

405Name_Not_Found2018/02/11(日) 18:19:29.83ID:???
ボタンのサイズが小さくなってしまいましたとかいいだすだろ
liにtext-align left

406Name_Not_Found2018/02/11(日) 18:38:23.80ID:???
>>404
トリッキーな回答しようとして時代に逆行してるいい例
いまどきピクセル指定でデザインするなんて
将来解像度が1万とか10万とかの時代がきたらどうするつもりなんだ

>>405
みたいなシンプルでいいのに

407Name_Not_Found2018/02/11(日) 18:41:29.16ID:???
>>401
その169は153に対するレスじゃないよ
といってもレス先(アンカー)書き間違いでもない
2chの方見ればわかる
専ブラの都合かなんかでずれてるんだよ

408Name_Not_Found2018/02/11(日) 18:44:23.89ID:???
>>406
皆さんありがとうございました。
>liにtext-align left
で解決しました。
そもそも
divにtext-align:center の設定が
何故olの中のliにまで影響するのでしょうか?
div直下のbuttonにだけ影響すると思ったのですが。

409Name_Not_Found2018/02/11(日) 18:45:52.35ID:???
すまん別件と勘違い
>>407は捨ててくれ

ただなおさら>>398で合ってるやん

410Name_Not_Found2018/02/11(日) 18:48:02.63ID:???
プロパティの継承で調べるといいかも
text系のインラインスタイルはだいたい内側に継承される

411Name_Not_Found2018/02/11(日) 19:00:59.72ID:???
というよりスタイル変更を内側でキャンセルしなきゃいけない構造にするから悪い

<div>
  <div class="centeringContainer"><button>ボタン</button><div>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
  </ul>
</div>

等で適用する範囲を限定するのが自然かと

あとインライン要素を同じ階層で他の要素と並べるのもあまりよくない
なるべくブロック化しておくのがスタイルも適用しやすい

自動出力等でHTMLが変更できないとかでなければね

412Name_Not_Found2018/02/11(日) 19:06:17.40ID:???
誰か>>401を日本語に翻訳してくれ
普通に継続してるようにしか見えんのだが

413Name_Not_Found2018/02/11(日) 19:13:19.11ID:???
>>408
他にもcolorなど子孫まで影響する場合としない場合と、少し経験積まないと確かにわかりづらい
子孫まで継承させるプロパティもあるが>>402とは逆だし使ったことない

414Name_Not_Found2018/02/11(日) 19:17:27.96ID:???
>>152

>>154

>>156

>>169

>>183


続く

415Name_Not_Found2018/02/11(日) 19:19:21.22ID:???
続き

>>262

>>263

>>265

>>266

>>271

>>297

dataの話?文盲wwww

416Name_Not_Found2018/02/11(日) 19:53:57.90ID:???
>>405
>ボタンのサイズが小さくなってしまいましたとかいいだすだろ
すまんそこまで気が回らん勝った

しかし打ち消しはしたくないので>>411の方が良いと思う

417Name_Not_Found2018/02/11(日) 20:03:36.70ID:???
Bootstrapなんか使ってんのPGくらいだろ

418Name_Not_Found2018/02/11(日) 20:26:19.30ID:???
>>415
やはりdataの有無の話だなw

419Name_Not_Found2018/02/11(日) 20:33:14.77ID:???
>>412
相手するな
草3つは負けを認めたようなもの
どうせunkochinchinなんてアホなこと書いたのも本人だろ

420Name_Not_Found2018/02/11(日) 20:42:19.36ID:???
dataの話に一切関わってないやつに行きなりdataの話で食って掛かるとか脅迫性障害じゃん?

421Name_Not_Found2018/02/11(日) 20:54:45.58ID:???
以降unkochinchinはスルーで

422Name_Not_Found2018/02/11(日) 20:57:02.89ID:???
自分がdataレスバで熱くなって、関係ないレスまですべてdataのレスに見えてるんだろうな。
覚醒剤でもやってるんじゃないか?

423Name_Not_Found2018/02/11(日) 21:34:38.54ID:???
>>411
なるほど。
大変参考になりました。
411さんはかなりの上級者の人ですね。
ありがとうございます。

424Name_Not_Found2018/02/11(日) 21:45:19.36ID:???
>>418
だな
わざわざリンク書かなくてもツリー構造でも見てて全て見えてるってのになんかかわいそう
もういいわ

425Name_Not_Found2018/02/11(日) 21:51:21.80ID:???
とりあえずdataくんの「暇じゃない」ってのは嘘だったな。

426Name_Not_Found2018/02/11(日) 22:08:18.33ID:???
>>402
div>button{
text-align:center;
}

じゃダメなんだっけ?

427Name_Not_Found2018/02/11(日) 22:15:52.63ID:???
>>414-415
冗長だわ。俺がまとめといてやろう。
二人を仮にdataくんとunkoくんとする。

1. dataくんが、unkoについてのレス>>183に対し攻撃

2. 煽りあいの後、>>271にて、dataくんが183をdataに関するレスと勘違いしていたことが発覚

3. 183のレス先>>169ではdataとunko2つを話題にしていた

4. dataくん、>>169はdataに関してのみのレスだと強弁

5. dataくん、unkoの話題をしていたunkoくんにdataの話題で言いがかりをつけたことを認めず自作自演で火消し中。自称暇じゃないらしい>>265

428Name_Not_Found2018/02/11(日) 22:24:44.02ID:???
こっちでもdataの話題してるけど、
また別の話なんだよなぁ
俺は関係してない

429Name_Not_Found2018/02/11(日) 22:28:58.03ID:???
暇じゃないなら勘違いしてました、でごめんなさいしとけばよかったのに。
よっぽど暇かレスバトル体質なんだろうな。
暇な奴ほど暇じゃないアピールするよな。
その後の行動で自ら暇人ですとバラしていくスタイルw

430Name_Not_Found2018/02/11(日) 23:11:48.13ID:???
昨日かおとといくらいから書きまくってる奴いるけどすげーな
一日中5chやってたのか
完全に中毒だな

431Name_Not_Found2018/02/11(日) 23:14:57.41ID:???
とりあえず自己顕示欲を満たしたいなら
ブログでアフィやったほうがいいんじゃね?
荒らすなよクソが

432Name_Not_Found2018/02/11(日) 23:18:48.52ID:???
というか昨日も書いたけどid表示がないから誰がどのレスを書いたのかがさっぱり分からない
そくこれで延々レスのやり取り出来るなと

433Name_Not_Found2018/02/11(日) 23:40:54.02ID:???
>>426
ボタン自体を中央寄せなのでそれは違う

>>432
普段誰とも喋らないから、相手されるのが嬉しくて仕方ないんだろう
引きこもりニートか、ぼっちの中学生ってところだろうな
関わるだけ無駄だぞ

434Name_Not_Found2018/02/11(日) 23:43:37.13ID:???
自称暇じゃない引きこもりニートぼっち中学生って凄いな

435Name_Not_Found2018/02/12(月) 10:10:35.47ID:???
>>427
4は違ってる
data-なし違反根拠が論点なので、unkoでなくhogeであっても同じこと
もう1人がunkoに対して反応したのでただ同意しただけだろ
勘違いはしてない

436Name_Not_Found2018/02/12(月) 10:26:40.44ID:???
もういいって

437Name_Not_Found2018/02/12(月) 10:41:49.77ID:???
>>427=435だぞ
自作自演でスレ違いのい話続けて、スレを荒らす手法
延々続けるとその内誰か釣られて勢いが出る

438Name_Not_Found2018/02/12(月) 10:46:36.43ID:???
夜中に自演連投してるのも荒らしだな

439Name_Not_Found2018/02/12(月) 10:46:55.87ID:???
position:staticな要素が
position:absoluteな要素を包含できないようになっている理由は何ですか?
それを出来るようにした場合になにがまずかったのかが分かりません

440Name_Not_Found2018/02/12(月) 11:05:21.97ID:???
position:staticってデフォルトじゃねーの?
普通にposition:absoluteって書いた
position:staticに内包されてるのと同じなんじゃねーの?

441Name_Not_Found2018/02/12(月) 11:15:36.87ID:???
何故か包含できないと思い込んでいましたが
staticにabsoluteを入れても、absoluteは指定通りに表示されますね
staticの高さ計算から外れてstaticが消えてしまう場合があるので
出来ないと思い込んだのかもしれません
ありがとうございました

442Name_Not_Found2018/02/12(月) 11:42:18.65ID:???
中身無しで高さ無し、要素が消えた!
この状態って初心者の鬼門だな

443Name_Not_Found2018/02/12(月) 18:33:51.35ID:dobqKJPR
質問です。
<img>タグのwidthとかheightって、width=320でもwidth="320"でも動作するけど、""を使わないのは良くないと思っていいですよね?

444Name_Not_Found2018/02/12(月) 18:35:50.52ID:???
良くない理由なんてないだろ

445Name_Not_Found2018/02/12(月) 18:37:17.11ID:dobqKJPR
>>444
?ということは""はなくてもいいと?

446Name_Not_Found2018/02/12(月) 18:41:39.12ID:mE+yTOzi
>>445
The attribute value can remain unquoted
if it doesn't contain spaces or
any of " ' ` = < or > .
Otherwise, it has to be quoted using either single
or double quotes.
The value, along with the = character,
can be omitted altogether
if the value is the empty string.

だそうな

447Name_Not_Found2018/02/12(月) 18:47:56.61ID:dobqKJPR
>>446
なるほど。特定の文字を含まなかったら無理に""で囲む必要はないんですね。
見た感じ気持ち悪いけど。

勉強になりました。ありがとうございました。

448Name_Not_Found2018/02/12(月) 19:25:21.56ID:???
パース速度考えると省略できるところは省略したほうが速いのか?
ブラウザの実装に詳しい人教えてくれ

449Name_Not_Found2018/02/12(月) 19:39:05.98ID:???
省略したほうが速いよ
保守性は下がるけど、まぁ好きにすればいい

450Name_Not_Found2018/02/12(月) 20:36:30.65ID:???
>>449
今時のPCだとたいした速度差にはならないような

451Name_Not_Found2018/02/12(月) 21:00:35.30ID:???
>>451
実質、無い
保守性を考えたほうがいい

452Name_Not_Found2018/02/12(月) 22:09:54.91ID:???
>>451
自己レス乙

453Name_Not_Found2018/02/13(火) 09:12:35.15ID:???
>>452
自己レスじゃなくて自己ループレス

454Name_Not_Found2018/02/13(火) 10:20:38.00ID:???
WebStormのプラグインのLiveEditを使いたいのですがうまく作動しません。
環境はwin7でクロームにJetBrains IDE Supportも入れています。
設定のプラグインのところでもliveeditにチェック入れています。
他に何をすべきでしょうか?

455Name_Not_Found2018/02/13(火) 12:26:55.77ID:???
http://jsbin.com/yazelolulu/1/edit?html,css,output

三つのフローティング要素があり、
二つ目は隙間に入りきらず「フロート落ち」したとします
三つ目はその隙間に入るサイズだったとしても、
二つ目と同じ垂直位置になり、一つ目の横には行きません
感覚的には、一つ目のフローティング要素に横に配置されそうですが。
何故このような動作になるのでしょうか?
フローティング要素が遡行できるのは直前の要素までなのでしょうか?

456Name_Not_Found2018/02/13(火) 12:42:41.72ID:???
>>443-451
保守性を考えて、常に、" " で囲む

どうせ、webpack などのツールで、minify するから、
自分で対応するのは、バグを増やすだけ

いらん事を考えるな

457Name_Not_Found2018/02/13(火) 12:50:35.00ID:???
どういう理由で保守性が上がるんだ?

458Name_Not_Found2018/02/13(火) 19:39:13.00ID:???
きもいやつ消えた?
連休中、終日レスしてて、会社始まったらおとなしくなったようだな

459Name_Not_Found2018/02/13(火) 22:25:40.14ID:???
うわっなんかきもいやつきた(|||´Д`)

460Name_Not_Found2018/02/13(火) 23:52:14.56ID:???
見れば分かるのにあえて聞いて呼んでるのだろ
ただ荒らしたいだけ

461Name_Not_Found2018/02/14(水) 00:00:38.95ID:???
>>455
そういう仕様として決められている。
三つ目が二つ目より上に来ることは決してない。
さもなければ、画面幅に依存して上に来たり下に来たりして、読む側はとまどうだろう。

462Name_Not_Found2018/02/14(水) 22:04:48.29ID:???
きもいやつはjqueryスレに移動したよw

463Name_Not_Found2018/02/14(水) 22:11:52.47ID:???
よんだ?

464Name_Not_Found2018/02/15(木) 01:10:19.99ID:???
jQueryスレご愁傷様w

465Name_Not_Found2018/02/15(木) 10:48:46.72ID:???
あっちでもまだdata-の話してて笑うわ

466Name_Not_Found2018/02/15(木) 11:06:16.66ID:???
>>439の件ですが
udemyのCSS / CSS3 マスターコースを観ていたら
absoluteのための基準を作るために親をrelativeにすると言っていました
この自分の認識も、おそらく以前見た教育系コンテンツから得たものだと思います
ただstaticだと何故absoluteのための基準になれないのかが分かりませんし、
実際試してみると、staticでもabsoluteを正常に包含できている気もします
どうなのでしょうか?

467Name_Not_Found2018/02/15(木) 11:55:27.68ID:gCTLQcdQ
↓のHTMLの時、.p1と.p2のfloat:left;を維持したまま両要素を縦に並べたいのですが、
.p2にclear:both;を設定する意外に良い方法はありませんか?
CSSに詳しい方、ご教授ください。
https://jsfiddle.net/3ozu1pv5/1/

468Name_Not_Found2018/02/15(木) 12:36:36.21ID:???
flex

469Name_Not_Found2018/02/15(木) 13:08:59.83ID:Gp/5W/YS
福嶋恵子容疑者は罪の重さを知れ

470Name_Not_Found2018/02/15(木) 13:29:14.61ID:???
>>467
width:100%

471Name_Not_Found2018/02/15(木) 13:50:11.40ID:gCTLQcdQ
>>468
>>470
レスありがとうございました。

472Name_Not_Found2018/02/15(木) 14:31:57.29ID:???
>>466
CSSの仕様をよく読んだ?W3CでもMDNでもいいから穴が開くほどよく見てみ
staticは初期値で全ての要素が初めはstaticでありabsoluteの基準にはならない
absoluteはrelativeなど位置指定された親を基準にする
もし位置指定された親がなければトップレベルの親つまりbody要素を基準にする

473Name_Not_Found2018/02/15(木) 19:28:14.92ID:???
>>467
その質問の仕方だと方法はない
floatを維持してスペースがある限り横にならぶ

>>470のようにスペースをなくすってのは1つの方法だけど
floatの意味がないからやりたいこととは違うんだろう

p1, p2 を縦に並べた上で次の要素をその右におきたいならいくらでも方法はある

474Name_Not_Found2018/02/16(金) 17:53:48.96ID:???
PCサイトとスマホサイトを切り替える時のブレイクポイントどうしてますか!?
参考にしたいデス

475Name_Not_Found2018/02/16(金) 19:10:12.65ID:???
基本はリキッドで作って、あとはざっくり
ipadはでかいんだからPCデザインでいいよね?って思いながら

476Name_Not_Found2018/02/16(金) 19:22:50.88ID:???
ブートストラップに全て任せてる

477Name_Not_Found2018/02/16(金) 19:59:21.22ID:???
768pxが境界線だわ
なんおサイズか忘れたけど、もうずっとこれでやってる
一体何のサイズなんだろうなぁ

478Name_Not_Found2018/02/16(金) 20:01:32.88ID:???
アイポァッドじゃないの?

479Name_Not_Found2018/02/16(金) 21:17:02.91ID:???
原文ママって、<sup>要素で表現すべきですか?
それとも<span class="sic">などとしてCSS側で表記すべきですか?
個人的には、意味が違う (唯の視覚的な装飾ではない) ので <sup> かなとも思うのですが。

4804792018/02/16(金) 21:17:50.55ID:???
すいません質問なのでageます

481Name_Not_Found2018/02/16(金) 21:31:14.47ID:???
は?

482Name_Not_Found2018/02/16(金) 21:45:30.22ID:???
ここまで意味が分からない質問は初めてだわ

483Name_Not_Found2018/02/16(金) 22:10:43.71ID:???
<p><sup>弟は一言こういいました。<br>「飯はまだかね?」<br>姉はすかさず言い返しました。<br>「さっき食べたでしょ」<br>二人は末永く飯を食べましたとさ。</sup>(原文ママ)</p>

こんな感じにしたいってこと?
<sup>は上付き文字だぞ?

4844792018/02/16(金) 22:14:12.14ID:???
すいません言葉足らずでした。
引用文に「原文ママ」という注釈を加える時、その文言をどうタグ付けすべきかという質問です。
例えば
```
<q cite="http://iss.ndl.go.jp/books/R100000002-I000003978857-00" lang="ja">
必生<sup>原文ママ</sup>の作品を書き、地球へ痕を残すつもりです
</q>
```
という構造の<sup>原文ママ</sup>というタグ付けが、果して意味レベルなのか装飾レベルなのか、
どちらで解釈すべきかということです。
意味レベルでの注釈なら <sup> かそれに準ずるものですし、装飾なら <span class="sic"> とでもやって
CSS側で処理すべきですし……

485Name_Not_Found2018/02/16(金) 22:23:00.23ID:???
>>484
「原文ママ」なんか括弧付きでそのままでいいと思うがそれは置いといて、
supはHTMLの勧告で、上付きにしないといけないちゃんと意味のある時にだけ使うようにされてる
見栄えのためだけに使うべきではない

4864792018/02/16(金) 22:44:14.30ID:???
>>485
原文ママは原文には含まれていない用語なので、W3C が言う「意味」に合致するかは分かりませんが
ある程度構造的に区別するべきだと思うんです。
<small>ですかね。注釈という意味では。

487Name_Not_Found2018/02/16(金) 22:45:10.28ID:???
〔ママ〕
とするだけでよいんじゃないかな

488Name_Not_Found2018/02/16(金) 22:49:08.56ID:???
それだとパパはどこか探してしまいそう

489Name_Not_Found2018/02/16(金) 23:09:43.33ID:???
<blockquote>尾木ママ</blockquote>

4904792018/02/16(金) 23:18:50.08ID:???
Wikipediaなんで眉唾なんですが、ざっと目を通した限りでは
<sup> 若しくは <small> のようですね。
しかし確かに上付きという目的の為に <sup> を用いるのは W3C 勧告に即していないと思います。
https://en.wikipedia.org/wiki/Template_talk:Sic
ただ、しつこいですが「原文ママ」は原文に含めているが意味的には非原文≠ニいう構造を取るべきだと思うので
やはりなんらかのタグで区別したいです。
原文に含めているが意味的には非原文=ゥこれで想起したのが引用者註ですが、これもやはりタグで区別するとかいう意見は見当たりませんでした。
うーん。私が異端ですね、これは……w
https://stackoverflow.com/questions/37029600/is-there-a-sic-attribute-or-tag-in-html
ここでも質問と解答がありましたが、<i> 要素で囲めという主張でした。

491Name_Not_Found2018/02/16(金) 23:21:32.40ID:???
>>490
異端じゃないだろタグで区別すべきwikipediaが間違ってる。wikipedia根拠にするとか

4924792018/02/17(土) 00:36:12.72ID:???
>>491
ありがとうございます。
結局、
<q
cite="http://www.worldcat.org/oclc/676129102"
lang="ja">
必生<small class="sic"></small>の作品を書き、地球へ痕を残すつもりです
</q>
このような HTML に対し
q small.sic,
blockquote small.sic
{
font-size: 80%;
vertical-align: super;
}
q:lang(ja) small.sic::after,
blockquote:lang(ja) small.sic::after
{
content: "\3014原文ママ\3015";
}
のような CSS を用意することで解決しました。
<small>要素が空でもいいのかなとか色々疑問は残りますが、まあ企業じゃなくて個人だし、もうこれくらいで妥協します。

493Name_Not_Found2018/02/17(土) 16:28:45.92ID:???
Windowsのスタートメニューみたいなクリックすると展開する階層メニューってJSなしでCSSだけでつくれる?

494Name_Not_Found2018/02/17(土) 17:15:59.97ID:???
>>493
作れるよ
メニューにcheckbox使って、例えば
.menu-button:checked + .submenu {
display: block;
}
で表示させる
閉じるのもメニュークリックが必要だけど

495Name_Not_Found2018/02/17(土) 18:34:30.64ID:???
原理的にはどんなアクティブなものも(パフォーマンスが許す限り)作れる
あらゆる画面遷移を全部htmlにうめこんでdisplayをnoneとそれ以外で切り替えていけばいいだけ

ただ現実問題画面遷移が2つ3つならcssでくんでもいいけど
そんなこったことしないならプルダウンメニューぐらいJS知らなくてもjQueryのテンプレコピーするだけで1時間もあれば作れる

496Name_Not_Found2018/02/17(土) 18:51:28.93ID:???
パフォーマンスならjsよりcssのほうがいいじゃん

497Name_Not_Found2018/02/17(土) 19:38:16.55ID:???
要素のレイアウトの為に切り替えが必要になる
display:inline;、display:inline-block;、display:block;

要素の表示/非表示を切り替えで使用する(クラスで)
display:block;、display:none;

これらは用途が違うので、干渉させたくないのだけど良い方法ないかな?

表示/非表示はvisibility:hidden/visibleで制御できれば理想なんだけど
高さなどの情報が残ってまう

498Name_Not_Found2018/02/17(土) 19:52:46.14ID:???
display:blockは要素を表示するものじゃなくて、
要素をブロック要素として扱うだけだぞ?

display:blockが表示というのなら、
display:inlineもinline-blockも表示だ


お前、JavaScriptからcssのスタイルを直接変更しようとしてるだろ?
JavaScriptでcssを直接いじるな。classを使え

499Name_Not_Found2018/02/17(土) 20:50:35.79ID:???
>>497
用途が違うとは?
同じじゃないかな?

500Name_Not_Found2018/02/17(土) 23:07:36.98ID:???
> パフォーマンスならjsよりcssのほうがいい
↑これ確かにそれっぽいけど、実際に速さの違いなんて測れるの?
自分としては眉唾モノなので、「CSSでもできるけどJSの方が楽」な挙動はJSで書いてるわ。

501Name_Not_Found2018/02/17(土) 23:26:16.23ID:???
速いし軽い

502Name_Not_Found2018/02/18(日) 00:33:36.38ID:???
制作会社など現場で働いてる人に聞きたいんですが
要素を横並びなどにコーディングするとき使ってる技術は何ですか?
float、flexbox、grid、tableなど色々あると思いますが

503Name_Not_Found2018/02/18(日) 00:37:30.94ID:???
>>472
staticの中でabsoluteすると
たしかにbody基準になりました
以前実験した時には
body直下に作ったstaticな要素の中で子をabsolute指定したので
一見親要素基準で正常に表示されているように見えたのでした
ありがとうございました

504Name_Not_Found2018/02/18(日) 01:00:15.79ID:???
border-widthを可変にしたいのですが
%だと認識されず、vwだと認識されるけど期待した通りにならない

2%で可変にしたような効果を得るにはどういう書き方したらいいですかね

505Name_Not_Found2018/02/18(日) 01:13:24.86ID:???
>>498,>>499

用途
jQueryで言うなら.show()、.hide()にあたるもの。
表示/非表示のみをcssのクラスとして作成し制御したい場合。

表示/非表示のみを制御するcssクラスを作成した場合、
ある個所はdisplay:blockが良くても別の場所ではdisplay:inline-blockであってほしい事があり、
1つのクラスだけでは使いまわせない不便さがあるから、良い方法ないかと思って質問してみた。

>>498
jsからcssのスタイル変更なんてしようとしてないよ。
レスポンシブでデザインをcssのみでどこまで切り替えできるかをやってるだけ。

506Name_Not_Found2018/02/18(日) 01:32:39.39ID:???
>>505
とあるサイズでだけ非表示にするだけのクラスを用意したらどうかな?
@media screen and (max-width: 900px) { .mobile-hidden { display: idden; } }
みたいなかんじで

507Name_Not_Found2018/02/18(日) 01:33:04.82ID:???
Hじゃないからhが抜けちゃったよ

508Name_Not_Found2018/02/18(日) 01:39:25.93ID:???
>>505
> 表示/非表示のみを制御するcssクラスを作成した場合、
それがそもそもおかしい

CSSで共通化したいならSCSSを使うべき

509Name_Not_Found2018/02/18(日) 02:11:22.48ID:???
>>506
むむ?
ちなみにdisplay:にhiddenという値は使えないのでは?

>>508
クライアントが触るからSCSS依存はダメだよ

510Name_Not_Found2018/02/18(日) 02:38:37.84ID:???
>>509
ごめん、noneね

511Name_Not_Found2018/02/18(日) 02:49:45.92ID:???
クライアントがSCSS触ればいいじゃん?

512Name_Not_Found2018/02/18(日) 05:17:02.80ID:???
数年ぶりにCSSを学び直し中でして、最新のデザインパターンを参考にする為にコリスを利用してたんですが、
なんか Fatal error とか出ててサイト見れないんすよ。ここってしょっちゅうエラー吐くんですかね?
他に参考にできるサイトやブログってありますかね?

513Name_Not_Found2018/02/18(日) 06:30:15.11ID:???
IEでは記事のリンクを押すとそのページに飛ぶのですが
GoogleChromeやFirefoxでは記事を押してもそのページに飛びません。
リンクされず記事の文字だけが表示されている状態です。
URL自体FirefoxとChromeだとページ開きません。
私が作成したhtmlのみです!他の方のホームページのリンク押したら飛びます。
1日色々調べてやったのですが、分かりませんでした・・・。

Firefoxのバージョンは Firefox Quantum 58.0.2(64bit)
Google Chrome のバージョンは64.0.3282.167(64bit)です。
どちらもJavaScriptは有効になっております。

<!DOCTYPE html>
<html lang="jp" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
〜〜〜〜
〜〜〜〜
<head>
〜〜〜〜
〜〜〜〜
<script src="ttp://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</head>
<body>
//↓問題のやつです。id="rss"はCSSでパーツの位置を設定しております。
<div id="rss" name="#rss"><script id="【単眼RSSパーツ】</script></div>
</body>
</html>
教えてください。

514Name_Not_Found2018/02/18(日) 06:38:48.32ID:???
>>502
並べる対象によるかな

横に並べるだけならinline-blockにして
幅そろえたいならwidth50%とか33%とかつける

tableだけはない

flexは基本縦にレイアウトそろえたいときだけかな

個人ページだったらflex使いまくるけど
大勢で管理すると提供原稿ソース勝手に縮小されてたりするの気づかなかったりするから危険

まあ大量ページで予算によっては了承の上でtableやフォントだらけの汚いソースそのまま移行もある

515Name_Not_Found2018/02/18(日) 06:47:24.23ID:???
>>513
そのHTMLじゃどうやってもとばないと思うけど
jsで何かしてるならこのスレの範囲じゃない

他からrssラベルにとびたいなら
nameには#なしで名前つけて飛び先のhrefの中に#をつける

あとハイライトつきのエディタにはりつけてみたら?
"がとじてないのが原因だったりしないの?

516Name_Not_Found2018/02/18(日) 07:15:08.94ID:???
>>515
Sublime Textっていうテキストツールを使っています!

わかりにくくてごめんなさい。
RSSパーツの部分はこうなってます。
https://i.imgur.com/472eVsV.png
貼れなかったので画像で・・・。
もしかしてスレ間違えたでしょうか?
IEでは開いてGoogleChromeでは開かない
これってなにかCSSでリンク拒否してるのかな?
と思って・・・。スレ間違えてたらごめんなさい。

517Name_Not_Found2018/02/18(日) 07:34:44.98ID:???
>>513
解決しました!なんで解決したか分かりませんが・・・。

>>515
の方ありがとうございました。

518Name_Not_Found2018/02/18(日) 09:13:12.78ID:???
>>508
キチガイ&スレ違い

519Name_Not_Found2018/02/18(日) 10:14:15.63ID:???
>>517
おめでとう

キャッシュにCSSがのこってたりするからね
そういうときはこまめにCtrl+F5するんだ

520Name_Not_Found2018/02/18(日) 15:01:47.09ID:???
>>514
まったく同じだわ。
漏れやミスが一番重要だよね。1度も許されないくらいの感覚でやってる。
自分も個人で完結できるようなゆるいやつはflex使いまくってる。

521Name_Not_Found2018/02/18(日) 17:12:50.96ID:???
ブロックレベル要素に直接内包されたテキストは匿名テキストになりますが
CSSのセレクタでこの匿名テキストを指定することは出来ないのでしょうか?
font-sizeなどはコンテナのブロックレベル要素で指定できますが
vertical-alignはコンテナで指定しても有効にはなりません
spanで囲んで非匿名のインラインレベル要素にするしかないのでしょうか?

522Name_Not_Found2018/02/18(日) 17:54:20.18ID:???
そういうときこそflex

523Name_Not_Found2018/02/18(日) 18:42:22.44ID:???
>>521
テキストノードをCSSで選択することはできないと思う

524Name_Not_Found2018/02/19(月) 14:49:40.78ID:???
ほんと疑問なんですけど、IE10以下なんぞに対応する必要ありますかね?

525Name_Not_Found2018/02/19(月) 19:42:26.30ID:???
趣味ならない。
仕事ならお前が決めることではない。

526Name_Not_Found2018/02/19(月) 21:15:04.15ID:???
仕事でも通常はない
もし客から対応言われたら必要ないことを説明して納得してもらう
それでもどうしてもと言われたら見積書にIE10以下対応の項目入れて多めの見積りをする
それで対応することはまずない

527Name_Not_Found2018/02/19(月) 22:50:35.26ID:???
>>524
googleのsvnがhtml5.js終了したせいでhtml5のタグがやっかいなことになったね
これ表面化してないけど結構これからヤバイかも

528Name_Not_Found2018/02/19(月) 22:53:48.14ID:???
>>525
趣味だがしてる
してもさほど不便ないし

529Name_Not_Found2018/02/19(月) 23:02:02.75ID:???
>>527
svn?
cdn?

530Name_Not_Found2018/02/19(月) 23:02:51.77ID:???
趣味ならそれこそどこまで対応したっていいんじゃないかな

531Name_Not_Found2018/02/19(月) 23:19:54.97ID:???
9以上
@media使えないのはさすがにダメだ

532Name_Not_Found2018/02/20(火) 16:11:21.95ID:???
>>467
clearfixとかってのはどうなん?

533Name_Not_Found2018/02/20(火) 17:01:36.33ID:???
htmlセレクタでfont-size: 62.5%;って書くのがド定番ですやん?
IE11だと9.93pxになるんですがこれが普通なんですかね?

534Name_Not_Found2018/02/20(火) 17:15:07.61ID:???
>>532
clearfixは結局clear:bothを当ててるだけだから変わらない。

535Name_Not_Found2018/02/20(火) 17:18:39.05ID:???
jqueryスレがwwwwww
いつぞやのdwと似たような流れだなぁ
てかdwバージョンアップしたら待ち望んだ左右分割表示が!
これはdwに戻る日が来たかなと思ったけどなんか挙動がおかしい。
関連ファイル?を左右分割できるだけでファイル自体を二個開いて横に並べられるわけではないという謎のクソ仕様になってた…さよならdw

536Name_Not_Found2018/02/20(火) 21:07:12.11ID:???
<div class="labeledImage">
<div class="text"><div>テキスト</div></div>
<div class="image"><img src="http://placehold.jp/200x150.png"></div>
</div>

このHTMLで

https://dotup.org/uploda/dotup.org1468519.jpg

こんな感じで画像サイズに依存せずに同じ大きさのブロックを左側につけてその中央に文字
さらに全体を中央に表示って可能ですか?

537Name_Not_Found2018/02/20(火) 21:21:24.52ID:???
すいませんもう1つ

<div class="test2">
<div class="image">
<div><img src="http://placehold.jp/200x150.png"></div>
<p>ながーーーーーーーーーーーーーーーーーい画像の説明</p>
</div>
<div class="text">
<p>テキストテキストテキストテキストテキストテキスト</p>
</div>
</div>

このHTMLで画像のサイズ指定なしで

https://dotup.org/uploda/dotup.org1468544.jpg

この上みたいに画像サイズ分で分割したいんですけど
いろいろためしてもどうしても下みたいになってしまう
どうすればいいか教えていただけませんか?

538Name_Not_Found2018/02/20(火) 21:32:18.11ID:???
>>536
可能です(めんどくさい)

>>537
それぞれのブロックに50%とか横幅を指定すればいい

539Name_Not_Found2018/02/20(火) 21:54:32.62ID:???
>>537 は前スレで画像の幅でテキストを折り返すって質問と回答あったから
それで右側ブロック化すればあとはflexなりfloatなりでいけると思う

>>536はわからんなー

>>538
「画像サイズ分で」分割っていってるからそれは違うんじゃない?

540Name_Not_Found2018/02/20(火) 22:04:42.60ID:???
前スレというか>>5だな

541Name_Not_Found2018/02/20(火) 22:58:33.94ID:???
>>539,540
教えていただいてありがとうございました
こちらのほうはうまくいきました

width:0.1%がなんで必要なのかわかってないですけど
ないとうまくいかないので重要なんですね……

542Name_Not_Found2018/02/20(火) 23:51:53.47ID:???
何度もすいません

<div class="test4">
<div><img src="http://placehold.jp/400x200.png"></div>
<div><img src="http://placehold.jp/300x300.png"></div>
<div><img src="http://placehold.jp/200x400.png"></div>
</div>

<div class="test4">
<div><img src="http://placehold.jp/150x50.png"></div>
<div><img src="http://placehold.jp/100x100.png"></div>
<div><img src="http://placehold.jp/50x150.png"></div>
</div>

こんな感じのいろんなサイズの画像がきても

https://dotup.org/uploda/dotup.org1468716.jpg

こんな感じで高さをそろえてかつページ幅におさまるように伸縮して横並びに表示したいんですけど
ずっと検索してても単一画像や幅そろえるのはあったんですが
複数画像のはjsを使ったのしか出てこないんですよね…

CSSだけでやるのは無理なんでしょうか

543Name_Not_Found2018/02/21(水) 02:38:33.05ID:???
>>542
divの幅を%指定にしてflexとflex-wrap:wrap
各画像幅の比率は固定じゃないですとか言うなよ?
そんなケースあり得ないからな

544Name_Not_Found2018/02/21(水) 06:39:35.29ID:xcnXEx3C
>>542
グーグルの画像検索結果みたいにしたいってことなら
画像1個の幅が決定できないので両端揃えには根本的には出来ない

545Name_Not_Found2018/02/21(水) 13:38:58.50ID:???
本読みながら写経しててまったく同じ記述してるつもりなのに表示がほんと違って原因も解らなかったらすごくへこむよね

546Name_Not_Found2018/02/21(水) 16:49:11.60ID:???
未経験から月30万のwebデザイナーか…
https://fenixjob.jp/web_designer/search-list

547Name_Not_Found2018/02/21(水) 18:35:58.17ID:???
>>546
風俗

548Name_Not_Found2018/02/21(水) 19:06:42.64ID:KAqCYuF6
久々にWebページ作成しているんですが、
HTML5で作ろうとしてサンプルサイト(大手も含め)見てると、
<header> <section> or <article> <footer>
これらのタグは使わなくても良いんでしょうか?
それを全く使ってないサイトも多く?あります。
<header>タグ使っても中にh1入れてなかったり。
body以下は昔のようにdiv構成だったり。
※jquery等での使用ならば仕方ないと思うけど。

h1が必須のタグってheader, sectionだけでしょうか?

549Name_Not_Found2018/02/21(水) 19:18:38.60ID:???
使わなくていい。混乱させるための罠だぞ

550Name_Not_Found2018/02/21(水) 19:36:53.21ID:???
>>543
ごめんなさい
どんな画像サイズにも対応できるようにしたいんですけどいってませんでしたね

>>544
やっぱり無理ですよね
明日顧客に無理ですっていってみます
無理ってことがわかるだけでも助かります
ありがとうございました

551Name_Not_Found2018/02/21(水) 20:11:51.44ID:???
>>548
headerタグとh1タグはなんら関係性はないのでサンプルサイトの見かた自体が間違ってる

552Name_Not_Found2018/02/21(水) 20:37:18.63ID:xcnXEx3C
>>550
JS書けばいいじゃない
並べるアルゴリズムはもう出揃ってるし

553Name_Not_Found2018/02/21(水) 20:39:19.18ID:???
>>536
できたわ

.labeledImage {
margin-left:50%;
position: relative;
display : table;
}

.labeledImage .text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

display:flex;
align-items: center;
justify-content: center;

background-color:#eef;
transform:translateX(-100%);
}

5545482018/02/21(水) 22:01:37.03ID:???
>>551
> イントロダクションやナビゲーションの支援となるグループを表します。
> header 要素は、通常は、セクションの見出し(h1–h6 要素や hgroup 要素)を入れることを想定しています。
> しかし、コンテンツの目次や検索フォームや関連のロゴなど、他のコンテンツを入れることもできます。

「想定している」だけでValidateなどで指摘されたり、
悪いわけでは無いんでしょうか?

555Name_Not_Found2018/02/21(水) 22:37:08.09ID:???
>>553
ありがとうございます
昨日の例もそうですが画像をdisplay:tableでかこうとぴったりのサイズがとれるんですね
勉強になります

今週でダメなら50%50%のボックス作って右側の画像はボックス内に枠つきでおさめようかと思ってました

>>552
アクティブなコンテンツならともかくデザインのためにjs使うのは汚いってのがうちの会社の認識なので
この程度の静的デザイン決定でjs使うぐらいなら代替デザイン提示したほうがましかなと
客がjs使ってでもこのデザインにこだわったらべつですけど
いずれにしろjsが必要になると値段も担当もかわるので自分の一存じゃきめられない

556Name_Not_Found2018/02/21(水) 23:46:50.52ID:???
クライアントのサイト構築の場合みばえよく作って終わりの契約ならともかく
たいていコンテンツの追加がしやすいようなきれいなソースにしてくれっていわれるからなー
いたるところスクリプトだらけにするわけにはいかんよな

557Name_Not_Found2018/02/22(木) 00:48:57.70ID:???
>>504
亀だけど
親要素にpaddingとbackground
もしくは疑似要素を線にする
でどう?

558Name_Not_Found2018/02/23(金) 19:33:40.31ID:???
特殊なレイアウトのスタイルかくとき
親に1つだけクラスつけてセレクタでもぐってスタイルかく?
それとも要素1つ1つにクラスつける?

前者だとHTMLがきれいだけどCSSが汚いし
間に要素追加したりするとセレクタ指定全部かきなおしになる

後者だと使い回しが聞くけどHTMLが汚くなるし
サイト全体で移行繰り返したりするとどんどん使いもしないクラスがたまっていくよね

559Name_Not_Found2018/02/23(金) 21:00:31.22ID:QvUEU2E2
>>558
どちらのパターンでも
HTMLはjadeかejs、CSSはscssに頼ってるから
あんまり気にしなくなっちゃったな

560Name_Not_Found2018/02/23(金) 21:53:50.20ID:???
>>559
はいはいどっかいけキチガイ

561Name_Not_Found2018/02/23(金) 22:24:54.73ID:???
559ではないがこれに関しては正直同意
ejs+scss使うね
だからセレクタ指定全部ってことにはならないね

できあがったCSS的には前者ってことになるかな

562Name_Not_Found2018/02/23(金) 22:48:24.56ID:???
俺も
ejsとか使わなかったとしても
scssならHTMLのクラスが外から中に移動しても
scss側も同じようにずらせばいいだけなんで
もうSASS無しで書くのは間違いとさえ思う

563Name_Not_Found2018/02/23(金) 23:49:52.74ID:???
全部divでいんじゃないっすかね

564Name_Not_Found2018/02/24(土) 01:45:26.01ID:???
>>558
俺の使ってるエディタは使ってないクラスがあるとエラー吐くし別に問題ないな

565Name_Not_Found2018/02/24(土) 01:46:12.82ID:???
自演が酷いわ

566Name_Not_Found2018/02/24(土) 02:29:50.14ID:???
自演なのかな
俺もSASSだけは使う
今はDreamWeaverでも使えるし

567Name_Not_Found2018/02/24(土) 09:11:08.63ID:???
質問には答えないのにscssの話題だけ短時間で連続でレスが入れば自演だと思うわな

568Name_Not_Found2018/02/24(土) 09:34:55.25ID:???
蕎麦とうどんどっちにする?
scキチ
「俺はインドカレーだな。うどん屋にだってカレーうどんあるんだしできて当たり前の常識。家でも作れるし。」
これくらい話が噛み合わない

ejsもスレ違い(っていうとまた推してくるんだろうね)

569Name_Not_Found2018/02/24(土) 10:19:21.98ID:???
>>568
お前のその例が的はずれなだけ

AとBの2つの案があって、Bの方が優れているが作業が大変という場合に、
適切な道具を使うと作業に手間がかからなくなるから
Bという案だって十分選択肢になるということ
それがSCSSなんだよ。

その御前の馬鹿みたいな例えは、お前の例えが下手だからまったく噛み合っていない。

新着レスの表示
レスを投稿する