CSS・sass・less・stylus 初心者スレッド＝15th＝

1 ：Name_Not_Found：2016/01/19(火) 00:31:55.12 ID:???.net

CSS・sass(scss)・less・stylus 初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。

※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。

《関連スレ》
Webサイト制作初心者用質問スレ part244
http://peace.2ch.net/test/read.cgi/hp/1421469214/

《前スレ》
CSS初心者スレッド＝13th＝(c)2ch.net
http://peace.2ch.net/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/

103 ：Name_Not_Found：2016/02/06(土) 10:44:18.13 ID:???.net

>>102
img outline:none
ってリセットしろ

104 ：Name_Not_Found：2016/02/06(土) 12:23:34.31 ID:???.net

それは点線じゃね

105 ：Name_Not_Found：2016/02/06(土) 23:27:48.93 ID:???.net

>>102
最近どこかで同じような質問見た。
確か幾つかのアドバイスが有ったように思うが忘れた。

106 ：Name_Not_Found：2016/02/07(日) 01:41:18.22 ID:???.net

>>105
思い出して！

107 ：Name_Not_Found：2016/02/07(日) 12:06:56.89 ID:???.net

>>105
ここの15でしょ

108 ：Name_Not_Found：2016/02/07(日) 12:20:01.85 ID:???.net

>>102
img:focus { outline: none; }
もしくは
img:active { outline: none; }
変わらなかったら border-style: none;

109 ：Name_Not_Found：2016/02/07(日) 14:12:01.59 ID:???.net

>>107
記憶力いいな

110 ：Name_Not_Found：2016/02/09(火) 00:16:19.26 ID:???.net

見出し（h2やh3）に下線を付けたいのですが、どうしたら良いでしょうか？
ググったら<u>はもう使わないみたいですけど、他に指定する方法はありますか？

111 ：Name_Not_Found：2016/02/09(火) 00:30:57.76 ID:???.net

>>110
text-decoration
border-bottom
css

112 ：Name_Not_Found：2016/02/09(火) 00:53:50.19 ID:???.net

>>111
ありがとうございます

113 ：Name_Not_Found：2016/02/09(火) 04:02:52.91 ID:???.net

<header>で囲んである部分を固定したいのですがposition；fixedだけでは無理なのでしょうか？
一応レスポンシブでheaderのサイズは変わります。

114 ：Name_Not_Found：2016/02/09(火) 06:02:09.54 ID:???.net

osition:fixed;ならいけんじゃね

115 ：Name_Not_Found：2016/02/09(火) 06:02:34.44 ID:???.net

position:fixedだ。p抜けた

116 ：Name_Not_Found：2016/02/09(火) 12:34:29.78 ID:???.net

>>113
iOSならひょっとするとposition: fixed;だけじゃおかしくなる場合があるかも?

117 ：Name_Not_Found：2016/02/09(火) 15:41:06.58 ID:???.net

>>116
それ、iOSの4か5あたりの頃の話だよ

118 ：Name_Not_Found：2016/02/11(木) 07:35:42.30 ID:???.net

LESSを使ってみたいとおもっているのですが、このdivのheightを変数に入れる。ということはできるのでしょうか？

119 ：Name_Not_Found：2016/02/13(土) 08:50:16.28 ID:???.net

CSSの質問とは直接関係ないのですが、HPのデザインに関する質問なので
ここで質問させて頂きました
例えば、
www.example.com
を取得して、
www.example.com/site1/
www.example.com/site2/
www.example.com/site3/
みたいに三つのサイトを作った場合に、
www.example.com
は、その三サイトへのリンクだけ貼ったような簡素な作りだと、ちょっとみすぼらしいので
見栄えの良い作りにしたいのですが、自分では全くセンスが無いので思いつきません。
こういう場合、このトップページはどういう作りにするのが良いでしょうか？
現状ではsite1,2,3はwordpressのブログサイトです。
今後、4,5,6とサイトを増やしていきたいと思っています。
参考になるようなデザインがありましたら教えて下さい。

120 ：Name_Not_Found：2016/02/13(土) 10:11:00.95 ID:???.net

