HTML/CSS のどんな質問に必ず優しく答えるスレ 31
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/
■関連スレ
Webサイト制作初心者用質問スレ part248
http://mevius.2ch.net/test/read.cgi/hp/1494150188/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html 前スレに書いてしまった。 キャプション折り返す奴はこれでいいだろ
<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>
あともう１つききたいんですけど
画像の下に長い文章かいたときに画像の幅で折り返すっていうの画像の幅を指定せずにかけたりしますか？
</figcaption>
</figure> 俺が書けたりします（できます）て答えたのに
できないって事で勝手に進めるなよな やっぱりここにいるプロの方でもすぐできない難しいことみたいだしあきらめます
ありがとうございました 今度はなりすましもNGって書いておかないとな
すぐにバレるのに 996 名前：Name_Not_Found[sage] 投稿日：2018/01/27(土) 21:23:01.87 ID:???
>>994
わああああああああ
素敵すぎます
できるだけじゃなくてこんなシンプルにかけるんですね
ありがたく使わせていただきます
作ってもらってばっかりでほんと申し訳ないんです
HTML勉強したのが4.01トラディショナルとかだったので
float left ぐらいでしか特殊レイアウトできなくて
いまdisplay スタイルでいろんなことができちゃうんですね
ほんと学校でＣＳＳ勉強したかったです＞＜ >>10
トラディショナルじゃなくて、
トランジショナルな。 親となるブロック要素の、最初の子要素に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>が入る場合は期待通りになります 何が困るのかというと
>>12の例では親ブロック要素が30px分下がった位置から開始されてしまうため
親ブロック要素の高さを固定値で指定していて高さが300pxだとすると
親ブロック要素が終わる位置が330pxになってしまいます
最初の子要素にmarginではなくpaddingで指定しておけば
>>12の例ではおおよそ期待通りになります
marginではなくpaddingなので当然これはこれで困る場面もあるんですが
どういう仕組みでこういうことになるんでしょうか 自己解決しました
CSSの仕様にきっちり書かれてました・・・ ttp://vr-lab.voyagegroup.com/entry/2016/11/16/122115
ここのサイトを参考にしてHTMLのDIV要素をA-Frameライブラリで描画しようと思ったんだけど、
VR空間に描画した平面オブジェクトのほかに元となるDIV要素も表示してしまうのって何とかならないかな
元のDIV要素だけ消したくてCSSのdisplayプロパティやvisibilityプロパティも試してみたんだけどVR空間での表示も消えてしまうんだよね 自作のWEBサイトで、自分がアクセスした場合には、[管理者]みたいなボタン
を表示したいのです。
自分のIPアドレスが固定ならそのIPで判断できますが、IPアドレスがよく変わるんです。ですのでIPアドレスで判定する方法が使えません。
良い方法を教えてください。 それphpとかrailsとかでやる話ではなくて？
ブラウザ側でやるの？？？ じゃこのスレの担当分を回答しときますね。
<button>[管理者]</button> >>17
アクセスしてきた人をいわゆる"認証"以外で判断する方法はない
管理者用ログインページのURLをリンク・公表せずに、ブラウザのアドレス欄に直入力するのがベスト
URLを公表していなくても通信傍受などでバレることはあるのでパスワード制限は必須 >>21
ありがとうございます。
良く分からないのですが、
私の自宅からそのサイトにアクセスしていて
誰がどういう手段で通信傍受をするのでしょうか？
簡単な例を教えて下さい。 >>21
スレ違いに甘い顔して調子に乗らせたんだから最後まで責任とれよ？逃げんなよ？ >>17>>22
ログインすればいいだけだろう
そういうシステムを0から作るよりも、wordpressを覚えてログイン周りだけはwordpressに任せたほうが良い >>22
通信傍受をマネする人が出ないとも限らないのであえて難しい方法で
パソコンにウイルスを仕込んで、アクセスしているURLを入手する
一般的にはキーロガーも一緒に仕込んでURLとパスワードをセットにして入手するでしょうけどね >>12のマージン相殺ってなんで横方向では起きないんだろうか
歴史的経緯とか？組版由来？ >>22
私たちはGoogle先生に常にアクセスを報告してます 質問ですが、facebookの個人アカウントの投稿内容をタイムラインとして運営サイトに埋め込みたいのですが、
上手くいきません(タイムラインとしてサイトに表示されない)
どうすればタイムラインとして表示可能でしょうか？ 何も表示されないならタグミスだし
違うものが表示されるなら埋め込んでるＵＲＬが違うだけだからこのスレの範疇じゃない アドブロックが有効になっていましたというオチを期待 やりすぎ防犯パトロール、特定人物を尾行監視 2009年3月19日19時7分配信 ツカサネット新聞
http://headlines.yahoo.co.jp/hl?a=20090319-00000026-tsuka-soci
この記事で問題になった通称やりすぎ防パトは、創価学会と警察署が引き起こしていたようです
掻い摘んで説明すると
・創価学会は、町内会や老人会、ＰＴＡ、商店会等の住民組織に関し、学会員が役員になるよう積極的に働きかける運動を
９０年代末から開始し、結果、多くの住民組織で役員が学会員という状況が生まれた
・防犯パトロールの担い手は地域の住民と住民組織で、防犯活動に関する会議や協議会には、住民組織の代表に役員が出席する為
防犯活動や防パトに、創価学会が間接的に影響力を行使可能となった
・防パトは住民が行う為、住民が不審者や要注意人物にでっち上げられるトラブルが起きていたが
創価学会はその緩さに目をつけ、住民組織を握っている状況を利用し、嫌がらせ対象者を不審者や要注意人物にでっち上げ
防パトに尾行や監視、付き纏いをさせるようになった
・防パトは地元警察署との緊密な連携により行われる為、創価学会は警察署幹部を懐柔して取り込んでしまい
不審者にでっち上げた住民への嫌がらせに署幹部を経由して警察署を加担させるようになった
・主に当該警察署勤務と考えられる創価学会員警察官を動かし、恐らく非番の日に、職権自体ないにもかかわらず
私服警官を偽装させて管轄内を歩いて回らせ、防犯協力をお願いしますと住民に協力を求めて回り
防犯とは名ばかりの、単なる嫌がらせを住民らに行わせた（防犯協力と称し依頼して回っていた警察官らの正体は恐らく所轄勤務の学会員警察官）
※これに加えて防犯要員が同様のお願いをして回る
・こうして防犯パトロールを悪用し、住民を欺いて嫌がらせをさせつつ、創価学会自体も会員らを動員し、組織的な嫌がらせを連動して行った
つまり警察署に勤務する学会員警察官、警察署幹部、創価学会が通称やりすぎ防犯パトロールの黒幕
詳細は下記スレをご覧下さい
やりすぎ防犯パトロールは創価学会と警察署の仕業だった
https://rio2016.5ch.net/test/read.cgi/bouhan/1516500769/ DWのCS3使ってるんだけど、
Sassと互換性ないからSassを覚える気になれない。
どうしたもんかのお いま必要ないものを無理に学んでも
ほとんどの場合は幸せにならない >>34
いまドリ使ってる人中々いないぞ
VScode
Brackets
Atom
SublimeText
などなどフリーの高機能エディタの方が圧倒的に現場で使われてる >>36
vsc まだまだ微妙
brackets プチフリ多発
atom 重い
sublime バグあり
dw 検索便利
お前のいう現場はどこのなんの現場で何に使われてるの？
ほんとに圧倒的というほど現場を見てきたの？ brackets→VSCodeと来たけどオーサリングソフトも使ってみたいぜ。
まだまだDWなの？Museってどう？使いもんになってる？ 俺は旧dw→dwcs→bracket→dwcc→sublimeだけどたまにdwも使うな
テーブルとか作るの楽だし確かに検索も使いやすいよね
他のはプレビュー機能がなぁーって感じもする
museは結局position.absoウンコ書き出しだろ museダメなのか…がっくし
どうせブラウザでの挙動確認しながらやるのでプレビューはいいんだがローカルサーバー立てるのbracketsはデフォの稲妻ボタン一発で楽だったな。
VSCodeではコマンドで立ち上げてる。拡張機能あるんだろうけどなまくらして調べてない。 DWなんて正規表現使うときしか開かんわ
拡張出来ないし無駄な機能多いし起動遅いし >>40
知らなかったらなんだ？
じゃあgoogleで圧倒的な現場の数を確認できる方法おしえてよ >>43
現場で仕事したことある？
https://www.slideshare.net/mobile/uzuflat/2016-66421027
2年前のアンケートですらドリとそれ以外とで圧倒的な差があるのは見てわかるよね？
逆に圧倒的にドリ以外のエディタが使われてないソースを提示しておくれよ >>44
SublimeTextがDWの2倍以上あるね
たぶん今はAtomが一番で、SublimeTextが二番
DWは三番以下に落ちていそう >>45
今はAtomとVScodeで1位で2位争ってる気がするな。
うちの会社では半数以上がAtomからVScodeに乗り換えてた
Sublimerはガクっと減った印象。DW使いはここ数年で見かけたことないわ 俺もSublimeTextからatomに乗り換えた
atomは当初、PCとの相性か何かでものすごく重かったんだけど今はそんな問題なくなってるみたいね
しかしMSがVScodeなんて神アプリダストは思わなかったゾ AnglarはVScodeとTypeScriptで開発されてるらしいゾ。 ＤＷ 対 フリー高機能エディター(全て) ってくくりは流石にハンデ有りすぎるだろwww
イラレフォトショつかうためにCC入ってりゃ一緒に使えるんだしウェブデザイナーってくくりでいったらフリーソフトみたいなもんじゃないの うちは地方都市だけど
Webデザイナーの求人見てたら
まだちょくちょくフォトショイラレに加えてDW使える方
って条件をよく見るよ
むしろDW以外のソフト名が書かれてるのは見たことないｗ DWはいいのに後継のmuseがダメなのはなぜ？
position.absoウンコ書き出しってどういうこと？
使ってみたことある人くわしく教えて >>50
Adobe使うんだからdwはデフォ、使えて(使ったことあって)当たり前でその他のフリーエディターは個人で効率アップで使うならお好きにどうぞってかんじでだろうね >>51
MuseはDWの後継じゃないよ
どちらかというとビルダーとかのどこでも配置系の流れ ハンデもクソも無いけどな。実際にDWが現場で使われてるか使われてないかって話じゃないの？
まぁもしも社員全員がDW使ってるような会社があんならロクな制作会社じゃないだろうな。まじで。 >>54
DWかどうかは別として環境統一してないほうがロクな会社じゃないだろ…
数人規模とかなら別だけど Atom 194件
Sublime 205件
Dreamweaver 5483件
求人件数 indeed調べ >>55
おいおいEditorConfigも使えないDWで環境統一できんのかよ >>55
現場でお仕事したことないからそんなこと言えるんだろうな。ほんとに現役のコーダー（笑）さんですか？ DWって使ったことないんだけどすぐに覚えられるのかな？ 覚えることなんてコーディング以外になにかあんのか？ DWをただのテキストエディタとして使えばいいよｗ
そうすりゃDWのクソな使い方を覚える必要はない DWは削除のショートカットが間違いやすいという恐怖仕様だったな
あれのせいで使うのやめた dwこだわってるやつ多すぎだろw
はなからビヘイビア？とか使ってる奴なんていないしコードかくのってスクラッチ前提だろ
余計な機能がついてて分かりにくい！とかさー使うわなきゃいいだけじゃんそんな機能
重いとかいうけど別にどれもたいして変わらないーって思ったけどカフェでノート勢か!そりゃ重いのきになるねw 重さはエディタによってまじで違う。重さの違いがわからないなんて、対したソース書いたこと無いんだろうな 自分今台湾のシリコンバレーと言われている場所へ週に何度か行って
現地のエンジニアさんと一緒に仕事するんだけど
DW使ってるの一人も見たことないｗ
VSCが一番多いかな。
DWでも良いけど効率落ちるよね。
社内がソレ指定してるんなら仕方ないが。 世界的に見ても超絶圧倒的にVSCだろうな
DW指定の会社なんて素人集団だろ。テーブルレイアウトとかしてそう わかりやすいDWディス基地の再来www
あんな過去ソフトほっときゃいいのに相当根が深いな 丁度いいからvscで聞きたいんだけどtag～tagの選択ってどうしてる？
sublimeでいうとctrl+,のやつ
ショートカットみても乗ってないんだよね Adobeってフォトショやイラレについては圧倒的なシェアのはず？なのに
DWについてはダメダメなのね >>70
閉じてShiftクリックで全選択しちゃうわ
>>71
フォトショやイラレはそれに変わるツールが中々ないからな。
コーディングに関してはメモ帳でもできることだし、それだけツールが充実してる <td>にvertical-align設定してもきかないんだけどなんでかな…
<td style="vertical-align:top">
連絡先:<span style="display:inline-block">mail<br>twitter</span>
</td>
これで連絡先の部分が下にくっついちゃってかっこわるい
上にくっつけたいんだけど… >>73
vertical-align:top;をspanに移してみる わああ すごいすごい
うまくいきました！！！
ありがとうございます！
でも span の範囲の外なのになんで valaign されるの？？？
なんでこうなるのかぜんぜん意味がわからない… >73-74
これ何で変わるの？
flexに頼り切りだからマジでわからん またわからないことがおこったんだけど…
<div style="display:inline-block; min-width:33%; margin:0">１</div>
<div style="display:inline-block; min-width:33%; margin:0">２</div>
<div style="display:inline-block; min-width:33%; margin:0">３</div>
これでなんで３行になっちゃうの？
横に３つならべたいんだけど ならないよ
<div>1</div><div>1</div><div>1</div>
div {
display: inline-block;
min-width: 33%;
} paddingかなんかはいってるんじゃない
それか改行文字が半角スペースになっているか 親要素にletter-spacing: -.4em;
インラインブロックにした子要素にletter-spacing: normal;
ググれば15秒で解決するから、少しは自分で調べよう CSS animationで文字をゆっくりと移動させるとChromeで見た場合に文字が点滅したような状態になってしまいます
検索して出てきたちらつきを抑える対処法はやってみても変わりませんでした
これはどう直せばいいでしょうか？
https://jsfiddle.net/kc01rckj/ 最初にDWがSassに対応してなくて覚える気がしないって書いた者だけど、
HTML/CSS中心の作業ならDW以外だと結局何のエディタがいいのかわからないんだが
この条件満たせるのってDW以外は無いよね・・？
・文字コード変換ができる（重要）
・ecc-jp、shift-jisにも対応している（重要）
・html、jQuery、phpのシンタックスエラーをその場で知らせてくれる（重要）
・html/cssの入力補完機能（候補表示）がある（重要）
・Sassに対応している
・フォルダ丸ごと置換できる（どこを置換したかの結果も表示）（やや重要）
・正規表現が使える（やや重要）
・htmlの入れ子構造が表示される（重要度低）
・タブで複数ファイル開けて、タブ自体に閉じるボタンが付いてる（重要度低）
・ブラウザプレビューに複数のブラウザ登録できる（重要度低）
・テーブル構造が視覚的にわかりやすい（重要度低）
・クリッカブルマップ使える（重要度低） >>80,81
ありがとうございます
改行せずに１行でかいたらおりかえさなくなりました
タグの外に改行入るだけでもダメなんですね…
うー；； ソースかなりみにくくなる… >>84
どのエディタでも大抵できるよ。フリーだから落として比べてみるといいよ
DW使ってると馴染みないと思うけど、
他のエディタはエクステンション追加で機能拡張できる。
他にもやりたいと思ったことが大抵はエクステンションで解決するはず。
拡張性の高さで言えばAtomかBracketsかな
ただ、今からその手のエディタに手を出すならVScode一択と言ってもいいくらい世界的に流行してる >>85
flex使え
<div>
<p>a</p>
<p>a</p>
<p>a</p>
</div>
div {
display: flex;
}
p {
width: 33%;
border: solid 1px red;
} >>83
スマホのChromeで見たけど別にちらついたりはしなかったよ？ 感情の原因はそれを感じる者自身の固定観念・価値観・自己ルール
解釈の原因は情報発信者ではなく受信者。誤解の原因も解釈者
「言葉 風紀 世相の乱れ」はそう感じる人の心の乱れの自己投影
問題解決力の低い者ほど自己防衛の為に礼儀作法やマナーを要求する
憤怒は無知 無能の自己証明。中途半端な知識主ほど辛辣に批判する
論理的思考力の低い者ほどデマ宗教フェイク迷信に感化傾倒陶酔洗脳
史上最も売れているトンデモ本は聖書。神は人間の創造物
全ては必然。偶然 奇跡 理不尽 不条理は思考停止 視野狭窄の産物
人生存在現象に元々意味価値理由目的はない
「真実は一つ」は錯誤。執着する者ほど矛盾を体験（争い煩悩）する
宗教民族領土貧困は争いの原因ではなく「理由口実動機言訳切欠」
社会問題の根本原因は低水準教育。必要なのは適切十分な高度教育
体罰は指導力・問題解決力の乏しい教育素人の独善甘え怠慢責任転嫁
死刑は民度の低い排他的集団リンチ殺人。「死ねば償える」は偽善
核武装論は人間不信と劣等感に苛まれた臆病な外交素人の精神安定剤
投票率低下は社会成熟の結果。奇人変人の当選は議員数過多の徴候
感情自己責任論 ～学校では教えない合理主義哲学～ m9｀･ω･) 自分のハードウェアの問題だったのですね
回避はできないようなので諦めます フリーランスでWebデザイナーになりたいと思っている、17歳です。四月から通信高校に2年間通います。
通うのは週に一度だけなので、他の日はwebデザイナーになるための勉強を独学でしようと思っています。ちなみにすでに少しhtml cssをやっています。フリーランスでやっていくにはなんの知識が必要ですか？phpは？
あと、卒業したらフリーランスしながらも他の仕事をして稼ぎたいです。例えば、ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。などです。
どう思いますか？ >>86
流行と出来るかできないかは別だろ…
vcsはhtml/cssエディタでみたら上にあげてる項目ほとんどできないじゃん？
その他のエディタもタグのアウトライン関連は弱いしbracketはdwが吸収したしっしょ？(もちろん開発が続いてるのは知ってる)
vscや他のフリーエディターが悪いっていってるわけじゃなくてさ >>93
＞ライン工場の派遣会社で仕事をして、終わったら勉強と制作をする。
意味がわからん
他の仕事なんてやってる暇ないぞ
ひたすら最先端のデザインとツールの使い方を覚え無くてはならない
今はweb系のバイトで働くのが一番の近道
うまく行けば仕事も取ることができるだろう >>94
おいおい大抵できるぞ。使ったことあるか？
流行るのには理由がある、それだけ使い勝手が良いってこと
使い勝手悪ければ流行らない 物心ついたときにパソコンに入ってたのがDWだったから…コード画面以外の機能ほとんどさわったことない エディタ関連の話はこのスレで話すよりググったほうがいい
まぁ大半がググれば解決するようなことばっかなんだけどな >>96
Pluginの解説が英語だけだと躊躇するタイプなんじゃね？
英会話じゃないんだから
海外のサイトでも落ち着いて読めば理解できるのにな <div class="button large">
<a href="#">ホーム</a>
</div>
みたいな書き方してるサイトで
<div class="large">
<a href="#">ホーム</a>
</div>
ってやっても large にならないんだけど
特定のクラスと一緒にかいたときだけ反応するクラスみたいなのつくれるの？ クラスを２個ならべると自分より下のクラスに適用ってきいたんですけど
同一階層で並べても大丈夫なんですね
教えていただいてありがとうございます あれ；； おおきくならない なんで？
これどっかまちがってる？
<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> >>104
あれ；；？じゃねーよ
それがどうやったら>>102と同じに見えるんだ？
聞くのはいいけどちゃんと見てやれよ >>103
この2つは別物
.button.large{～～～}
.button .large{～～～｝ ごめんなさい くっつけてかかないといけないんですね
ありがとうございます >>108
>>107ですけど自分ですか？ エディタ？ Chromeですけど >>110
そりゃブラウザだろｗ
HTMLやCSSをどのソフトで作成して保存してるのかっていう話でしょ >>93
頼むから一度、web制作会社に身を投じる事を経験してから独立してくれ。
業界経験すらない素人が起業とかマジやめてくれ。
店舗だったらどう？材料、機材、店舗、集客、客層、ライバル、立地、経理、とか経営の事わからないでお店だす気する？
市場の評価（クオリティ）と価格を破壊するだけだからマジやめて。 素人でもいきなり起業できちゃう業界って思われてる時点でこの業界もダメだなこりゃｗ
単価が上らん訳だ・・ >>111
んー FC2ホームページのソース表示で編集ってやつだけどあれ何っていうエディタなのかな
タグに色つくからすごい見やすいです 日本のWEBは終わってるから今から勉強するなら英語とセットでしっかり勉強してアメリカかカナダ行きなさい。
20年遅れてるんだよ。君が生まれる3年前のアメリカのWEBに、日本はやっと追いついたんだ >>104のスタイルで
<ul class="button">
<li><a href="#">次へ</a></li>
<li><a href="#">前へ</a></li>
<li><a href="#">上へ</a></li>
</ul>
ってやるだけでなんで３つともボタンになるの？
ＵＬ全体が１個のボタンになりそうなのに すごいclass名だ
せめてbuttonsとかにしてほしい >>118
自分の書き方は基本的に単数形だな
<ul class="button"><li><a>
でも
<li class="button"><a>
でも
<p class="button"><a>
でもいける >>118
複数形とか命名センスなさすぎ
せめてbuttonContainerとかbuttonListとかでしょ >>118
わざわざ文字数増やしてどうすんのbtnでしょ母音無しが基本 CSSだけで縦横のサイズが異なる画像を等間隔で並べる方法ってあります？
float:leftを使えば自動的に横に並び、
入りきらない分は次の行に行きますが、
画像に正方形じゃないのがあると上下の位置がガタガタになって上手く並びません。
また、なぜか一行だけ右端に一個だけ配置されて次の行に行く場合がありました。 .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> ごめんこれもいる
ul.justifyLayout {
list-style-type: none;
} 縦横比がばらばらなだけでサイズ近いのがそろってるならそれでいいけど
サイズ自体もばらばらなら正方形の固定サイズのboxを並べて
max-width min-width指定するほうがきれいかもね >>119-121
すまん普段しないから変なことしてしまった
普段ならliにbuttonかulにnavをラップしてそのnavにclass付けるとこだわ >>123-125
ありがとうございます。
右に一個だけ配置される行が出来る現象は無くなりました。
＞サイズ自体もばらばらなら
幅は%で固定にしていますが
そもそもこの並べ方だと、他よりかなり縦に長い画像があるとその行だけ縦に長くなりますね
max-heightとoverflow:hiddenを指定すると、縦の長さは短くなりますが、画像は上の方だけが切られて表示されます
あまり縦に長い場合は画像を予め表示したい部分だけ切る加工をするか
画像に余白を付けるしか無いのかもしれません 仕様をはっきり定義すれば何とでもできるが先に定義しないと
今 width: きめうちで横幅固定してるんだろうけどそれだと縦長の画像は拡大される
width: を max-width: にかえて height:auto; と max-height: 指定すれば高さも上限で縮小することもできる
その場合もちろん縦長の画像の横幅はせまくなるのでそろわなくなるが 質問者じゃないけど width の 33% の正方形に自動縮小して表示ってできる？
pixやem使わずに縦に横幅の%指定と同じ長さにするってＣＳＳできるのかな 親要素からの指定はないんじゃないかな
vw使えば画面全体からの割合幅はとれるけど
メニューと２列になってたりbodyにmarginやpadding設定してあったりしたらうまくn等分にはならないだろうけど >>129
思いっきり質問で笑った
できる
css 比率 固定
とかでぐぐればなんぼでも答えが出てくるよ
ただ個人的にはあまり好きではないな >>129 はアスペクト比を固定して拡縮したいって意味だったのかな
だったらできるね
てっきりwidthの33%分の長さと同じ高さの正方形に収めたいって意味かと思ったわ いわゆる3分の1にしたいときって
calc(100% / 3)
33%
33.333%
とかのうちどれ使ってる?
古いieに対応しなくちゃだめーとかだと
33.333%
かな? HTMLやCSSのソースをタグをエスケープして
キーワードやタグにハイライトつけてHTMLに変換する方法ってないですか？ >>134
calc(100% / 3)
でいいんじゃね
古いのに対応させるなら、もうざっくりと33%でいいと思う >>135
ハイライト コード html
あたりで検索すれば割りと出て来る jsライブラリみたいなのはあるけどどれも大変そう
左の入力欄にはったら右のテキストエリアのハイライト付のHTMLソースでてくるみたいなお手軽サイトないんですね…
あきらめます＞＜ 世の中いろんな暇人がいるとは言えそんな特殊な要望にピンポイントでこたえてるツールなんてあるにしても探すの大変そう…
自分だったらライブラリ使ってnodeスクリプト書くけどめんどくさいならhttps://codepen.io/penとかにコード貼るとハイライトされるからそれコピーしてWordとかのhtml保存対応のリッチテキストエディタに張り付けてhtmlで保存すれば？ まぁこの人は質問して答えをそのまま使いたいだけの人だから適当にあしらえばいい >回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！ >>134
sassのpercentage使うのが主流じゃない？
33.33333%にコンパイルされる 定期的に現れるsass使えば基地はなんなの？
そもそも今回なんて質問の意味すら理解できてないし >>145
ああそれいつも思う
sassは別スレにした方がいい
話変わってくるからな ごく普通の二つのselectをdivの中に入れて横並びにしました。
＜select＞
＜option＞111＜/option＞
＜option＞222＜/option＞
＜/select＞
＜select＞
＜option＞１１１＜/option＞
＜option＞２２２＜/option＞
＜/select＞
optionの文字列は最初のやつは全部半角文字、二番目のやつは全角文字です。
そうすると何故か、
[111][２２２]のように水平に並ばずに、二番目のselectが数ピクセル上にずれて表示されます。
原因と対策を教えてください。 >>147
テキストの baseline が整列しているからじゃないか？
optionを vertical-align: top にすれば上端が整列するかもしれないが
コントロールなので効かないかも >>147
半角数字（英数）と全角数字（日本語）だからじゃない？ vertical-align: topで解決するね >>148>>149>>150
select {
vertical-align: top;
}
で解決しました。ありがとうございました。 jQueryスレできいたのですがこちらの方がいいと思って来ました
<tag data-hoge=値>でなく
HTML <tag hoge=値>
CSS [hoge] {}
は独自属性(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） >>152
翻訳版だけど。
＞独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、
＞ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。
http://www.html5.jp/tag/attributes/data.html
好き勝手に付けたらバッティングする可能性が普通にあるから"data-foo"となっている 変なおじさんスレできいたのですがこちらの方がいいと思って来ました
HTML <unkochinchin></unkochinchin>
CSS unkochinchin {}
は独自要素(?)で違反らしいのですがそのソース（原文）を知りたいです
（確かにいいともありませんが） HTMLは決まった仕様があってそれに則って書かれる文書だから仕様にないタグや属性使うことは違反だぞ
「これが違反」というのではなく「これじゃないのが違反」て感じ
絶対ダメだ使うなというほど強制力はないので使いたければ使えばいい
ただブラウザによって表示や挙動がおかしくなる可能性はある 違反している要素や属性を使い過ぎるとバリデータがエラー出しまくって面倒になる問題もある
属性名は data-* で OK
要素名はハイフン入りの名前を利用すれば、カスタム要素として認識してくれる
（ごく少数の例外はあるが） >>152
HTMLの文法の原文
http://www.w3.org/html/
ここに書かれているタグ、タグ属性以外は文法違反
ただしあくまで標準規格としての文法であって
これとは別にブラウザ独自のタグなどをブラウザベンダーが定義していることもある
また、廃止されたものもあるので、昔は文法に適合していたが今は文法違反というものもある プログラムから入った人からしたら
始めてHTML触ってみて
ユーザー関数も変数も使えない言語なんてびっくりだろうな >>159
そんなことないぞ
HTMLはプログラム言語じゃなくてマークアップ言語だから別物って認識あるし、むしろ文書としてみたら「見出し」とか「リスト」とかになってるから仕様書や設計書書くのと同じ感覚 >>160
そうなのか。
確かにたまにプログラマーっぽい人がcssの質問とかしてるの見ると決して侮ってない感じはするな
自分だったら完全にバカにして適当にあしらっちゃいそうだわ
まあそんな考えだからプログラマーにはなれないわけだが CSSを思いのままに制御するのは本当に難しい。
プログラマーの心の平穏を乱しそうな要素がてんこ盛りで、気を抜いたら殺されてしまう。
そりゃみんな決死の覚悟で臨むに決まってる。 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);}
みたいなのもあるからな。(まあこんな書き方普通はしないけど) css、一般的な事なら一通りできるし困ってないけど
めちゃくちゃ簡単かと聞かれたらそうは思わないなあ
他人の書いた複雑なcssは触りたくない >>165
それはcssが複雑なんじゃなくて他人が書いたものが複雑なだけのような… >>153
そこ（やMDNなど）は見てます
>>158も、違反というのがわかりません
まあdata-を無くす理由はないのですがね
以前社内で話題になってたので
お2人共どうもでした
>>156
おちょくってるつもりでしょうが元文書いた本人（私）は全く腹も立たないほど
ひねりもないしつまらないし、こんなんで心満たせるのだなと逆に感心 >>159
全然違うから気にもしなかったぞ
jsは最初戸惑ったがな、スコープとか巻き上げとか
カリー化とか未だにようわからんｗ jsはundefined周りがぶっとんでることに注意すればまぁなんとか なんでそんなにundefinedがわからんのかがわからんけどな
nullはnullという値が入ってる
undefinedは未入力を意味するってだけだと思うんだけどな Htmlでボタンをキラキラっと光らせることは可能ですか？ >>174
CSSを使わないなら
キラキラっと光る画像をボタンに使うとか >>175
Cssは使います。カーソル合わせたときにボタンが光ると面白いなーと思っております。 >>176
CSS使うならできる
どんなキラキラなのかで難易度変わるけど >>176
:hoverとGIFアニメを使ったらどうだろ >>172-173
すまん、今は大分マシになったらしい
undefinedって昔は変数で、undefinedに代入できたりするびっくり仕様だったんだよ >>169
適合、違反の定義から始めないといけなさそうなんだけど
HTMLの基本ルールはXMLと同じだけど
< > の記号で囲まれた「タグ」を使う
< >開始タグ </ >終了タグをセットで使う
XMLと異なり、タグに使える単語（文字列）は列挙されたものに限る
一部のタグは終了タグを持たない
で、なぜ３つめのルールが決められてるかというと、文書の解析に使うため
XMLでは、通常は自分でXMLタグを定義し、自分でそれ専用の解析ツールを作るけど
HTMLはそうではない
HTMLの解析はブラウザという汎用ツールを使うため、そのブラウザの規格に合わせてタグを使わなきゃいけない
というわけです >>169
それはあなたに何をおちょくられているのか理解できる頭がないからです。
hogeという属性が違反であるソースを探しています
unkochinchinという要素が違反であるソースを探しています
同じこと。
仕様にいちいち～は違反ですという形式で書いてあるわけないでしょうが。
hogeが違反ですと書いたらfugaはどうなんだの答えも書かないといけない。
果たして仕様書がそんなアホなつくりになってるのか、常識で考えようね。 functional cssってのが流行ってるらしいけど
それって何？ CSSでオリジナルのドロップダウンリストを作る時
▼マークは画像でやるしかないのでしょうか？
検索すると背景画像でやる例が多いようです CSSがいいならCSSでもできる
画像ならなにも考えなくて楽
Data URLスキームでもいい CSSだけでテキストを円形や扇型に表示することって出来ますか？ CSSの詳細度が高いと良くないらしいですけど
どうしてですか？
cssstats.com
で詳細度のグラフ？が見られますが
見方が良く分かりません ありがとうございます
CSSWARPというジェネレートサイトを見つけることができました そもそもCSSの詳細度って何ですか？
どんなCSSだと高くなる（または低くなる）んですか？ それCSSで一番に覚えなきゃいけないことだし、聞くより自分で調べてしっかり理解した方がいいと思う
詳細度の点数計算とかややこしいし
ここで中途半端に聞いたら勘違いしたままになるぞ
「とにかくセレクタをいっぱい書けば強い」とか「あとに書いた方が強い」とかいまだに言う人いるし fc2のサイトなのでNGワードにひっかかってURLを載せられないのですが
ドロップダウンメニューのCSSで
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
と、テーブルを挿入しているコードがあります
動作を確かめてみたところ、
これがないとドロップダウンメニューの上部に空白が出来てしまうようです
しかし動作原理が分かりません
何故tableを挿入すると空白がなくなるのでしょうか？ 画像がテーブルレイアウトされてる古いサイトのソース今のサイトにもってきたら
画像が巨大化してはみでるんだけどＨＴＭＬいじらずにＣＳＳだけでテーブルにおさめるのってどうしたらいい？
tdにwidth30%とかかいても小さくならないんだけど > 詳細度の点数計算とかややこしいし
なんかすっかりそういうのを意識しなくなったな。なんでだろ？
一つはIDは原則的として使わずクラスをメインとして使うようにしているからだろう
もう一つはsassを使って階層化してるから外で定義されたものを中で定義したもので
上書きすると自然に認識してるからだろう。ともかく何も意識せず特に悩むこともなくなったよ そういや誰が言い出したか知らんけど100点だから10点だか
適当な点数を定義して10点が11個あつまれば110点で100点に勝てる！
みたいな間違った計算の解説まだやってる人いるの？
あれ余計ややこしくしてるだけじゃんかよ
style属性が最優先なのは感覚的にわかるだろ？
これは属性に書くものでセレクタじゃないから例外
あとは ID > クラス（疑似含む）> 要素名（疑似含む）> 全称セレクタの
4つしかなくてそれぞれ優先順位も感覚的にわかると思うんだけど
なんであんな馬鹿げた計算とか言い出したんだろ
考え方を簡単に書くならば、
セレクタにIDが一つ以上あれば優先度3、クラスが一つ以上あれば優先度2、
要素名が一つ以上あれば優先度1、全称セレクタは優先度0
（IDとセレクタの両方があっても合計なんてしません。最大の優先度になります）
優先度が同じなら、最大の優先度の数が多いものが勝つ
それも同じなら後に書いたもので上書きされる。
たったこれだけのルールなんだけどな。計算なんかいりませんって 「なんだよ、style属性に直書きされてんじゃん！効かないはずだよ… はい、!importantと。これでよし。」 >>199
今でもそれ生き残ってるのか、すごいな…
あれはね
90年代終盤に早々にCSSに手を出していた人達のなかでまことしやかに語られてたのよ
たぶん当時、海外のサイトかなんかで書かれてたのがそのまま広まっちゃったんだと思う
まだグーグルもなかったし、なによりまともにCSSをレンダリング出来るブラウザもなく
多段セレクタなんて書くような時代じゃなかったから、しゃーなしだと思う
この頃、すみけんたろうって人が書いたスタイルシートウェブデザインって本が名著で
これ読んだ人は正しく理解してたとは思うけど、なかなか知ってる人は少なかった
その後数年、テーブルレイアウト全盛が続くんだけど
Netscape6やMacIE5の登場、MTの流行、JIS X 8341-3の件などで
CSSを書く人が急に増えてウェブ制作板でもCSSのスレが熱くなったのが02～03年くらい
その頃はまだ、100、10、1の足し算するのは間違ってるよって言ってもキチガイ扱いだったな
Dreamweaverメーリングリストで有名だったおばさんにすっごい噛みつかれた思い出 社内のＨＰ移行でテーブルレイアウトで画像並べてる古いページをもってきたら
画像サイズがそろわなくなったんだけどどうしたらいい？
ＨＴＭＬかわってないのにＣＳＳがかわったせいなんだろうけど
td { width: 30% } とかかいても画像にあわせた幅まで拡大される… >>202
セルの大きさは中身優先なんで
<img width="100%">としてみたらどうだろうか 画像を
・縦横比を維持
・全体がブラウザウインドウに収まるうに
・可能な限り大きく
表示するにはどうCSS指定したらいい？
imgタグとimgタグの外側のタグでの指定方法を教えて >>206
img｛width:100%;
height:auto;｝ >>208
こっちはエスパーじゃないんだからさ…
なんの下が何に対してどうはみ出るか書けよ >>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%;
}
こんな感じ ゴメンよ仕事中で長文書けなかったんだ
object-fit: contain;
width:100vw;
height:100vh;
でいけたっぽい >>203
さすがに会社のＨＰなんで勝手にソースはるわけにいかないけど
<table>
<tr>
<td><img></td><td><img></td>
</tr>
<tr>
<td><img></td><td><img></td>
</tr>
</table>
みたいになってるだけです
>>204
だめでした
>>205
いや HTMLはできればかえたくないんですよね
ゆくゆくは１からかいておきかえるべきなんですけど
同じような書き方のページが大量にあるのでとりあえずＣＳＳだけで体裁をととのえたいんです >>213
こういうことなんですけどなんでこれうまくいってるんだろう
&:ってセレクタはじめてみたけど同じようにtdにwidth %つけてるだけにみえる
外側のテーブルに100%つけるのが必要だったのかな
来週出社したらためしてみまわすわ
ありがとうございます >>214
念のためだけど
SCSS
だということに注意 この5chの投稿欄ってtextareaですよね。
rows="5" cols="70"
となっていますが、入力する時には[ENTER]を押すと5行よりも沢山の
改行を入力できます。
これはなぜですか？
5行を超えるような改行の多い文書は入力出来ないようなtextareaを作成する事は出来ますか？ >>212
な？だからcssがうまくいかねーっていってのにscss書くとかほんと意味不明なんだけどさぁ
どっか別のスレたててやってくんない？ >>218
でも質問に答えてないお前のほうがいらないよ？ object-fit: cover;使えばええやん display:flex;って多用してるやついる？
俺は便利すぎてデフォがblockのタグは一括指定してるくらいの基地外だわ tachyonsってのがどうやらFunctional CSSとらを標榜してるCSSフレームワークのようだが
Bootstrapのように一つのCSSクラスに大量のスタイルを定義するかわりに、
一つの事しかやらないCSSクラスを大量に定義して
それを組み合わせて使えばCSSの変更が他ページに影響を及ぼすようなトラブルが無くなり最強って事らしいが
それってどうなの？HTML側のclassがコピペだらけになりそうな気がする
http://tachyons.io
従来のCSSフレームワークのやり方だと
他のページの表示に影響出ないようにCSSをコピーしたら
CSSが膨れ上がる上に
どれ使ってんのか使ってないのか良く分からなくなるってのはある
結果CSSがコピペとデッドコードだらけに >>225
気に食わない人追い出すとか言う話は
このスレと関係ないんで他でやってくんない？ >>224
結論はscssを使うのが最強ってことになると思うよ
まず一般論としてHTMLに限らないが、「名前」をつけるのは
大変な仕事なので「名前」はなるべくない方がいい。
また覚えることも少ない方がいい
だからbootstrapもそうだが、こちらでクラス名を用意しておきました。
さあ覚えてください。なんてのは間違ったやり方
名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
あるclassを起点にしてHTML要素の構造にスタイルを適用していく
そうするとHTMLは凄くシンプルになる。
デザインはscssの中ですべてを解決
何かを共通化したければ共通化できるし分離もできる
> 他のページの表示に影響出ないように
それはページごとにIDをつければ解決できるが
scssの@extendをうまく使えば安全に共通化してCSSサイズの削減ができる
> どれ使ってんのか使ってないのか良く分からなくなるってのはある
名前（class名）を少なくするというのは、使われている所を探す労力も減る このスレでやるなって話なのにしつこいな
はいたＣＳＳはればいいだろ CSSの質問の答えがまずSCSS覚えろってねえ…
仕事でＣＳＳさわり続けるならともかく
このスレにくるようなやつなんてむしろＣＳＳ１行かいたら人生で２度とＣＳＳさわる機会ないようなやつだろ SCSSとCSSの互換性は高く、
すべてのCSSはSCSSとして解釈できる
つまりCSSを覚えている人は、
そのままCSSの機能追加みたいな感じで
SCSSが使える HTMLの構造を指定してCSS書くのは嫌だな
同じコンテンツをあるページでは部分的に、
あるページではメインコンテンツとして使用したり、
動的だと間にタグが入ったり、タグ自体を変更することがしょっちゅうあるもん >>232
構造が変わっても同じデザインを
割り当てたいと言いたいんだろうけど
理由になってないよ
構造が変わればデザインも変えるのが普通なんだから >>226
scssで書かれてもcssにコピペして動かないんて他でやってくんない？ >>233
そんな事は無い。
自分は最初からレスポンシブ前提で書くから
どういう箇所で使用されようがデザインがある程度対応できるようにクラスで書く。
例えば、メインコンテンツの投稿日時のCSSをこんな風に書居てしまった場合、
main > article > footer >time
後からサイドバーにも投稿の紹介を掲載したい場合に、一切使えないよね。 >>226
scssはスレ違いだからお前が出ていけ。 >>235
なにが使えないのかわからないが？
まず第一に俺が書いた
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
を、あんたが書いた main > article ～ は
満たしてないので話にならない
せめて一番最初はclassにならないといけないし、
投稿日時はfooterに入れるとは限らない。
だからその場合は、.posted-at > time という風に
classを起点にしてHTML要素の構造にスタイルを適用するし、
サイドバーに表示したいなら、そのまま使える。
繰り返すが、なにが使えないのかわからない HTML/CSSのスレなんだからscss知らなくても分かる回答すべきじゃないの
それ以外のもの使うのは勝手だけど回答するときはCSSの出力で答えればいいだけじゃん いたよなjavascriptスレでcoffeescript宣伝奴
結果coffeescriptはどうなりましたか？
どんなに優れたcssプリプロセッサだろうがaltjsだろうが、結局はブラウザが解釈できるcss/jsに変換される。
生のcssの知識が無駄になることはないがcssプリプロセッサはありうる。
最近sassじゃなくpostcssの採用が増えているようだね。
このように標準規格であるhtml/css/jsより上のレイヤーでゴニョゴニョする系の技術は流行り廃りが激しくすぐ陳腐化する。
下位レイヤーのhtml/css/jsの知識は上のレイヤーに何を使おうがずっと役に立つ。 postcssもcssじゃないんでこのスレから出ていってください >239
> 最近sassじゃなくpostcssの採用が増えているようだね。
cssnextと言いたいのか？
postcssはcssの拡張文法を取り扱うための仕組みで
どんな文法に対応するかは使うプラグイン次第
例えばこれを使うとpostcssでscssが使える
https://github.com/postcss/postcss-scss >>239
> いたよなjavascriptスレでcoffeescript宣伝奴
> 結果coffeescriptはどうなりましたか？
結果TypeScriptはどうなりましたか？
結局文法が重要ってことだよ。
sassはcssと異なる文法だが
scssはcssの文法の拡張
JavaScriptはTypeScriptコードとして使えるように
CSSはSCSSコードとして使える >>242
つまりプロジェクトによって採用されるのがsassとは限らないんだね。やっぱりsassのオレオレ拡張仕様は標準規格じゃないし、頼れるのはcssの知識しかないね。 プロジェクトに採用されるのがsassとは限らないというのは
sassになるかもしれないということ
sassになったらcssの知識はいらない >>243
TypeScriptはJavaScriptコードとして使えないように
SCSSはCSSコードとして使えない
JavaScriptスレでTypeScriptのしつこい宣伝をすれば、
ここでのお前のように叩き出される。 scssっていうのはcssの知識が活かせるところが強いね。
cssの文法はscssの文法としても通じるから
そのまま移植すればOK
cssで何か知識を入れたらscssでも活かせる
何度も同じセレクタを書かなくていけない買ったのが
ネストで書けるようになったのが強い
これは標準ではできないこと >>246
> TypeScriptはJavaScriptコードとして使えないように
> SCSSはCSSコードとして使えない
そっち方向は、変換すれば使えるのでは？ >>245
lessやstylusになったらsassの知識は使えない
所詮one of themの非標準仕様。
CSSの重要性には比較にもならない。 というかここで質問するような初心者の人は
そもそもSCSSって何？って人も普通にいるんでは？ >>252
散々繰り返し言ってるのにscss基地がマウントとるためだけにグダグタいってんだよね >>237
書いた例は分かりやすくる為に極端にしたんだよ。
＞繰り返すが、なにが使えないのかわからない
↑イメージ力がなさそうなのでもう一例書こうか？
投稿ページでは投稿タイトルがH1だが
投稿の一覧ページでは投稿タイトルがH2になる。
ごくありふれた例だよな？
こいうのも使えない。
もう一例だそうか？
「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
これは構造を指定する意味が全くない。
いいかげん理解してよ つーかさー、
>.posted-at > time という風に
これって超が付くほど普通の書き方だよね？
構造でもなんでもないよね？今更書く事じゃないよね？
最初に書いてたのは↓これじゃん？
>名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
>そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
>あるclassを起点にしてHTML要素の構造にスタイルを適用していく
これが「.posted-at > time という風に」の事を指しているなら
何今更3行も使ってごく一般的な事書いてるの？って思うんだが？
都合が悪くなって意味を変えたんでしょ？ .posted-at > time は超が付くほど普通の書き方たが構造でもなんでもないは嘘だろ。
posted-atクラス直下のtime要素、って構造だろ。
超が付くほど単純な構造だけど構造でもなんでもないは嘘。 HTML/CSS のどんな質問に必ず優しく答えるスレ 31 >>255
> これが「.posted-at > time という風に」の事を指しているなら
> 何今更3行も使ってごく一般的な事書いてるの？って思うんだが？
だから？ 一般的なこと、正しいことを書いたらダメなのか？
> 都合が悪くなって意味を変えたんでしょ？
「あるclassを起点にしてHTML要素の構造にスタイルを適用していく」
ってかいてあるよね？
それがどういうことなのか、お前が解釈したことを
言ってみて >>262
亀レス乙。よっぽど悔しかったんだねｗｗ >>258
> posted-atクラス直下のtime要素、って構造だろ。
その通り
.posted-atクラスは直下にtime要素を持つ構造であるということ
つまりクラスに対してHTMLの構造が定義されるというわけ
（もちろんその定義は .posted-atクラスは直下はtime要素しか
書いてはいけないという意味じゃないよ）
考え方によってはHTML構造があとから変わっても問題ないように
細かくclassをつけて、そのclassごとにデザインを
適用するってのが有るけど、あれとは対極
HTMLを制御できないJavaScriptライブラリが
作り出すHTMLのようなものは、細かくclassを定義して
部分ごとにスタイルを適用できるようにするってのはありだけど
自分らで書くHTML/CSSで同じことをやるのはコストが割に合わない
リセットCSS的な用途を除き、HTML要素に直接スタイルを
割り当てるのはだめだけど「あるclassを起点にする」ならば
それ以下はHTML要素（構造）に対してスタイルを割り当ててよい
でないと名前が多くなりすぎて、これ何のクラスだ？ってなって大変なことになる
そこまで手間かけることじゃねーよってな >>263
お前さんのように暇じゃないのでな
悔しいのはつまらないと指摘されちゃったほうだろ >>261
一般的、というか普通に皆メインはそう書いているだろう事を何で今更書いたの？
①.posted-at p span + time{プロパティ}
②.posted-at > time{プロパティ}
③.posted-at time{プロパティ}
”いわゆる”構造指定のセレクタとあえて言われればば①②などを連想するが。
③はごく普通に皆が普段使用している書き方。構造もざっくり指定しているがあえて構造セレクタとは言わない。
①②は汎用性が無いが、時と場合によっては有用で一般的には使えない。
③は今更言わなくても一般的で他に方法はない
ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
みんながそうしているとでも思ってたの？
つーか、>>254は理解できた？
まずこちらの質問に回答してよ もうみんな質問とかそっちのけで揉めまくっててワロスｗ まあ、クレーム付いているのはsassをしつこく押しつけてた1人だけっぽいけどなｗ >>267
> ちなみに全部のセレクタに1つ1つクラス名を付けているのなんて見た事無い。
> みんながそうしているとでも思ってたの？
自分が見たことないから、そうしてる人は一人もいないと思ったの？ >>266
お前もしつこい
data-の有無であって名称の付け方ではない
183が頓珍漢なことは間違いない >>267
> 投稿ページでは投稿タイトルがH1だが
> 投稿の一覧ページでは投稿タイトルがH2になる。
> ごくありふれた例だよな？
> こいうのも使えない。
だから何が使えないの？
何度も言うが「あるclassを起点にしてって」書いてあるとおり
classを起点にしてない時点で、H1にもH2にも直接スタイルを適用してはいけない
.post-page H1
.post-list H2
俺が言ったとおりにやると、それぞれ何のページかがわかるんだから、
それぞれで適切なスタイルを適用すれば良い。
別々にすることもできるし違ったスタイルにすることもできる
だから、何が使えないの？ > もう一例だそうか？
> 「購入する」「申し込む」などのコンバージョンボタンはあらゆる箇所に出現させられる必要がある
> これは構造を指定する意味が全くない。
構造を指定する？ 構造は指定するものじゃないが。定義するものだが？
コンバージョンボタン（.conversion-button）というものを作ったら、
そのボタンは、単に自分自身がinput type="button"要素であってもいいし、
<button class=".conversion-button"><i>アイコン</i><span>説明</span></button> みたいに
「コンバージョンボタンというのは中にi要素でアイコン、span要素で説明という構造を持っているものです」
という定義をして
この構造ををあらゆる場所に出現させることができる。
どこで出現させたとしても、「あるclassを起点にして」
つまり.conversion-buttonを起点にするから
どこで指定しても同じスタイルが適用できる。
構造の中にある要素にはわざわざクラスを付ける必要はない。iとかspanでよいと
何度も言ってるんだが？
いいかげん理解した？ .posted-at > timeが構造でもなんでもない(>>255)
といいつつ
構造指定といわれて.posted-at > timeを連想する(>>267)
というのがどういうことかわからなかったが
まあいいかｗ id表示がないから誰がどのレス書いてるのかさっぱり分からないｗ >>270
コミュ力大丈夫か？
皆がそうしていると思った = 一人もいない なぜそうなるの？大丈夫？
>>272
WordPressとか動的サイト作った事ないでしょ？
それぞれのページとか概念がおかしいし、わかる必要が無いんだよ。どこでも使えなきゃいけないんだよ。
.post-page H1
.post-list H2
だと親に「.post-page」か「.post-list」をもたなけれあいけなくなるから使えない。
H1かH2でなければいけなくなるから使えない。
要するに使えないんだよ。
どうしたらよいか
.titleで1回書くだけ書けばいい
どうしてもデザインを分けたい場合だけ、.親クラスを指定する。タグの指定は汎用性を落とすから使わない。 >>267をよく見てわかったわ
> ”いわゆる”構造指定のセレクタとあえて言われればば①②などを連想するが。
>>267は構造を"定義する"という考え方がないんだな。
（誰かの手によって）そういう構造になっている時に
セレクタで"指定する" という考え方しかないんだ
だから構造指定のセレクタとか言ってるわけか
だから俺は重要なこととして何行も使って 構造を"定義する" と 言ってるんだよ
もちろん.posted-atという構造を定義する場合、どのように定義すべきかは
決まってるわけじゃない。単に定義するという話で特に制限はない
（ただし同じクラスに二種類の定義をするのもダメとは言わないが混乱するだけだろう）
つまり以下のどういう構造でも良い（セレクタで書いてないのは意図的だからな）
①.posted-at の中に p があって、その中に span があって、それに隣接して time があるという構造
②.posted-at の直下に time があるという構造
③.posted-at の中に time があるという構造
.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
その場合は定義を厳密にして、 .posted-at の直下にpがあって～とすればよい。
ここまでが .posted-at という構造の話で
その構造に対してデザインを適用する時のセレクタをどうするかはまた別の話
定義すべき「あるclassを起点としたHTMLの構造」というのはHTMLレベルの話で
それにデザインを適用する時のセレクタはCSSレベルの話であるということ
とは言えセレクタは構造通りに指定するのが誤爆しにくくなるのは言うまでもないがな >>277
> 皆がそうしていると思った = 一人もいない なぜそうなるの？大丈夫？
箱の中に赤いボールしかないと思ったんでしょ？
なら青いボールは一つもないよ
当たり前だろう？ >>273
理解してないのお前だよｗ
ボタンがbuttonタグじゃなかったら使えないよね？
aタグだったりinput type="button"だったらダメだよねそれ？
てか理解する気ないならしなくていいよ。
その手法で頑張って。 >>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要素がない（定義しない）という
俺が言った一番シンプルなパターンだ 指定じゃない定義！ﾄﾞﾔｧとかさぁ
もうscss基地と同一人物なのまるだしじゃねーか…
ここはあなたの売れないscss本の後書き欄じゃありませんから自分でスレ立ててそっちで構造定義！scssで解決！ってやってください >>279
長い上に全く意味不明
>.posted-atという構造を定義する場合、どのように定義すべきかは
>決まってるわけじゃない。単に定義するという話で特に制限はない
なら普通にCSSセレクタ定義するのと何が違うの？
>.posted-atという構造の定義として「中に自由な要素を入れることができる」を加えてしまうと
>中に想定外の p や span が入った時、1は誤爆しやすくなるが、それだけの話だな
だから最初からそこを指摘して使えないっていったんだって
なんのこっちゃ > 名前は必要なところだけ付ければ良い。どうしても必要なところだけ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があるという構造 ということになる >>284
> なら普通にCSSセレクタ定義するのと何が違うの？
自分で "CSS" セレクタと書いてしまっているだろ？
HTMLの構造を決める段階で CSSを意識してしまってる
CSSをどうするかは後から考えろ。
まずHTMLの構造を定義するという話。
ここまで説明する必要があるってことは、
やっぱり当たり前の考えではなかったとうことだろうなｗ >>284
> だから最初からそこを指摘して使えないっていったんだって
それは定義が悪いだけで。"中に" じゃなくて "直下に" って
定義にすれば（場合によっては別の定義が必要かもしれんが）
そうすればできるよね？
反論有る？ >>276
まだ草1個だからまだましかな
3つ生やしたらそいつは終わってる >>279
皆→大多数を指す（全てではない）
その糞例えにあえて付き合うなら
箱の中に赤と緑と青があって90%が赤
つまりそれが「大多数」であり、「皆」な。
皆という単語は100%の意味を持たない。
一般的な会話もできないの？ > なら普通にCSSセレクタ定義するのと何が違うの？
だからCSSセレクタは、選択するための書き方であって
定義ではないと
"CSSセレクタ定義"でググっても2件しかでてこないわｗ >>290
その理屈だと「見たことがない」は
お前が見たこと無いだけだろｗ
で終わる話だよな >>287
>>288
>定義にすれば
そこからもうだめ。
動的の経験をもっと積まないと話にならないよ。
つまり汎用性がないから使えないんだよ。いずれわかるだろう >>292
そうだよ？見た事あるの？
そのサイトのURL出してよ。
めずらしくないんでしょ？たくさんあるよね？ >>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をつける >>271
しつこいのはお前だろ暇人ｗ
>>183のレス先たどってみろよ。data-の話題と関係ないんだが。
暇人の上に文盲かｗｗｗ まあ実は、少しだけ命名規則が有るわけだが
今回言いたいこととは関係ないので、>>296には含めていない
既存のやぼったいフレームワークとは反対の考え方だから
俺独自のフレームワークとして公開したほうが良いかもな
まあフレームワークとして公開するような規模でもないし
単に考え方、最初にHTMLの構造を定義しましょうという話なんだが
（そうすればこんな複雑なフレームワークを持ちいらなくてもCSSセレクタは書けるようになる） OOCSS、BEM、SMACSS、FLOCSS、RSCSSといった設計思想は
CSSありきで、その設計をHTML側に反映させましょうというやり方だから
HTMLもCSSもあんなに複雑になるんだよな。
CSSが複雑なHTMLでも対応できるように考慮されてるから
大抵はシンプルで終わるHTMLに大規模対応の設計思想が組み込まれてしまう
俺の設計思想は方向が逆でまずHTMLの構造を定義しましょうという
思想だから、HTMLがシンプルになりCSSもシンプルになる
だからといって大規模なHTMLに対応できないか？と言われれば
そうではなく、それこそ俺がここに書いてない簡単な命名規則で対応できるレベル >>296
俺もこれ
もう最近はフレームワークとか使ってない
フレームワークのcssを打ち消したりする手間がしんどい
1から自分で書いたほうが色々と早い あらためてみると 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 なんてものは
作らなくて良くなる。 なお、俺が言ってるやり方っていうのは > を多用するのでscssと相性が良い
使わないと見づらいし、scssで階層構造を作ってしまえば
そのリンク先のRSCSSのサンプルのように
scssを見るだけでも階層構造によってある程度HTMLの構造が把握することができる
OOCSSとかBEMとか普通のCSSでも書けるのはメリットかもしれないけど
名前から階層構造を判断しなきゃいけない 専ブラ使ってる方は、
NG Word 追加、正規表現にチェックをつけて、
sass|scss
と入力、連鎖あぼーんにチェックをつけてOKです。 >>296
いや一個一個id振るとか古より伝わるcssでもなんでもなく、そんなやり方してるやつ古より皆無だろ…何いってんのこのひと。
しかも 自分のやり方はこうだ！ﾄﾞﾔ してるがまたそれも当たり前のことだしむしろそれが古より伝わる書き方なんですけど一体なにを学んだらそんなマウント脳になれるんだろう
ってかもうどっちがscss！定義！マンだかわからないからほんと他でやってください うむ、RSCSSっていつから有るんだと思ったらgithubのリリースからすると
2015年2月っぽいちょうど俺がHTML/CSSを触らなくなった頃か
俺がOOCSS（2012年ごろ？）を聞いたときはなにクソな設計思想だなって
おもって、それを踏まえたBEMとかでてきて、
本来は既存のフレームワークを使いましょう派である俺だが、
俺のやり方とは真逆だ、ムキーって思っていたら
同じ方向性のRSCSSってのが出ていたんだな。
RSCSSはVariantsとか命名規則に少し違いが有るようだが、
俺がそれまでやっていたやり方と近いようだ。
これなら採用しても良いかも
ってか、クラス名ハイフンで初めてOKだったのかよｗ
俺はこれをstateと呼んでいて、is- をプリフィックスとして
使いましょうって命名規則にしてたわ
ElementsとかNested componentsとかLayoutsとか
なんとなく区別したほうが良さそうだが、そこまでいるかー？って考えで
逃げていたのがちゃんと書いてあって参考になるわ >>304
え？idに一個一個振るとかいう古代のCSSの話じゃなくて
OOCSSとかBEMとかの話なんだけど？
で、お前これらのフレームワークを見たことなかったんだよね？
それは認めないとｗ >>303
はい、ぜひともそれやってください。
そうすれば俺の書き込みが見えなくなるので
くだらない反論もしてこなくなります。
俺だけの意見が残って万々歳ですｗ >>307
ここはあなたの意見を残すスレではありません。
HTML/CSSの質問に答えるスレです。 >>296
それ違うよね？
誰も古代のCSS設計を紹介しているサイトのURL貼ってなんていってないよね？
俺が言っているのは、
全て1つ1つクラス指定をしている、実際の具体的なサイトのURLを貼ってっていってるんだが。
わかってるよね？
無かったんだよね？ 後出しですが質問です。classは要素ごとに細かく書いたほうが良いのでしょうか？
あとBEMやOOCSSなどのCSSフレームワークと
sass（scss）について教えてください。
HTMLとCSSに関係がある話だと言うことは分かっています。 >>309
OOCSSやBEMは古代じゃないよ？
まずそこが分かってない。
そして具体的なサイト？
公式サイト見ればいいじゃん。
そういうフレームワークを提唱しているサイトが
自分で使ってないわけないんだから
そんなことにも気づかなかった？
あ、そうか、そういうフレームワークを提唱しているサイトで
使われていることがわかったから「古代のCSS設計」のみに
限定したんだね。卑怯だなぁｗ
で、OOCSSやBEMのサイトみてきてよ >>312
わざとだよｗ 今度から自分の意見を書くときは
質問を書こうかなと思ってねｗ >>311
おいおい・・OOCSSやBEMの話なんてしてないし、
そのあんたが紹介したサイトが「古代のCSS設計」ってタイトルだからそう書いたんだが？
具体的にそのサイトのソースのCSS記述も見たけど
おもいっきりタグで指定してますが？
html body .content-outer {
クラスだけで1つ1つ指定しているサイトではありませんよね？
公式サイトって具体的なそのページのURLで示してよ
今見たページはクラスで全て書いてなかった。タグ指定で書いてたから。 sass君がやたら凄い勢いでカキコしてるな
気持ちの動揺が隠しきれなくなったか >そのあんたが紹介したサイトが「古代のCSS設計」ってタイトルだからそう書いたんだが？
何を見てるんだ？ タイトルだろ？ <title>タグみたか？
見てないにしろページの一番上には
「OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける」と
書いてあって、これがタイトルだが？
でお前は、どの部分だけしか見てないって？
「古代のCSS設計」の部分しか見てないって？
ページの途中にある<h4>でしかない「古代のCSS設計」が
タイトルだって思ったって？
他にもある<h4>のOOCSSやBEMは見てなかってって？
そういいいたいのかな？ ちなみにBEMとか命名規則の手法が話題になったのってかれこれ3年以上前だぞ てか真面目な話これは本当に良くないよ。
シンプルにスレ違いなんだって。
質問スレでなんだこの横暴…
自治で解決出来ないならダメ元で規制依頼でもしてみます？ >>317
うん、見てなかった。タイトルの件は間違えたよ。うん。
で？
おれは結局どこのソースをみればいいの？
どこでクラスだけで全て記述されたサイトがたくさん確認できるの？
そのURLを早く貼ってよ 少なくともそのサイトの人はOOCSSなんかと比較して
「古代」と言ってるわけで、それぐらい読み取れないとダメだよね クラスだけ（まさかHTMLなしって意味！？）で
全部記述されたサイトというのが何を求めてるのか知らんが
bootstrapはOOCSSの設計が使われてる、クソなフレームワークの一つだね
ほらHTMLを見て！あんなにたくさんクラスが書かれてる
メンテナンス大変そうｗ >>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;
} >>325
言うと思ったんで、じゃあ>>264を振り返りましょうか？
> リセットCSS的な用途を除き、HTML要素に直接スタイルを
> 割り当てるのはだめだけど「あるclassを起点にする」ならば
はい、すでに反論済みです。それはリセットCSSです >>306
え…oocssとかbemってのは命名規則に基づく設計思想？であってフレームワークじゃないよね？フレームワーク使ってるかどうかなんて関係なくね？？
またマウント脳？
しかも設計思想？の話だったら古のcssから続く話だからあってるよ？？
日本語大丈夫？ 俺が言ってることをすり替えてきそうな
流れを感じるので
>>228で俺が言ったことを再掲しておきますね
> 名前は必要なところだけ付ければ良い。どうしても必要なところだけclassをつける。
> そのclass以下にある要素はHTMLタグで区別できるならそれでいい。
> あるclassを起点にしてHTML要素の構造にスタイルを適用していく
> そうするとHTMLは凄くシンプルになる。 >>327
だからOOCSSという設計思想を使ってるフレームワークである
bootstrapを出しましたよ？
ここまでで何か問題が？ >>331
リセットってのは初期化する事
デフォルトのスタイルを「無効化」する事 >>327
> しかも設計思想？の話だったら古のcssから続く話だからあってるよ？？
それ日本語になってない。
誰かほかの人、こいつが何を言いたいかわかるか？
わかった人は答えてくれ（多分いないから） >>333
リセット
re - set
再 - 設定
初期化はformatやinitializeだし
無効化はdisable
英語のレベルで間違ってるぞｗ 話それるけど
> リセットの意味もわかって無さそうだね
こういうレスする理由わかっただろ？
なぜ自分の意見を言わないのか。
自分の意見に自信がないから、
それは間違ってる（だけど正しいことは言わない。自分が間違ってることがばれるため）
という言い方をするんだよ
こうやって>>329の考えをひきだすと
>>333のようにボロが出るわけさ >>336
そこに
> ２ 機械や装置を、作動前の初めの状態に戻すこと。セットしなおすこと。
セットし直すことって書いてあるけど？
また見えなかった？また？ｗ ここは意見を言うスレではありません。
スレタイを読んでください。 >>335
>リセットCSS的な用途
これどういう意味で使ってた？
リセットCSSで>>325みたいに文字色やフォントファミリー指定するのか？
そこからずれてるぞ 無効化するんじゃなかったのか？
こんどははじめの状態に戻すって言い始めたぞｗ >>340
指定するぞ？
ブラウザごとに初期値が違うんだから リセットCSSとノーマライズCSSの違いを教えて！ >>332
いやだからそのフレームワークを見たことあるのかは関係なくない？
命名規則や設計なんてcss覚えた頃からみんな当たり前に考えてるもんじゃん
なんでわざわざフレームワークなんて産廃だしてきたの？ >>345
リセットCSSというのはブラウザのCSSを再設定して
ブラウザ毎に差異をなくすること。手法の名前
だからどのリセットCSSを使いましょうか？という話が出てくる
Normalize.cssというのはリセットCSS実装の一つで
有用なデフォルトのスタイルは維持して、それ以外の
問題になるものだけをリセットしましょうという方針で作られたもの
http://necolas.github.io/normalize.css/ のみを意味する >>346
> なんでわざわざフレームワークなんて産廃だしてきたの？
やっぱりお前の認識はずれてるなｗ
それとも世間は産廃だと思ってますよ
その前提のもとに話をしてますよねって
言うことにしたいからそういったのか？
まずこう言おうか？
「私はフレームワークは産廃だと思っています」と
そうすれば自然な流れだとして
なぜ産廃だと思っているのか？とお前に聞く流れになるだろ？
話を進めよう
なぜお前はフレームワークが産廃だと思ったのか？
Bootstrapは今も更新し続けられている有名なフレームワークの一つだ >>345
超超端的にいうと
リセットcssは
マージンパディングが0
限りなくcssに値がないようなプレーンな状態
ノーマライズcssは
各ブラウザで差がなくなるように調整した値[否0] >>348
あんなhtmlに、ましてタグ一個にあんだけclass振るなんて産廃以外のなにもの？
更新されようが今時使ってる奴なんているの？
有名なのもbootstrapﾌﾟﾌﾟﾌﾟ方面だよ？ > リセットcssは
> マージンパディングが0
> 限りなくcssに値がないようなプレーンな状態
それはリセットCSSの一つで Universal Selector ‘*’ Reset と呼ばれている
https://cssreset.com/scripts/universal-selector-css-reset/
他のリセットCSSでも含まれているものが有るが
必ずしも0にする必要はない >>348
あと俺は一貫してscss推し基地、定義マン、フレームワークバカはこのスレにふさわしくないと思ってるからな
クリーンなhtml/cssで簡潔に質問者に答える、それがこのスレ。 >>350
おまえは本当に何の役にも立たないことしか言わないなｗ
言っとくが俺は最初からbootstrapはクソだって言ってるからな？
bootstrapのようにあんなにclassを多用するのはだめだ
俺のやり方ではclassは最小限であるって話をした所で
お前が、classを多用するやつなんて見たことないって言ったから
（俺が批判しているものの一つである）bootstrapを持ってきてやったんだろうが
でbootstrap使ってるやつ？ 全世界で 16.7% 使われてるよ
https://w3techs.com/technologies/overview/javascript_library/all
お前、知らないこと多すぎだろ
それでよく勝ち目のない討論仕掛けたよなｗ >>352
誰もお前の思っていることを語れなんて言ってない >>353
討論する気なんてないし>>352なんでどっかでてってくださいっだけ、それ以外はほんと俺の非でかまわないんでどっかいってください 結局どっか言ってほしいがために、
無知な頭まで仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな classを多用するもんなんか知らないと言っておきながら
classを多用するbootstrapを前から知っていたかのような
顔するのやめなよ？ バレないと思ったかもしれないが
こうやって指摘されると恥ずかしいだろ？ｗ >>353
あと誰かと勘違いしてるがおれはその話の中にはでてきたやつじゃないからな…classを多用するやつなんて～は俺じゃないしこのスレは
scss！定義！ マン1人
なぜかフレームワークをだしてくる1人
その他scssフレームワークはスレ違い派 多数
で進んでるからふたりがいなくなれは解決なんだよ 「でてってください」に答えると
出ていくことはありません。ってはっきり言っておこうか？
絶望したろ？ｗ
出ていくことがあるとしたら俺が飽きた時ぐらい。
これからもHTML/CSSに関連はする話を続けます。 > で進んでるからふたりがいなくなれは解決なんだよ
少なくとも俺はいなくならないから解決しないってことだな この板で
sassやscssで検索してもスレないんだな…… あ、この板でかｗ
そりゃsassやscssはこのスレの担当だからね >>356
誤字で日本語不自由みたいだから書き直して >>364
このスレの担当じゃないから建てろって話でまとまっただろ記憶喪失か？ >>365
え？もっかい書いて良いのかい？
結局どこかに言って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな >>366
どこでまとまった？
お前の意見以外でまとまったとみなせるような
レス教えて >>364で
> そりゃsassやscssはこのスレの担当だからね
sassやscssはこのスレの担当だとまとまりました >>367
まだ誤字があるからもう一回ちゃんと書いてください。日本語かけるよね？ 「誤字」ですよね？じゃあ誤字である所を示してください
誤字以外は示さなくていいですよ。日本語わかるよね？ 一応「誤字」の定義書いておくか。こいつが日本語読めるか知らんけど
https://www.weblio.jp/content/%E8%AA%A4%E5%AD%97
ご じ ［1］ ［0］ 【誤字】
あやまった形の文字。あやまって使った別の字。印刷物の誤植についてもいう。 あれ？
scss推し定義マンとフレームワークマンは別の人？誰を応援すればいいの？ >>374
ありがとう！気づかなかったよ
じゃあもう一回書くね！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな
感謝の気持ちでもう一回！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな
さらにしつこく煽ってもう一回！！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな >>374
> scss推し定義マンとフレームワークマンは別の人？誰を応援すればいいの？
お前ん中で自分の都合がいいように解釈すればいいよ
そうすりゃ安心感を得られるだろ？ >>378
アンカー間違えたので訂正
ありがとう！気づかなかったよ
じゃあもう一回書くね！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな
感謝の気持ちでもう一回！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな
さらにしつこく煽ってもう一回！！
結局どこかに行って欲しいがために、
無知な頭でバトルを仕掛けてきたってわけかｗ
それでボコボコにされてりゃ世話ないな >>376
やっと気づいたか
宿題のように反復ご苦労様。
これで間違えることはなくなりそうだね
ちなみにボコボコってどこ？
いつのまにか攻撃先が変わってるんだけど俺参加し始めたの古代のCSSw云々あたりなんだよね >>382
> ちなみにボコボコってどこ？
IDでてないからわからんねｗ
少なくともbootstrapが使われていることを
知らなかったやつとか当てはまるね 同一人物か知らんけど、
classを多用する書き方があることを知らなかったやつも
俺がボコボコにしたやつの一人だろうな 俺を追い出そうとしたやつ
sassやcssフレームワークの話をしてるやつは
ボコボコにしたというより、俺を追い出せなくて
かわいそうに感じる人だな >283>304>327
>346>350>352
>355>358>365
>>384
はい、俺が書いたのこれ
タブってそうなやつ(文字直せとか)は省いた
で、どれだろ？ >>387
じゃあお前はbootstrapが使われてないことを知らないやつだなって
ボコボコにしたやつ 兼 かわいそうな人だな。
いくら夢見ても俺が出ていくことはないよ？ >>388
ん？
[bootstrapが使われてないことを知らないやつ]そんなやついたか？ 現実がみじめなおじさん、標準規格のHTML/CSS質問スレで初心者の質問にスレ違いで非標準のsass/scssの話をしてマウントを取るの巻
なお現実のみじめさは変わらない模様ｗｗｗｗ
理由はお察しｗｗｗｗｗ >>389
いたな
> 更新されようが今時使ってる奴なんているの？
って書いてるしな。
使ってるやつは16.7%もいる >>391
日本語読める？
つ か わ れ て な い こ と を し ら な い や つ 全体の5/6なら
個人向けなら切り捨てるな
業務ならしぶしぶサポートか
どうでもいい話を続けるやつほど
現場では使えない >>394
お前何の話してるの？
言っておくけどブラウザシェアの話はしてないよ >>297
は？data-の話題そのままだがお前の脳内で勝手に分岐してんだろ >>397
これか
＞>>167の、HTML5違反をして、独自属性をつけるって話？の箇所
＞data-hogeでなく
”data-”の有無の話だな。後は知らん ダブルコーテーション全角って気持ち悪い…
"data-"無しの独自属性とか何考えてるのって思う 半角は元の書き込みとの区別とHTML的な意味から外すためだろ
何考えてるでなくその根拠の話だったぞ
終わってるのだからもういいよ >>397
分岐してるのは>>169だが？
え、見えない読めない分からない？マジ文盲ワロタｗｗｗｗｗ
>>169の話題Bに対するレスを話題Aに対するレスと勘違いｗｗｗ
日本語の読めたら勘違いしようがないレベルだがｗ
文盲じゃあしょうがないなｗｗｗｗ ＜div＞
＜button＞ボタン＜/button＞
＜ul＞
＜li＞項目１＜/li＞
＜li＞項目２＜/li＞
＜li＞項目３＜/li＞
＜/ul＞
＜/div＞
この場合、divにtext-align:center とするとボタンが中央揃えになるのは良いのですが、
li内の「項目１」などの文字も中央揃えになります。
それは回避したいのですが、どうすれ良いですか？ >>402
button {
display:block;
margin: 0 auto;
} width忘れてた
button {
width: 100px;
display:block;
margin: 0 auto;
} ボタンのサイズが小さくなってしまいましたとかいいだすだろ
liにtext-align left >>404
トリッキーな回答しようとして時代に逆行してるいい例
いまどきピクセル指定でデザインするなんて
将来解像度が1万とか10万とかの時代がきたらどうするつもりなんだ
>>405
みたいなシンプルでいいのに >>401
その169は153に対するレスじゃないよ
といってもレス先（アンカー）書き間違いでもない
2chの方見ればわかる
専ブラの都合かなんかでずれてるんだよ >>406
皆さんありがとうございました。
>liにtext-align left
で解決しました。
そもそも
divにtext-align:center の設定が
何故olの中のliにまで影響するのでしょうか？
div直下のbuttonにだけ影響すると思ったのですが。 すまん別件と勘違い
>>407は捨ててくれ
ただなおさら>>398で合ってるやん プロパティの継承で調べるといいかも
text系のインラインスタイルはだいたい内側に継承される というよりスタイル変更を内側でキャンセルしなきゃいけない構造にするから悪い
＜div＞
＜div class="centeringContainer"＞＜button＞ボタン＜/button＞＜div＞
＜ul＞
＜li＞項目１＜/li＞
＜li＞項目２＜/li＞
＜li＞項目３＜/li＞
＜/ul＞
＜/div＞
等で適用する範囲を限定するのが自然かと
あとインライン要素を同じ階層で他の要素と並べるのもあまりよくない
なるべくブロック化しておくのがスタイルも適用しやすい
自動出力等でHTMLが変更できないとかでなければね 誰か>>401を日本語に翻訳してくれ
普通に継続してるようにしか見えんのだが >>408
他にもcolorなど子孫まで影響する場合としない場合と、少し経験積まないと確かにわかりづらい
子孫まで継承させるプロパティもあるが>>402とは逆だし使ったことない 続き
>>262
↓
>>263
↓
>>265
↓
>>266
↓
>>271
↓
>>297
dataの話？文盲ｗｗｗｗ >>405
＞ボタンのサイズが小さくなってしまいましたとかいいだすだろ
すまんそこまで気が回らん勝った
しかし打ち消しはしたくないので>>411の方が良いと思う >>412
相手するな
草3つは負けを認めたようなもの
どうせunkochinchinなんてアホなこと書いたのも本人だろ dataの話に一切関わってないやつに行きなりdataの話で食って掛かるとか脅迫性障害じゃん？ 自分がdataレスバで熱くなって、関係ないレスまですべてdataのレスに見えてるんだろうな。
覚醒剤でもやってるんじゃないか？ >>411
なるほど。
大変参考になりました。
411さんはかなりの上級者の人ですね。
ありがとうございます。 >>418
だな
わざわざリンク書かなくてもツリー構造でも見てて全て見えてるってのになんかかわいそう
もういいわ とりあえずdataくんの「暇じゃない」ってのは嘘だったな。 >>402
div＞button{
text-align:center;
}
じゃダメなんだっけ？ >>414-415
冗長だわ。俺がまとめといてやろう。
二人を仮にdataくんとunkoくんとする。
1. dataくんが、unkoについてのレス>>183に対し攻撃
2. 煽りあいの後、>>271にて、dataくんが183をdataに関するレスと勘違いしていたことが発覚
3. 183のレス先>>169ではdataとunko２つを話題にしていた
4. dataくん、>>169はdataに関してのみのレスだと強弁
5. dataくん、unkoの話題をしていたunkoくんにdataの話題で言いがかりをつけたことを認めず自作自演で火消し中。自称暇じゃないらしい>>265 こっちでもdataの話題してるけど、
また別の話なんだよなぁ
俺は関係してない 暇じゃないなら勘違いしてました、でごめんなさいしとけばよかったのに。
よっぽど暇かレスバトル体質なんだろうな。
暇な奴ほど暇じゃないアピールするよな。
その後の行動で自ら暇人ですとバラしていくスタイルｗ 昨日かおとといくらいから書きまくってる奴いるけどすげーな
一日中5chやってたのか
完全に中毒だな とりあえず自己顕示欲を満たしたいなら
ブログでアフィやったほうがいいんじゃね？
荒らすなよクソが というか昨日も書いたけどid表示がないから誰がどのレスを書いたのかがさっぱり分からない
そくこれで延々レスのやり取り出来るなと >>426
ボタン自体を中央寄せなのでそれは違う
>>432
普段誰とも喋らないから、相手されるのが嬉しくて仕方ないんだろう
引きこもりニートか、ぼっちの中学生ってところだろうな
関わるだけ無駄だぞ 自称暇じゃない引きこもりニートぼっち中学生って凄いな >>427
4は違ってる
data-なし違反根拠が論点なので、unkoでなくhogeであっても同じこと
もう1人がunkoに対して反応したのでただ同意しただけだろ
勘違いはしてない >>427=435だぞ
自作自演でスレ違いのい話続けて、スレを荒らす手法
延々続けるとその内誰か釣られて勢いが出る position:staticな要素が
position:absoluteな要素を包含できないようになっている理由は何ですか？
それを出来るようにした場合になにがまずかったのかが分かりません position:staticってデフォルトじゃねーの？
普通にposition:absoluteって書いた
position:staticに内包されてるのと同じなんじゃねーの？ 何故か包含できないと思い込んでいましたが
staticにabsoluteを入れても、absoluteは指定通りに表示されますね
staticの高さ計算から外れてstaticが消えてしまう場合があるので
出来ないと思い込んだのかもしれません
ありがとうございました 中身無しで高さ無し、要素が消えた！
この状態って初心者の鬼門だな 質問です。
<img>タグのwidthとかheightって、width=320でもwidth="320"でも動作するけど、""を使わないのは良くないと思っていいですよね？ >>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.
だそうな >>446
なるほど。特定の文字を含まなかったら無理に""で囲む必要はないんですね。
見た感じ気持ち悪いけど。
勉強になりました。ありがとうございました。 パース速度考えると省略できるところは省略したほうが速いのか？
ブラウザの実装に詳しい人教えてくれ 省略したほうが速いよ
保守性は下がるけど、まぁ好きにすればいい >>449
今時のPCだとたいした速度差にはならないような WebStormのプラグインのLiveEditを使いたいのですがうまく作動しません。
環境はwin7でクロームにJetBrains IDE Supportも入れています。
設定のプラグインのところでもliveeditにチェック入れています。
他に何をすべきでしょうか？ http://jsbin.com/yazelolulu/1/edit?html,css,output
三つのフローティング要素があり、
二つ目は隙間に入りきらず「フロート落ち」したとします
三つ目はその隙間に入るサイズだったとしても、
二つ目と同じ垂直位置になり、一つ目の横には行きません
感覚的には、一つ目のフローティング要素に横に配置されそうですが。
何故このような動作になるのでしょうか？
フローティング要素が遡行できるのは直前の要素までなのでしょうか？ >>443-451
保守性を考えて、常に、" " で囲む
どうせ、webpack などのツールで、minify するから、
自分で対応するのは、バグを増やすだけ
いらん事を考えるな きもいやつ消えた？
連休中、終日レスしてて、会社始まったらおとなしくなったようだな 見れば分かるのにあえて聞いて呼んでるのだろ
ただ荒らしたいだけ >>455
そういう仕様として決められている。
三つ目が二つ目より上に来ることは決してない。
さもなければ、画面幅に依存して上に来たり下に来たりして、読む側はとまどうだろう。 >>439の件ですが
udemyのCSS / CSS3 マスターコースを観ていたら
absoluteのための基準を作るために親をrelativeにすると言っていました
この自分の認識も、おそらく以前見た教育系コンテンツから得たものだと思います
ただstaticだと何故absoluteのための基準になれないのかが分かりませんし、
実際試してみると、staticでもabsoluteを正常に包含できている気もします
どうなのでしょうか？ ↓のHTMLの時、.p1と.p2のfloat:left;を維持したまま両要素を縦に並べたいのですが、
.p2にclear:both;を設定する意外に良い方法はありませんか？
CSSに詳しい方、ご教授ください。
https://jsfiddle.net/3ozu1pv5/1/ >>468
>>470
レスありがとうございました。 >>466
CSSの仕様をよく読んだ？W3CでもMDNでもいいから穴が開くほどよく見てみ
staticは初期値で全ての要素が初めはstaticでありabsoluteの基準にはならない
absoluteはrelativeなど位置指定された親を基準にする
もし位置指定された親がなければトップレベルの親つまりbody要素を基準にする >>467
その質問の仕方だと方法はない
floatを維持してスペースがある限り横にならぶ
>>470のようにスペースをなくすってのは１つの方法だけど
floatの意味がないからやりたいこととは違うんだろう
p1, p2 を縦に並べた上で次の要素をその右におきたいならいくらでも方法はある PCサイトとスマホサイトを切り替える時のブレイクポイントどうしてますか!?
参考にしたいデス 基本はリキッドで作って、あとはざっくり
ipadはでかいんだからPCデザインでいいよね？って思いながら 768pxが境界線だわ
なんおサイズか忘れたけど、もうずっとこれでやってる
一体何のサイズなんだろうなぁ 原文ママって、<sup>要素で表現すべきですか？
それとも<span class="sic">などとしてCSS側で表記すべきですか？
個人的には、意味が違う (唯の視覚的な装飾ではない) ので <sup> かなとも思うのですが。 <p><sup>弟は一言こういいました。<br>「飯はまだかね？」<br>姉はすかさず言い返しました。<br>「さっき食べたでしょ」<br>二人は末永く飯を食べましたとさ。</sup>(原文ママ)</p>
こんな感じにしたいってこと？
<sup>は上付き文字だぞ？ すいません言葉足らずでした。
引用文に「原文ママ」という注釈を加える時、その文言をどうタグ付けすべきかという質問です。
例えば
```
<q cite="http://iss.ndl.go.jp/books/R100000002-I000003978857-00"; lang="ja">
必生<sup>原文ママ</sup>の作品を書き、地球へ痕を残すつもりです
</q>
```
という構造の<sup>原文ママ</sup>というタグ付けが、果して意味レベルなのか装飾レベルなのか、
どちらで解釈すべきかということです。
意味レベルでの注釈なら <sup> かそれに準ずるものですし、装飾なら <span class="sic"> とでもやって
CSS側で処理すべきですし…… >>484
「原文ママ」なんか括弧付きでそのままでいいと思うがそれは置いといて、
supはHTMLの勧告で、上付きにしないといけないちゃんと意味のある時にだけ使うようにされてる
見栄えのためだけに使うべきではない >>485
原文ママは原文には含まれていない用語なので、W3C が言う「意味」に合致するかは分かりませんが
ある程度構造的に区別するべきだと思うんです。
<small>ですかね。注釈という意味では。 <blockquote>尾木ママ</blockquote> 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> 要素で囲めという主張でした。 >>490
異端じゃないだろタグで区別すべきwikipediaが間違ってる。wikipedia根拠にするとか >>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>要素が空でもいいのかなとか色々疑問は残りますが、まあ企業じゃなくて個人だし、もうこれくらいで妥協します。 Windowsのスタートメニューみたいなクリックすると展開する階層メニューってＪＳなしでＣＳＳだけでつくれる？ >>493
作れるよ
メニューにcheckbox使って、例えば
.menu-button:checked + .submenu {
display: block;
}
で表示させる
閉じるのもメニュークリックが必要だけど 原理的にはどんなアクティブなものも（パフォーマンスが許す限り）作れる
あらゆる画面遷移を全部htmlにうめこんでdisplayをnoneとそれ以外で切り替えていけばいいだけ
ただ現実問題画面遷移が2つ3つならcssでくんでもいいけど
そんなこったことしないならプルダウンメニューぐらいJS知らなくてもjQueryのテンプレコピーするだけで1時間もあれば作れる パフォーマンスならjsよりcssのほうがいいじゃん 要素のレイアウトの為に切り替えが必要になる
display:inline;、display:inline-block;、display:block;
要素の表示/非表示を切り替えで使用する(クラスで)
display:block;、display:none;
これらは用途が違うので、干渉させたくないのだけど良い方法ないかな？
表示/非表示はvisibility:hidden/visibleで制御できれば理想なんだけど
高さなどの情報が残ってまう display:blockは要素を表示するものじゃなくて、
要素をブロック要素として扱うだけだぞ？
display:blockが表示というのなら、
display:inlineもinline-blockも表示だ
お前、JavaScriptからcssのスタイルを直接変更しようとしてるだろ？
JavaScriptでcssを直接いじるな。classを使え > パフォーマンスならjsよりcssのほうがいい
↑これ確かにそれっぽいけど、実際に速さの違いなんて測れるの？
自分としては眉唾モノなので、「CSSでもできるけどJSの方が楽」な挙動はJSで書いてるわ。 制作会社など現場で働いてる人に聞きたいんですが
要素を横並びなどにコーディングするとき使ってる技術は何ですか？
float、flexbox、grid、tableなど色々あると思いますが >>472
staticの中でabsoluteすると
たしかにbody基準になりました
以前実験した時には
body直下に作ったstaticな要素の中で子をabsolute指定したので
一見親要素基準で正常に表示されているように見えたのでした
ありがとうございました border-widthを可変にしたいのですが
%だと認識されず、vwだと認識されるけど期待した通りにならない
2%で可変にしたような効果を得るにはどういう書き方したらいいですかね >>498,>>499
用途
jQueryで言うなら.show()、.hide()にあたるもの。
表示/非表示のみをcssのクラスとして作成し制御したい場合。
表示/非表示のみを制御するcssクラスを作成した場合、
ある個所はdisplay:blockが良くても別の場所ではdisplay:inline-blockであってほしい事があり、
1つのクラスだけでは使いまわせない不便さがあるから、良い方法ないかと思って質問してみた。
>>498
jsからcssのスタイル変更なんてしようとしてないよ。
レスポンシブでデザインをcssのみでどこまで切り替えできるかをやってるだけ。 >>505
とあるサイズでだけ非表示にするだけのクラスを用意したらどうかな?
@media screen and (max-width: 900px) { .mobile-hidden { display: idden; } }
みたいなかんじで >>505
> 表示/非表示のみを制御するcssクラスを作成した場合、
それがそもそもおかしい
CSSで共通化したいならSCSSを使うべき >>506
むむ？
ちなみにdisplay:にhiddenという値は使えないのでは？
>>508
クライアントが触るからSCSS依存はダメだよ 数年ぶりにCSSを学び直し中でして、最新のデザインパターンを参考にする為にコリスを利用してたんですが、
なんか Fatal error とか出ててサイト見れないんすよ。ここってしょっちゅうエラー吐くんですかね？
他に参考にできるサイトやブログってありますかね？ IEでは記事のリンクを押すとそのページに飛ぶのですが
GoogleChromeやFirefoxでは記事を押してもそのページに飛びません。
リンクされず記事の文字だけが表示されている状態です。
URL自体FirefoxとChromeだとページ開きません。
私が作成したhtmlのみです！他の方のホームページのリンク押したら飛びます。
１日色々調べてやったのですが、分かりませんでした・・・。
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>
教えてください。 >>502
並べる対象によるかな
横に並べるだけならinline-blockにして
幅そろえたいならwidth50%とか33%とかつける
tableだけはない
flexは基本縦にレイアウトそろえたいときだけかな
個人ページだったらflex使いまくるけど
大勢で管理すると提供原稿ソース勝手に縮小されてたりするの気づかなかったりするから危険
まあ大量ページで予算によっては了承の上でtableやフォントだらけの汚いソースそのまま移行もある >>513
そのHTMLじゃどうやってもとばないと思うけど
jsで何かしてるならこのスレの範囲じゃない
他からrssラベルにとびたいなら
nameには#なしで名前つけて飛び先のhrefの中に#をつける
あとハイライトつきのエディタにはりつけてみたら？
"がとじてないのが原因だったりしないの？ >>515
Sublime Textっていうテキストツールを使っています！
わかりにくくてごめんなさい。
RSSパーツの部分はこうなってます。
https://i.imgur.com/472eVsV.png
貼れなかったので画像で・・・。
もしかしてスレ間違えたでしょうか？
IEでは開いてGoogleChromeでは開かない
これってなにかCSSでリンク拒否してるのかな？
と思って・・・。スレ間違えてたらごめんなさい。 >>513
解決しました！なんで解決したか分かりませんが・・・。
>>515
の方ありがとうございました。 >>517
おめでとう
キャッシュにＣＳＳがのこってたりするからね
そういうときはこまめにＣｔｒｌ＋F5するんだ >>514
まったく同じだわ。
漏れやミスが一番重要だよね。1度も許されないくらいの感覚でやってる。
自分も個人で完結できるようなゆるいやつはflex使いまくってる。 ブロックレベル要素に直接内包されたテキストは匿名テキストになりますが
CSSのセレクタでこの匿名テキストを指定することは出来ないのでしょうか？
font-sizeなどはコンテナのブロックレベル要素で指定できますが
vertical-alignはコンテナで指定しても有効にはなりません
spanで囲んで非匿名のインラインレベル要素にするしかないのでしょうか？ >>521
テキストノードをCSSで選択することはできないと思う ほんと疑問なんですけど、IE10以下なんぞに対応する必要ありますかね？ 趣味ならない。
仕事ならお前が決めることではない。 仕事でも通常はない
もし客から対応言われたら必要ないことを説明して納得してもらう
それでもどうしてもと言われたら見積書にIE10以下対応の項目入れて多めの見積りをする
それで対応することはまずない >>524
googleのsvnがhtml5.js終了したせいでhtml5のタグがやっかいなことになったね
これ表面化してないけど結構これからヤバイかも >>525
趣味だがしてる
してもさほど不便ないし 趣味ならそれこそどこまで対応したっていいんじゃないかな >>467
clearfixとかってのはどうなん？ htmlセレクタでfont-size: 62.5%;って書くのがド定番ですやん？
IE11だと9.93pxになるんですがこれが普通なんですかね？ >>532
clearfixは結局clear:bothを当ててるだけだから変わらない。 jqueryスレがwwwwww
いつぞやのdwと似たような流れだなぁ
てかdwバージョンアップしたら待ち望んだ左右分割表示が！
これはdwに戻る日が来たかなと思ったけどなんか挙動がおかしい。
関連ファイル？を左右分割できるだけでファイル自体を二個開いて横に並べられるわけではないという謎のクソ仕様になってた…さよならdw <div class="labeledImage">
<div class="text"><div>テキスト</div></div>
<div class="image"><img src="http://placehold.jp/200x150.png";></div>
</div>
このＨＴＭＬで
https://dotup.org/uploda/dotup.org1468519.jpg
こんな感じで画像サイズに依存せずに同じ大きさのブロックを左側につけてその中央に文字
さらに全体を中央に表示って可能ですか？ すいませんもう１つ
<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>
このＨＴＭＬで画像のサイズ指定なしで
https://dotup.org/uploda/dotup.org1468544.jpg
この上みたいに画像サイズ分で分割したいんですけど
いろいろためしてもどうしても下みたいになってしまう
どうすればいいか教えていただけませんか？ >>536
可能です（めんどくさい）
>>537
それぞれのブロックに50%とか横幅を指定すればいい >>537 は前スレで画像の幅でテキストを折り返すって質問と回答あったから
それで右側ブロック化すればあとはflexなりfloatなりでいけると思う
>>536はわからんなー
>>538
「画像サイズ分で」分割っていってるからそれは違うんじゃない？ >>539,540
教えていただいてありがとうございました
こちらのほうはうまくいきました
width:0.1%がなんで必要なのかわかってないですけど
ないとうまくいかないので重要なんですね…… 何度もすいません
<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を使ったのしか出てこないんですよね…
ＣＳＳだけでやるのは無理なんでしょうか >>542
divの幅を%指定にしてflexとflex-wrap:wrap
各画像幅の比率は固定じゃないですとか言うなよ？
そんなケースあり得ないからな >>542
グーグルの画像検索結果みたいにしたいってことなら
画像１個の幅が決定できないので両端揃えには根本的には出来ない 本読みながら写経しててまったく同じ記述してるつもりなのに表示がほんと違って原因も解らなかったらすごくへこむよね 久々にWebページ作成しているんですが、
HTML5で作ろうとしてサンプルサイト(大手も含め)見てると、
<header> <section> or <article> <footer>
これらのタグは使わなくても良いんでしょうか？
それを全く使ってないサイトも多く？あります。
<header>タグ使っても中にh1入れてなかったり。
body以下は昔のようにdiv構成だったり。
※jquery等での使用ならば仕方ないと思うけど。
h1が必須のタグってheader, sectionだけでしょうか？ >>543
ごめんなさい
どんな画像サイズにも対応できるようにしたいんですけどいってませんでしたね
>>544
やっぱり無理ですよね
明日顧客に無理ですっていってみます
無理ってことがわかるだけでも助かります
ありがとうございました >>548
headerタグとh1タグはなんら関係性はないのでサンプルサイトの見かた自体が間違ってる >>550
JS書けばいいじゃない
並べるアルゴリズムはもう出揃ってるし >>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%);
} >>551
> イントロダクションやナビゲーションの支援となるグループを表します。
> header 要素は、通常は、セクションの見出し（h1–h6 要素や hgroup 要素）を入れることを想定しています。
> しかし、コンテンツの目次や検索フォームや関連のロゴなど、他のコンテンツを入れることもできます。
「想定している」だけでValidateなどで指摘されたり、
悪いわけでは無いんでしょうか？ >>553
ありがとうございます
昨日の例もそうですが画像をdisplay:tableでかこうとぴったりのサイズがとれるんですね
勉強になります
今週でダメなら50%50%のボックス作って右側の画像はボックス内に枠つきでおさめようかと思ってました
>>552
アクティブなコンテンツならともかくデザインのためにjs使うのは汚いってのがうちの会社の認識なので
この程度の静的デザイン決定でjs使うぐらいなら代替デザイン提示したほうがましかなと
客がjs使ってでもこのデザインにこだわったらべつですけど
いずれにしろjsが必要になると値段も担当もかわるので自分の一存じゃきめられない クライアントのサイト構築の場合みばえよく作って終わりの契約ならともかく
たいていコンテンツの追加がしやすいようなきれいなソースにしてくれっていわれるからなー
いたるところスクリプトだらけにするわけにはいかんよな >>504
亀だけど
親要素にpaddingとbackground
もしくは疑似要素を線にする
でどう？ 特殊なレイアウトのスタイルかくとき
親に１つだけクラスつけてセレクタでもぐってスタイルかく？
それとも要素１つ１つにクラスつける？
前者だとHTMLがきれいだけどＣＳＳが汚いし
間に要素追加したりするとセレクタ指定全部かきなおしになる
後者だと使い回しが聞くけどＨＴＭＬが汚くなるし
サイト全体で移行繰り返したりするとどんどん使いもしないクラスがたまっていくよね >>558
どちらのパターンでも
HTMLはjadeかejs、CSSはscssに頼ってるから
あんまり気にしなくなっちゃったな 559ではないがこれに関しては正直同意
ejs+scss使うね
だからセレクタ指定全部ってことにはならないね
できあがったCSS的には前者ってことになるかな 俺も
ejsとか使わなかったとしても
scssならHTMLのクラスが外から中に移動しても
scss側も同じようにずらせばいいだけなんで
もうSASS無しで書くのは間違いとさえ思う >>558
俺の使ってるエディタは使ってないクラスがあるとエラー吐くし別に問題ないな 自演なのかな
俺もSASSだけは使う
今はDreamWeaverでも使えるし 質問には答えないのにscssの話題だけ短時間で連続でレスが入れば自演だと思うわな 蕎麦とうどんどっちにする？
scキチ
「俺はインドカレーだな。うどん屋にだってカレーうどんあるんだしできて当たり前の常識。家でも作れるし。」
これくらい話が噛み合わない
ejsもスレ違い(っていうとまた推してくるんだろうね) >>568
お前のその例が的はずれなだけ
AとBの２つの案があって、Bの方が優れているが作業が大変という場合に、
適切な道具を使うと作業に手間がかからなくなるから
Bという案だって十分選択肢になるということ
それがSCSSなんだよ。
その御前の馬鹿みたいな例えは、お前の例えが下手だからまったく噛み合っていない。 最終出力されたコードだけを製品としてうけとる顧客側にとっては何を使って作ったかなんて関係ないじゃん
まあ>>558に関していえばどっちにとっても前者の方がいいんじゃないのかな 顧客のニーズにもよるんじゃね
少ない知識でＨＴＭＬにだけ内容追加するなら前者
少ない知識でＣＳＳでデザイン調整もしようと思うなら後者
プロは前者（ニーズによって後者の出力することもできる） > 最終出力されたコードだけを製品としてうけとる顧客側にとっては何を使って作ったかなんて関係ないじゃん
そうだよね。だから作る側にとって楽な方を選んだほうが得なんだけど、
まあ、勉強するのが嫌いで、勉強しない方が楽という考え方もあるんだろうね
後で作業量が減って楽になるよりも、今遊んで楽をしていたいｗ
アリとキリギリス いやだから作るほうが楽かどうかじゃなく客が更新しやすいデザインするべきだって話
>>571のいうように客が何をしたいかでもかわってくるだろうが ＞少ない知識でＣＳＳでデザイン調整もしようと思うなら後者
これが理解できないんだが >>553の例でいえば
上位にだけクラスがつけてあって
.labeledImage > div:first-child {}
.labeledImage > div:nth-child(2) {}
とかかかれてるより
.labeledImage .text{}
.labeledImage .image{}
ってかかれてるほうがスタイル更新しやすいんじゃね
２階層ぐらいならまだしもこれが
.labeledImage > div:first-child > div:nth-child(3) > :not(:first-child) {}
とかなってたらもう何かしらCSSメタ言語でないと管理しきれないだろう
客にsassの使い方までサポートするのか >>573
客が更新しやすいっていうのならSCSSの方が更新しやすいだろ
客だってSCSS使えるやついるんだから
お前が言ってるのは、お前の客固有の話だ
一般論とお前固有の問題は区別して考えろ
誰かの固有の話をするならば、俺の客はCSSだって更新できねーよ。
お前の理屈で言えば、俺の客は専用のGUIでデザインを
カスタマイズするツールのほうが更新しやすいって話になる。 >>575
scssを使えば、このように書けます。
客「便利だね」
こういう未来しか思い描けないｗ
> 客にsassの使い方までサポートするのか
しなくていいよ？ どうせcssの使い方だって
サポートしてないだろ？
.labeledImage {
margin-left:50%;
position: relative;
display : table;
.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%);
}
} >>571
> 顧客のニーズにもよるんじゃね
ほんとね、客が馬鹿だっていう前提、
どうやって生まれるんだろうか？
自分が馬鹿ばかり相手してるから？
ご愁傷様としか言えない
馬鹿「scssって難しいんですよ」
顧客（システム会社）「なにが？」
馬鹿「scssを使える環境を作るのが」
顧客（システム会社）「俺らが普段やってることより難しいの？」 客へのcssのサポートって何やってんだろ？
俺からすればcssの教科書的な本やサイトを
紹介して質問が来れば答えるだけなんだが、
まさか自分で解説書とか作ったり、毎週勉強会でも開いてんのか？
scssのサポートも同じようなもんだろ。
cssのサポートと大差ない
自分がscss使えないことの言い訳に客を使ってるだけだろ？
客が使えないんです！（実は自分が使えないだけ） 実際cssすらかけない文字のセンタリングすらできないような質問がきまくるからだが ほんとね、人の能力の問題と 技術やツールの問題を はっきり区別していただきたい
よくよく話を聞くと、人間側に問題が有るとしかいってねーじゃねーか なんで人間側の問題と技術側の問題をはっきり区別しないといけないのかというと
○○という技術（例えばcss）を使いましょうってなった時
テキストエディタやパソコンすら使えない人間を前提とするから
使えないって理屈で、どんなものだって否定できるからだよ
じゃあ○○が使えないって言ったお前、他にいい案あるのか？
それいってみろ。それだって使えないって言ってやるからよ。
こういう理屈が成り立つ。 客層ってそんなちがうもんなのか
ほんとにウェブ制作の現場で働いてるのか
CSSわかってるような顧客なんて1,2割だぞ
おいしい案件になればなるほどそう
逆にわかってる客は本当にめんどくさいページだけ依頼してきて
文章だけのページは自分で勝手にデザインあてたりできるから
scssなんて教えたらどうせscssでかいたコードをＣＳＳとして保存してデザインかわらないとかいう質問がくるにきまってる
scss使うのは勝手だがサポートはこちらが書いた部分しかしないから >>584
え、なに？
お前客が「CSSはこちらで修正します」って言って納得したのに
その客の「CSSこちらで修正できませんでした」ってサポートを
無料でやってあげてんの？馬鹿じゃね？
客側で修正できてねーじゃん >>584
> scssなんて教えたらどうせscssでかいたコードをＣＳＳとして保存してデザインかわらないとかいう質問がくるにきまってる
客の問題でトラブりました。
それが何か？ 客の問題なんだから客が悪い。
仕事を頼まれたら費用を請求して対応すればいいだけ
> scss使うのは勝手だがサポートはこちらが書いた部分しかしないから
客にscssで書いた部分しかサポートしませんって言えばいいだけ
scssという技術の問題ではない
人間側と契約の問題だ。ごちゃまぜにすんな >>584
> CSSわかってるような顧客なんて1,2割だぞ
SCSSわかってるような顧客はさらに減る
素人が出来ないことをやるのが、仕事ってもんだろ
自分は楽にこれだけのことができる。それは技術力が有るから
（SCSSが使えるから）その技術力を買いませんか？って話なんだが
なんで客のために自分が時間をかけて大変なCSSで
書かないといけないんだ？馬鹿だろう
SCSSで書きます＝うちの最大の技術力で最小のコストで仕事します。って言
ったのを拒否されれば、その分追加費用を請求すべきだし
SCSSだかCSSのサポートを依頼されれば、それも追加費用を請求すべきこと
SCSSのサポート？すればいいじゃん。有料で常識で考えれば
CSSのサポートは有料でやってないはずだよな？
（無料でやってるのならご愁傷様ｗ）
CSSのサポートは無料ですが、SCSSのサポートは有料です。
SCSSのサポート代を出したくなければ、全部CSSで書きますが、
その分、うちでやる作業が増えるので、費用は増えます。
今おまえは「SCSSのサポート費用」 と 「SCSS禁止による追加費用」の
どちらを取るかの話になってるはずなんだが
まあどうせ、客を言い訳にして、自分がSCSS使えないだけだろ？
だから「SCSSのサポート費用」が膨大に高くなるって思ってるんだろ >>587
そのとおり
論点がずれてるのはおまえらのほうなんだが
なんでsassのコードやsassって便利なものがあるって教えるとか
客にもsass使わせればいいとかいう話になんの？
htmlとはいたcssわたしておわりだろ
そのときにsassつかおうがcss手書きだろうが
無駄な質問やサポート増やさないためには>>558の後者のほうがいいってだけだよ
契約外は契約外だって当然いうがかかってきた電話とらないわけにはいかないし
契約外っていってすんなり電話きってくれる客だけじゃないんだから
わざわざ面倒ことが増えるようなコードはくことはないだろ クラスをこまめにつけるかつけないかって話とＳＣＳＳ使える使えないの問題をはっきり区別していただきたい
ＳＣＳＳ使えないなんてひとこともいってないのになんで使えないことになってんの？
ＳＣＳＳ使えばクラス名無駄につけなくてすむ書き方もできるってだけで
客によってはそれじゃ更新しにくいからこまめにクラスつけることもあるってだけの話だろう >>588
> htmlとはいたcssわたしておわりだろ
htmlとはいたcssわたしておわりならば
終わりでは？
なんでそれ以降も（無料で？）サポートするんだよ
おまえおかしいだろ。
それにソースコードを渡すという契約なら
吐いたcssではなくscssを渡すんだよ。
渡して終わりなら、こっちもscssのコードを渡して終わり scssをわたすなんてやったことないわ
rubyがインストールできないとかcssにかえるのはどうするんだとかいわれる >>588
> 契約外は契約外だって当然いうがかかってきた電話とらないわけにはいかないし
取ればいいじゃん？
> 契約外っていってすんなり電話きってくれる客だけじゃないんだから
別契約になると言って、お金を請求すればいいだけじゃん
> わざわざ面倒ことが増えるようなコードはくことはないだろ
CSSなら面倒が増えないとでも？
CSS渡して終わったはずなのに、CSSの変更の仕方がわからないですって
電話かかってきて契約外なのにそれを無料でサポートしてるんですか？
それが一番おかしいですよね？ >>591
> rubyがインストールできないとかcssにかえるのはどうするんだとかいわれる
客が自分で開発できるように教育するまでが仕事ならやればいいだけ
渡して終わりという契約なら渡して終わり。
それ以上は別契約にすればいいだけ >>593
>>590にいってやれ
契約にはいてｔないのにscssのソースわたすなんてトラブル増やすだけ scss使ったほうがいいのは同意だが客に使わせるとかscssのコードわたすとかはまた別だろ cssだからscssだからじゃなくラベルつけるかどうかの話といつまでごっちゃにしてんの
cssの中身いじったら当然対象外だが
ソースをきれいにして更新しやすいレスポンシブルサイトにリニューアルってのが基本契約で
htmlの内容更新に対してはサポートすることが多い
labeledImage .text{}
.labeledImage .image{}
ってついてたほうが分かりやすいし間違いがおきにくいし
こちらがかいたデザインと同じにしたければこれこれにこれこれのクラスつけてくださいっていっておわり
.labeledImage > div:first-child {}
.labeledImage > div:nth-child(2) {}
ってなってて1と2の間に要素追加したらデザインがおかしくなったっていわれたらめんどくさい ソフトウェア開発でも、バイナリだけの納品と
ソースコードを含めた納品と二通り有るんだが、
バイナリだけの場合は、客が編集しないという前提だし、
ソースコード（と権利）を含めた納品であれば、客が編集するという前提だが
プログラミングすらできなレベルのやつが変更の仕方がわかりません。教えてください。
なんて電話に無料にで対応するわけ無いだろう。
客がプログラムできるやつを雇うのが筋。
それに使用言語が指定されていなければ、相手に合わせる必要もないし、
使用言語が指定されており、それが効率が悪い言語ならその分コストに上乗せする
という基本が分かってないんだろうなｗ >>594
> 契約にはいてｔないのにscssのソースわたすなんてトラブル増やすだけ
そのトラブルの原因はお前がちゃんと仕事の範囲を内容を
明確にしていなかったからだ。
最初からscssで書いてソースを納品するという契約にしていれば
何もトラブルは起きない > >>593
> >>590にいってやれ
両方とも俺だがねｗ cssの更新はNG htmlの中身やページ追加更新はサポートって契約の場合は？
scssわたすバカいるの？
その場合サポートが少なくてすむのは>>588のどっち？ 本当に検討した上でCSSで納品しますって契約を結んだのかねぇｗ
どうせCSSしか知らんから、納品すると言ったらCSSに決まってるとか考えて
どうせ何を納品するかも契約に書いてないか、検討もせず書いてるだけだろ >>600
> cssの更新はNG htmlの中身やページ追加更新はサポートって契約の場合は？
cssの更新はNG（客も他社も変更は禁止）なら、
CSSを変更したい場合は、開発しているうちに連絡してください。
って話になるだけ。
「CSSの更新はうちがやります。」がサポートの内容になるわけで
サポートを依頼する数は変わらない。ただし作業が楽なのはSCSS cssの更新がNGなら、cssを渡す必要すらないな。
例えばどこかのサーバーにcssを作成しておいておく
客からはそれを利用してもらうとか
その場合、cssを直接書く必要はなく、scssでも
なんでも好きに使える。 スタイル更新までサポートなんてまずなくね？
そんなサポートしてるウェブ制作依頼ってあんの？
このスレだけでもこんなデザインにするのにどんなcssかけばいいのとかすぐ答えられないようなのくるのに
サポートはしないけど客がわかっててscssでほしいっていうならscssソースわたすけど
でなきゃcssわたしておわりだろ
わたすというよりサイトをこっちが構築して客の指定した公開日に公開して更新権限わたして終わり
あとはhtmlのサポートはつけたりつけなかったりするけど
そこにscssがどうこうなんて話がなんででてくるんだ もう一つ、cssの更新がNGなのに
cssの変更をしたいんですというサポートを
受け付けるのがおかしい >>604
> サポートはしないけど客がわかっててscssでほしいっていうならscssソースわたすけど
> でなきゃcssわたしておわりだろ
客がそのcssを編集するという前提で渡すのか、そういう前提なしで
渡すのかで話が違ってくる。
だからそれを契約ではっきりさせておかないといけない。
決まってないなら、客側でcssの編集は考慮してないと考えていい。
言われてないことは対応しなくていい。
客側で編集しないんだからscssで生成したものどころか、minifyして
人間が編集ができないような状態であっても何ら問題ない。
あとから電話でどうにかしてくださいって泣きつかれたら別で対応にきまってるだろ。
そこを無料で対応するのが癖になってるからだめなんだよ。 ああ俺が勘違いさせたんだな
>>584だがおれがいうサポートは
こっちがかいたスタイルをhtmlにあてるところしかサポートしないって意味で
cssをかいたりなんてのは当然サポートなんてしないよ
このデザインにしたいなら○○ってクラスをあててくださいみたいなサポートだよ
だから客にscss使わせるだのscssのソースわたすだのいってんのか つか著作権とかわかってるか？ 特に決めてない限り
客にCSSの編集権なんてないんだぞ？
だから、決めていなければ、CSSでもSCSSで吐いたCSSでも
編集する権利は与えていませんって突っぱねればいいのに。 >>607
> このデザインにしたいなら○○ってクラスをあててくださいみたいなサポートだよ
こっちが書いたスタイル（CSS or SCSS）は一切修正しないって話だろ？
ならSCSS使ったって何も問題はない。開発が楽になるだけ
サポートの内容はまったく変わらない >>607
> >>584だがおれがいうサポートは
> こっちがかいたスタイルをhtmlにあてるところしかサポートしないって意味で
>>584の内容と矛盾している
> scssなんて教えたらどうせscssでかいたコードをＣＳＳとして保存してデザインかわらないとかいう質問がくるにきまってる
> scss使うのは勝手だがサポートはこちらが書いた部分しかしないから
こっちがかいたスタイルをhtmlにあてるところしかサポートしないなら、
scssを教えること自体がありえない話、ましてやscssでかいたコードをＣＳＳとして保存して
デザインかわらないなんて質問も来ない。来たらそれは対応外なので一切答える必要はないし、
元ファイルに戻してくださいで終わる話 まーたアスペが出た
客にわたすhtmlにクラスをこまめにつけるかつけないかの答えがなんでscss使えなんだよ
scss使えばどっちも楽にできるが答えになってない >>610
だからありえないっていってんじゃん
scssわたせばいいとか客に使わせればいいとかいってんのはscss基地外のほうだろ ＩＤないと話の流れがわかりにくいね
結局scssを開発側が使うことに反対してるやつはひとりもいないのに
客にも教えて使わせろってやつとcssだけ渡せばいいんだから関係ないってやつが言い争ってるだけ
大本のclassどうこうに回答してるやつはだれもいない >>612
だから前提をはっきりさせろって言ってるんだよ
> scssわたせばいいとか客に使わせればいいとかいってんのはscss基地外のほうだろ
客がCSSをいじらないって前提なら、scss使っていいっていうのが結論だろ
その場合は、scssで吐いたcssを渡せばいいよ。
こちらはscssを使って楽に開発をする。
納品するときはscssで吐いたcssを納品する。
客はそのcssをいじらないから、cssを編集したいという質問は何も来ない
借りに来たとしても突っぱねるか別で費用を請求すればいいだけ（これはトラブルではない）
だーかーらー、scssを書こうって話なんだろうが
それを客にscssを教えないといけないとか言い出した馬鹿は誰だ？
scssどころかcssだって教えねーよ。アホが >>611
> 客にわたすhtmlにクラスをこまめにつけるかつけないかの答えがなんでscss使えなんだよ
scssを使えば、そのどちらだって開発が楽になるという話だが？
あと「クラスをこまめに付ける」とか曖昧なこと言うな。
クラスをこまめに付けていれば、どんな調整だって
できるというつもりか？違うだろ。
クラスを変えるだけでどこまでデザインを
調整できるようにするか？というか設計の問題だ。
先にどこまでデザインを調整することができて、どこからは調整できないようにするか
「できること」と「できないこと」を決めないといけない
それを決める時にscssを使えば作るのは楽になる
だから、scssを使うのは決定なんだわ。
あとは本当に、どこまでできるようにするかしないかの話 >>614
だからおれはずっとそういってるんだが
scss使っててもcssで渡すなら関係ないっていってるだけで
scss使えないとも使う必要ないともいってないだろ
scssを客に教えてscssのソースわたせっていうレスがあったから
そんなことしたら
>>cssを編集したいという質問
がくるかもしれないだろって予想をいっただけ
>だーかーらー、scssを書こうって話なんだろうが
>それを客にscssを教えないといけないとか言い出した馬鹿は誰だ？
それがなんで俺だと思われてるの？
俺はそいつにレスしてるんだが？ >>613
> 客にも教えて使わせろってやつ
↓こいつだな
>>575
> 客にsassの使い方までサポートするのか CSSは手書きしましょうの時代から
SCSSなどの言語で書いて生成しましょうの時代になってるからな
（SCSSはCSSと互換性があるからまったくの別言語ではなくCSSの応用で使える）
時代について来れないやつが悪い >>616
他人と間違われてほしくなければIDだせよ >>618
それ俺だけどどうみても皮肉なのに真に受けてこんなレスバトルやってんの？
というよりこのレスみたらscssの使い方サポートするなんてありえないだろって意味にとらないか？
>ってかかれてるほうがスタイル更新しやすいんじゃね
って言い方がまずかったんだな
htmlでかいた文章のスタイルを更新するときにって意味だったんだが 誤解が解けた所で
はじめの質問に戻ろうか？
558 名前：Name_Not_Found[sage] 投稿日：2018/02/23(金) 19:33:40.31 ID:???
特殊なレイアウトのスタイルかくとき
親に１つだけクラスつけてセレクタでもぐってスタイルかく？
それとも要素１つ１つにクラスつける？
前者だとHTMLがきれいだけどＣＳＳが汚いし
間に要素追加したりするとセレクタ指定全部かきなおしになる
後者だと使い回しが聞くけどＨＴＭＬが汚くなるし
サイト全体で移行繰り返したりするとどんどん使いもしないクラスがたまっていくよね
>>558
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
scssを使えばcssが汚くなることはない どっちも
開発にはscssを使う
客にcss更新前提でscssわたすのはありえない
っていってるのになんで争ってんの？ > 間に要素追加したりするとセレクタ指定全部かきなおしになる
scssをつ開けば間に要素追加しても一箇所の変更でよくなる css更新はNGでもhtmlにデザインあてるのに中身よめる必要はあるよな >>624
> 開発にはscssを使う
> っていってるのになんで争ってんの？
>>588がデメリットとして、cssが汚くなるって言ってるからだよ
だからscssを使えばその問題は解決するっていう話をしてるのに、
なぜかscssの話をすると過剰に反応するやつが現れる。
開発にscssを使うというのなら、もっと普通にこのスレで
scssの話をしましょう。俺としてはscssの話をしただけで
文句を言っているキチガイが消えればそれでOK 例えばbootstrapでも中身なんかろくに読まなくて
デザイン当ててるし 更新しやすいシンプルなソース レスポンシブルなデザイン にリニューアル
っていってたのにcssよめないじゃないかこんなはずじゃなかった
とかいわれたことはあったわ
htmlをシンプルにするとcssはセレクタだらけになるしcss3知らない人がみたら意味不明だろうね >>629
> htmlをシンプルにするとcssはセレクタだらけになるしcss3知らない人がみたら意味不明だろうね
cssで書くとそうなるから、勉強してでもscssを使ったほうが良いわ
cssで書く以上どうしてもシンプルにすることは不可能。
scssだと勉強する必要はあるが、シンプルにすることができる
勉強と言ってもネストぐらいで十分だし
使ってもmixinやextendや変数ぐらい
cssを使える能力がある人が、これらを理解できないはずがない
css3を新たに学習することができる人なら、scssだって学習できる。 揚げ足取りの馬鹿のせいでscss基地が調子にのりだした な？data-キチと同じ流れになるだろwww
こいつ一緒なんだよなぁ
マウントとりたいだけのキチガイ
中身なんにもなしでscss連呼してるだけw >>634
それも一緒w
マウントとれてないのに勝ち名乗り
一人で敵作ってるオタオタしてるだけ あ「取られれる方」でどっちのことか分かっちゃうんだ
自覚してるんだねｗｗｗ >>633
自分以外の意見や方法を一切認めないとことかな
すると優れてると言い出すが条件や環境が自分中心 今日の流れみてれば世界の中心だってわかるだろ
むしろお前だけだぞ使えないの また異常にスレが伸びてると思ったらいつもの奴かｗ
週末になると必ず現れて1日中貼りついてるな
貼りつくのはいいけどレスしすぎだよ
マジでよむのめんどくせーから質問があったのかすらわからんｗ 昼間に暴れてたscss推しのやつは複数いるようにみえるけどなー 別にscss推しが複数いるのはいいしscssも全然悪くない
ここでやるなっていうだけ
彼らは日本語わからないのかね？ 普通だったら何？ここブラウザが直接解釈してくれるweb標準技術HTML/CSSの質問スレなんだけど？
変換しないと使えない非標準の技術という意味ではsassはpugやらcoffeescriptやらtypescriptと一緒。
そんなに初心者にマウント取りたいか。
よっぽど惨めな日常生活なんだなｗ マウントって言葉好きだねｗ
そんなにマウント取られるのが屈辱なのか？ｗ ここは猿山ではないからね。さっさと猿山へお帰り。そこで好きなだけマウント取ってなｗ >>654
役に立たない情報は見なくていい
マウントって言葉は役に立たない情報
あ、お前はscssをNGにしておいてねｗ レスする数と頻度が多すぎなんだよ。
現実世界では無口なんだろ？
あと自演する癖があるようだけど何度もバレてるんだからいいかげんやめとけよな。
ここはあんたの自己顕示欲を満たす場じゃないんだぜ？
そんなに筆が進むならブログでもやればいいのに。 あぁ、これだけ言ってもまだ一人の発言だと
思ってるのね（苦笑） 百歩譲って自演は一度もしてないとしても
胸に手を当てて思い返してくれ自分の行動を。
あんなに貼りついてレスしまくるのは異常だぞ
ここはニュー速でもチャットの場でも無いんだ 胸に手を当てても俺じゃないことははっきりしてるな
他の誰かの話かな >>651
ブラウザが表示できない以上まだまだ時代ではないが。 >>637
取ら「れれる」方ｗｗｗ
やっぱ日本語通じない感じっすかねぇｹﾞﾗｹﾞﾗ >>663
開発の現場ではすでにビルドして生成するのが普通なんだよ。
でないと高速化のためのファイルの結合とか圧縮（minify）とかどうするのさ？
今の時代の基本的なことすらできやしないぞ >>663
ブラウザーが直接表示できるかどうかを基準にすると
面倒くさくない? なんか縛りプレイーでもしてるんだろｗ
その縛りでなにかメリットがあるのか知らんが 別スレ立てればいいじゃん
ここでやるから揉めるんだよ 分けた所で無駄だろう
関連技術なんだからどうしても話題に出る sayohagenkiさん2016/1/2302:40:26
リカオン株式会社のＳＥＯ対策の営業マンが契約を渋ると暴言をあびせられました。
「占い師のくせに先を見て決断ができないのか」「電話でアポとった奴は元ヤンで仕事できないのにあんたは占い師のくせに見抜けてないやないか。」
「俺の年収は１１００万円。営業は即日即決。今日、これくらいの契約できないあなたは金持ちにはなれない。」
「あんたみたいな営業を少しかじったみたいなやつがこうして営業を低くみるんだ。わが社は無駄な営業まわりはしない。どうせ考えさせてくれという返事はそのあとやっぱり家族などに反対されたとかなる。」
「あとで何を調べたいん？どうせＳＥＯ対策のこととか自分で調べてもわかるはずない。」
「今日、契約しないのなら私の方から先生のことは二度とお世話する気はありませんから。」
ちなみに契約内容は 月70000円 7年間契約 約 ５６０万円を ４１０万円にする
ホームページを３つのキーワードを決めて上位に出すことで宣伝効果絶大 ＳＥＯ対策というものというこはわかりましたが、本当にいやな思いをしましたし、この会社まともな会社なのでしょうか。
あの営業マンの罵声は途中から録音してとっています。家族が怖がっているので、何か情報がありましたら教えてください。
補足
占い師というのは私のことです。私は離婚や人間関係のことで悩んでいる方たちの悩み相談室で、タロットを使っているということです。 >>668
なぜか頑なにでていこうとしないんだよね何回もいってんのに
>>669
その度に誘導すればよい
jsとjqだって別れてる
>>665
そうだね
すごいね
>>666
どのへんがめんどくさいと思うの？ >>672
ブラウザーには種類とバージョンがあるから >>669
無駄じゃないでしょ
cssのコードだせば十分な質問しかこないのに
scssって言葉が含まれてる回答が的を得ていたことなんて１度もない > scssって言葉が含まれてる回答が的を得ていたことなんて１度もない
それがまさに>>558なんじゃないのか？
> 特殊なレイアウトのスタイルかくとき
> 親に１つだけクラスつけてセレクタでもぐってスタイルかく？
> それとも要素１つ１つにクラスつける？
>
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
> 間に要素追加したりするとセレクタ指定全部かきなおしになる
>
> 後者だと使い回しが聞くけどＨＴＭＬが汚くなるし
> サイト全体で移行繰り返したりするとどんどん使いもしないクラスがたまっていくよね
整理すると以下の２つどちらが良いか？
1. 親に１つだけクラスつける
2. 要素１つ１つにクラスつける
前者
メリット ・・・ HTMLがきれい
デメリット ・・・ CSSが汚い、間に要素追加したりすると書き直しが必要
（ただしこの２つのデメリットはSCSSを使えば解決する）
後者
メリット ・・・ 使い回しが聞く（SCSSでもそれは可能）
デメリット ・・・ ＨＴＭＬが汚くなる。使わないクラスがたまっていく
まとめると、SCSSを使うと前者の方法はメリットしか無く、
後者はデメリットしかなくなるということになる 最後の２行いらないじゃん
質問者が聞きたいのはどっちがいいかであって何を使うかなんて聞いていない上に
どっちもＳＣＳＳを使えばできるんだから書く必要もない ＞間に要素追加したりすると書き直しが必要
＞ （ただしこの２つのデメリットはSCSSを使えば解決する）
解決しないじゃん
結局修正は必要だろ
クラス直接つけてればどこに要素追加があってもcssの修正は一切必要なくhtml側だけですむ
>>553の例だと
<div class="labeledImage">
<div class="text">
<div class="image">
ってつけてあれば
<div class="labeledImage">
<h3>
<div class="text">
<a><div class="image">
みたいなことになってもcssは一切修正の必要がないって意味じゃないの >>678
> 解決しないじゃん
> 結局修正は必要だろ
？
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
> 間に要素追加したりするとセレクタ指定全部かきなおしになる
セレクタ指定全部かきなおしは不要になるって言ってるんだけど？ >>678
中途半端に引用するな
> 間に要素追加したりするとセレクタ指定全部かきなおしになる
って話だろ
>>553 を元に例を書くと
.labeledImage { ・・・ }
.labeledImage .text { ・・・ }
.labeledImage .image { ・・・ }
間に要素追加っていうのは途中にdivが入ったら
.labeledImage div { ・・・ }
.labeledImage div .text { ・・・ }
.labeledImage div .image { ・・・ }
みたいにセレクタ指定全部書き直しになるってことだ
SCSSだとネストできるから、間にdivが入ったら、
その場所だけの修正で良い
.labeledImage div {
.text { ・・・ }
.image { ・・・ }
} すれ違いでもなんでもないんだよな。
結局のところ、こっちのやり方のほうがHTMLがシンプルになりますが、
CSSが複雑になりますどうしましょう
って悩みなのでSCSSを使えば解決する。が答えとなる 例えばこれ、jQuery UIのダイアログのCSS
.ui-dialog {}
.ui-dialog .ui-dialog-titlebar {}
.ui-dialog .ui-dialog-title {}
.ui-dialog .ui-dialog-titlebar-close {}
.ui-dialog .ui-dialog-content {}
.ui-dialog .ui-dialog-buttonpane {}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {}
.ui-dialog .ui-dialog-buttonpane button {}
.ui-dialog .ui-resizable-n {}
.ui-dialog .ui-resizable-e {}
.ui-dialog .ui-resizable-s {}
.ui-dialog .ui-resizable-w {}
.ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw, .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw {}
.ui-dialog .ui-resizable-se {}
.ui-dialog .ui-resizable-sw {}
.ui-dialog .ui-resizable-ne {}
.ui-dialog .ui-resizable-nw {} >>682
どうしましょうなんて言ってないだろ 笑
うどんとソバの喩えは頭悪すぎだろって思ってたけどいよいよ正解に思えてくるぞ 笑 >>680
ちょっとまて…なんでその書き方で途中にdivが挟まったらセレクターまで全部div追加になるの？？？ こんな感じに書くことができる
.ui-dialog {
.ui-dialog-titlebar {}
.ui-dialog-title {}
.ui-dialog-titlebar-close {}
.ui-dialog-content {}
.ui-dialog-buttonpane {
.ui-dialog-buttonset {}
button {}
}
.ui-resizable {
&-n {}
&-e {}
&-s {}
&-w {}
&-se, &-sw, &-ne, &-nw {}
&-se {}
&-sw {}
&-ne {}
&-nw {}
}
} >>685
本当に応用が効かないやつだなｗ
divって言ったら本当にdivの場合しか思いつかないのかよ
他に.textや.imageがあるとか考えないのかよ 自分が質問者のレベルに合わせるのではなく、
質問者を自分のレベルに合わせようとするのが間違い カップ麺をよこせと言ってるんだからカップ麺をよこせ。体に悪いですよとか余計なお世話だ。 >>688
質問者を初心者と決めつけて
上から目線で話をしろってこと？ｗ >>689
質問者の態度としてふさわしいね！（皮肉） >>690
> 質問者を初心者と決めつけて
そんなこと言ってないし
> 上から目線で話をしろってこと？ｗ
そんなこと言ってないし
つまりは、自己中心的なだけだね
自分の視点でしか物事を見ない >>692
意味不明。
質問者のレベルが仮に低いとして、俺のレベルに引き上げることは
自己中心でも何でもない >>685
>>682 は子セレクタと勘違いしてると思われ
.labeledImage > img {} >その場所だけの修正で良い
つまり修正がいるんだから解決してないじゃん >>696
お前馬鹿だなｗ
九州から北海道まで行くのに歩いていけないんだから
どの乗り物を使っても一緒じゃんって言う馬鹿はいねぇよ
修正の量が違う。これが一番重要なこと 修正の量でいったらクラス名こまめにつけておいたら０じゃん
text image って内部クラスもっておけばどこに何が追加されようとcssに一切手を加える必要がない
修正量が１か１０かより０か１かのほうがはるかに重要
最初のCSS作成(開発会社)はscss使うのは否定しないけど
運用後(顧客)はそんなもの必要ないようなコードにすべき >>697
<div class="labeledImage">
<div>
<img>
</div>
</div>
この構造の時は
.labeledImage img{}
でも
.labeledImage div img{}
でも、どちらでも適用されるから、CSS/SCSSにまでdivをいれる修正をしなくても適用される
>九州から北海道まで行くのに歩いていけないんだから
違うな
その例え方でいうなら
「東京都のビッグサイト」という言い方から
「東京都の江東区のビッグサイト」という言い方に変える必要はない >>697
css変更不可 html修正はサポートという条件だと
scssにわずかでも修正が必要になるのは当然ＮＧだろ
修正量の問題なんて関係ない
セレクタだけでcssかいていた場合
「html変更したらデザインが乱れたんですけどー」って無駄なサポートが必要になる >>701
> scssにわずかでも修正が必要になるのは当然ＮＧだろ
別の話と混ぜるな。
本当に頭が悪いんだなｗ 面倒だから>>558がscssにわすかに修正が入ったらダメとな
何も言ってないことを示すためにもう一回引用するからな
> 特殊なレイアウトのスタイルかくとき
> 親に１つだけクラスつけてセレクタでもぐってスタイルかく？
> それとも要素１つ１つにクラスつける？
>
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
> 間に要素追加したりするとセレクタ指定全部かきなおしになる
>
> 後者だと使い回しが聞くけどＨＴＭＬが汚くなるし
> サイト全体で移行繰り返したりするとどんどん使いもしないクラスがたまっていくよね
俺が言いたいのはscssを使えば、前者のデメリットと
後者のメリットが帳消しになるってこと ということでscssを使うとcssの使い方の選択幅が
大きく広がるので、scssの話題をこれからもするぞと
宣言しておく
いい加減別の話題をしたら？
その話題に対して俺がscssで回答してあげるからさｗ >>687
応用もなにも
.hoge .fuga とあってその後
間に.abcが挟まったのであれば
.hoge .abc .fugaは .hoge .fugaと一緒だろ…意味わからんわ >>703
この引用の仕方はdataキチガイと一緒だわー
こいつが来るまで引用なんてめんどくさいことするやつ一人もいなかったよな >>706
どうしてあんたはスレと関係ない話をし続けるの？ >>707
スレにあった話なんてここ最近0だろ？
ここはすでに雑談スレになったんだからなんも問題ない >>694
こんだけscss云々言ってるやつが基本中の基本以前の子セレクタと子孫セレクタ間違えるかね？ はぁ、ほんと応用力がないというか
もしHTMLに、.hoge .text と .hoge div .text で
別々のものを割り当てたくなったとか考えないんだろうか
なんで、その例しか、世界に存在しないみたいに
考えてるんだろうかね。 >>708
例えばscssの話題はcssの問題点を解決する方法として
このスレに関連する話題だ >>710
質問に関係なくない？それ
あぁ雑談かw問題ないね 質問に関係ない話というか、そもそも質問内容の一部だな
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
> 間に要素追加したりするとセレクタ指定全部かきなおしになる なんだ >>558 が言っていたのは
子セレクタのことかよ どうでもいいけど知り合いに気持ち悪いやつがいてさ、自分のこと天皇だとおもってんの。
ちょっと糖質も入ってるんだろうかね？まととに仕事もしてないみたいだし。
そいつのツイッターとかの文章みると
>>710そっくりなんだよねw
句読点の使い方とか改行とかw つーか別の例を混ぜてくるから、混乱するんだぜ？
>>558をよく読め
> 特殊なレイアウトのスタイルかくとき
> 親に１つだけクラスつけてセレクタでもぐってスタイルかく？
> それとも要素１つ１つにクラスつける？
>
> 前者だとHTMLがきれいだけどＣＳＳが汚いし
> 間に要素追加したりするとセレクタ指定全部かきなおしになる
親に１つだけクラスつけてセレクタでもぐってスタイルかく
場合の話をしている。もぐるやり方は子セレクタ限定とは限らないが
子セレクタだとセレクタ指定全部書き直しになることが多いし
子セレクタじゃなくても、.foo の中に複数の spanがあるなら
間に要素追加したりするとセレクタ指定全部かきなおしになるのもわかるだろう
脊髄反射で回答者に文句をいうんじゃなく、
まず自分で質問内容を確認しろ >>715
おい、しらないのか？ そいつ本当に天皇だぜ
俺も同じ書き方をしているやつを知っているが
多分同一人物だろう。調べた所本当に天皇だった 句読点がそっくりなやつはは全部アイツだ！同一人物だ！
俺がどこに言っても出てきやがる。ストーカーだ。 >>716
あー完全に子セレクタと子孫セレクタ勘違いしてるっぽいねw
てか子セレクタなんてそこまで使わないし普通は子孫セレクタを想定するでしょ HTMLを書き換えたときにCSS/SCSSを「書き換える必要があるか」という点においては、どちらも変わらない
書き換える量がどれほど違うかでは、SCSSのほうが少なくなる可能性が高い buttonを普通のインラインブロック要素と同じ見た目にするにはどうすればいいのでしょうか？
http://jsbin.com/rixerukaka/edit?html,css,output
paddingを0にしたりborderを消したりしても、
中に入れたテキストが何故か他のインラインブロック要素よりも少し小さくなってしまい
同じ見た目にはなりません
chromeで確認しています >>719
やっと理解できたか。
別の例を出して話を混ぜっ返すんじゃねーよ ごく普通のサイトを作っています。
Edge,IE,Firefoxではほぼ同じ見栄えになるのですが、
Chromeで表示すると、何故か倍率125%に設定しているくらいに全体が大きめに表示されます。
でも倍率を確認すると100%です。
どういう原因が考えられますか？ >>722
は？勘違いしてたのはscssキチﾌﾟｹﾞﾗってことだよ？いいのねそれで。 >>724
俺が今説明してやったろーが
それで理解したよな子セレクタだって >>723
このスレは雑談スレなので他で聞いてください。ブラウザーに関しては該当スレがないので立ててはどうでしょう >>725
ちげーだろw
何故かいきなりscssマンが子セレクタ限定で話進めてた、まわりは子孫セレクタを想定してたから全く噛み合わずちんぷんかん。
からの最後にこれは最初から子セレクタの話です！とか言い出した意味不がいまの状況 >>721
興味深かったので調べてみた
デフォルトのfont-familyが<button>はArial、<div>はMeiryoになってる（Windows Chrome） 【悲報】 今まで散々技術知識を口にしてきたscssさんは子セレクターと子孫セレクターの違いを理解してなかった >>727
頭が悪いおまえは子孫セレクタでないと理解できないんだろうが
子セレクタでも同じ状態は作れる で結局、scssを使えばいいってことが
子セレクタを例にすれば理解できるんだろ？
だからこれからもscssの話題は続けるぜ いまここ基地外が居るからまともな回答かえってこないよ
全部scssにこじつけられて論点摩り替えられる
cssスレいったほうがいいよ >>732
子孫セレクタ知らなかったのにscssの話なんてできるのぉ？ﾌﾟﾌﾟﾌﾟ >>728
buttonだけフォントが違うとは思いもしませんでした
font-family: inherit;
としたら普通のインラインブロック要素と同じになりました
ありがとうございました 要素がgridアイテムになったら、
ブロックレベル要素かインラインレベル要素かという違いは意味を持たなくるのでしょうか？ >>739
ありがとうございます
flexboxとcss grid layoutは挙動も似ていて
この二つを組み合わせて使うのが今のやり方なんだなーということが分かってきました CSSの話じゃなくてSCSSの話だからでは？
自分が初心者でCSSについての質問したとして
SCSSがうんたらかんたらって言われても
？？？ってなっちゃう >>744
初心者でほんとに分からんのかもしれんが全く違う。
見た感じが似てるからそう思ってるのかも知れんがSCSSはブラウザが解釈できない非標準技術いわば勝手拡張。
ブラウザはCSSしか解釈できないからweb標準のCSSに事前に(ブラウザに渡る前に)に変換が必要。
javascriptで言うcoffeescriptとかtypescriptとかと同じ。 margin-top:calc(100vw / 25);
だとスクロールバーの横幅も含むのが難儀よね
margin-top:calc(100% / 25);
で横幅100%取得、計算できるようにならないかしら ｷﾁｶﾞｲは、質問に答えることが目的じゃなくて、
自分の知っていることをひけらかしたいんだろう
自重したらひけらかせないから、絶対に自重なんてしない >>747
windowsも早くスクロールバーを他と同じようにしてくれればいいんだがな… viはビューポートインラインで、vbはビューポートブロックとかかね >>752
もう今さらなんじゃない？
androidもiosもmacosもスクロールバーの幅とらない方になっちゃったし viとかvbとかなんだよｗ
また知らぬ間に新しいの出てんのかよ～
他にもいつの間にか出てそうだな
めんどくせえ Bootstrapはもう時代遅れでSASSを勉強したほうがいいんですか？ >>755
全然関係ないものだから
ただ両方とも勉強とかするようなもんではない気がする
便利に使って楽するもんだ >>755
SASSなんて勉強するほどのものじゃないだろ。
単なる道具だから使えばいいやん 久々にレスポンシブページを作ろうとしています。
今ってvwとかvminとかあるんですね。
親要素に伴う変化が必要ならば%で良いと思いますが、
基本的にはmarginやpadding、フォントサイズは、
vw(h)/vmin(max)で指定した方が良いのでしょうか？ 低レベルな質問ですいません
既存のサイトをベースにモックアップを作りたいのですが
普通はどうやりますか？ツールとか使ってなるべく簡単にできる方法があれば知りたいです。
JSとかCSSの知識はあります >>759
好きにすればいいけど
%は継承する先祖要素に対する割合だから
子要素になるに連れて変動して都度計算が必要になるので
vwのような絶対値に対する割合の方がらくちんちーんな気がするな俺は
sassを使えるならデザインカンプのpxをvwに変換する関数作っておくと
pxで作るとの同じ要領で書くことが出来る
あんまり書くとsass絶対許さないマンに怒られそうだからこの辺にしておくけど >>760
モックてどんなものを指して言っているの？ >>762
デザインとか動きとか決めるためのhtmlです
サーバーとつながってないダミー画面みたいなやつ wgetとかでローカル保存すればいい気がしてきた。 >>763
htmlはサーバーに繋がってなくても出来るものだけど？
要はどっかのサイトをマルパクで盗んできて色々混ぜこんで見せたいってことでしょ？ ならwgetかcurlでまるっととってきて
apiからajaxするぶんだけ静的ファイルにしてしまえばいいんでない？ >>766
そういうことですよね。
さっきwgetでとってきたらデザイン崩れてなかったしなんかこれで進められそうです。
ありがとうございましたー
(ちなみに丸パクではなく既存サイトの改修ですw) jsでdomいじられまくるサイトじゃなくて良かったね 本当に無知な質問すみません
<a href="□□□" onclick="window.open('△△△')"target="_blank">[テキスト]</a>
これを□と△が同時では無く0.1秒等時間をズラして表示させるにはどうしたら良いのでしょうか？ >>770
そんな事もわからず質問していましたすみませんm(_ _)m 質問です！
Mixiのようなコミュニティサイトを作るには
HTML CSSはどの程度理解していればよいでしょうか？ >>772
スレ違いな者に丁寧な回答ありがとうございましたm(_ _)m感謝です！ HTML5で
sectionやarticleごとにH1タグが必須なのでしょうか？ CSS Grid Layoutで、セル単位で背景色を設定する方法はありますか？
グリッドコンテナやグリッドアイテムはHTML要素なので背景色を設定することは出来ますが
セルに設定することは出来ない気がします
グリッドアイテムをセル全面にして、グリッドアイテムに背景色を持たせるとかしないと無理でしょうか？ >>777
HTML Standardでvalidであるかどうかで考えればいらない
でもGoogle先生のご機嫌とるためには
セクションの頭には見出しがほしい
んで見出しレベルの高さは、セクションの高さと相談して考えるのがよろし IE11でfilter, mask, clip-pathは使えるんですかい？ Gecko寄りのスレがあるのかもしれませんが、
input type="number" の上下ボタンは、-moz-appearance:textfield で消せるようですが、
input type="date" の×ボタンは、消せないのでしょうか？
requiredで必須にしても消せちゃう(泣)
海外のサイトでclip-pathで消しているのを見付けましたが、無理矢理感が強い あのさー、
ニュースサイトとかなんだけど、
ページ開いてから、文がちょっとしか書いてなくて、
もう一回「続きを読む」を押すとか、やめてくんねーかな。
1回クリックしたら、一発で記事読めるようにしろや。
記事なんて、ザッとあっという間に読んじゃうんだからさ、2度手間取らせんなよ。
ほんとに腹立つな！！！！！！ >>777
セクション毎にh1つけてたアホがhtml5.1になって涙目なのしらないの？ >>784
わかるわ～
クソ重いサイトに限ってよくやってる
もう二度と行かない そんなことよりやたらとアプリ版のインストールを促してくるサイトがムカつく
酷いのだとアプリじゃないと続き読めなかったりするし Chromeがcol要素にmin-widthを受け付けてくれん
IE11なら動いてくれるんだが
どっちが正しい挙動なの？
ぶっちゃけcol要素いりますかね？列ごとにまとめて指定できるようなフリして全然できねーし SNSのごり押し強いところも腹立つ
やたらでかいボタンで本文隠れててスクロールしないと読めない
酷いとこはページ開くと先ずSNSのサブウィンドウが出てOKしないと読めない
そんなとこは当然ウィンドウ（タブ）即クローズ デザインの話はデザインのスレでしろ
ここはHTMLとCSSのスレだ いんじゃねたまには？ユーザビリティや仕様、挙動は関係ない話でもないし センスあるプロの人かわいいデザインのＣＳＳつくって
header nav section article footer
h1 h2 ul a
ぐらいでいいので かわいいって意味がわからん
かっこよさやきれいさはデザインでだせるけどかわいさは画像使わないと無理じゃね 意訳：”私が”かわいいと思うデザインを予想して作って >>797
できるプロの人にきいてるんで
できないならだまっててくれませんか ドロップダウンメニューは入れ子にしたulで実現するのがセオリーだと思いますが
メインメニューの項目が一つしかない場合には
ulを使うのは不自然だと思います
ulの代わりに使うタグは何がいいですか？ 達人が集うインターネットがあると聞いてやってきました。
デジカメで撮ってもらった画像をhtmlからリンクさせ、ブラウザで閲覧できるようにしたいです。
<img src="test.png">
で表示させたいのですが、画像が表示されません。
・撮ってもらった画像以外は表示されるので、単純なリンクミスはないと思います。
・撮ってもらった画像以外は表示されるので、タグのミスもないと思います。
・画像のプロパティを確認する限り、拡張子も.pngになっています。
・.jpg形式で保存しなおしても表示されませんでした。
・画像は画像ビュアーでは閲覧できますし、windows付属のペイントでも閲覧・編集できます。
・画像をwindows付属のペイントで編集したものとgimpで編集したものをそれぞれ.pngで保存し直していますが、それでもhtmlからリンクさせブラウザで確認すると表示されません。
・テストはローカル環境で行い、F5も押しているので更新遅れのようなものもないと思います。
もうお手上げなのですが、撮ってもらった画像をブラウザ上で表示させるにはどうしたらいいんでしょうか？ 質問があります。
掲示板のようにどんどん文字を追加していって、それを保存していく技法はjavascripですか？ >>802
閲覧者だけのコメントならjavascriptでもできますけど、
他人のコメントも、ということならサーバサイドのスクリプトかデータベース使うとできますよ >>801
追記
画像サイズは80KBくらい。
ブラウザへURLを直接入力すると画像が表示される。
誰か教えてください！！ >>804
メイン項目が一つの時はリストではないので。
見た目はセレクトボックスみたいになりますが
アイテムの字数によってサイズが伸び縮みしない点がselect要素とは異なります
クリックするとメニューが表示されるので、button要素かな？とか思いますが >>806のいい例がありました
amazonの検索窓の、カテゴリー選択の部分です
この部分の幅は、現在選択されているカテゴリーにのみ規定されて、
最長の選択肢に規定されているわけではありません >>801
まずはブラウザに直接
http://画像のパス
で表示されるか試してみて
>>802
やり方はいろいろあるけど自然なのは
追加する文字を送るのは HTML <form> で
うけとってサーバーに保存するのは CGI っていうサーバーサイドのプログラム ブラウザに直接画像のパスを入力すると表示されて、その直接のパスをコピーして
<img src="画像の直接のパス">
しても表示されません！！
もうわけがわかりません！！ >>811
<a href="画像の直接のパス">hoge</a>
とかして、パスの問題なのかそれ以外の問題なのか切り分けてみては httpステータスにはなにが返ってくるか見るほうがはやいか >>812
ありがとうございます！！
<a href="画像へのパス">てすと</a>
でやってみましたが、
・表示される画像の場合はクリックすると画像へ飛ぶ
・表示されない画像は絶対パスでも早退パスでも画像へ飛ばない
・表示される画像と表示されない画像は同一フォルダに保管されている
こんな感じです！！
一歩前進した気がしますがやっぱりわけがわかりません！”！ <a href="画像への絶対パス">テスト</a>
を右クリックしてリンクをコピーしてブラウザへペーストすると画像は表示されます！！
やっぱり単純なミスはない気はします！！！ >>816
たぶんはいってません！！
1個目のPCでEdgeとIEで今までのような挙動でした！！
2個目のPCでIEで1個目のPCと同じ挙動でした！
しかしchromeでは「ファイルがみつかりませんでした」というメッセージがでます！！
これは<a href="画像へのパス">テスト</a>
でも、ブラウザへ絶対パスを打ち込んでも同じです！！
画像に何かされているんでしょうか？？？ >>807
質問目的やりたいことを整理しよう
1. タグとしてどちらが適切なのか
ulでも不自然はない
2. 見た目をどうしたいのか
例えば複数の項目だとする
ulなら接した方が自然で、selectなら離して設置する
が、もっと具体的に書いてくれないと何ともいえない
button要素ならulなりが必要だろう
そのクリックする部分は何が書いてある？ >>818
よくわかりませんがローカル環境で絶対パスと相対パスと両方でやっています！！
諦めてカメラで撮った画像を模写して描いたデータは表示されました！
模写を頑張ればなんとかなりそうですがこんなアナログな解決方法いやです！！ >>820
もしかしてカメラのRAW画像？
縦横のサイズが大きすぎるとかない？
それと一旦試してみって欲しいのが、photoshopなどのソフトで
一旦web用書き出して保存し直してみてほしい。
それとこの画像を一度、自分のPCにダウンロードしてみて
https://s.yimg.jp/images/top/sp2/cmn/logo-170307.png
その写真をUPした時と同じ手順でUPするとちゃんと表示されるか試してみて。 カメラの画像です！
大きさは700px × 400pxくらいなので大きすぎもしない気がします！
photosyopはカメラで撮ってもらった人にやってもらったので持ってません！
ヤフーの画像はhtml上でも表示されました！！
フォトショップのせいなんでしょうか？？ すみません、レスもらえてうれしすぎて名前欄とアンカーと間違えました！！
>>821
カメラの画像です！
大きさは700px × 400pxくらいなので大きすぎもしない気がします！
photosyopはカメラで撮ってもらった人にやってもらったので持ってません！
ヤフーの画像はhtml上でも表示されました！！
フォトショップのせいなんでしょうか？？ Web APIの仕様書で
URL：/xxx_get
とあるものは、ブラウザのURLに/xxx_getをつければ値が返ってくるのですが、
URL：/xxx_set
Request：cmd={xxx_no}&id={xxx_id}
とあるものは、どうやってアクセスすればよいのでしょうか？
ド素人の質問で恐縮ですが教えて下さい。 >>815と>>817で矛盾したこといってないか？
<a href="画像への絶対パス">テスト</a>
を右クリックしてリンクをコピーしてブラウザへペーストすると画像は表示されます！！
しかしchromeでは「ファイルがみつかりませんでした」というメッセージがでます！！
これは<a href="画像へのパス">テスト</a>
でも、ブラウザへ絶対パスを打ち込んでも同じです！！
ブラウザへコピーってＵＲＫＬをコピーしてとんでるって意味ではないのか？ >>825
HTTPのスレが見当たらないんですよね。
JavaScriptのスレで質問したら、JavaScriptではないと言われたので、こちらに質問しました。 Web API ってのは特定のプロトコルをさす固有名詞じゃないんで
具体的に何の Web API なんかわからんと答えようがない
Request：cmd={xxx_no}&id={xxx_id} って表示させてるのは何なの？
httpのgetでいいなら
/xxx_set?cmd={xxx_no}&id={xxx_id}
あたりでアクセすできるだろうから試してみるといい
postならブラウザ上だけでは無理だし
80番をつかってるだけでhttpですらない可能性もある >>828
すみません、業務で扱っているもので、何のWeb APIなのかは具体的に言えないのです。
そのため質問も分かりづらくて申し訳ないです。
説明不足でした、httpのPOSTです。xmlで返ってきます。
サンプルがありまして、jqueryを読み込んでいて、scriptタグの中に以下の記述があります。
function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}
このようなHTMLファイルをつくることと、ブラウザからアクセスすることの結びつきが分かりません。
ファイルにRequestの内容を記述するのなら、ネットワークアドレスを記述しないと宛先が分からないのでは？と思います。 >>826
IEとEdgeではブラウザに画像の絶対パスを直打ちで画像が見られるんです！！
ところが、chromeで同じことをすると、ファイルが見つからないと言われるんです！！ 勉強ならともかく、さすがに画像のアップローダーは今時アホらしくて自作する気にならん
グーグル先生には敵わないよ >>831
tesuto.png
tesuto.jpg
にしてます！半角小文字の英語です！ >>821
photosyopはもっていませんが、gimoとペイントで保存しなおしてますがだめです！！
ヤフーの画像と同じようにアップロードしたいところですが、ローカル環境でやっているのでアップロード作業がないです！！
うすうす画像の問題なきがしてきたのですが、ここにいてもいいんでしょうか？？？ >>834
タグ云々関係なく、画像をブラウザにドラッグ＆ドロップして表示する？ >>835
すみません、やり方がよくわかりません！
ブラウザへのショートカット、ブラウザのURL入力窓、ブラウザのサイトが表示される場所、メニューバー
全部にドラッグ&ドロップしましたが、>>821のヤフーの画像も表示されません！！ >>836
セキュリティーツールやプラグインで画像へのアクセスを遮断してないか確認してみて >>801
一番手っ取り早いのが、その画像ファイルをどっかにUPしてくれれば
ここの回答者が実際検証できるし、photoshopで書き出し直してもあげられる。
FTP環境が無いなら、こういうアップロダとかかなあ・・
https://dotup.org/
ちなみにそれ、画像掲示板にUPするとどうなるんだろうな？ >>801
そもそも、HTMLと画像ファイルが、同じディレクトリにあるのか？
まず、同じ所にあることを確かめる
同じ場所にあるなら、相対パス付きで書けば？
<img src="./test.png">
./ をつける。ドットはカレントディレクトリ。
HTMLから見て、HTMLのあるディレクトリを表す
それか画像を何かのアプリで開いていて、ブラウザからアクセスできないとか、
Chrome が以前の画像をキャッシュして、表示しようとしているとか
異なるドメインにはアクセスできないとか、CORS。
Ajax で、サーバーを立てていないから、ローカルファイルにアクセスできないとか
基本的に、サーバーを立てていないと、開発できない。
ブラウザはサーバー経由で、HTMLをもらうのが前提だから。
初心者は、サーバーが無くても動くと、勘違いしてる
ローカルのファイルをHTML上で表示させたい
https://teratail.com/questions/28389 >>829
function xxx_setup(id) {
$.ajax({
type: "POST",
url: "cgi/xxx",
data:"cmd=1&id="+ id
});
}
例えば、xxx_setup(5); と関数の引数に、5 を渡せば、data:"cmd=1&id="+ 5 になるから、
URL の最後に、クエリ文字列、cmd=1&id=5 がつく
xxx_setup(10); なら、cmd=1&id=10 になる
jQuery の質問は、jQueryスレへ書き込んで >>838
https://dotup.org/uploda/dotup.org1478190.png.html
パスワードはhelupuです！！
ペイントで上書きしているので、本当はもっと写真です！！
>>839
サーバーにあげたら見えました！！不思議！！
他の画像はサーバーに上げなくても見えていて、今までこんなことなかったのに不思議です！！
ajaxは使ってますが画像にはかかわってないので関係ないと思ってました！！ <div class="short">short</div>
<div>long<br>long</div>
こういうhtml構造になってるとき short のクラスにだけスタイルかいて
２つのブロック横に並べて高さをそろえる(shortを引き伸ばす)方法ってありますか？
外側に div をつけて flex とかにすれば当然高さもストレッチされるんですけど
データベースの自動出力で外側をさわれないんですよね… >>843 こう?
.short+div,.short{
display:inline;
} >>841
>本当はもっと写真です！！
その写真をUPしてくれないと意味ないんだが・・。
ちなみにそのURLの画像のは問題無くローカルのhtmlでクロームで表示できるぞい >>841
まあajax使ってるならローカルなのが原因かもね
しかしそれならその画像だけが表示されないというのはおかしいな
だから予めヤフーの画像で試してもらったんだがなあ >>844
これだとlongの２行目が左側にまわりこんでしまうし
そもそも高さがそろってないので
単に内側にだけスタイル指定っていう条件で２列のテーブルみたいにしたいんですよね
<style>
.container {
display:flex;
}
.container > * {
background:#888;
}
</style>
<div class="container">
<div class="short">short</div>
<div>long<br>long</div>
</div>
っていうのと同じみためにしたいんです >>847
long側にもクラスつけられないの？
つけられるなら両方に display:table-cell つけるだけでいいと思うが >>842
どこで見たらいいかわかりませんがペイントで保存しなおしてます！！
>>845
この画像も表示されません！！
試しにimgタグだけのhtmlファイルをつくったら表示されたのでajaxが原因みたいです！！
でもこの画像だけなのが謎です！！！
原因がはっきりわかってないですがなんとなく解決できました！！
ありがとうございます！！！！ >>848
子要素にはいくらでもクラスつけていいので
やりたいことにかなり近づいているんですけど
marginがきかないんですね…
調べたらdisplay:table系にmarginつけるには上位のdisplay:tableにborder-spaceを設定しなきゃいけないみたいで…
beforeやafterつかって間にスペースはさもうとしてもうまくいかない…
なんとかmarginつけられないでしょうか ご質問があります。
職場でサーバーを用いない？掲示板を作ってみたいのですがphpを用いずサイトを更新していくことって可能なんでしょうか？
メモを残せる程度で良いのですが
例えばJavaScriptを利用したりとか、またはphpをサーバーを用いずに利用可能？
素人以下の知識で申し訳ありません。 不可能
javascriptはクライアント内で動作するプログラム
サーバー側でデータ変更するにはphpなりＣＧＩが必要
ウェブサーバーを経由しないでphpでp2p通信プログラムを作ることはできる
その場合も誰かがコネクションをうけて書き込みデータを保存する役割はしなければいけない メモを残せる程度っていうのが
他人にみせる必要はなく単に自分用のデータを残すだけでいいなら可能
javascriptのlocalStrage.setあたりを使えば閲覧者のローカルにデータをためて
次にアクセスしたときに再び表示させたりはできる
jsの話はすれ違いなのでこれ以上はほかスレで 文字コードで教えてください。
今までXHTML1.1でCGIプログラムのやりとりをしているページを書いていました。
試しにHTML5に書き直ししてみました。
ただCGIプログラムで文字コードはShift-JISなので、
HTML5でmeta charset="shift_jis"としました。
PCでは新しいブラウザでは問題なく使えているのですが、
iPhone 5/5c(iOS10.3.3)のSafariだと文字化けしてしまいます。
それ以降のiPhoneでは問題ないです。
これってiPhone5c/iOS10.3.3/Safari特有の問題なのでしょうか？
HTML5でシフトJISは、違う指定方法があるのでしょうか？ >>841-849
ajax のJavaScript 部分で、エラーが起こって、
それ以降の画像読み込み部分が、実行されないのかも
コンソールログに、エラーが出ているかも。
F12 開発者ツールを起動して、見てみろ
>>854
BOM 無し、UTF-8(UTF-8N)に、変換した方がよい >>855
文字コードで教えてくれと言われてるのになに日本語で答えてるんだ？アスペかな >>854
新しいSafariで問題ないのなら不具合なんでしょう
CGIのほうのContent-typeでcharsetを指定していないのなら、指定してみると良いかも >>855,857
ありがとうございます。
UTF8化したいのですが、
jcode.pl使ってるのでpmに直さないといけないですよね。
将来的には手を加えたいです。
Content-type指定してもダメでした。
HTML5に書き直したのをXHTMLに直したら、
正常に表示されました。
※iPhone5s 10.3.3ではHTML5で問題なし、
5cのみがダメっぽいですね。
まずはCGIのUTF8対応方向で変えていこうと思います。
ありがとうございました。 >>859
jcode.plって、何時代の人！？
10年以上前のプロジェクトの引き継ぎならともかく、今はperl自体がutf8対応してるからそんなのお払い箱だよ ちょっとスレチになってしまいましたが、
今ってエンコード処理させなくても使えてしまうんですね。
SJISをUTF8に変換して…、メールの時は…って難しく考えてしまってやってませんでした。
全部UTF-8Nにしてjcode部をなくしただけで、
データベースも使えるしメールも送信できるし、
今まで何を悩んでたのかな？って感じでした。
ほんと>>860の指摘の通りでした。
もうShift-JISサイトの方が珍しいし、
メールもjisに変換しなくても行けるのも驚きました。
ホント久々に触れたので感動みたいな驚きです。
ありがとうございました。 jcode.pl の事を知ってる人がいて、良かったね
漏れは検索したけど、perl は分からんし、
ライブラリには、そういう固有のやり方があるのか、と思った >>863
marqueeってなに？って思ったら
HTML5では廃止されてるタグなのね・・・ テーブルのtdとか閉じてなくね？
あとソースのtable のとこの3ってなにが入るん？
cellspacing とか cellpaddingとかかね？ >>864
先週です。
>>867 同感です。
<table ( 3 ) >
< ( 4 ) >
の答えは何でしょうか？
< ( 7 ) >はbodyを閉じるのでしょうか、htmlを閉じるのでしょうか？
trやth、td、thの中のfontは閉じなくてもいいのでしょうか？ <table>を<marquee>ｗｗｗ
つーか<html>と<body>のあいだに書いてあるのか (4)はcaptionだろうけど
(3)がわかんねｗ
summary="1月カレンダー"とか？？
widthとかalignとかborderとか何でも正解かもしれんしｗ
(7)は流れから見てhtmlの方だろうね >>863
俺も３年前にこんなことやってると知って驚愕した [ 3 ]
①HTML
②タグ
③半角
④htm
[ 4 ]
問1
https://jsfiddle.net/mxc7zy63/1/
※jsFiddleだと<body>が解釈されませんchromeはわかってくれた
①size
②color
③border
④caption
⑤tr
⑥/table
⑦/html
問2
#ffffff → 白
#00ff00 → グリーン
問3
⑧#ff0000
⑨#0000ff
問4
クロ
問5
(イ) → エ、文字を斜体にする命令
(ウ) → オ、センタリングにさせる命令
(エ) → イ、文字を左右に動かす命令
(オ) → キ、背景全体に色をつける命令 >>861
860読み返したら随分きつい言い方してたわ、ごめん
解決できたようで何よりでした まぁHTMLの授業がある自体マシでは
わしの中学生の時はキーボードを押す練習しかなかったからな
キーボード配列がテストに出るレベル 最近の学生はプログラミングが授業で学べるのがええな
裏山 CSSはデリミタに_ではなく-を使いますが
ID名やクラス名もデリミタに_ではなく-を使う方がいいのでしょうか？ >>881
<blockquote>
<p>CSSはデリミタに_ではなく-を使いますが</p>
</blockquote>
それどこ情報？ >>882
プロパティ名に使われているハイフンのことじゃね？
background-colorとかfont-sizeとか selectを全面に広げたペインのある場合も
そのselectはnavなどのブロックレベル要素に入れた方がいいのでしょうか？
インラインレベル要素を直接レイアウトのレベルに置くのはなんだか抵抗がありますが
なくても問題ないコンテナ要素ならない方がいいんじゃないかとも思います
どうなのでしょうか？ >>886
直接レイアウトしてるブロックの子にするのが気持ち悪いのはわかる
俺もよく<p>とかに入れてる
でもこういうのはもうポリシーの問題に近いので
良し悪しは人に決めてもらうのではなく、自分で決めること
だと思ってる >>886
あと何かしらの要素に入れておいたほうが
裸で置いておくよりも
後々デザインの為にCSSを書くときに都合が良いことが多い >>887-888
決まったセオリーがあるというわけでもないのですね
ではシンプルさよりも気持ち悪いという感覚の方を重視してコンテナを使おうと思います
ありがとうございました >>880
h1は文字を大きくしますとか教える授業だぞ
あれならないほうがまし >>890
うわ～酷いな、そうやってアメリカや東欧州などから遅れていくわけだ とはいえどう教えるかって難しいよな
大学生ぐらいなら見出しを意味し、ブラウザで見たときの文字が大きくなるデフォルトスタイルになってることが多い
っていってもいいけど小学生ぐらいなら文字が大きくなるって教えるしかないんじゃね
「h1は文字を大きくする(ために使う）」はひどいが
「ためしにh1をかいてみましょう 大きくなりましたね」ぐらいのことしかいえないだろう <h1>は知らんけど
従姉妹に娘に教えてあげてって頼まれたときに
「改行するときは<p>と書きます」って教えてると知った時は戦慄した
そんですごく迷った
本当のことを教えてしまうと、たぶん学校では役に立たないだろうし
かと言ってこんな20年前のやり方を教えてしまうのもどうかと
幸い、その子はまったくやる気がなかったんで
おっちゃんやっとくから遊んどいでって言って、普通にコーディングしたった 小学生でもわかる
pは段落、brは改行
h1は大見出し、大きくしたいならCSSという物を使う >まったくやる気がなかった
それが正解
下手に覚えるならやらんほうがマシ
小学生でもやってるのか知らんが、教科書の「この部分」でわかるだろ まあでも学校の先生には少しわりーことしたな、とは思う
彼らだって専門家でもないのに、知らんなりに指導要領通りに一生懸命やってるだけなんだろうし
そこに
class以外の属性がほとんどないのに色や大きさが変わってたり
<marquee>じゃないのに動いてるのがあるの持ってこられても
わけわかんなかっただろうなと 何気に教科書って h,p,img,strong,i,ul,table、段組みなどいい教材なんだよな >>895
小学生でもわかる
pは段落、brは改行
h1は大見出し、
ここまではいいけど
>大きくしたいならCSSという物を使う
これが小学校では範囲外なんだよね
小学校で負の数って概念にふれちゃダメなのと同じ リセットCSSは使うのが普通なのでしょうか？
今まで使っていなかったのですが、ブラウザ間の差異を知らなかったせいで
変なハマり方をしたので、使った方がいいのかと思ってきました
今まで使っていなかった理由は、
ブラウザによるふるまいの違いも知っておいた方がいいのでは？と思っていたからです >>900
ブラウザ間の差異に煩わしい思いしたくないから使う 子どもの話全部真に受けてるのがやばいわｗ
pを改行ってその子どもがそう覚えてただけかもしらんだろ >>900
知っておくのは大事だけど、ブラウザ間の問題解決が目的ではないよ >>903
あー言葉足らずですまん、口伝ではないのよ
プリントで要素の説明が幾つか書かれてるのを見たんだ
先生が個人で作ったにしては手の込んだデザインのプリントではあったけど
教科書や副読本的のコピーではなかったっぽいんで
全国でそうしているかどうかはわからんよね
断言ぽく書いてすまんかった 画像のように三分割したいのですがうまく行きません
二列目のはじまりを揃えて、三列目は大きな画像を表示させたいです
https://i.imgur.com/S37cxsn.png >>908
やっていたのは一つ一つの文字にクラス名付けてcssの方で整えようとしてました
テーブルで簡単に出来るんじゃと思い試している最中です flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
（気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります）
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか？ >>911
ありがとうございます！
重ね重ねすみません。画像の高さがautoになっていますが、1·2列目の全体の高さと合わせたい場合はどうすれば良いでしょうか全体の枠組みが画像に合わせるのではなくて1·2列目にと考えています。言葉足らずですみません。 flexあるから今の人はもうfloatとか勉強しないの？ <style>
<!--
.mainArea{ width:800px; font-size:150%; }
.borderBox { border:solid 5px #000; display:flex; padding:1em; justify-content:space-between; }
.borderBox > ul {list-style:none; display:flex; flex-wrap:wrap; align-content:space-between; width:15em;}
.borderBox > ul > li {margin:auto; inherit; display:flex; justify-content:space-between;}
.borderBox > ul > li > div {width:6em; margin:0 1em;}
-->
</style>
<div class="mainArea">
<div class="borderBox">
<ul>
<li><div>サークルＫ</div><div>良い</div></li>
<li><div>ローソン</div><div>微妙</div></li>
<li><div>ファミマ</div><div>悪い</div></li>
<li><div>セブン</div><div>良い</div></li>
</ul>
<p><img src="http://placehold.jp/300x300.png";></p>
</div>
</div>
１，２列目にあわせるって 画像のほうが確実にちいさいってこと？ まあ顧客の原稿でもよくあるパターンだよな
どの線をどこにあわせるのか
あいたスペースはすべてつかうのかつめるのか
こっちが推測してデザインしたのに意図が違うってごねられるの >>912
1、2行目のことかね？
1、2行目に何か特別な意味があって、画像は1、2行目と関連があって
高さを合わせたい
ということで良いかね？ >>914
すみません。そのコードで解決しました。
ありがとうございました。
助かりました。 >>916
すみません、こちらの説明がおかしくて。
最初に書いていただいたコードで解決しました。
画像の高さはこちらの勘違いです。
ありがとうございました。 >>914
これみておもったけど
flex-direction: column; で縦にalign-contentする方法ってないの？
これ幅固定して無理やりwrapさせてalign-contentしてんだよね？ >>910の件ですが
flexboxをやめたらうまくいきました
便利なのでやたらflexboxとgrid layoutを使っていたのですが
完全上位互換とは言えないようですね >>919
中のやつらの高さがfixされてればmargin:autoでいけんじゃね しらんけど 質問です
<div class="button">ボタン</div>
のようなHTMLであるとき
CSSは
div.button{
}
.button{
}
のどちらの表記がいいんでしょうか？
やはり前者ですか？ >>923
例えば、divだけじゃなく
<a class=“button”>ボタン</a>
などで同じスタイルを使うなら後者
divとaで全く違うなら前者
個人的には後者推奨で
<div class="button button-red">ボタン</div>
のように、共通クラスと、派生クラスで管理することが多いです >>923
要は「div.button」で表記だとclassはdivにしか適応されない
aとかｐとか他の複数の要素にも使うのなら「.button」にしておく >>926
そうじゃなくてclass名を半角スペースで区切って複数で記述すると
別々のclassのスタイルを同時に適用できるということ
例えばボタンの形と中のテキストのサイズやカラーを別にしたい時とか 詳細クラスのときしかつかったことないけど
ふつうに２つ分のクラスももてるの？
他の言語だと多重継承できないこと多いけど
.button{}
.button.color-red{}
じゃなくて
.button {}
.color-red {}
でも適用される？ >>923
原則、後者の方が汎用性高いので後者で行えばいい
そしていずれ前者が必要な時が出てくる
その時に前者が必要な理由を理解すればいい >>921
z-indexのある他のブロック要素ではどうなのだろう？
と思って試してみたら、flexbox同様、
要素が他の要素のoutlineより上に来ました
それで要素のbackgroundをtransparentにしたところ、
outlineの塗りつぶしが避けられると分かりました
おそらくflexboxでも同じやり方で解決できると思います
ありがとうございました outlineって何のことだろう
borderのことならbox-sizingでいいんじゃ
つーかもう
body * {box-sizing:border-box}は必ずいれてるわ >body * {box-sizing:border-box}
ああ、やはりそうなるか。
自分も毎回記述してて疑問に思ってたんだが
それやっても支障でないんだね >>933
なんのことかはわからんが
outlineてのはあるにはあるよね
クリックしたときにでる点線のやつ >>924
>>925
>>927
>>931
ありがとうございます
基本は後者でやって
必要であればクラスを複数同時に当てたり
前者を使ったりってことなんですね 複数のクラスを使うのは、複数の概念を組み合わせる場合
例えば、色のクラスと、テキストの右寄せとか。
赤色で、右寄せとか >>937
> 複数のクラスを使うのは、複数の概念を組み合わせる場合
当たり前ではないかと 規模が大きくなるとクラスが3個以上になることもあるが
どっかのスレでそれが理解できないのがいたな でもマルチクラスは分かりづらいし単純に冗長だから
クラスを組み合わせるのはsass側で解決して
シングルクラスにした方が良いよ 本来、cssは装飾に対する意味付けで、直接的なデザインとしての指定ではないほうがいい
例えば.text-redではなく、.text-strongのほうがいい
とは言え最近はcssを環境によって切り替えることもないし、bootstrapのようにデザイン指定として使うほうが楽だね >>941
text-ってのもおかしんだけどなｗ
テキストをstrongにするって言ってるわけだから 開始タグと終了タグの間の、タグの中身に相当する部分の呼び名は何ですか？ >>944
そうです
要素の内容、あるいはコンテントですね
ありがとうございました >>940
マルチクラスすらのしらないのにsassですかwww
頭わいてるのかお前
やっぱsass様はコミュ障なんだねぇ 土日はsass様が沸きやすいね
会社で相手にされなくてストレスたまってんだろうなぁ おかしいな？ 俺平日の夜も普通に書き込んでるけど？ でも、SASS の利用率は、海外では100%、日本でも50% はある 100%はウソだわｗ
海外は、というより欧米はpostcssの機能コマ切れ導入に移行しつつある。
そうでなくともstylus もある。
そもそもrimrafモジュールやmkdirpモジュールまで使って必死でプラットフォーム依存避けようとする輩がsassごときのためだけにruby依存なんて許容できるかよｗｗｗ
sass使ってる奴もnode-sassだろ精々 じゃあpostcss、stylus等の話もしていかなきゃな
> sassごときのためだけにruby依存なんて許容できるかよｗｗｗ
ん？ 今はlibsassというC/C++で実装された高速なコンパイラに
置き換わってるはずだが？もnode-sassもlibsassを使うので
ruby要らなくなっている >>941
それも結局英語を理解できるって前提ありきだよね
.red や .aka だと発狂しちゃう人でも
.nyekundu だったら許しちゃったりするでしょ
コンピュータに対する識別子でしかないんだし
あんまりこだわらなくてもいい気もするな > .nyekundu だったら許しちゃったりするでしょ
英語ですらないから許さないよ 個人の趣味サイトなら、自分がわかれば好きにすればいいと思う
他人が関わる可能性があるなら、誰が見てもわかりやすくした方がいい
特に、集団で運用するなら、集団のルールに従うべき 今の時代英語が理解できない人間と一緒に仕事をしたくないな 客のアメリカ本社から回されてきたコードで
コメントの半分以上がスペイン語だったときは泣きそうになった 次テンプレ入れておけ
・回答はSASS/SCSSを前提としないこと
CSSでの回答とし、要望があった場合のみSASS/SCSSでも可 SassやSCSSで答えてるやつの相手するほうがめんどくせー HTML中の属性値に引用符と同じ文字を記述するにはどうすればいいのでしょうか？
他のプログラム言語のようなエスケープ文字がないので
"\""
みたいには書けないですよね 引用符の中にも文字参照って使えたんですね
ありがとうございました むしろ使わないとダメだからな
<a href="http://example.com/foo?a=1&;b=2">
これは間違いだからな
<a href="http://example.com/foo?a=1&;b=2">
正しいのはこれだからな なんか化けたぞ
<a href="http://example.com/foo?a=1&;amp;b=2">
正しいのはこれだからな フォームのGETでハッシュ付きのurlに値を渡したいのですが、
パラメータ - ハッシュの順番のurlになってしまってうまく値を渡せません
具体的には
<form method="get" action="./#ajax/find.php">
<input type="text" name="key" value="" />
</form>
というフォームで、
http://sample//#ajax/find.php?key=xxx となってくれたらうまく動くのですが
http://sample/?key=xxx#ajax/find.php となってしまいうまく動かないということです
パラメータを後にくるようにする方法はないでしょうか？ action="./%23ajax/find.php">
にするということでしょうか？
http://sample/%23ajax/find.php?key=xxx
となって404がでました そらそーだ
#の後ろはlocation.hashだとブラウザは思ってるわけだから
#ajaxてのはなにか１画面アプリ的なことをしてるわけでしょ
だったらそのフォームのポストもブラウザ任せにしないで
URL作るところから自分で面倒見てあげなきゃ駄目っしょ デスクトップ用evernoteクライアントの
タブのようなものをHTMLとCSSで作ろうと思います
hoverすると「×」がボタンの右端に表示されて、
それをクリックするとボタンが消えるようなものです
この「×」はどういう実装で実現するのがいいですか？ >>983
どんぐりの背比べ
好きに実装するといい >>983
HTMLで要素を作って
CSSで見た目を整えて
JSで制御するのがいいと思う >>980
×って自分でいってんだから×で実装すればいいじゃん absoluteな子要素を右寄せ縦センタリングして
その要素にafter疑似クラスを使って×を設定しました
これ以上にイケてる方法ありますか？ アプリケーション系は
よっぽど切羽詰った事情がない限り
before、afterを使うよりも普通に要素として書いたほうが
後々取り回ししやすことが多い、気がする
DOMから手が届くから この×は文字ではなくてアイコンとして使っているだけなので
font awesomeのアイコンと同じ感じにしました evernoteのタグってことは削除したあとリロードでなくなってないといけないんだろ？
localStorageとか使わないと無理だよ 実は作っているのはウェブサイトではなくてelectronのアプリなので
ストレージは使っていますが、locasStrageではありません このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 45日 23時間 21分 27秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
