CSS初心者スレッド＝11th＝

1 ：12/01/27

CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ Part 227
http://toro.2ch.net/test/read.cgi/hp/1322905086/
《前スレ》
CSS初心者スレッド＝10th＝
http://toro.2ch.net/test/read.cgi/hp/1306489752/
《過去スレ》
CSS初心者スレッド＝9th＝
http://hibari.2ch.net/test/read.cgi/hp/1287470663/
CSS初心者スレッド＝8th＝
http://hibari.2ch.net/test/read.cgi/hp/1273383771/
CSS初心者スレッド＝7th＝
http://pc11.2ch.net/test/read.cgi/hp/1251527427/
CSS初心者スレッド＝6th＝
http://pc11.2ch.net/test/read.cgi/hp/1234355194/
CSS初心者スレッド＝5th＝
http://pc11.2ch.net/test/read.cgi/hp/1228900036/
CSS初心者スレッド＝４ｔｈ＝
http://pc11.2ch.net/test/read.cgi/hp/1218200382/
CSS初心者スレッド＝3rd＝
http://pc11.2ch.net/test/read.cgi/hp/1212198165/
CSS初心者スレッド＝2nd＝
http://pc11.2ch.net/test/read.cgi/hp/1207202319/
CSS初心者スレッド＝1st＝
http://pc11.2ch.net/test/read.cgi/hp/1193327030/

2 ：12/01/27

≪各種仕様≫
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 ：12/01/27

乙

4 ：12/01/27