デザインの話なのでスレチ気味だが
同じ構造になっていると思われるサイトを想像して当たってみろ
・持ち株会社のサイト
・総合家電メーカーの製品一覧サイト
・際とかすかいらーくとかファストリとかファイブフォックスのような複数ブランド展開企業のサイト
・銀行のように個人、法人、IRなどで入口がざっくり分かれてるサイト
・アマゾンやヨドバシのカテゴリ一覧
・なんかのポータルサイト
・外食産業のメニューページ
・クソまとめサイトのクソリンク集
URLが下部ディレクトリになってるとかそういうのはこの際関係ないと思うが・・・

121 ：Name_Not_Found：2016/02/13(土) 12:18:14.25 ID:???.net

>>119
見栄えなんていらない。noindex入れてリンクだけ貼ってりゃいい

122 ：Name_Not_Found：2016/02/13(土) 18:15:03.35 ID:???.net

>>119
デザインに関することなら尚更スレチ

123 ：Name_Not_Found：2016/02/13(土) 20:16:42.82 ID:???.net

そういえばデザインの相談するスレってないね

124 ：Name_Not_Found：2016/02/14(日) 12:13:29.96 ID:???.net

>>118
LESSもSASSも所詮CSSに変換しているだけだから、
CSSで出来ないことは出来ない。

なのでちゃんと使おうと思うならば、CSSをしっかり理解しないと駄目。
LESSやSASSは書くのを省力化するためのものであって基本はCSSと同じもの。

125 ：Name_Not_Found：2016/02/16(火) 18:51:33.21 ID:???.net

.class1 > ul > li li > a{
color:black;　　
}
すみません、初心者なのですが、この場合は何を選択している事になるのでしょうか？

126 ：Name_Not_Found：2016/02/16(火) 19:29:16.75 ID:???.net

>>125
.class1 > ul > li > a
これが正解だと思う。

.class1直下のul要素直下のli要素直下のaタグを黒字にする。
仮に.class1直下にdivでその中にulがあっても上のプロパティ適応されない。

127 ：Name_Not_Found：2016/02/16(火) 19:42:10.17 ID:???.net

>>126
詳しい解説大変有難うございました。
とても勉強になりました。感謝です。

128 ：Name_Not_Found：2016/02/17(水) 01:33:13.47 ID:???.net

>>126は間違ってるよ
「li li」という箇所はそのまま解釈しなきゃ
「.class1直下のul直下のliに入れ子になっているすべてのli直下のaを黒字にする」が正解
「li li」に「>」がないので何重の入れ子であっても選択される

129 ：Name_Not_Found：2016/02/17(水) 01:34:43.69 ID:???.net

例えばこんな感じ
<div class="class1">
　<ul>
　　<li><a>選択されない</a></li>
　　<li>
　　　<ul>
　　　　<li><a>選択される</a></li>
　　　　<li>
　　　　　<ul>
　　　　　　<li><a>選択される</a></li>
　　　　　　<li><ul><li><a>選択される</a></li></ul></li>
　　　　　　<li><section><div><ul><li><ul><li><a>選択される</a></li></ul></li></ul></div><section></li>
　　　　　</ul>
　　　　</li>
　　　</ul>
　　</li>
　</ul>
　<div>
　　<ul>
　　　<li><a>間にdiv噛んでるので選択されない</a></li>
　　　<li><ul><li><a>同じく選択されない</a></li></ul></li>
　　</ul>
　</div>
　<a>選択されない</a>
</div>

130 ：Name_Not_Found：2016/02/17(水) 10:20:54.25 ID:???.net

>>128>>129
ありがとうございました。
疑問が解消してスッキリしました。
わざわざサンプルまで作っていただきまして感謝です。
129のサンプルで実験してみます。

131 ：Name_Not_Found：2016/02/17(水) 12:28:55.72 ID:gAjd6GlX.net

インデントが全角になってるから注意

132 ：Name_Not_Found：2016/02/17(水) 13:11:24.28 ID:???.net

コードUPに https://jsfiddle.net/ を使うといいよ

133 ：Name_Not_Found：2016/02/21(日) 04:11:29.32 ID:???.net

300x300の<div> の中に100x100の imgを上下左右の中央位置に置きたいのですが、
最も簡単な方法を教えて下さい。

134 ：Name_Not_Found：2016/02/21(日) 05:55:00.03 ID:???.net

x:100px
y:100px

135 ：Name_Not_Found：2016/02/21(日) 10:56:34.14 ID:???.net

>>134
ありがとうございました。
imgの大きさが100x100とは限らない場合はどうしたらよいですか？

