TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼
◆熱く盛り上がれweb制作板◆
+ JavaScript の質問用スレッド vol.140 +
蕎麦は手打ちじゃないといけないの？PART2
+ JavaScript の質問用スレッド vol.127 +
iPod touch 向けwebページ、webアプリ
熊本のWeb制作会社について語ろう
画像素材屋がマターリ雑談するスレ 20
JavaScript ライブラリ総合質問所 vol.5
ゴッゴル
【好評発売中】Microsoft Expression【part2】
CSS・sass・less・stylus 初心者スレッド＝15th＝
- 1 ：2016/01/19 〜 最終レス ：2016/02/23
- CSS・sass(scss)・less・stylus 初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ part244
http://peace.2ch.sc/test/read.cgi/hp/1421469214/
《前スレ》
CSS初心者スレッド＝13th＝(c)2ch.sc
http://peace.2ch.sc/test/read.cgi/hp/1423959729/
・スタイルシート記述言語
ブラウザが直接対応しているのはCSSのみなので通常はCSSを使用する。
ただし複雑になってくると管理が大変なのでより簡単に記述できる
Sass (scss)・less・stylusというものがある。
・sass (scss) ・・・ http://sass-lang.com/
・less ・・・ http://lesscss.org/
・stylus ・・・ http://stylus-lang.com/
・CSS設計手法（命名規則）
大規模なCSSを管理するためのCSS設計方法
OOCSS / BEM / SMACCS などがある。
・OOCSS ・・・ http://oocss.org/
・BEM ・・・ https://en.bem.info/
・SMACCS ・・・ https://smacss.com/
- 2 ：
- 《過去スレ》
CSS初心者スレッド＝12th＝
http://peace.2ch.sc/test/read.cgi/hp/1343429848/
CSS初心者スレッド＝11th＝
http://toro.2ch.sc/test/read.cgi/hp/1327663847/
CSS初心者スレッド＝10th＝
http://toro.2ch.sc/test/read.cgi/hp/1306489752/
CSS初心者スレッド＝9th＝
http://hibari.2ch.sc/test/read.cgi/hp/1287470663/
CSS初心者スレッド＝8th＝
http://hibari.2ch.sc/test/read.cgi/hp/1273383771/
CSS初心者スレッド＝7th＝
http://pc11.2ch.sc/test/read.cgi/hp/1251527427/
CSS初心者スレッド＝6th＝
http://pc11.2ch.sc/test/read.cgi/hp/1234355194/
CSS初心者スレッド＝5th＝
http://pc11.2ch.sc/test/read.cgi/hp/1228900036/
CSS初心者スレッド＝４ｔｈ＝
http://pc11.2ch.sc/test/read.cgi/hp/1218200382/
CSS初心者スレッド＝3rd＝
http://pc11.2ch.sc/test/read.cgi/hp/1212198165/
CSS初心者スレッド＝2nd＝
http://pc11.2ch.sc/test/read.cgi/hp/1207202319/
CSS初心者スレッド＝1st＝
http://pc11.2ch.sc/test/read.cgi/hp/1193327030/
≪各種仕様≫
http://hp.vector.co.jp/authors/VA022006/css/
http://www.y-adagio.com/public/standards/tr_css2/toc.html
http://www.d-toybox.com/spec/CSS2.1/appendixC/
http://www.w3.org/Style/CSS/current-work
- 3 ：
- 14thは無いのですか？
- 4 ：
- >>3
間違えただけ。気にすんな。俺も気にしてない。
- 5 ：
- 例えば<label>が8個あり、ウインドウ幅に応じて中央揃えにしたいのですが、使うべきCSSのヒントを教えて下さい。
|１１１１１ ２２２２２ ３３３３３ ４４４４４ ５５５５５ ６６６６６ ７７７７７ ８８８８８|
|１１１１１ ２２２２２ ３３３３３ ４４４４４ ５５５５５|
| ６６６６６ ７７７７７ ８８８８８ |
|１１１１１ ２２２２２ ３３３３３|
|４４４４４ ５５５５５ ６６６６６|
| ７７７７７ ８８８８８ |
|１１１１１|
|２２２２２|
|３３３３３|
|４４４４４|
|５５５５５|
|６６６６６|
|７７７７７|
|８８８８８|
- 6 ：
- >>5
display
- 7 ：
- >>6
display: ?
の何でしょうか
- 8 ：
- ヒントしかいいませんよ？
- 9 ：
- 何に対してのラベルなのかの方が重要である。となるとhtmlの話になるのでここでは話ができない。
- 10 ：
- 屋上…ってことですね？
- 11 ：
- 表示しているページのフォントを一律に１０％拡大や縮小したいのですが
CSSでやる方法を教えて下さい。
- 12 ：
- 無理じゃね？
テキストリサイズ系のjsライブラリ探しなさい
- 13 ：
- 出来る人います？
- 14 ：
- *{font-size:16px;}
body{font-size:1.1rem;}
ルートのフォントを指定しなきゃならんがな。
- 15 ：
- divにfocusを与えると周囲の色が変わりますが、
変えない方法ありますか？
- 16 ：
- それが彼の最後の言葉だった
- 17 ：
- divにfocusとか変態かよ
- 18 ：
- >>17
例えばの話です。
divでもbuttonでもtextareaでも良いのですが勝手に枠に色が付くを禁止出来ますか？
- 19 ：
- appearance:noneかな?
- 20 ：
- :focus{border:none;}
枠線なくすとか変態やろ。
- 21 ：
- >>19>>20
ありがとうございます。
試したのですが効果ありませんでした。
- 22 ：
- outline:none;
focusの線はこっちかも
- 23 ：
- >>22
ありがとうございました。
できました。
- 24 ：
- 三つのdivをそれぞれwidth:33%;float:leftすると一列に並びます。width:35%だと最後のdivが下に回り込み二段になりますが、それを防止して横一列で表示させたいのです。
最後のdivは一部が隠れている状態で構いません。どう言う属性を使うと良いでしょうか？
- 25 ：
- 33、34、33で妥協点する
- 26 ：
- >>25
妥協出来ないです
- 27 ：
- 親に対して33%だから常に1%の余りが出て段落ちすることはない。
- 28 ：
- 35があんのか。
フロート使う意味なし。一個ずつポジションで指定しとけ。
- 29 ：
- >>24
その三つのdivをさらにdivで囲んでflexかければいんでね？
- 30 ：
- >>24
なんで35%にするん?
- 31 ：
- 均等幅での横並びでいいならdisplayとflex-growでいけるな
- 32 ：
- どうしても１％オーバーさせたい変態がいるらしい
- 33 ：
- >>30
比率は0〜50%くらいの間で変化する可能性があり、
右端のdivは部分的にでも表示しておきたいのです。
- 34 ：
- >>24
その三つのdivを囲んでwidth103%とかにしてさらにdivで囲んでoverflow hiddenでいけないか？
- 35 ：
- >>24
http://codepen.io/anon/pen/rxJmaE
これでは？
- 36 ：
- https://jsfiddle.net/dx6e0oh7/
- 37 ：
- >>34でFAだろ
- 38 ：
- メリットがあるコーディングでもなさそうだし適当でいいじゃん
- 39 ：
- CSSでクラスを継承することは可能ですか？
あるクラス test があったとして、
.test {
background: #123456;
}
のときに、 test2 というクラスで test と同じスタイルを適用したいのです。
使用環境はGreaseMonkeyで、対象ブラウザはChrome,FFの共に最新版のみです。
欲しい機能はOOCSSの@extendそのものです。
ただ、OOCSSはブラウザが直接読み込めるわけではなさそうでした。
(GreaseMonkeyなので直接ブラウザが読み込めないと駄目です。）
スタイルセレクタがあるページにGreaseMonkeyでポップアップ等を付けています。
ベースのページと同じクラスを指定すれば同じスタイルになりますが、
ベースのページのJavaScriptと干渉する可能性がでてくるので、可能であれば避けたいのです。
また、スタイルセレクタがあるため、スタイルが非同期に書き換えられます。
JavaScriptでイベントを補足して追跡することは可能ですが、
CSS側でクラスを継承できるのならそれが一番簡単なので、この質問になります。
- 40 ：
- >>39
ムリです
- 41 ：
- >>40
やはりそうですか。ググると同様の質問も散見され、
新機能で追加またはブラウザがOOCSSを読めるようになっているのを期待したのですが。
どうもありがとうございました。
- 42 ：
- 継承みたいなことをやりたいなら、sassを使うべきだろうな。
- 43 ：
- >>39
前方一致で[class^="test"]でいける
- 44 ：
- >>42
それもRubyで書き出す物ですよね？
どちらでもいいので、ブラウザが直接読んでくれればよかったのですが。
>>43
動的追跡ではなく、静的追跡（一度指定したら親が変更された時もそのまま反映する）をやりたいのです。
クラスの別名（エイリアス）が欲しいというか。
- 45 ：
- 今度はクラス変態かよ。
- 46 ：
- >>44
> それもRubyで書き出す物ですよね？
C言語によるネイティブ実装（libsass）が出来たので、
Ruby不要でnodeから書き出せるようになったよ。
- 47 ：
- テンプレが完全にメタ言語よりで宗教色を強く感じるのは自分だけかね
CSSリンクが一つもないし、ここは本当にCSSスレなのか？
- 48 ：
- >>47
まぁ初心者排除もしくは初心者をバカにするためにアンチが立てたすれスレだからね…
- 49 ：
- よくアンチって聞くんですが誰が何の為に誰にアンチするんですか?
目的が分かりません。
- 50 ：
- >>49
それで正常かと。アホはほっときましょう
- 51 ：
- >>49
初心者スレでcssもままならない質問者相手にsassは初心者言語だからと宣ったがために叩かれ、悔しくてテンプレに無かったsass系を勝手にもりこんだのがこのスレ
- 52 ：
- >>51
悔しいとスレ立てるってどう言う心境なのか理解できない。スレ立てると何が嬉しいの？
- 53 ：
- >>52
https://www.google.co.jp/search?q=%E6%89%BF%E8%AA%8D%E6%AC%B2%E6%B1%82
- 54 ：
- >>51
どんな理屈だよｗｗｗ
- 55 ：
- >>51
お前本人か？ｗ
よく気持ちがわかるな。まるで自分のことのようにｗ
- 56 ：
- 本人が自分を貶める発言をすると思っているのか
- 57 ：
- え？前スレ終わる間際のやり取り覚えてないの？
なんか急に変なやつがsassテンプレ入れ必須だな！っていいだして同意者なしってやりとりあったじゃん
>>54 >>56
どんな理屈だよって思ったままだよ
そんなw生やして俺にはお前らが本人に見えるが？
>>52
勝手に入れてあるこのスレを使ってるやつは認めたって認識なんだとおもうけどわりと普通の考え方じゃないのか？
- 58 ：
- 前スレの流れって前スレ965が前スレ963にSCSSを勧めただけだろ
それに対して「初心者にSCSSなんか勧めるな⇒CSS理解できるならSCSS理解も簡単だろ⇒いやだから...」な口論が始まったぐらいでテンプレを書き換えようとは誰も発言してない
http://peace.2ch.sc/test/read.cgi/hp/1423959729/963n-
- 59 ：
- 犯人は私だ
- 60 ：
- 前スレの話題を妄想する辺り、>>57が「前スレ965かつ>>1」なんじゃない？
- 61 ：
- >>60
いやおれ57だけどsassとか勝手にいれたの反対派なんだけど…
おれが965ならこんなクソタイでスレたてねーわ
- 62 ：
- > がsassテンプレ入れ必須だな！っていいだして
どのレス？
- 63 ：
- >>61
> いやおれ57だけどsassとか勝手にいれたの反対派なんだけど…
>>51(SCSS否定派)や>>56を本人認定した人が何を言ってるの？
- 64 ：
- >>63
なにいってるかわかんねいわ
ごめんアスペで。
51=57=61だよ
- 65 ：
- >>62に返答が無いのはどういう理由？
- 66 ：
- >>65
なかったなら勘違いだわ
過去スレみれないんで
でも大筋まちがってないでしょ
満足しました？
- 67 ：
- >>65
なかったなら勘違いだわ
過去スレみれないんで
でも大筋まちがってないでしょ
満足しました？
- 68 ：
- >>66-67
過去スレは見られるでしょ
君が>>58を読んでない事は良くわかったよ
「なんか急に変なやつがsassテンプレ入れ必須だな！っていいだして同意者なしってやりとり」とか記憶に無い事をいいだすからわざわざ見直してしまったじゃないか
- 69 ：
- >>68
そうだね
まぁ俺は前スレでsassはcss初心者でもできるって言ってるアホが勝手にテンプレ入れてこのスレ立てたんだろ？ってことを言いたかっただけ
- 70 ：
- >>1も悪いが、ありもしない事を創作して間違いを指摘されたら開き直るような奴も大概だな
- 71 ：
- <div><img・・・>
これをdivの中で中央や右寄せにするにはどうすればいいでしょうか？
- 72 ：
- >>71
text-align, margin-left
- 73 ：
- <div>
<img/><h1></h1><img/>
</div>
を表示すると
img
h1
img
になるのですが、横一列で表示する方法教えて下さい
- 74 ：
- メデアクエリでウインド幅に応じてフォントサイズ変える設定しました。
うまくいくのですが、幅をリサイズで変更した場合には、変わりません。
そのあとでF5で再読み込みするとその画面幅に応じて正しく表示できます。
そういうもんですか？
- 75 ：
- >>73
h1にdisplay:inline（またはinline-block）
- 76 ：
- >>75
ありがとうございました。
できましたがinlineやinline-blockの違いが分かりません。blockもわかりません。
display:のオプションってなんでこんなに沢山あるのですか？
- 77 ：
- 理解できないモノを「なぜこんなにたくさんあるのですか？」と聞かれてもなあ
理解できてないからそう思うんだろうけど、学習意欲が足りないから勉強を疎かにして他人に回答を求める
安易に他人に尋ねて答えを貰っても基礎知識がないからわからないという悪循環
- 78 ：
- >>76
displayは他の要素の見た目に置き換えることができるからね。
displayを制するものはCSSを制すると言ったら、言い過ぎか。
- 79 ：
- 初期値を変えるだけやん
- 80 ：
- >>74
いや?
- 81 ：
- >>76
自己努力で解決できるレベルな
- 82 ：
- 自サイトでFirefoxのスタイルエディタが永遠にロード状態でCSSが編集できません。
CSSはきちんと適用されているのですがどういったミスか分かりますか？
ほかのサイトではきちんと編集できます。
- 83 ：
- FF板へどうぞ
- 84 ：
- 、 .t--u-ュ ＿__
Ｙ''`＿ｉ─-,,ｊ ヾ,＼
i┘ry ／,＿二'ゞ_＼
|.イ│r_"_r"-_＿＿`／
ヾ> `Ｙ^ヾ ィ''ｺ i''ｺ"
.∠j-イ､└' └'|
∠ﾆゝヽ ＿_ ノ∠ﾍ
┌r" ┬'┐,─ｉ--l┬┐
|├､,┴,┘｀ヽ＼.i├┘
/｜ Ｔ￣￣￣` ｏＹ
.｜｜ `i＿＿＿＿ﾉ
./__」 |＿＿_コ
- 85 ：
- 画像の上下に半透明の帯があるやつを作りたいのですが
調べてみるとサイズが画像サイズが固定じゃないとダメみたいです。
画像サイズが変化しても大丈夫な半透明の帯は作れないでしょうか？
- 86 ：
- つくれるよ
- 87 ：
- どこで調べたの？
- 88 ：
- ぐぐれや
- 89 ：
- >>85
afterやbeforeのblockを幅百パーにすればいけるんでないの?
- 90 ：
- >>85
「画像サイズが変化しても大丈夫」とは具体的には？
帯の太さが決まる条件は？
border を指定すればいいのでは？
- 91 ：
- beforeを使うことで半透明の帯、その上に文字もうまくできました。ありがとうございます。
画像にリンクをつけているのですが、この帯の上もリンクのクリック対象にすることはできないでしょうか？
- 92 ：
- 強引にやればできるがbefore使ってる限りは難しい
それ以前に帯に文字をのせてるってことは
装飾だけでない要素としての意味がちゃんとあるんだろ？
だったらbefore, afterではなくちゃんと
aなりpなり適切なマークアップをしろ
装飾も結果的にそっちのほうがやりやすい
- 93 ：
- 何が難しいの？？
- 94 ：
- position: absoluteにしてすきにしたらええんじゃないか
- 95 ：
- <div>
┠<img>
┗<h3>
やってみたらbefore使わんでも<h3>を半透明帯にできました。before使わないほうがいいのかな。
半透明の帯もリンク対象にするにはh3にリンクをつけるしかないでしょうか？
divl{
position:relative;
}
h3{
position: absolute;
font-size: 1.2em;
margin: 0;
padding: 0;
top: 80%;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.6);
}
- 96 ：
- >>95
divのとこをaにすればよい
display:blockを忘れずに
あと好みの問題だがh3はimgの前に置きたいな俺なら
- 97 ：
- bootstrapで1200pxの場合のみ一部のConterのwidhを100％にしたいと思ってます。
そのConterにもう一つ別名で「header-img」と名づけbootstrap.cssとは別に編集用cssに以下を記述しましたが
変化しませんでした。優先順位が間違っているのでしょうか？
@media (min-width: 1200px) {
.header-img {
width: 100%;
}
- 98 ：
- @media (min-width: 1200px)じゃ動かないかもなぁ
- 99 ：
- 納品されたサイトのcssがscssから出力されたものらしいんだけど、こちらでは誰もscssとやらの知識がなく
テキストエディタでのcssの修正や変更が手探りすぎてツラすぎてなんとかしたい
scssで書かれた元ファイルを要求すればなんとかなる？
- 100 ：
- せめて別のcssで上書きしたら
ぐちゃぐちゃになるよりいいだろう
100〜のスレッドの続きを読む
Javascriptで「戻る」を作るのやめてくれない？
◆熱く盛り上がれweb制作板◆
su-jineスレ
FC2ホームページが重すぎる
JIS X 8341-3 ウェブコンテンツJIS
Photoshop&Illustrator関連スレッドPart13
【PTO】Perfume Thread Outliner【ﾁｷﾌﾟﾝ】
【RDF】セマンティックウェブ【メタ情報】
＠＠＠ 管理人が死んだ場合 2回目 ＠＠＠
で、騙されたわけだが
--------------------
【スマホ】新型iPhoneは9月20日発売か、10月以降は割引禁止と消費増税で一気に高額に
全商簿記検定に挑戦する高校生集まれ
喪女がオカルトを語るスレ Part.2
支所、出先機関等総合スレッド
【WoT】World of Tanks Blitz チラシの裏 19枚目
[新]この男は人生最大の過ちです #1「奴隷にしてください」
【元自民】 #丸山穂高 議員「淫行と薄毛は偉大や、、淫行は人類どころか生物進化に不可欠。」
岡 崎 フ ラ グ メ ン ト
刀の似合う有名人
CRぱちんこAKBバラの儀式 part87
東北スレ 10
【ニヒル】成田三樹夫【おじゃる】
【スズキ】アルト Part95【燃費38.3km/L】
ネトウヨ「『ネトウヨ』という単語は差別用語なんだよ？」 家まで考えながら帰ってみたけど理解出来なかった お前ら教えて [923321696]
堀内まり菜 飯田來麗 佐藤日向 19ッス
ID砲丸投げ in ジャズ板 1投目
【まどか☆マギカ】美樹さやかは夏でも可愛い204さや
ブランドはバカがするものと男で思ってる奴は多い
リタイア目指してドケチ＆貯金を頑張る人のスレ37
ちゅらさん ５
TOP カテ一覧 スレ一覧 100〜終まで 2ch元 削除依頼