┌─────┐
│ いちもつ ♪│
└∩───∩┘
　 ヽ(`･ω･´)ﾉ

5 ：12/01/27

前スレ http://toro.2ch.net/test/read.cgi/hp/1306489752/980n は解決した？

6 ：12/01/28

>>1
11th ってなんだよ
中卒未満かよ

7 ：12/01/28

>>6なんで小卒がレスしてるの？

8 ：12/01/28

>>6

9 ：12/01/28

あ？11stだろうが
>>1,7,8てめーら幼稚園からやり直せwwww

10 ：12/01/28

>>9
えっ・・おまえ・・・

11 ：12/01/28

マジレス
何も知らない奴→「とりあえず3rd以上はthじゃないの？」
　・今回は運が良かったな。とりあえずセーフ
馬鹿が間違った憶測で勘違いする→「1stなんだから11stだろｗｗ」
　・情弱の典型例。CSS以前の問題
このスレの一般住人→「11は『Eleven+th』なので11th、ただし21以上の場合は
　　　　　　　　　　　　　　　『Twenty-first』なので21stになる」
　・常識だな

12 ：12/01/28

じゅういっす！

13 ：12/01/28

ちなみに11はティーンズには入らない

14 ：12/01/28

初心者だけどいろんなホームページのソースみて勉強してます！
みんなはどんな風に勉強してる？

15 ：12/01/28

同じだよ。どの本にもまずは他のウェブをみて学べって書いてある

16 ：12/01/28

ほかのWebのソースはPHPとかでぐちゃぐちゃに書き換えられた後のソースだったりテーブルレイアウトだったりで
意外と話にならない
<div>
<div>
<div>
<div>
<h1>なんとか</h1>
</div>
</div>
</div>
</div>
こんな風になってることがザラ

17 ：12/01/28

divばっか使ってるとこは確かにウザイ。
有名サイトのソースみて勉強するといいよ。
素人のサイトソースなんかみてもなんも勉強にならん

18 ：12/01/28

参考書として見るサイトを決める基準が「有名」ってのは大間違いすぎだろ
大前提としてHTMLがそれなりにまともじゃないと「なんも勉強にならん」よ

19 ：12/01/28

ふむ、じゃあまずもっとも有名なgoogleのサイトを見てみるか
html>body>div>form>div>div>table>tr>td>table>tr>td>div>table>tr>td>table>tr>td>div
なるほど

20 ：12/01/28

正直テーブルレイアウトってなんのことかわからない

21 ：12/01/28

HTMLに<table><tr><td>
とか
display:table-cell
とか
つかうのを嫌ってる人のことじゃないの。

22 ：12/01/28

それはdiv厨

23 ：12/01/28

じゃあリファレンスサイトでも見てろよ。

24 ：12/01/28

ぶっちゃけリファレンスサイトのほうがW3Cより役に立つよね
このタグはFirefox、GoocleChromeで機能しますが
IE8未満は動かない
とかそういう重要な情報はW3Cにかいてねーし。

25 ：12/01/28

HTMLっていうか、なんていうか、このスレいらなくね

26 ：12/01/28

そりゃW3Cは各ブラウザの実装まで管理する立場にないし

27 ：12/01/28

スタイルシートって普通は自分で作るんですかね
みんなどうしてる？

28 ：12/01/28

え？じゃあお前どっからかパクってきてんの？

29 ：12/01/28

作り方がわからない；

30 ：12/01/28

えーっと、ここは初心者スレであって未経験者スレではないんだよね。
でも一応君の役に立つであろうリンクを貼っておくよ
http://lmgtfy.com/?q=CSS%E3%80%80%E6%9B%B8%E3%81%8D%E6%96%B9

31 ：12/01/29

>>27
俺はおかあさんに作ってもらってる

32 ：12/01/29

何も考えずにやると壁紙の上に文字がうつって見づらいです。
http://iup.2ch-library.com/i/i0548926-1327827284.jpg　こんなふうに
それを
http://www.coolwebwindow.com/temp/source/public/pub004/src/
みたいに見やすくするにはどうすればいいんでしょうか（いろんなサイトがやってるように）
無知ですみません

33 ：12/01/29

>>32
http://az-store.nrym.org/archive/mynotes/lecture/

34 ：12/01/29

>>33
どの辺みればいいですかね

35 ：12/01/29

全部

36 ：12/01/29

どのへん見ればいいって・・・
>>32みたいな基礎的なこともわかってないのに。
お前むいてないわ。CSSやめろ

37 ：12/01/29

>>32
>何も考えずにやると
少しは考えろよｗ

38 ：12/01/29

ごめんなさい
全部見てから出直す

39 ：12/01/29

Naverの画像検索みたいにサイズが違っても画像と画像の隙間が空かないようにするにはどうすればいいでしょうか？
参考
http://search.naver.jp/image?sm=tab_hty.image&q=%E7%A0%B4%E5%A3%8A%E5%8A%9B%E3%81%AE%E3%81%82%E3%82%8B%E7%8C%AB

40 ：12/01/29

Javascriptで位置を調整する

41 ：12/01/29

>>40
んーやっぱりCSSだけではダメなんでしょうか
出来ればjavascriptは使いたくないので、あんまりスマートではないですが画像を縦に並べることで解決したいと思います
ご回答ありがとうございました

42 ：12/01/29

CSSでも別にできるよ
ただ、たとえばあとから
ここは200*250pxのjpg画像をおいてたけど
この300*300の画像に置き換えよう！
とか思ったときに、ほかのすべての画像の位置をすべて手直しする手間がかかる。

43 ：12/01/30

みんなどうやって勉強しましたか？
本買った？それともネットで勉強した？

44 ：12/01/30

後者かな

45 ：12/01/30

とりあえず今は

46 ：12/01/30

途中送信してしまった。
とりあえず今はCSS3なんて新要素覚えずにCSS2とHTML4からゆっくり覚えとけばいいよ
ベンダープレフィックスとかは気にしなくてイイ。
他のブラウザに対応していく技術は基本を覚えてからだ。

47 ：12/01/30

CSS2とHTML4→CSS2.1とHTML4.01

48 ：12/01/30

>>32
これって壁紙設定したら上からborderで枠作ってるの？

49 ：12/01/30

どこをみて壁紙設定してるって思ったの？

50 ：12/01/30

>>49
見出しの事言ってるんじゃないの?

51 ：12/01/30

あぁそういうことね。
h2にmarginやらpaddingやらbackgroundやら付加してるだけだよ

52 ：12/01/30

にしても>>32のテンプレ配布サイト見てみたけど、それなりに綺麗なコードで構成してるのな
見習おうと素直に思った

53 ：12/01/31

32のサイトならこれ以上きれいにかけないね。

54 ：12/01/31

商用サイトテンプレが結構参考になるの沢山あった気がする。
個人的にNo5、7、14、19、20、21、23はいいな　って思った。

55 ：12/01/31

body{
margin:0px;
padding:0px;
}
div{
margin:0px;
padding:0px;
display:inline-block;
width:50%;
}
これだけではdivを画面いっぱいに横並びにできないのですが他に何が必要でしょうか。
widthを下げると横並びになるので、何かがはみ出ているのでしょうか。

56 ：12/01/31

>>55
divが2つだけで連続している状態です。

57 ：12/01/31

何かってってなんだよdiv自体だろ

58 ：12/01/31

100<50+50
ってこと

59 ：12/01/31

>>55
inline-blockを使おうとする理由を
inline-blockでググって読んで考えてからまた来てください

60 ：12/01/31

inline-blockの使い所ってぶっちゃけあまりないよね

61 ：12/02/01

inputタグのtype="text"が横並びに2つあるとき
IE8では、文字を日本語で入力した場合は、1,2px下にずれちゃうんだけども
原因なんですかね？

62 ：12/02/01

>>55
最初のDIVの終了タグの後に改行があり、
その改行文字が半角空白に置換されているのでは。
100% < 50% + 半角空白の幅 + 50%

63 ：12/02/01

>>62
HTML書いてないけど確かにその可能性はある。
エスパーレベル２級くらいだ。

64 ：12/02/01

<textarea></textarea>
に
textarea{
width:100px;
height:100px;
}
を指定すると、テキストエリアをリサイズできる機能を持ったブラウザ(Chromeなど)で100px以下にリサイズできなくなります
表示したときに100pxのサイズで表示させて、ユーザーがリサイズしたいときは100pxいかにも出来る方法を教えてください

65 ：12/02/01

>>62
あたりっぽい。
〜〜</div><div>〜〜
にしたら50%でも並んだ。

66 ：12/02/01

>>64
%指定すれば良い話じゃないのけ？

67 ：12/02/01

>>66
ダメです
Chromeだと指定したサイズ（px,em,%）以下にリサイズできないです

68 ：12/02/01

というかそういう事例を一体どこで使うのさ。

69 ：12/02/01

横だがめちゃくちゃ有用な設定だと思う

70 ：12/02/01

div自体に厚みがあるのか。

71 ：12/02/02

本見ながらTOPページは作ったんだけどCSSってコンテンツの部分どこに作るん？
サンプル見てもTOPだけでコンテンツ部分はリンク切れになってるもんで

72 ：12/02/02

headの中にstyleタグつけてコメントアウト
またはlink張って別ファイル

73 ：12/02/02

<style></style>はコメントアウトしろ
みたいなこと書いてるCSS入門書とかあるけど
あれって別にいみねーよな。
XHTMLならむしろ間違いだし。

74 ：12/02/03

30年前のブラウザ使うときに困るからコメントアウトすべき

75 ：12/02/03

基本linkのほうがかっこいいよね

76 ：12/02/03

そもそもlink使わないとHTMLの中にCSS入れることになるから汚い

77 ：12/02/03

すみません、質問です。
<span class="aaa">AAA</span>
<span class="bbb">BBB</span>
<span class="aaa bbb">AAA BBB</span>
というタグがあったとして、
「aaaとbbbの両方のクラスが定義されている要素」だけにスタイルを適用したいのですが、
CSSのセレクタはどう記述したら良いのでしょうか。
よろしくお願いします。

78 ：12/02/03

初心者です。お願いします。
-----------こういった線の処理--------------
をしたいのですが、ボックスを3つ作って右と左端のボーダーは何か
するのでしょうか？

79 ：12/02/03

>>77
.aaa.bbb
でもたぶんそれはHTMLを見直すべきだと思う
>>78
日本語で

80 ：12/02/03

ようわからんが、:before / :after 疑似要素使えばいいんじゃない

81 ：12/02/03

>>80
ありがとうございます。
:before / :after 調べて見ましたが自分には難しそうなので
安直に文字の罫線
─── センタリングしたら左右ボックスにぴったり合わない ───
でごまかしてみます

82 ：12/02/03

>>81の方法はIEで失敗しました。( Ｔ ▽ Ｔ )

83 ：12/02/03

ソース貼れ

84 ：12/02/03

>>82
もしかしてIE6で確認したんじゃないの?
だとしたら疑似クラス（:beforeとか:afterとか:hoverとかのこと）は
a要素以外には効かないよ
若干HTMLが汚れるけど
ttp://blog.mukairiku.net/2011/11/css%E3%81%A0%E3%81%91%E3%81%A7%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%92%E6%B0%B4%E5%B9%B3%E7%B7%9A%E3%81%A7%E6%8C%9F%E3%82%80%E6%96%B9%E6%B3%95.html
とかは?

85 ：12/02/03

:beforeは疑似クラスじゃない
そもそもIE6は:before使えない

86 ：12/02/03

横槍だがrelative指定のspanで隠すのか。
なんかモヤモヤすんなぁ

87 ：12/02/03

>>79
できました！
ありがとうございます、助かりました！
> でもたぶんそれはHTMLを見直すべきだと思う
予定表の予定とかは、「重要度」と「緊急度」で分けたりするではありませんか。
その際、重要なものにはclass="important"、緊急なものにはclass="urgent"、
重要かつ緊急なものにはclass="important urgent"を付けたりするではありませんか。
その時に、重要かつ緊急なものを、特に強調して表示したかったのです。
とにかく、目的を達成することができました。
ありがとうございました！

88 ：12/02/03

>>84
ありがとうございます！！リンク先のでなんとなく出来ました！！
ちなみにIEは5.1 NNは4.7で確認してます。firefoxとsafariで見られたので
okにします！

89 ：12/02/03

なんだよ、こいつ

90 ：12/02/03

なんでそんな6より古いもん使うの。
5とか対応してる個人/業者どこもないぞ

91 ：12/02/04

Web板状中の基地外ですよ。いつも同じ質問してる

92 ：12/02/04

ラインハイトを固定に設定してるやつよ
フォントサイズを大きくしたらやたら窮屈になる
そのくらい考えろ無能ども

93 ：12/02/04

>>87
>予定表の予定とかは、「重要度」と「緊急度」で分けたりするではありませんか。
>その際、重要なものにはclass="important"、緊急なものにはclass="urgent"、
>重要かつ緊急なものにはclass="important urgent"を付けたりするではありませんか。
>その時に、重要かつ緊急なものを、特に強調して表示したかったのです。
まるっきり>>79の指摘通りじゃねえかｗｗ
なんで「強調」に<span class="">を使う？なんでinportantは太字urgentは赤背景両方なら両方が適用されるというような形にしない？
そうしていれば77の質問にはそもそも至らずに済むというのに
>>79はそういう意味での「HTMLを見直せ」でしょ
>>88
NNってお前何年前の人間だよ

94 ：12/02/04

>>85
アウチ…
疑似要素と疑似クラスとごちゃごちゃになってた…
指摘ありがとう
そして吊ってきます

95 ：12/02/04

>>93
> なんで「強調」に<span class="">を使う？
<span>は質問のために使っただけで、別に<li>でもいいですよ。
> なんでinportantは太字urgentは赤背景両方なら両方が適用されるというような形にしない？
なんで仕様の方を変えようとするんですか？
・important かつ urgent の場合は赤色
・important のみの場合は青色
・urgent のみの場合は緑色
という仕様だった場合、どうするんですか？

96 ：12/02/04

emとかstrongとかの立場って

97 ：12/02/04

だから基地外っていってるじゃん。相手にすんな

98 ：12/02/04

基地外はあなたですよ。
全く説明になってませんから。
<span class="important">重要な予定</span>
<span class="urgent">緊急な予定</span>
<span class="important urgent">重要で緊急な予定</span>
で、これを<em>と<strong>でどうするんですって？

99 ：12/02/04

<p>
<em>と<strong>は、
こういう<strong>テキスト内での強調</strong>に使うんですよ。
知りませんでしたか？
<em>インライン要素</em>ですからね。
</p>

100read 1read

1read 100read

TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲

【SEO】Bing対策 パート１【MSN】 (253)
【Android】スマホサイト作成スレ【iPhone】 (237)
■HPの平均寿命■ (397)
画像素材屋がマターリ雑談するスレ　20 (325)
Webスクールについて (274)
webデザイナーに聞きたいのさ (783)
--log9.info------------------
ふたばちゃんねるアク禁被害者スレ　その12 (873)
Twitterの痛いユーザーを晒すスレ (356)
エイプリルフールサイトを見つけたら報告するスレ (439)
『ヤフー知恵袋』『教えてgoo』の住民は知障.�L (847)
江頭2:50のピーピーピーするぞ！ 12 (993)
アンチニコニコ動画総合スレ14 (152)
日本一最悪の検索結果の会社 (225)
【ｲﾝﾀｰﾈｯﾄ板】お薦めのWEBサイトを語れ!【推奨】 (123)
なぜWikipediaは衰退したのか？ (147)
【インターネット】-ニコニコ動画　Part242 (823)
【ニコニコ】 動画雑談所 10コメント目 【YouTube】 (932)
【あたま】オモコロ感想スレ【ゆるゆる】 (165)
【】詐欺サイトまとめPart01【懸賞】 (560)
WEB MONEY ウェブマネー Part3 (358)
【検閲問題】ネット規制7【ダウンロード違法化】 (550)
【YAHOO!】ヤフーが重い時にageるスレ (342)
--log55.com------------------
【西日本】 au 新規・買増一括情報★115
【携帯】 障害者割引スレ38 IPﾜｯﾁｮｲ有【スマホ】
au【ケータイ→auスマホ割】について語れYO!!
【通販】おとくケータイ一括キャッシュバック情報18
3Gの停波・サービス終了を予測するスレ・3
auスマートパスプレミアム Part.36
Y!mobile ワイモバイル 総合スレ 161通話目
【東日本】docomo新規・買増一括情報★262