136 ：Name_Not_Found：2016/02/21(日) 10:59:23.25 ID:???.net

>>133
https://jsfiddle.net/obwompp3/

137 ：Name_Not_Found：2016/02/21(日) 11:02:43.28 ID:???.net

>>135
divは300x300固定なんだから計算をやり直して>>136

138 ：Name_Not_Found：2016/02/21(日) 11:37:29.73 ID:???.net

ググって解決できるレベル

139 ：Name_Not_Found：2016/02/21(日) 11:41:14.86 ID:???.net

>>137
divも大きさが変わるんです。そういう場合にも使える方法をググったのですが、
どのサイトを見ても何種類も方法が説明してあり、良く分かりません。
最新のプラウザでのみ使える方法で構いません。お願いします。

140 ：Name_Not_Found：2016/02/21(日) 12:22:37.90 ID:???.net

>>139
divも大きさが変わるのならimgを3個並べてdivの大きさに収まる保証がないでしょ
そういう場合は float: left; で並べなさい

141 ：Name_Not_Found：2016/02/21(日) 12:53:36.24 ID:???.net

>>140
長方形divの中にそれよりサイズが小さい長方形を一個置きたいだけです。
上下中央、左右中央位置に。
>>136さん
サンプルありがとうございました。
でも、このように小さい四角形画像をdiv内に並べたいのではありません。

説明不足ですみませんでした。

142 ：Name_Not_Found：2016/02/21(日) 16:15:57.73 ID:???.net

>>141
ググったならわかると思うがいろいろな方法があり一長一短
上下中央には最適解はないので以下の中から都合のいいものを選べ

https://jsfiddle.net/wkrbf13p/4/

ちなみに画像にネガティブマージンという方法も出てきたと思うが
それは「2」の変形版だ（calcが使えない古い環境向け）

143 ：Name_Not_Found：2016/02/21(日) 17:37:42.33 ID:???.net

>>142
> ・img要素にこだわらないなら4が一番おすすめ。
background-imageはimg要素の代替にはならない。
img要素はコンテンツの一部なので代替テキストが用意されているが、background-imageにはそれがない。
CSS/画像表示がオフにされてもimg要素は正しく表示されるが、background-imageはCSSをオフにされただけで表示されなくなる。
img要素は音声ブラウザで読み上げを行うが、background-imageは読み上げない。
それがコンテンツでないならbackground-imageを積極的に使うべきだが、そうでないならbackground-imageは使うべきではない。

> ・画像サイズが変わるたびにcssメンテするとかありえねー！という場合は5一択
もし、画像や親要素(div)の幅/高さが可変だった場合、またはMedia Queriesを使っていた場合、window resize 時に高さを再計算しなければならない。
CSS-off/JS-onもしくはその逆でも正しく動かないだろう。
「画像サイズが変わるたびにcssメンテするとかありえねー」なら俺は vertical-align: middle; をお勧めする。

144 ：Name_Not_Found：2016/02/21(日) 19:38:09.43 ID:???.net

>>143
前段については、べき論ならおっしゃるとおり

> window resize 時に高さを再計算しなければならない。
リサイズ時の考慮を追加した
https://jsfiddle.net/wkrbf13p/5/

ちなみにimg要素のみの場合はそもそもjsが不要だったので「6」を追加した

145 ：Name_Not_Found：2016/02/21(日) 19:40:39.94 ID:???.net

> CSS-off/JS-onもしくはその逆でも正しく動かないだろう。

CSSオフでJSオンならそもそもどのやり方でも実現不可能（br連打とかなら話は別だが）
またjsオフなら正しく動かないのはその通りだが
そもそもjs使えるならこの方法もあるよと紹介しているだけなのでこれは意味のない指摘だよ

146 ：Name_Not_Found：2016/02/21(日) 23:05:10.28 ID:???.net

>>142
素晴らしい。
ありがとうございました。

147 ：Name_Not_Found：2016/02/21(日) 23:15:55.90 ID:???.net

>>146
いちおう>>144が修正版だぞ

148 ：Name_Not_Found：2016/02/22(月) 12:03:02.75 ID:???.net

>>147
すばらしいですね。
サイズを気にしなくても良い５がいいですね。
147さんはWEBデザイナー歴なかなり長いんですか？
わたしもそんなレベルになりたい。

149 ：Name_Not_Found：2016/02/22(月) 12:47:20.08 ID:???.net

>>145
> CSSオフでJSオンならそもそもどのやり方でも実現不可能（br連打とかなら話は別だが）
確かに仰る通り。
伝えたかったのは「JS-OffでもCSS-Offでも最低限コンテンツが全て表示されるようにあるべき」ということだが、改めて考えたらCSS-Off/JS-OnならJSが働いてもCSSが働かないから何もしないだけだな(無駄にJSが動くという問題はあるが)。
失礼した。
ただ、CSSで完結すべき機能であるように思うのでJSを加える処理は可能な限り避けるべきだと思う。

vertical-align: middle; の事例が伝わっていない様子なので書いてみた。
https://jsfiddle.net/q7avoky8/

150 ：Name_Not_Found：2016/02/22(月) 17:08:53.54 ID:???.net

>>142
>上下中央には最適解はないので
flex 使えるなら最適解と言えるものはある

.container {
display: flex;
align-items: center;
justify-content: center;
}

align-items も justify-content も実際は display: flex; 専用ではないので
将来的には display: flex; も不要になるだろう
プロイパティを画像に指定したければ
align-selfや justify-self というのもある

151 ：Name_Not_Found：2016/02/23(火) 18:55:55.70 ID:???.net

.
.
板違い（？）の上に、話をさえぎってしまいゴメンナサイ！(*_ _)人
でも、この板のユーザーさんにも有意義な告知かと思うのでカキコませてください。

★ 謝礼は十分いたします ★　アメブロなどのサイト制作ができる方！！　

アメブロなどを使用してのサイト制作のできる方を早急に求めています！
私はリケジョやPC女子からはほど遠く、サイト作成にはまったく疎いのでとても不自由しています…(> <；)
そこで私に代わりサイトを作成してくださる方を求めてこの場をお借りしました。

■サイトの内容…
アダルト系、違法性、その他公序良俗に反するものではありませんのでご安心ください。

■サイト制作の仕様ベース…
アメーバブログで十分です。願わくばwordpressなどのブログ形式のサイトを希望します。
それに準ずるもので使い慣れたものがあれば別のものでも構いません。

■条件はありません…
技術さえお持ちでしたら、学歴・職歴等は一切問いません。
フリーター、ニート、高齢ニート、コミュニケーション障害をお持ちの方、引きこもりの方、中年失業者、長期無職等、歓迎！

■作業形態…
作業は在宅でやって頂くことになりますので、時間の指定は一切ありません。別のお仕事の傍らに…でもOKです。

■詳細をお知りになりたい方は…
下記メールアドレスまでご連絡ください。詳しく書いた返信文を差し上げます。

※真剣な告知です。冷やかしはご遠慮ください。

井 上
inoue1952w★gmail.com
迷惑メール対策のため＠部分を★にしてあります。
実際に送信する際には★を＠マークに変えてください。
.
.

152 ：Name_Not_Found：2022/09/02(金) 08:45:10.86 ID:f9nkADO1v

頭弱いやつってワクチン〔笑）にナ丿マシンなんて入ってるわけねえとか思ってるだろうけと゛
お前らが使ってる端末のＣｐＵやｗｉｆｉチップなどの集積回路はナノメート儿の単位で作られてるからな
　１ナ丿メ─ ├儿　〓　０、０О〇０О１ミリメ− ├儿　な
ちなみに，肉眼で見える限界は○、１ミリメ一ト儿て゛．注射針の内径は〇、２５ミリメ一トルな
お前らでも家電製品やら制御してる電孑基板くらい見たことあるだろ
あれか゛そっくり目に見えない大きさで作れるし，微弱な電気信號で動作するし，電波の送受信もできるわけよ
腦や体は微弱な電氣信号て゛動いてるわけだか゛、どんな電氣信號を改変して腦に与えたら思考コン ├囗─儿て゛きるかくらい
曰本に原爆落とした世界最惡のならず者国家か゛研究してないわけがないた゛ろ脳夕リン

創価学会員は．何百萬人も殺傷して損害を与えて私腹を肥やし続けて逮捕者まで出てる世界最惡の殺人腐敗組織公明党を
池田センセ━か゛口をきけて容認するとか本氣て゛思ってるとしたら侮辱にもほと゛か゛あるそ゛！
https://i.imgur.com/hnli1ga.jpeg