■ このスレッドは過去ログ倉庫に格納されています
CSS初心者スレッド＝12th＝
- 1 ：Name_Not_Found：2012/07/28(土) 07:57:28.13 ID:???.net
- CSS初心者の方のための質問スレッドです。
具体的な記述方法がわからない方、基礎知識がない方はこちらでどうぞ。
※気のいい人だけが答えてくれますので、解答はまったり待ちましょう。
《関連スレ》
Webサイト制作初心者用質問スレ part230
http://toro.2ch.net/test/read.cgi/hp/1339311306/
《前スレ》
CSS初心者スレッド＝11th＝
http://toro.2ch.net/test/read.cgi/hp/1327663847/
CSS初心者スレッド＝12th＝ (dat落ち)
http://toro.2ch.net/test/read.cgi/hp/1341746420/
- 2 ：Name_Not_Found：2012/07/28(土) 07:58:11.59 ID:???.net
- 《過去スレ》
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/
≪各種仕様≫
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 ：Name_Not_Found：2012/07/28(土) 14:51:25.41 ID:???.net
- ＿＿＿
(＼ ∞ ﾉ
ヽ)＿ﾉ
└∩───∩┘
ヽ(`･ω･´)ﾉ < １乙 貴男にこれをあげよう・・・
- 4 ：Name_Not_Found：2012/07/31(火) 20:15:00.76 ID:???.net
- CSSは時期尚早
- 5 ：Name_Not_Found：2012/08/03(金) 20:52:13.69 ID:???.net
- /^^ヽ
（｡・-・） ﾔｯﾎ
ﾟし-J
（｡・-・）.｡ｏＯ( お～い )
ﾟし-J
- 6 ：Name_Not_Found：2012/08/04(土) 08:57:22.48 ID:A9QYtn1I.net
- このスレの過疎ぶりを見ると抗いようのないCSS廃止への流れが実感できるね
- 7 ：Name_Not_Found：2012/08/04(土) 13:11:35.57 ID:???.net
- ネタにしては面白くもなんともないが
- 8 ：Name_Not_Found：2012/08/07(火) 00:57:56.85 ID:???.net
- html {
height:100%;
}
body {
height:100%;
}
footer {
height:100%;
background: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<article>
<p>aaaaa<br>aaaaa<br>aaaaa</p>
</article>
<footer></footer>
</body>
</html>
footerの部分が猛烈に縦長になってスクロールバーが出てしまいます。
画面にきっちり収まるようにするにはどうすればよいのでしょうか？
- 9 ：Name_Not_Found：2012/08/07(火) 09:04:59.66 ID:ti3A3O8/.net
- 30分やって1キルしか取れないnoodですがよろしくお願いします
- 10 ：Name_Not_Found：2012/08/08(水) 00:07:25.14 ID:???.net
- 最近はheaderとかfooterとかarticleとかいうタグがあるのあか？
- 11 ：Name_Not_Found：2012/08/09(木) 06:21:30.20 ID:???.net
- >>10
HTMLにはバージョンがあって、その3つは最新版のHTML5で導入された
- 12 ：Name_Not_Found：2012/08/09(木) 21:49:08.75 ID:???.net
- >>8
footer{
height:100%; ←これいらん
}
- 13 ：Name_Not_Found：2012/08/11(土) 17:37:16.92 ID:???.net
- >>12
いや付ける癖を付けといた方がいいよ
- 14 ：Name_Not_Found：2012/08/12(日) 17:12:37.94 ID:???.net
- >>13
つけない方がいい
- 15 ：Name_Not_Found：2012/08/13(月) 13:21:12.33 ID:???.net
- background-repeat: repeat-y;
で背景繰り返し表示させる時に、
height: auto;
だと表示されないのは、そういう仕様でしょうか？
height: 300px;
とか、具体的に数字を指定すると繰り返しで表示されるのですが。
- 16 ：Name_Not_Found：2012/08/13(月) 13:24:18.39 ID:???.net
- どうせheightの中身がないとかそういうオチだろ
autoの意味を調べてくれば仕様だとわかるよ
- 17 ：Name_Not_Found：2012/08/16(木) 15:18:52.91 ID:???.net
- しっつもーん
文字の上に透過画像をdivで置いても下のリンクとか押せるようにできないですかね？
透過画像は全画面を覆ってます。
- 18 ：質問：2012/08/16(木) 22:40:58.29 ID:vWXTqk1D.net
- ①common.css
②general.css
③system.css
それぞれの違いを教えてください
- 19 ：質問：2012/08/16(木) 22:41:41.95 ID:vWXTqk1D.net
- <!--mainArea START-->
と
<!--mainArea END-->
に
挟まれている内容をcssで編集するとき
<style type="text/css">
と
</style>
の間にどのように記述したらいいでしょうか・・・？
- 20 ：Name_Not_Found：2012/08/17(金) 00:51:21.81 ID:???.net
- ゾンビエスケープの動画みて
CSS買ってみるか悩んでるんだけど
まだ人いる？
- 21 ：Name_Not_Found：2012/08/17(金) 04:16:41.92 ID:???.net
- 買ってこい !
- 22 ：Name_Not_Found：2012/08/17(金) 08:25:35.10 ID:???.net
- >>18
ファイル名が違う
>>19
CSSは内容を編集する仕組みではないし、
そのような要素選択はできない
- 23 ：Name_Not_Found：2012/08/18(土) 03:06:17.86 ID:???.net
- >>19
知らんがな
- 24 ：Name_Not_Found：2012/08/20(月) 16:08:35.34 ID:???.net
- ＣＳ：Ｓ内でチャットができないんだけど直し方だれかわからない？
- 25 ：Name_Not_Found：2012/08/23(木) 03:22:13.89 ID:ugnfZGiu.net
- iPhoneシミュレータで確認していると左右のpaddingで右側だけ10px足りないのですが、
何がいけないのでしょうか。以下ソースです（適宜省略します）。
#contents {padding:0 20px;}
input {width:100%;}
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<article id="contents">
<input type="text">
</article>
上記だとフォームの左側は20pxのマージンがありますが、右側は10pxしか空いていません。
#contents {padding:0 30px 0 20px;}
こうすると左右20pxの空きになります。
- 26 ：Name_Not_Found：2012/08/24(金) 19:22:57.82 ID:???.net
- >>25
何を根拠に30pxを20pxの空きと判断したんだ？
あとmarginとpaddingは全くの別物
- 27 ：Name_Not_Found：2012/08/25(土) 00:50:48.59 ID:T39PscHN.net
- 質問です。これができないのはどうしてでしょうか。
a:visited img{
opacity:0.5;
}
- 28 ：Name_Not_Found：2012/08/25(土) 12:11:14.01 ID:???.net
- >>27
ブラウザがIEとかいうオチじゃないの？
- 29 ：Name_Not_Found：2012/08/25(土) 13:06:15.25 ID:T39PscHN.net
- >>28
ありがとうございます。現行 Firefox 14.0.1 です。
セレクタが a:visited だけとか、a img だけ、img だけなら問題なく表示されます。
-moz-opacityプロパティも試しましたがダメでした。
IE(filter),Chrome,Safariもダメでした。
が、Operaならできました！
てことはブラウザの実装の問題でしょうか。
そこまで高度な指定でもないと思ったんですけど…。
a:visited img{border:5px solid green;} だと各ブラウザで効くので、opacityに問題があるっぽい。
a img{opacity:0.5 !important;} だと各ブラウザで効くので、visited疑似クラスに問題があるっぽい。
- 30 ：Name_Not_Found：2012/08/25(土) 13:25:21.26 ID:???.net
- >>29
a:visited img{border:5px solid green;}も効かないわけだがｗ
visited擬似クラスはアンカー要素のみが対象だから効かないのが仕様のはず
- 31 ：Name_Not_Found：2012/08/25(土) 13:52:14.78 ID:T39PscHN.net
- >>30
緑ボーダー効きませんか？わたしの環境では各ブラウザで効いています。
a img{border:1px solid blue;}
a:visited img{border:5px solid green;}
としてみたところ、既訪リンクが「1pxだけどgreen」という謎状態で表示されました。
「:visitedはリンクの色を変える用途にしか使わないだろ」って前提なんですかね。
だとすれば、:visitedにおいて、opacityだけじゃなくいま試してみたvertical-alignなども効かない理由がわかる気がします。
Operaで効いてしまっているのは、むしろおかしなことだって理解でいいのかな。
- 32 ：Name_Not_Found：2012/08/25(土) 15:29:50.55 ID:???.net
- >>31
とりあえずFxについては
ttps://dev.mozilla.jp/2010/04/plugging-the-css-history-leak/
>訪問済みリンクは、文字、背景、アウトライン、ボーダー、SVG の線と塗りといった、配色のみ変えられるようにします。
これじゃねーかな
その他ブラウザは知らん
- 33 ：Name_Not_Found：2012/08/25(土) 18:43:03.02 ID:T39PscHN.net
- >>32
理解できました！ありがとうございました。
既訪リンクをわかりやすくするためのユーザースタイルに使いたかっただけなので、
（色を変えられるテキストに比べて、画像だと区別しにくかったのでopacityを使おうと思いました）
セキュリティ対策のせいで適わないのはちょっと歯がゆい気がしますが、仕方ないですね。
- 34 ：Name_Not_Found：2012/08/26(日) 06:12:01.73 ID:???.net
- CSS,HTMLともに全くの知識皆無です。
PHPで動作するアップローダーを探して
入れてみました。
（http://www.k-php.com/script/uploda/）
そこでこのアップローダーに枠を作って（広げて）
説明文を入れたいのですがどうすればいいのでしょう。
- 35 ：Name_Not_Found：2012/08/26(日) 06:57:33.09 ID:???.net
- >>34
自分で試してわからなかったのならともかく
ゼロから作れってのはスレチ
- 36 ：Name_Not_Found：2012/08/26(日) 07:13:06.96 ID:???.net
- >>34
パッと見で回答するけど
<table align="center" width="60%" cellpadding="4" cellspacing="1" bgcolor="#D0D0D0">
のwidthのパーセンテージ増やしてみろ
>>35と同じく遺憾の意
- 37 ：Name_Not_Found：2012/08/29(水) 00:41:55.36 ID:???.net
- width:1280pxにしてると下にスクロールバー？がでるのはどうしてですか？
- 38 ：Name_Not_Found：2012/08/29(水) 01:07:52.24 ID:???.net
- 横1280pxのモニタで最大化してるときってこと？
ブラウザウィンドウには枠があるじゃない
- 39 ：Name_Not_Found：2012/08/29(水) 08:32:40.57 ID:???.net
- 加えて、widthはコンテンツ領域の幅であって、その外側にある、
padding・border・marginの幅を含まないので、これらの設定次第で、
ウィンドウが考慮しなければならない幅は1280pxを超える可能性もある
先走って書くが、誰もがウィンドウサイズを最大にして見てるわけじゃない
1600*900以上のモニタも普及しているが、幅は閲覧者に任せてやって
max-widthだってもう普通に使えるのよ
- 40 ：Name_Not_Found：2012/08/29(水) 23:58:30.54 ID:???.net
- 1280pxだろうがなんだろうが描画域が収まらなかったらスクロールバーが出るよ。
っていう返答じゃだめなの？
- 41 ：Name_Not_Found：2012/08/30(木) 09:24:02.40 ID:???.net
- それはだめなの？ってわざわざ聞くようなことなの？
- 42 ：Name_Not_Found：2012/08/31(金) 18:12:21.93 ID:???.net
- 聞くというより1280pxでスクロールバーが出るとかって質問の仕方が意味不明だから、
出されてない情報想定して答える必要があるのかってことじゃん。
- 43 ：質問：2012/09/01(土) 10:11:15.69 ID:MpoF6/w+.net
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ドクタイプを上記にしています。
text-shadowがCSSで反映されないのですが、ドクタイプに原因はありますか？
- 44 ：Name_Not_Found：2012/09/01(土) 10:43:40.01 ID:???.net
- 意味がわからない
- 45 ：Name_Not_Found：2012/09/01(土) 22:59:34.58 ID:???.net
- htmlのverとcssのverは別。
どういう環境で反映されないのかを伝える術を知らないのであれば
ポテンシャル的にこの先学ぶだけ無駄だから辞めときな。
質問をする前に「どうすれば回答者に意図が伝わるか、環境を伝えれるか」っていう
基本的プロセスぶっ飛ばすヤツは要らない。
- 46 ：Name_Not_Found：2012/09/04(火) 16:05:30.49 ID:???.net
- CSSって何なんですか？
wiki見てもわからなかった
- 47 ：Name_Not_Found：2012/09/04(火) 16:42:06.73 ID:???.net
- >>46
文字の色変えたり、枠で囲ったりするやつ
- 48 ：Name_Not_Found：2012/09/04(火) 18:01:45.56 ID:???.net
- HTMLの見た目を定義するもの
もう少し具体的に聞いた方がよい答えもらえるよ
- 49 ：Name_Not_Found：2012/09/05(水) 07:59:09.12 ID:???.net
- というかwiki（pedia？）見ただけで完結しちゃいかんわ
- 50 ：Name_Not_Found：2012/09/12(水) 21:52:15.83 ID:gDfWs/qu.net
- http://cdn.uploda.cc/img/img50508564411dd.png
画像（上）は、<p>タグにボーダースタイルで下線をつけたものです。
画像（下）のように、全ての文字の下＋文字が無くても、その段落の終わりにまで下線をひくことは、CSSで可能ですか？
※<span>にして下線をかけると、文字の下にしか下線がつかなかったので、イメージと少し違いました。
<p>でも<span>でも特にこだわらないので、何か方法があったら教えて下さい。
- 51 ：Name_Not_Found：2012/09/13(木) 00:31:12.79 ID:???.net
- text-decorationが挙動じゃないならfont-sizeから幅計算して背景でrepoeatすればいいんじゃん。
- 52 ：Name_Not_Found：2012/09/13(木) 13:03:37.13 ID:???.net
- マルチは帰れ
- 53 ：Name_Not_Found：2012/09/15(土) 22:26:37.85 ID:???.net
- 創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
- 54 ：Name_Not_Found：2012/09/18(火) 15:09:29.16 ID:???.net
- <article>
<h1>昆虫</h1>
<section>
<h1>カブトムシ</h1>
<section>
<h1>特徴</h1>
<p>～説明～</p>
</section>
<section>
<h1>食べ物</h1>
<p>～説明～</p>
</section>
</section>
<section>
<h1>クワガタ</h1>
<section>
<h1>特徴</h1>
<p>～説明～</p>
</section>
<section>
<h1>食べ物</h1>
<p>～説明～</p>
</section>
</section>
</article>
アウトライン一段目 昆虫
アウトライン二段目 カブトムシ、クワガタ
アウトライン三段目 特徴、食べ物
「昆虫」を赤文字、「カブトムシ、クワガタ」を青文字、「特徴、食べ物」を緑文字にするCSSの書き方を教えて下さい
idやclassを使わずセレクタで指定する方法を希望です
それと、見出しにそれぞれにスタイルを指定する時は見出しの一つ一つにclassを書くほうがいいのか、またはsectionを使っての見出しでh1だけのセクション分けはせずh1、h2、h3をった方がいいのかもあわせて答えてくれると嬉しいです
- 55 ：Name_Not_Found：2012/09/18(火) 18:35:55.70 ID:???.net
- >>54
<font color="red">昆虫</font>
<font color="blue">カブトムシ、クワガタ</font>
<font color="green">特徴、食べ物</font>
俺はお前みたいにarticleやらsection分けしない
h1を大量に使うのも意味不明
- 56 ：Name_Not_Found：2012/09/19(水) 01:18:19.28 ID:???.net
- >>54
セクションの見出しはhtml5仕様書では
・h1だけ使う
・セクションの入れ子に合わせて見出しランクのを使う
の2つが推奨されているのでどっちを使ってもいいようです
ttp://www.mdn.co.jp/di/articles/2432/?page=8
＞セクショニング要素を使って明示的にセクションの範囲をマークアップすると、もはやh1 ～h6 要素の数字に
＞意味はないということだ。アウトラインは、あくまでもセクショニング要素の入れ子の深さで決まる。
見出しのランクによってスタイルを変えたいならばh1だけで書かれたhtml5よりh1～h6で明示的に書いたほうがCSSを書きやすいと思います
それともh1だけで書かなければならない理由などあるのでしょうか？
- 57 ：Name_Not_Found：2012/09/19(水) 08:03:02.12 ID:???.net
- >>54
article > h1
article > section > h1
と子セレクタで深さを示すことができる
h1要素のみでとするかどうかは制作者次第
>>55
ネタにしては全然面白くない
- 58 ：Name_Not_Found：2012/09/23(日) 20:19:52.07 ID:???.net
- floatを使ったボックスレイアウトで質問なんですが
http://cdn.uploda.cc/img/img505eef6f3964b.jpg
上記の画像のようにヘッダ部分にサイトタイトルとgoogleのサイト内検索を配置するような場合
文字とスクリプトを横に並べる方法について教えてください。
positionで位置を調整していたんですが、ブラウザによって位置がけっこう変わってしまいます。
ヘッダのボックスを左右に分割することも考えたんですが、できれば1つのままで対処したいと思っています。
- 59 ：Name_Not_Found：2012/09/23(日) 21:03:50.37 ID:???.net
- こんなヨレヨレレイアウトは無理ですう
- 60 ：Name_Not_Found：2012/09/23(日) 21:56:25.36 ID:???.net
- そんなこと言わずにおしえておくれよう
- 61 ：Name_Not_Found：2012/09/23(日) 22:11:13.88 ID:???.net
- で、ソースどうなってて何によってブラウザでの位置がずれる原因になってんの
- 62 ：Name_Not_Found：2012/09/24(月) 01:46:02.74 ID:???.net
- すみません、解決しました！
positionは実は悪くなくて、検索フォームで設定する文字数の幅の扱いがブラウザ毎に違うみたいで
それで表示が違って見えていました。（positionを疑ってごめんよ～
フォームのテキストボックスを文字数ではなくてpxで指定することで解決しました。
ありがとうございました。
- 63 ：Name_Not_Found：2012/09/24(月) 01:52:24.25 ID:???.net
- form関係は基本ブラウザ依存だからsafariやchromeでへんなことなってなければいいね。
ただのtextでfileとかつかってなさそうだから問題なさそうだけど。
- 64 ：Name_Not_Found：2012/09/24(月) 11:50:50.50 ID:y1wEYNtf.net
- IE9でテーブルの行数が増えるとcssに記載したwidthの指定が無視される…
10行ぐらいだと問題なく反映されるんだけど、
40行ぐらいになるとして反映されずにレイアウトが崩れる
厳密には同一のテーブルが4つあるから160行ぐらいあるとはいえ、なぜ行数が増えると反映されない。
Firefoxやchrom、IE8では起きないんだけど、こういう現象が起こる原因って何かあるでしょうか？
- 65 ：Name_Not_Found：2012/09/24(月) 11:56:58.07 ID:???.net
- 書き間違いじゃないの、としか
- 66 ：Name_Not_Found：2012/09/24(月) 12:07:01.90 ID:y1wEYNtf.net
- >65
プログラムで動的に行数が増えているだけなので、書き間違えってのはちょっとありえないんです。
- 67 ：Name_Not_Found：2012/09/24(月) 12:25:16.23 ID:???.net
- だったら益々CSSの問題じゃなくてJSの問題じゃないのｗ
- 68 ：Name_Not_Found：2012/09/24(月) 13:12:50.86 ID:y1wEYNtf.net
- >67
diffとって行数以外違いがないのも確認してます…
- 69 ：Name_Not_Found：2012/09/24(月) 13:14:38.94 ID:???.net
- >>666
書き間違えじゃないのってのはCSSのことだがそっちも確認しろよ
というか行数以外違いがないのが駄目なんでは
- 70 ：Name_Not_Found：2012/09/24(月) 14:20:57.37 ID:y1wEYNtf.net
- >69
行数以外違いがないのがだめっていうのはどういう状態なんでしょうか？
現状は下記のようなものがあり(列数はもう少し多いですが)、以下繰り返しの行数が増えるとthのclassの指定が反映されなくなる感じなんですが…
やってることとしては言ってしまえば、Excelの分割なので実際には同じものが4つ出力されている感じです。
hoge.css
=====
.wi80 {
width: 80px;
}
.wi180 {
width: 180px;
}
=====
表示ページの問題個所
=====
<table>
<tr>
<th class="wi80">項目1</th><th class="wi180">項目2</th><th class="wi180">項目3</th><th class="wi180">項目4</th>
</tr>
--以下行数分繰り返し
<tr>
<td><input></td>
<td><select><option value="0">0</option><option value="1">1</option></select></td>
<td>値3</td>
<td>値4</td>
</tr>
--
</table>
=====
- 71 ：Name_Not_Found：2012/09/24(月) 14:51:00.83 ID:???.net
- 1行目で固めるならtable-layout: fixedにするとか
というか最初からソース書かんかい
- 72 ：Name_Not_Found：2012/09/24(月) 14:56:07.04 ID:???.net
- >>70
内容によって押し広げてる状態だったらwidthは最小値の設定しかしないまで正常
- 73 ：Name_Not_Found：2012/09/24(月) 14:57:03.28 ID:???.net
- >>70
最小値の設定しかシナイので、だった
しかしwidth指定するならcolにしれ
- 74 ：Name_Not_Found：2012/09/24(月) 15:01:43.52 ID:y1wEYNtf.net
- >71
すいません、冗長かなと思ったので…
fixedとかテーブル関連のcssをいろいろと調べてやってみます。
>72
それならわかるんですが、逆に縮むんです。
180確保したいのに、50ぐらいしか確保されないために
レイアウトがぐったぐたになってしまうといった感じです
- 75 ：Name_Not_Found：2012/09/24(月) 15:13:52.12 ID:???.net
- http://webdev-nekodama.xii.jp/css/hack.php?h=white-space
一瞬これかなと思った
- 76 ：Name_Not_Found：2012/09/24(月) 15:17:37.64 ID:???.net
- >>74
ベタHTMLでならないんならJSの問題
というかならないと思う
- 77 ：Name_Not_Found：2012/09/24(月) 15:25:15.87 ID:y1wEYNtf.net
- >76
問題が起こっているときにはjs動いてないです。
現状はとりあえず、サーバで表示データ作成し、動きとかレイアウトとかだけを見てるところです。
ページを開いた状態で、ある一定以上の行数があれば崩れて、そうでなければ崩れないって状態なので。
それでIE9のみ表示がおかしくなってるから？？？ってなってたんです。
- 78 ：Name_Not_Found：2012/09/24(月) 15:26:38.75 ID:???.net
- いやJSで生成してるんだろｗ
- 79 ：Name_Not_Found：2012/09/24(月) 15:43:32.93 ID:y1wEYNtf.net
- >78
だからしてませんって。
実装予定としては、繰り返し部分をajaxで更新したり、スクロール同期をとったりとかする予定ですが、
現状jsがそもそも画面内に存在してません。
- 80 ：Name_Not_Found：2012/09/24(月) 15:50:21.90 ID:???.net
- プログラムで動的に行数が増えているって言ってるのは一体
それじゃなくてベタで同じソース作れよってことだろう
- 81 ：Name_Not_Found：2012/09/24(月) 15:59:18.18 ID:y1wEYNtf.net
- >80
動的と言ったらすべてjsになるのがwebなんでしょうか？サーバ側の実装で行数を増やすのも動的だと思いますが。
サーバ側で生成した文字列（テーブル）をそのまんまhtmlに4回出力しているだけです。
- 82 ：Name_Not_Found：2012/09/24(月) 16:06:49.84 ID:???.net
- 最近はそうね
だからどっちにしろベタに作れって
- 83 ：Name_Not_Found：2012/09/24(月) 16:21:30.48 ID:???.net
- >82
あなたの言うべたが理解できません。
1.SQLで該当するデータを抽出
2.テーブルのth部分を生成
3.その件数分テーブルのtr要素を作成
4.それを4回出力
5.出力結果をhtmlとして送信
これいじょうどうやったらべたに実装できるんですか？申し訳ありませんが、教えていただけますか？
- 84 ：Name_Not_Found：2012/09/24(月) 16:22:38.24 ID:???.net
- CSSの問題じゃなくなってるし
スレチ
- 85 ：Name_Not_Found：2012/09/24(月) 17:02:10.89 ID:???.net
- IE9特有のCSSバグかと言われると微妙。
データベースから読み込んだデータ（特に40個目あたり）がうまくエスケープできてないとか、そういう可能性を疑っちゃう。
- 86 ：Name_Not_Found：2012/09/24(月) 17:09:33.83 ID:???.net
- なんにせよこのままだとエスパー能力がないと無理そうだから
実際のサイトを提示して欲しいところだな
- 87 ：Name_Not_Found：2012/09/24(月) 17:42:38.23 ID:???.net
- 質問です
divに背景色をつけて横線として使ってます
widthを指定して表示できるようになりましたが
本文の右端で切れてしまいます
↓こういうふうにしたいんですが
あいうえおかきくけこ
---------------------------------- 続きはここ
↓こうなってしまいます
あいうえおかきくけこ
--------------------------
続きはここ
divで作った横線は「こ」の右端で切れて
「続きはここ」が改行されてしまいます
本文があるセルにwidthを指定すれば
強引に右端まで表示できるようになりますが
divは1つの要素として解釈されないのでしょうか
- 88 ：Name_Not_Found：2012/09/24(月) 20:00:16.62 ID:???.net
- セルってのはテーブルのtd要素のことをいうんだが。
何がしたいのかいまいちわからん、ソースを提示して欲しい
- 89 ：Name_Not_Found：2012/09/24(月) 20:43:15.52 ID:???.net
- <table>
<td>
あいうえおかきくけこ
<div class="aaa"></div><a href="URL">続きはここ</a>
</td>
</table>
.aaa {
width: 500px;
height: 3px;
float: left;
}
tableとtdにwidth="600"などと入れれば
divで作った横線がきちんと表示されますが
こういったことをせずに
右側が切れることなく表示させたいんです
- 90 ：Name_Not_Found：2012/09/24(月) 21:02:29.68 ID:???.net
- >>89
そもそもhtmlがおかしいので正しいのにしてくださいとしか
- 91 ：Name_Not_Found：2012/09/24(月) 21:04:43.99 ID:???.net
- >>89
<table>
<tr>
<td>
あいうえおかきくけこ
<div style="border-left: 500px black solid; text-align: right;"><a href="URL">続きはここ</a></div>
</td>
</tr>
</table>
- 92 ：Name_Not_Found：2012/09/24(月) 21:43:16.06 ID:???.net
- なぜかFireFoxとIEでは挙動が違うのですが
何となくわかってきました
ヒントありがとうございました！
- 93 ：Name_Not_Found：2012/10/01(月) 23:33:55.39 ID:???.net
- 質問なのですが、cssで子要素に特定の条件があった場合親要素にも適用させるという記述はできるのでしょうか？
例
<li><a>hoge1</a></li>
<li><a id="hogeID">hoge2</a></li>
上記の場合で2行目の<li>にも#hogeIDと同様のcssを適用させたい。
仕様上<li>には個別にclassやidを追記できない。
- 94 ：Name_Not_Found：2012/10/01(月) 23:36:14.82 ID:???.net
- >>93
無理
- 95 ：Name_Not_Found：2012/10/02(火) 08:26:16.70 ID:???.net
- しばらーく待てば使えるようになるかもしれない
?li > #hogeID
- 96 ：Name_Not_Found：2012/10/02(火) 10:43:56.97 ID:???.net
- >>94 >>95
そうですが特定の親で子に適用できるからその逆もできると思っていましたが出来ないんですね。
ありがとうございました。
- 97 ：Name_Not_Found：2012/10/08(月) 00:14:15.01 ID:???.net
- 外部スクリプトからinnerHTMLか何かで書き込まれる内容に、styleが含まれます。
「padding:0; margin:0;」とされるため、周辺とずれて違和感があります。
これを無効化する、もしくはデフォルトに指定する方法はありませんか。
固定値で試してみたんですが、IE9だと、margin:0 0 0 1.5em;、
IE6だと、margin:0 0 0 2em;で揃うので、たぶん他のブラウザもバラバラな
気がするんですよね。
- 98 ：Name_Not_Found：2012/10/08(月) 00:17:50.52 ID:???.net
- 外部スクリプトの指定の方法による
- 99 ：Name_Not_Found：2012/10/08(月) 03:20:48.41 ID:???.net
- input type="number"
の中身を中央揃えするにはどうすればよいでしょうか？
- 100 ：Name_Not_Found：2012/10/08(月) 03:26:00.45 ID:???.net
- ブラウザ依存だからなんともだけどtext-alignきかないのであればpaddingで調整できないっけ？
- 101 ：Name_Not_Found：2012/10/08(月) 04:26:00.57 ID:???.net
- >>100
むお…いじってたらtext-align効くようになりました。何だったんだろう。
しかし
| ６ | ９ | ３ | ２ |
| ２◆| ０◆| ０◆| ０◆|
のように、単なる<td></td>と、<td><input type="number"></td>を混在させて、そのうえで数字の位置を揃えたいのです。
(わかりづらいですが、◆がスピンボタン)
スピンボタンのサイズはブラウザによって違う(ないのもあるし) と考えると、どうしたらいいのか…。
いっそ自作して上下にボタンを置いたほうがいいのかなぁ。
- 102 ：Name_Not_Found：2012/10/08(月) 16:32:34.98 ID:???.net
- >>98
できる場合はどうやるの？
固定値での再設定はできた。
- 103 ：Name_Not_Found：2012/10/08(月) 17:25:21.69 ID:???.net
- >>101
ブラウザ統一したいならlabelとかつかって自作するのが手っ取り早い。
- 104 ：Name_Not_Found：2012/10/10(水) 07:16:50.85 ID:???.net
- transform-origin:0%;
transform: scaleX(0.5);
で、テーブルのセル内要素の幅を半分にしたのですが、
親要素(セル)の幅が縮まってくれません。
どうしたらよいでしょうか…？
- 105 ：Name_Not_Found：2012/10/12(金) 01:45:30.59 ID:???.net
- ７８９
４５６
１２３
これをコピペしたら「１２３４５６７８９」になるようにしたいのですが、
position:を使う以外に何か方法はないでしょうか？
- 106 ：Name_Not_Found：2012/10/12(金) 01:59:51.88 ID:???.net
- その前にpositionじゃダメな理由を聞かせてもらおうか
- 107 ：Name_Not_Found：2012/10/12(金) 02:29:28.88 ID:???.net
- 範囲選択div.floatRight*じゃだめなの
- 108 ：Name_Not_Found：2012/10/12(金) 04:24:24.44 ID:???.net
- >>106
position:は、スマートフォンからだとよろしくないと聞いたので…
あと、文字サイズを変更した場合にちょっと。
>>107
ええと…？？
::selection {float:right;}
みたいな感じでしょうか？(これだとうまくいきませんが…)
- 109 ：Name_Not_Found：2012/10/16(火) 18:27:16.16 ID:???.net
- CSS3のセレクタで、親要素を選択するものってないんでしょうか？
例えば「input:checkedの親であるdiv」など…
- 110 ：Name_Not_Found：2012/10/16(火) 19:59:08.77 ID:???.net
- >>109
CSS 4で導入される予定
?div > input:checked
- 111 ：Name_Not_Found：2012/10/30(火) 09:52:24.18 ID:r6VrBfLF.net
- 自作style.cssの冒頭で
@import url("normalize.css");して、
以降またstyle.cssに
body{font-family: ***;…と通常通り記述していくやり方は誤りですか？
自作部分をnormalize.cssに書き加えていくべきなんでしょうか
- 112 ：Name_Not_Found：2012/10/30(火) 10:17:11.51 ID:???.net
- 書き方自体は別に間違ってはいないよ
- 113 ：Name_Not_Found：2012/10/30(火) 10:30:45.98 ID:???.net
- >>112
間違ってないけど玄人から見るとちょっとなあって感じでしょうか
自分用なので問題なく解釈してくれるならこのままいくことにします
レスありがとうございました
- 114 ：Name_Not_Found：2012/10/30(火) 14:55:15.33 ID:???.net
- 正解はないけどそのやり方も一般的だと思うよ
ノーマライズとかリセットはどんなサイト作る時も不変のもので、style.cssはサイトごと
フォントファミリーはサイトごとに変えたいからstyle.cssに
・・・と位置づければおかしくない
- 115 ：Name_Not_Found：2012/10/31(水) 02:41:34.74 ID:???.net
- すみません
<tr><td>Yes</td></tr>
<tr><td>No</td></tr>
がランダムに続く表があるのですが、YesとNoの色分けを行う場合
class指定以外に良い方法はありますか?
- 116 ：Name_Not_Found：2012/10/31(水) 09:36:57.23 ID:???.net
- >>115
特定の文字列に対する指定はcssでは無理
一つ一つclass指定するのが面倒なら
java scriptとかでやったらいいんじゃないかな
- 117 ：Name_Not_Found：2012/10/31(水) 11:04:21.02 ID:???.net
- :contains擬似クラスが該当しそうだが、セレクタ規定から外された
JavaScript（×java script）に頼るしかないかな
- 118 ：Name_Not_Found：2012/10/31(水) 15:51:49.87 ID:???.net
- jQueryを使うのが手っ取り早そうだな
$('td:contains("Yes")').css('color', 'blue');
$('td:contains("No")').css('color', 'red');
- 119 ：Name_Not_Found：2012/10/31(水) 21:19:07.94 ID:???.net
- >>116
ありがとうこざいました!
- 120 ：Name_Not_Found：2012/10/31(水) 21:20:06.49 ID:???.net
- すみませんスクロールしてませんでした > <
>>116-118皆さんありがとうこざいました
- 121 ：Name_Not_Found：2012/11/07(水) 16:21:48.48 ID:???.net
- >>116
学生さんなのかな？
デジタル写真に法的な証拠能力は無いわけだが
- 122 ：Name_Not_Found：2012/11/07(水) 16:53:54.97 ID:???.net
- ？？
- 123 ：Name_Not_Found：2012/11/07(水) 16:53:54.80 ID:???.net
- いったいどうした
- 124 ：Name_Not_Found：2012/11/07(水) 16:59:48.66 ID:???.net
- 薬物取引の暗号だから相手するな
- 125 ：Name_Not_Found：2012/11/08(木) 12:48:59.17 ID:???.net
- floatを使いdivを左右に分けて、
それをさらにdivでくくってborderをつけています。
floatで右に分けたdivの高さがが内容によって変わってくるので、
borderをつけたくくりのdivもその高さに合わせて変えたいなと思うのですが
なぜか高さがすごく狭くなってしまいます。
height:autoにしたりしても変わらず、
height:○○○pxとか指定してあげないとだめみたいです。
これを内容に応じて高さを変えるにはどうすればいいでしょうか？
つたない説明で申し訳ありませんが、
どうぞよろしくおねがいします。
- 126 ：Name_Not_Found：2012/11/08(木) 12:59:43.86 ID:???.net
- ちょっと状況がよくわかんないのでアレだけど
とりあえずclearfixでググって見て
解決しないようならもう一度質問してみて
- 127 ：Name_Not_Found：2012/11/08(木) 14:22:26.87 ID:???.net
- >>125
ボックスＡの中にボックスＢとボックスＣを横並びで配置
ＢとＣの高さは内容に応じて可変だけど
高くなったボックスに低い方のボックスの縦幅を合わせて同じにしたい
って事かな
- 128 ：Name_Not_Found：2012/11/08(木) 14:44:15.72 ID:???.net
- 答えの前になっちゃうけど、もしそうならfloatを使わない方法で
Ａには position:relative;
Ｂには position:absolute; height:100%; width:n;
Ｃには position:absolute; top:0; height:100%; left:n;
でＢの横幅がn(pxでも%でも)ならＣにleft:n;と書いて同じだけ横にずらす
内容に応じてＢとＣの高さは変わるしどちらか高い方に合わせて低い方の高さも同じになる
これでどうかな？
あまり自信ないけど…
- 129 ：125：2012/11/09(金) 13:03:01.68 ID:???.net
- レス遅れて申し訳ありません
clearfixでググって見つかった方法にて解決しました
floatを使った時にclearfixをしないと
親要素が子要素？を囲んでくれないみたいでした。
ご教示有難うございました！
- 130 ：Name_Not_Found：2012/11/11(日) 13:00:17.28 ID:???.net
- 質問すみません。擬似フレームのことでどなたかご教授ください。
現在ヘッダ、左メニュー、コンテンツ、右メニュー、フッタと
上段1段、中段3段、下段1段の5カラムのページを作っています。
このカラムで中段のコンテンツのみスクロールできる擬似フレームサイトを作りたいのです。
とりあえず作り方としてはfixedを使って作ろうと思っているのですがなかなか上手くいきません。
overflow:auto;だと出来はするんですが、これはどちらかというと擬似インラインフレームですし
何より縦の自由度が微妙だと思うので使いたくないです。
どなたか良い作り方を教えて下さい。よろしくお願いします。
- 131 ：Name_Not_Found：2012/11/11(日) 13:53:45.90 ID:???.net
- 誰か>>125を超訳して
- 132 ：Name_Not_Found：2012/11/11(日) 14:25:01.18 ID:???.net
- CSSを1から教えて下さい
- 133 ：Name_Not_Found：2012/11/11(日) 14:36:15.39 ID:dJ/1eOq1.net
- >>132
とりあえず有料の講習会行くといいよ。
6万くらい出せば一通り教えてくれる。
- 134 ：Name_Not_Found：2012/11/11(日) 14:39:24.88 ID:???.net
- たけえ
- 135 ：Name_Not_Found：2012/11/11(日) 14:55:24.27 ID:dJ/1eOq1.net
- >>134
自習すれば本代だけで済むけど、時間かかるよ。
- 136 ：Name_Not_Found：2012/11/11(日) 15:11:46.29 ID:???.net
- 教えてもらえば早いってことか？
- 137 ：Name_Not_Found：2012/11/11(日) 16:21:48.01 ID:???.net
- 弁護士に相談するなら30分5000円。
CSSのプロに相談するならやっぱりそれくらい必要だろう。
6万の講習会や3000円のテキスト＋自習時間と比較してもお得だ。
- 138 ：Name_Not_Found：2012/11/11(日) 16:25:40.12 ID:???.net
- >>131
clearfixで解決してるんだから要はそういう問題だったんだろ
- 139 ：Name_Not_Found：2012/11/11(日) 16:29:57.29 ID:???.net
- 講習会詳しく
- 140 ：Name_Not_Found：2012/11/11(日) 17:45:14.86 ID:U3AG01ra.net
- >>136
ID, クラス、タグの再定義や、メニューの作り方の常套的な方法とか、個々のソフト、例えばDreamweaver の使い方とか、いちからマニュアル見ててもよくわからんこともあるから。
そういうのを短期間で詰め込んでくれるのはありがたい。帰ってからいろいろ試行錯誤すると理解が深まる。
.jQueryとかajaxとかはまた別途ってことになるだろうけど。
- 141 ：Name_Not_Found：2012/11/11(日) 17:46:09.61 ID:U3AG01ra.net
- >>139
検索して、最寄りで自分の習いたいアイテムを網羅してるか確認すればいいと思う。
- 142 ：Name_Not_Found：2012/11/11(日) 21:23:09.14 ID:???.net
- >>138
ごめんみすった>>130だった。
- 143 ：Name_Not_Found：2012/11/19(月) 10:18:27.19 ID:???.net
- ttp://www.moejinja.com/view.php?cid=2&tid=191
このサイトは中国の日本向け通販サイトですが
フォントが中国っぽくなっています。
CSSを見る限り、フォントが中国っぽくなる要素が
無いように思えるのですが、どうして中国っぽい
フォントが適用されているのでしょうか。
- 144 ：Name_Not_Found：2012/11/19(月) 10:22:33.79 ID:???.net
- >>143
CSSを見る限り普通にfont-familyがsimsunになってます
- 145 ：143：2012/11/19(月) 10:30:31.04 ID:???.net
- >>144
あれー 見逃してたのか
あるいがとうございました
- 146 ：Name_Not_Found：2012/11/19(月) 15:17:19.17 ID:???.net
- 日本語がんばれ
- 147 ：Name_Not_Found：2012/11/26(月) 11:32:05.77 ID:???.net
- 一つのdiv要素に、サイズを抑えながら背景画像を適用させることってできますか？
口頭じゃ難しいんですけど…
開いた巻物みたいな画像の中に、スクロールさせる文章を配置したいんです諸事情によりHTMLの方の改変はできません…
- 148 ：Name_Not_Found：2012/11/26(月) 11:37:37.42 ID:???.net
- 日本語がおかしいですねすいません
「ああああああああああああああああああああ」という文章を「あああ…」と、CSSで文章のサイズ(フォントの大きさじゃなくて、ボックスの大きさ)を小さくして、スクロールバーをつけます
ここまではいいんですが、この文章に、ボックスのサイズ以上の画像を背景画像としておきたいんですが、可能でしょうか
- 149 ：Name_Not_Found：2012/11/26(月) 20:47:23.93 ID:???.net
- >>148
そのボックスの親要素に背景画像を配置
- 150 ：Name_Not_Found：2012/11/27(火) 08:59:55.95 ID:???.net
- >>149 その親がbodyですorz
- 151 ：Name_Not_Found：2012/11/27(火) 09:02:37.89 ID:???.net
- そのbodyに背景画像
- 152 ：Name_Not_Found：2012/11/27(火) 09:43:09.32 ID:???.net
- >>151
bodyにはもう別の背景画像がありまs…
- 153 ：Name_Not_Found：2012/11/27(火) 09:45:32.18 ID:???.net
- 画像くっつけりゃいいだろ
- 154 ：Name_Not_Found：2012/11/27(火) 09:49:13.86 ID:???.net
- あ、くっつけかたとか聞くなよ、スレチだからな
- 155 ：Name_Not_Found：2012/11/27(火) 11:44:03.19 ID:???.net
- >>152
関係するとこは簡単な構造なんだし
ある程度出来るできないの判断つくみたいだから
できれば関連するとこコピぺしてくんないかな？
意図的じゃないと思うけど情報後出し後出しみたいなっちゃって疲れるわw
本題だけどJavaScriptで巻物画像用のdivをappendしちゃうのはどう？
動的に別のdivを追加するということね
javasciptでも特にjqueryが使えるなら
$(包みたいdiv).wrap("<div class=makimono"></div>")
てな感じで一発なんだが
- 156 ：Name_Not_Found：2012/11/27(火) 13:26:13.75 ID:???.net
- てかhtmlでdiv1個追加すりゃいいだけじゃね
- 157 ：Name_Not_Found：2012/11/27(火) 13:30:57.66 ID:???.net
- >>156
>>147
- 158 ：Name_Not_Found：2012/11/28(水) 04:30:04.17 ID:???.net
- 行間について質問なのですが
幅によって改行されたときのline-heightのスペースが大きくなって
ガタガタのレイアウトになります
どうすればいいでしょうか？
- 159 ：Name_Not_Found：2012/11/28(水) 06:51:48.72 ID:???.net
- >>158
html側が悪いんじゃね?
- 160 ：Name_Not_Found：2012/11/28(水) 10:01:13.55 ID:???.net
- >>158
ちょっと状況が良くわからない。「幅」「改行」「ガタガタ」の3つの単語から連想するにこんな感じの状況？
あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ
あいうえおかきくけこさしす
せそ
- 161 ：Name_Not_Found：2012/11/28(水) 11:11:30.08 ID:???.net
- >>155
ぶっちゃけると、学校課題でゼンガーデンを作っているのでCSSしか弄れません。HTML改変不可ではなく、CSSのみしか変更できないことを前述しておくべきでした、すいません…
- 162 ：Name_Not_Found：2012/11/28(水) 11:20:31.13 ID:???.net
- 学校課題を2chで解決しようとは・・・
アホは学校いかずに働け。
- 163 ：Name_Not_Found：2012/11/28(水) 11:20:34.12 ID:???.net
- ヽ(･ω･)/ｽﾞｺｰ
ま、だとしてもなんかやり方はありそうだけどな
学校課題か、がんばれよ
- 164 ：Name_Not_Found：2012/11/28(水) 11:29:10.18 ID:???.net
- >>163
先生と相談したり、自分でCSSの教科書を買って調べたりしましたが、頭打ちになってしまいましたので、こちらで質問させていただきました
アドバイスをくださった方々、ありがとうございました。bodyには背景画像を別に使用するので難しいですが、装飾用の空きdivが複数個あるので、それになんとか適用させて見たいと思います
- 165 ：Name_Not_Found：2012/11/28(水) 15:47:57.88 ID:???.net
- >>160
そんな感じのです。
せそとあいうの行間を統一したいのです
- 166 ：Name_Not_Found：2012/11/28(水) 16:42:34.27 ID:???.net
- >>165
ひょっとして
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
<p>あいうえおかきくけこさしすせそ</p>
みたいになってる？<p>じゃなくて<li>とか<div>とかでも同じだが
であれば<p>内はline-heightの値で行間が決まり、
<p>と<p>の間はmarginやpaddingで行間（とはいわないが）が決まる
marginとpaddingを共にゼロにすればオケ
てかソース貼れよと
- 167 ：Name_Not_Found：2012/11/28(水) 16:57:22.74 ID:???.net
- div>p.s120
.s120{line-height:120%;}
こんなかんじです
ありがとうございました
divにマージンとか0にして試してみます
- 168 ：Name_Not_Found：2012/11/28(水) 17:02:33.00 ID:???.net
- >>167
div>p.s120
ならdivのマージンとか0にしてもしょうがない
div*4>p.s120
とか
p.s120*4
なら>>166で解決できる可能性がある
- 169 ：Name_Not_Found：2012/11/29(木) 13:33:48.12 ID:???.net
- ライブドラブログでブログロールをヘッダーと記事下に一つずつ設置しているのですが
ヘッダーのほうだけスクロールバーが出るように設定しているのに、記事下のほうにもスクロールバーが出てしまいます
CSSの overflow-y: scrollは消したはずなのになぜなのでしょうか？
- 170 ：Name_Not_Found：2012/11/29(木) 13:40:00.16 ID:???.net
- 失敗してるんだろとしか言えん
- 171 ：Name_Not_Found：2012/11/29(木) 14:41:45.87 ID:???.net
- その通りでした
自分のうっかりミスだったみたいです
- 172 ：Name_Not_Found：2012/12/01(土) 00:16:40.28 ID:B9JWW/YO.net
- 中寄せについて教えてください
margin｛0 auto;｝では縦が中央によりません
positon{top:50%;left:50%;}でもうまくいきません
よろしくお願いします。
- 173 ：Name_Not_Found：2012/12/01(土) 00:21:19.65 ID:???.net
- >>172
なんじゃーそのCSSはｗ
基礎からやり直しｗ
やり直した？ならhtmlもおせーてくんないとわかんないよ
- 174 ：Name_Not_Found：2012/12/01(土) 01:13:21.20 ID:B9JWW/YO.net
- むずかしいですね
こんかなんじでしょうか
<div>
<div class="center"><img src></div>
</div>
.center {margin;0 auto:}
.center {position:abusolute;
top:50%;
left:;50%; }
こんなかんじですね
- 175 ：Name_Not_Found：2012/12/01(土) 01:43:12.08 ID:???.net
- 「こんなかんじ」じゃダメ
「完璧に正確」じゃないとダメ
１文字でも間違ってたら動かない世界なんだから
こういう場所に貼るソースは手入力ではなくコピペすること
- 176 ：Name_Not_Found：2012/12/01(土) 02:04:33.42 ID:???.net
- >>174
よしよし。それではソースをこう変えなさい。これで左右中央はできる
<div class="center"><img src></div>
.center { text-align: center; }
次に上下中央だが・・・これはやめとけ
「css 縦 中央」などでググるとすぐわかるがケースバイケースでやり方も千差万別、初心者にとってはいわば運転免許なしに首都高走るようなものだ
というか国際A級ライセンス持ってるドライバーでも上下中央そろえは避けて通りたい道なんだ
なので他の方法、たとえば上に余白を良い感じにちょっと空けるだけでよくね？とか、そういったデザイン上の別のアプローチを探ってみたらどうだ？
《おまけ》
margin: 0 auto;
これはボックス要素をセンター寄せしたいときに使うけど、対象はあくまで「そのボックス要素」だ
つまりdiv.centerであってimgをセンター寄せできるわけじゃない
position: absolute; top: 50%; left: 50%;
中央ということで50%にしたんだろうが、起点は左上だからこれではだめだ
ここからネガティブマージン使って中央に寄せる方法があるが首都高を（ｒｙ
《お説教》
marginのうしろの「;」は「:」、autoのうしろの「:」は「;」だ！
absoluteがabusoluteになっておる！
leftの右の「:;」はなんだ！いったい
「こんなかんじですね」じゃねー！！どんなかんじだ！
- 177 ：Name_Not_Found：2012/12/01(土) 02:26:25.89 ID:???.net
- 優しすぎて泣いた
- 178 ：Name_Not_Found：2012/12/01(土) 07:18:39.59 ID:???.net
- margin-left: auto;
margin-right: auto;
じゃあいけんの？
- 179 ：Name_Not_Found：2012/12/01(土) 10:11:18.03 ID:???.net
- まいったな・・・
- 180 ：Name_Not_Found：2012/12/01(土) 11:26:36.54 ID:???.net
- >>179
気にすんなってお前はよくやった
- 181 ：Name_Not_Found：2012/12/01(土) 11:39:09.47 ID:???.net
- 2chMate 0.8.3.17 dev/LGE/L-01D/4.0.4
- 182 ：Name_Not_Found：2012/12/01(土) 12:27:50.24 ID:???.net
- >>178
それのだめな理由も176に書いてあるよ
- 183 ：Name_Not_Found：2012/12/01(土) 12:33:33.77 ID:???.net
- div.centerに幅が指定してあればautoでイイけどそうじゃないからね
- 184 ：Name_Not_Found：2012/12/01(土) 15:57:10.13 ID:???.net
- >>176
ありがとうございました
勉強になりました
- 185 ：Name_Not_Found：2012/12/02(日) 07:37:30.53 ID:???.net
- <div id="center"><img src></div>
#center { text-align: center; }
じゃあいけんの？
- 186 ：Name_Not_Found：2012/12/02(日) 12:03:59.30 ID:???.net
- >>185
それも176に書いてあるがな(´･ω･｀)
- 187 ：Name_Not_Found：2012/12/02(日) 22:59:02.31 ID:???.net
- centerっていうidはやめてくれ 真似するのが出る
- 188 ：Name_Not_Found：2012/12/03(月) 00:22:16.24 ID:erBmYrs9.net
- >>185
idはページ内に一回しか現れてはいけないことになってる。
- 189 ：Name_Not_Found：2012/12/23(日) 15:05:34.05 ID:???.net
- お休み ?
- 190 ：Name_Not_Found：2012/12/24(月) 13:06:46.77 ID:???.net
- よくあるような記事の最後のアマソン広告の間などにある
「1001管理人より」といったようなRSSはどのようにすれば表示できるのでしょうか
よかったら教えてください
- 191 ：Name_Not_Found：2012/12/24(月) 21:21:37.40 ID:???.net
- ここはCSSについてのスレです
RSSのスレじゃありません
- 192 ：Name_Not_Found：2012/12/24(月) 21:33:05.74 ID:???.net
- すみません
聞きたかったのはRSSじゃなくてブログロールのことでした
どのようにCSSをいじれば記事下のアマゾン広告の間にブログロールを表示できるのでしょうか
- 193 ：Name_Not_Found：2012/12/25(火) 00:26:17.04 ID:oM527gVi.net
- jsちゃうんかな
- 194 ：Name_Not_Found：2012/12/25(火) 08:02:47.93 ID:???.net
- そういうHTML構造とCSSにすればとしか言えない
もう少し周りがわかるように情報提供できない？
- 195 ：Name_Not_Found：2012/12/25(火) 13:21:09.41 ID:Ifc7SBX9.net
- Windows8にしたのですが、IE10だと背景画像のリピートがされません。
その他のブラウザでは表示できるのですが、
なにかIE10に不具合があるのでしょうか？（互換表示も同じです）
コード自体は以下の通り、シンプルな記述です。
body{
background-image: url(body.gif);
}
- 196 ：Name_Not_Found：2012/12/25(火) 13:59:20.04 ID:???.net
- background-repeat: repeat; 入れても無理なら問題だな
- 197 ：Name_Not_Found：2012/12/25(火) 15:08:56.04 ID:???.net
- >>194
言葉足らずで申し訳ありません
http://blog.livedoor.jp/togotan/archives/52927169.html
このブログのように記事内のアマゾン広告と本文の間にブログロールを挿入したいのです
試しにHTMLの<$ArticleBodyMore$>の入れてみましたが、思うようにいきませんでした
- 198 ：Name_Not_Found：2012/12/25(火) 15:48:05.61 ID:???.net
- CSS関係ないな。PHPってか、livedoorブログのプラグインの話になってくる。
- 199 ：195：2012/12/25(火) 15:55:45.50 ID:Ifc7SBX9.net
- >>196
やっぱり変わりません。
もしかして私のPCだけおかしいのですかね？
ググってもそういう情報がありませんでした。
- 200 ：195：2012/12/25(火) 16:12:27.08 ID:???.net
- 原因がわかりました。
IE10のインターネットオプションの
「アクセラレータによるグラフィック」の
「GPUレンダリングでなく、ソフトウェアレンダリングを使用する」
にチェックを入れたら、背景画像が正しく表示されました。
ブラウザの設定が原因のようですが、
デフォルトではチェック入ってないのに気づきませんでした・・・。
- 201 ：Name_Not_Found：2012/12/25(火) 21:40:49.12 ID:???.net
- 結論：IEは糞、IEは使用禁止
- 202 ：Name_Not_Found：2012/12/25(火) 22:10:17.30 ID:???.net
- ま た I E か ！
- 203 ：Name_Not_Found：2013/01/01(火) 14:29:11.73 ID:???.net
- すみません
上のほうで出ていてcssではないのは承知しているのですが
このように記事本文のアマゾン広告の上にRSSを設置するにはどうすればいいのでしょうか
よかったら教えてください
http://inazumanews2.com/archives/21803040.html
- 204 ：Name_Not_Found：2013/01/01(火) 21:42:26.66 ID:???.net
- なんで無関係だと分かっているのに聞くのだろう
そもそも知ってても誰も答えないよ、スレ違いだから
- 205 ：Name_Not_Found：2013/01/04(金) 09:51:00.47 ID:???.net
- 2ちゃんマップかアンテナ速報のどちらかに登録しようと思う
PV3500程度のブログだったらどっちがおすすめ？
- 206 ：Name_Not_Found：2013/01/04(金) 09:52:02.11 ID:???.net
- すみません
誤爆しちゃいました
- 207 ：Name_Not_Found：2013/01/11(金) 23:02:42.63 ID:???.net
- text-overflowを設定すると、IE8、9ではtitle属性を勝手に設定してしなうみたいなんだけど、どうにかして
こいつをこっちで指定したtitle属性にできないでしょうか？
jQueryを使って、title属性を上書きしたのですが、IEだとかってに
「あいう..」みたいに上書きされちゃいます。
（firefoxだと、ちゃんと「にちゃんねる」が表示される）
<div id="hoge" style="text-overflowの記述は省略します。" title="にちゃんねる">あいうえお</div>
- 208 ：207：2013/01/11(金) 23:20:52.76 ID:???.net
- あ、違う、IEだと<div>の中身のtextが「...」に書き治っちゃうんだ・・・firefoxは元の値なのに・・・・
書き換えないけど表示は「....」にするとかできないっすかね？
- 209 ：Name_Not_Found：2013/01/13(日) 17:11:16.14 ID:???.net
- 角丸作りたいのですが
ie7から対応して欲しいといわれて困っています
クロスブラウザで安定している方法ってありますか？
htcふぁいるのやつは使いこなせませんでした
- 210 ：Name_Not_Found：2013/01/13(日) 17:19:03.09 ID:???.net
- >>209
8重BOXにするというアホな方法とか
- 211 ：Name_Not_Found：2013/01/13(日) 17:28:47.41 ID:???.net
- >>209
素直に画像作れば？
- 212 ：Name_Not_Found：2013/01/13(日) 17:47:33.16 ID:???.net
- 上下画像で中divにボーダー入れているんですがieだけスペースが空いてしまったりしてしまいます。
詰めるといいみたいなのですがソースがちょと汚れてしまうので
- 213 ：Name_Not_Found：2013/01/13(日) 17:49:58.43 ID:???.net
- 何を言っているのかわからない
- 214 ：Name_Not_Found：2013/01/14(月) 07:53:58.65 ID:???.net
- >>212
IEのアホを乗りこなすには泥臭いテクニックしかない
仕事なら尚更自分の理想より安定稼働を選ぶべき
- 215 ：Name_Not_Found：2013/01/15(火) 22:10:08.96 ID:???.net
- CSSに関してなのでこちらでも質問させていただきます。
ページの上部にナビゲーションバーを固定したいのですが使用ブラウザがIEでTransitionalで宣言しないといけない
理由があって、その場合position:fixedのプロパティ値を使用出来ません。
CSSを使用してfixed以外にナビゲーションバーを固定する良い方法はありますか？
- 216 ：Name_Not_Found：2013/01/15(火) 22:11:44.78 ID:???.net
- マルチはいけませんなあ
- 217 ：Name_Not_Found：2013/01/15(火) 22:22:16.72 ID:ZLUsZ9nV.net
- >>216
http://toro.2ch.net/test/read.cgi/hp/1357950586/67
http://toro.2ch.net/test/read.cgi/hp/1357950586/66さんですか？
質問に書いてる通りTransitionalにしないといけない理由があり、その環境では効かないので。
- 218 ：Name_Not_Found：2013/01/15(火) 22:25:24.07 ID:???.net
- マルチはどの板でも叩かれるってことも知らんのか
- 219 ：Name_Not_Found：2013/01/15(火) 22:28:03.83 ID:ZLUsZ9nV.net
- 趣旨が合った2つのスレで聞いて何がいけないのでしょうが？煽るならID出してください。
- 220 ：Name_Not_Found：2013/01/15(火) 22:30:47.25 ID:QSWLFRc7.net
- アホ発見
- 221 ：Name_Not_Found：2013/01/15(火) 22:35:17.93 ID:ZLUsZ9nV.net
- 失礼ですが何故2つのスレで自演してまで煽るのですか？喧嘩がしたいのですか？
- 222 ：Name_Not_Found：2013/01/15(火) 22:50:32.17 ID:???.net
- ただのヒマつぶしだよ
- 223 ：Name_Not_Found：2013/01/15(火) 23:32:18.74 ID:???.net
- 勝手に自演にすんなし
- 224 ：Name_Not_Found：2013/01/16(水) 07:04:39.60 ID:YZY7n5bV.net
- >>221
これ100回読んでこい
掲示板でマルチポストはなぜいけないの？
http://www.ml-info.com/weekly/archives/2009/091024o.html
- 225 ：Name_Not_Found：2013/01/16(水) 09:17:34.55 ID:???.net
- マルチして開き直る馬鹿
- 226 ：Name_Not_Found：2013/01/16(水) 15:36:48.23 ID:???.net
- paddingを指定しても画面全面にgooglemapが描画されてしまいます
CSSの問題かgooglemapの問題か判別する為に
CSSの書き方に問題がないか見てもらえますか
<div style="width:100%; height:100%; position:relative;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%; padding:50px 250px 0px 0px;"></div>
googlemap
</div>
<div style="position:absolute; top:0px; left:0px; width:100%; height:50px;">
ヘッダー
</div>
<div style="position:absolute; top:50px; right:0px; width:250px;">
サイドバー
</div>
</div>
- 227 ：Name_Not_Found：2013/01/16(水) 15:37:52.71 ID:NjAYlSMR.net
- googlemapの前の</div>は間違いです。無視してください
- 228 ：Name_Not_Found：2013/01/16(水) 15:52:30.50 ID:???.net
- >>226
そりゃ width:100%; height:100%; って指定してるんだから当然だろ
ボックスモデルについて勉強した方がいい
- 229 ：Name_Not_Found：2013/01/16(水) 17:35:31.81 ID:???.net
- ありがとうございます
内容領域の中にpaddingが含まれると思ってました
そうなると意図したレイアウトは不可能なのですね
- 230 ：Name_Not_Found：2013/01/16(水) 19:47:40.81 ID:???.net
- フォントファミリーで質問があります
ゴシックファミリーと明朝体じゃサイズが違うような気がします
高さとか変えていくんですか？
- 231 ：Name_Not_Found：2013/01/16(水) 19:50:03.55 ID:???.net
- それはフォントの個別の差であってCSSは関係ない
- 232 ：Name_Not_Found：2013/01/16(水) 20:50:17.93 ID:???.net
- >>229
box-sizing: border-box;
- 233 ：Name_Not_Found：2013/01/19(土) 18:54:42.95 ID:???.net
- BOX要素内でDIV要素を下寄せにしたいんですが方法を教えてください。
できればテーブル要素内でvertical-alignを使う以外の方法を教えていただけると幸いです。
よろしくお願いします。
http://s2.gazo.cc/up/s2_11961.png
- 234 ：Name_Not_Found：2013/01/19(土) 18:56:29.31 ID:???.net
- ↑BOX要素って書いてますがDIV要素です。floatしています。
- 235 ：Name_Not_Found：2013/01/20(日) 14:07:35.43 ID:???.net
- position: absolute;
bottom: 0;
あるいはテーブル要素ではない要素内でvertical-align
（displayを適宜変更）
- 236 ：Name_Not_Found：2013/01/20(日) 19:10:45.90 ID:???.net
- メニューに使う画像を一つ一つ用意しているんですが、
最適な画像置換法って何でしょう
dispay:noneを使って表示されなくすると、
CSS有効で画像が表示できなかった時は表示されないとか、
音声ブラウザだと読み上げない
など、色々問題があります
ちょっと気にしすぎかもしれませんけど
画面外に置くようにするとスパムサイトに認定されないか心配です。
それぞれのhtmlファイルにimgで指定した方が良いんでしょうか。
- 237 ：Name_Not_Found：2013/01/20(日) 19:23:02.78 ID:???.net
- >>236
CSSスプライトでググった方が早い
色んな方法があってそれぞれメリットデメリットあるから
imgは画像そのものがなきゃならない意味ある画像ならいいけど
メニューってことは文字情報が基本なんだろうからHTML的に微妙
- 238 ：Name_Not_Found：2013/01/20(日) 19:52:19.14 ID:???.net
- sassインストロールできません
sudo コマンドができないからみたいです
rootからしないとだめですか？
- 239 ：Name_Not_Found：2013/01/20(日) 19:57:19.64 ID:???.net
- >>238
ソフトの使い方以前の質問は板違いでございますざます
- 240 ：236：2013/01/20(日) 21:03:02.83 ID:???.net
- >>237
多分img使わないほうが普通ですよね。本当はそうした方が良いんでしょうね
どれも一長一短があって迷いますけど・・・imgにしときます
ありがとうございました
- 241 ：Name_Not_Found：2013/01/20(日) 21:13:37.79 ID:???.net
- 駄目だ人の話聞かねえ
- 242 ：236：2013/01/20(日) 21:59:29.96 ID:???.net
- img以外で画像なしの時に表示されるのって
文字の上にボタンを載せる方法だけですよね
でもこれは何だかなあ
- 243 ：Name_Not_Found：2013/01/20(日) 22:01:46.41 ID:???.net
- と、とりあえずCSSスプライトでググっておいで
- 244 ：236：2013/01/20(日) 23:44:25.34 ID:???.net
- overflow: hidden
を使う方法も書いてありましたけど、
画像を表示しないようにしている環境とか、通信が不安定で読み込めなかった時などに
何も表示されないのが気になります
- 245 ：Name_Not_Found：2013/01/21(月) 09:24:31.01 ID:???.net
- 日記書きたいだけならバカッター行けよ
- 246 ：Name_Not_Found：2013/01/21(月) 13:08:32.08 ID:???.net
- レス読んで理解して実践してから書き込め、掲示板初心者
- 247 ：Name_Not_Found：2013/01/24(木) 17:09:15.46 ID:2qQspP85.net
- text-alignで行始めを揃える方法をお教えください...
- 248 ：Name_Not_Found：2013/01/24(木) 17:14:13.42 ID:???.net
- >>247
むしろ何もしなくても行始めは揃ってるもの
何をやって揃ってないのかそっちを切り分けろ
- 249 ：Name_Not_Found：2013/01/24(木) 17:28:04.78 ID:???.net
- 【光・ＡＤＳＬ】お得なインターネット申し込みキャンペーンをご紹介！
http://tibibon.blog.fc2.com/blog-entry-58.html
【WiMAX・LTE】おすすめWiMAX・LTE回線をご紹介！
http://tibibon.blog.fc2.com/blog-entry-59.html
- 250 ：Name_Not_Found：2013/01/25(金) 11:13:20.14 ID:???.net
- webkitで下記のマージンが効かないので
margin : 6 0 0 8;
ググってみて
-webkit-margin-start: 8px;
というのを見つけて成功したのですが
上にも余白を入れたいのですが見つかりません。
どのような方法があるでしょうか？
- 251 ：Name_Not_Found：2013/01/25(金) 11:24:00.41 ID:???.net
- >>250
初心者スレで断られたからってこっちに来るなよ
板自体がWeb制作板だっつーの
- 252 ：Name_Not_Found：2013/01/25(金) 11:44:57.24 ID:???.net
- -webkit-margin-after: 6px;
というのがありました。orz
- 253 ：Name_Not_Found：2013/01/26(土) 06:56:16.59 ID:???.net
- afterで上に余白できるのか？
その実装おかしくね？？
- 254 ：Name_Not_Found：2013/01/26(土) 11:48:14.13 ID:???.net
- 相手すんな
- 255 ：Name_Not_Found：2013/01/26(土) 12:33:27.79 ID:???.net
- >>235
ご回答ありがとうございました。
また質問させてください。
以下のようなレイアウトを作りたいとおもっているんですが
position:relativeを使うと、元々文字列があった場所にも要素が残るらしく
その部分が詰まりません。IEで見たときは詰まっていたんですが、Firefoxで見たときに
隙間があいてしまいました。できればmarginでマイナスの値等を使わずに
この隙間を詰めたいんですが、対処方法があれば教えていただけると幸いです。
そもそもこういったレイアウトを作る場合に、私の作り方が間違えているようでしたら
指摘していただけると幸いです。
よろしくお願いします。
http://s2.gazo.cc/up/s2_12089.png
- 256 ：Name_Not_Found：2013/01/26(土) 13:01:43.02 ID:???.net
- IE詰まるのかよ、駄目すぎｗｗｗ
absolute
- 257 ：Name_Not_Found：2013/01/26(土) 13:16:56.50 ID:???.net
- っていうかわざわざ位置を移動させなくても、border-leftで左の線を描けばいいんじゃないか？
- 258 ：Name_Not_Found：2013/01/26(土) 13:18:53.78 ID:???.net
- border-leftとpaddingでいいと思うんだが
左の線は画像とか使うの？それでもbackgroundとpaddingでできるけど
- 259 ：Name_Not_Found：2013/01/26(土) 13:38:15.31 ID:???.net
- 回答ありがとうございます。
ブラウザによってpaddingの解釈がことなるので、できれば装飾に
paddingやmarginを使いたくないというのがあります。
また、レイアウトを使う箇所がフッタエリアであるため、
できればabsoluteも避けたいと思っています。
仮に、装飾のためにpaddingやmarginをdiv要素内で指定した要素に、
レイアウト用のpaddingやmarginを指定したい場合はdivを入れ子にする
という解釈でよろしいでしょうか。
できればソースの可読性を悪くしないためにも、ブラウザによる
レイアウト崩れを防ぐ意味でも、避けたいと思っています。
また、paddingを指定して、border-leftやbackground-imageを指定する場合、
ボーダーごとpaddingされるように思うんですが、その場合はpositionをマイナスで指定して
overflowで範囲外を表示するといったイメージでしょうか。
- 260 ：Name_Not_Found：2013/01/26(土) 13:39:13.14 ID:???.net
- >>259
お前は標準モードというものを勉強してこい
paddingなんて最も違いの出ないプロパティの一つだ
- 261 ：Name_Not_Found：2013/01/26(土) 13:41:16.40 ID:???.net
- 何を言いたいのかいまいちわからん
paddingの解釈がブラウザごとに異なるって言うけど
IE5.5以下でもサポートするのか？
とりあえずボックスモデルをちゃんと勉強しなおしたほうがいいのでは？
- 262 ：Name_Not_Found：2013/01/26(土) 13:42:26.53 ID:???.net
- 日本語がおかしいところがありました。
×：仮に、装飾のためにpaddingやmarginをdiv要素内で指定した要素に、
レイアウト用のpaddingやmarginを指定したい場合はdivを入れ子にする
という解釈でよろしいでしょうか。
○：仮に、装飾のためにpaddingやmarginを指定した要素を
インデント設定したい場合は、インデント用のpaddingやmarginが設定されたdivで入れ子にする
という解釈でよろしいでしょうか。
- 263 ：Name_Not_Found：2013/01/26(土) 14:01:33.54 ID:???.net
- コメントありがとうございます。
>>260-261
たしかに、私はdoctypeについて深く理解できていません。
調べてみようと思います。
- 264 ：Name_Not_Found：2013/01/26(土) 14:09:24.52 ID:???.net
- >>263
doctypeの話じゃないんだが…
- 265 ：Name_Not_Found：2013/01/26(土) 21:20:46.77 ID:???.net
- むしろpositionは基本避けたほうが無難だと思うけど
- 266 ：Name_Not_Found：2013/01/28(月) 15:55:26.60 ID:???.net
- すみません 基本の基本ですが。
body{
font-size:10px;
}
としましたが、body内にあるh1タグの文字が大きくなります。
どうしてですか？
- 267 ：Name_Not_Found：2013/01/28(月) 16:05:04.84 ID:???.net
- ブラウザ書き忘れた
firefox chrome でとりあえず見ました。
- 268 ：Name_Not_Found：2013/01/28(月) 16:05:59.89 ID:???.net
- ボールドかかってんじゃね？
- 269 ：Name_Not_Found：2013/01/28(月) 16:08:04.46 ID:???.net
- >>266
そんな豆字見えないから知りません
- 270 ：Name_Not_Found：2013/01/28(月) 16:17:43.38 ID:???.net
- プロパティ継承してないんだよなー
わかる人いないようだぬ。調べます ﾄﾎﾞﾄﾎﾞ
- 271 ：Name_Not_Found：2013/01/28(月) 16:17:59.40 ID:???.net
- Firefoxしか確認してないが、h1要素のfont-sizeプロパティの値が2emだから
- 272 ：Name_Not_Found：2013/01/28(月) 16:21:03.85 ID:???.net
- いやそれでもbodyに設定すれば設定値になるから
単に質問者が間違えてどっかで書いてるだけだろ
- 273 ：Name_Not_Found：2013/01/28(月) 16:26:25.14 ID:???.net
- すいませんホディタグ閉じるの下に書いてました
- 274 ：Name_Not_Found：2013/01/28(月) 16:45:34.55 ID:???.net
- >>272
ブラウザが内部的に（UAのCSSで）指定してるから、
そのまま指定値としての継承はしないのよ
body { font-size: 10px; }
h1 { font-size: 2em; }
自分でこう書くのと全く同じということ
で、em単位だから継承した値に対する乗算になる
- 275 ：Name_Not_Found：2013/01/28(月) 17:11:53.41 ID:???.net
- ありがとうござます。
今調べてて同じような推測に落ち着きました。
font-size自体は継承されるはずだが、ブラウザ自体のデフォルトCSSで指定されているため
上書きされているちゅうことですね。
firefox の firebugで見たら何もないのにbodyで指定したものが否定？削除されててわかりませんでしたが、
chromeにて見たら
user agent stylesheet
h1 {
font-size: 2em;
後ろ略
に上書きされておりました。
やっとこさ納得できる答えにたどり着けました。
- 276 ：Name_Not_Found：2013/01/29(火) 06:38:55.78 ID:???.net
- 自分で調べるなら人に聞くなよ
- 277 ：Name_Not_Found：2013/01/29(火) 08:05:52.28 ID:???.net
- そのりくつはおかしい
- 278 ：Name_Not_Found：2013/01/30(水) 18:03:56.97 ID:???.net
- マークアップ言語のテキストファイルから html をエクスポートして
ホームページ作ってます．CSS でデザインを変更したいのですが，いままでは
Web 上の情報を調べて断片的な学習しかしてなかったので，書籍で
体系的に学習したい．おすすめの参考書を教えて下さい！
あと LESS とか SCSS とかのコンパイルする CSS があるらしいですが，
それらを学習する価値はある？ どのあたりに利点があるかを教えていただきたい．
- 279 ：Name_Not_Found：2013/01/30(水) 18:07:06.87 ID:???.net
- 時間だけの差だからどちらでも
- 280 ：Name_Not_Found：2013/01/30(水) 20:19:50.57 ID:???.net
- マークアップ言語のテキストファイル ってなに ?
- 281 ：Name_Not_Found：2013/01/30(水) 21:55:32.15 ID:???.net
- html版のlessっつーかhtmlのメタ言語が欲しい
タグ打ちめんどくさい
- 282 ：Name_Not_Found：2013/01/30(水) 21:59:59.49 ID:???.net
- ここcssスレ
cddもhtmlもタグ挿入型エディタでも使え
- 283 ：278：2013/01/31(木) 03:50:51.43 ID:???.net
- >>279
それは LESS と SCSS の比較ってこと？ CSS と LESS/SCSS の比較が聞きたい
>>280
Emacs の org-mode．けど今はなんのマークアップかは
あんま関係ない．
>>281
それってまさに適当なマークアップ言語ではない？
org-mode とか markdown とか textile とか reStructure とかから
好きなのを html に変換するのは？
>>282
質問が伝わりにくかったか．単純に CSS に関する参考書が知りたい．
- 284 ：Name_Not_Found：2013/01/31(木) 07:09:20.81 ID:???.net
- 富士出版のシリーズ物でも見とけ
- 285 ：Name_Not_Found：2013/02/02(土) 01:24:46.77 ID:aTHNcftv.net
- 質問です。
<div class="A B"> <div class="A C"> <div class="B C"> の３つがあって、
<div class="A B"> にだけ適用させるCSSはどのように書けばよいでしょうか？
- 286 ：Name_Not_Found：2013/02/02(土) 02:00:57.07 ID:???.net
- 新たにDを作って A B D ってやれば
- 287 ：Name_Not_Found：2013/02/02(土) 02:37:40.32 ID:???.net
- 自分もD作ってやるな
- 288 ：Name_Not_Found：2013/02/02(土) 09:42:17.13 ID:???.net
- .A.B じゃいかんのか？
- 289 ：Name_Not_Found：2013/02/02(土) 09:46:11.11 ID:???.net
- >>288
内容によっては紛らわしくなりそう
- 290 ：Name_Not_Found：2013/02/02(土) 13:14:32.99 ID:???.net
- これ難しいな。
クラス名の組み合わせでスタイル定義ってできないんだっけ？
- 291 ：Name_Not_Found：2013/02/02(土) 13:22:24.06 ID:???.net
- scssでも使えば
- 292 ：Name_Not_Found：2013/02/02(土) 14:34:19.52 ID:???.net
- ベストは>>288 属性セレクタでもできなくもないが制約がある
- 293 ：285：2013/02/02(土) 15:03:00.29 ID:???.net
- .A.B でできた。
もうお前らに用はないよ
- 294 ：Name_Not_Found：2013/02/02(土) 15:55:13.03 ID:???.net
- ie6だと適用されんけどな
- 295 ：Name_Not_Found：2013/02/02(土) 16:18:48.08 ID:???.net
- 質問です。
body ul li#list1 {color: black;}
のセレクタの所にあるbodyはどういった意味があるのでしょうか？
初歩的な質問ですみませんがよろしくお願いします。
- 296 ：Name_Not_Found：2013/02/02(土) 17:39:25.30 ID:???.net
- >>295
無意味
- 297 ：Name_Not_Found：2013/02/02(土) 19:03:07.21 ID:???.net
- >>296
無意味なのかなと思って削除すると色が変わってしまいました。
CSSの優先順位を決める為に有るようなのですがulとliはわかるのですが
bodyが何なのかわからないです…。
- 298 ：Name_Not_Found：2013/02/02(土) 20:26:01.39 ID:???.net
- >>297
id セレクタは優先度高いので
大抵は #list1 だけでオッケーに見えるのだが
より優先度が高いセレクタで、しかも body 付けるだけで順位入れ替わる
ものとして考えられるのは、他の #list1 くらいしかないような
- 299 ：Name_Not_Found：2013/02/02(土) 20:27:48.55 ID:???.net
- >298
ミスった
× 他の #list1 くらいしか
→
○ 他の id セレクタくらいしか
- 300 ：Name_Not_Found：2013/02/02(土) 21:37:10.03 ID:???.net
- しかしid付けてるのに子孫セレクタ使いまくって
わざわざ遅いCSSにしてるとかアホらしいコードだな
優先順位を含めたデザインがちゃんと出来てない証拠
- 301 ：Name_Not_Found：2013/02/03(日) 00:14:40.23 ID:???.net
- 難しいですね…精進します。
- 302 ：Name_Not_Found：2013/02/03(日) 00:21:07.95 ID:???.net
- CSSの処理はクライアント側だから無駄無駄無駄無駄でもあまり影響はない
- 303 ：Name_Not_Found：2013/02/03(日) 00:34:53.91 ID:???.net
- >>302
GitHubがCSSのパフォーマンス改善のためにおこなったことをまとめたスライド
http://coliss.com/articles/build-websites/operation/css/slide-githubs-css-performance-by-jonrohan.html
- 304 ：Name_Not_Found：2013/02/03(日) 01:51:13.99 ID:???.net
- 理屈は分かってても巨大なモノになってると限界があるよね。
- 305 ：Name_Not_Found：2013/02/03(日) 14:51:55.52 ID:???.net
- http://i.imgur.com/r1jVSFf.jpg
ウインドウ幅によって幅が変わるリキッドなボタンをcssで作りたいのですが
body{
width:100%;
}
a {
display:block;
width:33%;
border:1px;
background:icon.gif,gradation略;
background-position:?????,top;
padding:????;
}
アイコンの位置と
テキストリンクのpadding値がどうにもうまくいきません
リキッドでこういうボタンは諦めるべきでしょうかね
- 306 ：Name_Not_Found：2013/02/03(日) 15:06:35.76 ID:???.net
- ポジショニングしたらええねん
- 307 ：Name_Not_Found：2013/02/03(日) 21:57:02.55 ID:???.net
- >>305
無理せんとアイコンを別要素にしなはれ
- 308 ：Name_Not_Found：2013/02/03(日) 22:37:36.88 ID:???.net
- それで出来そうな気がすんだけど
paddingかbackground-position絶対値でしょ？
- 309 ：308：2013/02/03(日) 22:38:36.95 ID:???.net
- あー
どっちも絶対値でしょ？
- 310 ：Name_Not_Found：2013/02/04(月) 01:00:32.75 ID:???.net
- padding:0;やmargin:0;を入れる意味がわかりません
0なら指定する必要がないのでは･･･
すみませんがよろしくお願いします
- 311 ：Name_Not_Found：2013/02/04(月) 01:24:46.58 ID:???.net
- デフォルトスタイルの上書き用
- 312 ：Name_Not_Found：2013/02/05(火) 13:27:30.03 ID:???.net
- <div id="header"></div>
<div id="middle"><textarea id="textarea01" style="width:100%;height:100%"></div>
<div id="footer"></div>
id=middle の中のテキストエリアを幅をブラウザの幅いっぱい
高さをヘッダーの下辺からフッターの上辺までにしたいんだけど
幅はうまくいったんだけど高さがうまくいかない。
document.body.scrollHeight;
document.body.clientHeight;
とか使ってみたけど、高さが足らなかったり、高すぎたり。
いい方法ないですか？
最悪スマフォさえうまく表示されればいいです。
- 313 ：Name_Not_Found：2013/02/05(火) 14:42:21.86 ID:???.net
- javascriptで調整するといいよ
- 314 ：Name_Not_Found：2013/02/05(火) 15:43:14.15 ID:???.net
- そもそもCSSじゃないだろそれ
- 315 ：312：2013/02/05(火) 16:30:02.93 ID:???.net
- すいません、レイアウトなのでうっかり css スレに書いてしまいました。
javascript スレに行ってみます。
- 316 ：Name_Not_Found：2013/02/05(火) 16:55:47.61 ID:???.net
- スレは言うほど間違ってないよ JSスレ行っても追い返されるんじゃないの
自分で書いたCSS載せないしタグ閉じてないしidの使い方違うしで何も言えないが
- 317 ：Name_Not_Found：2013/02/13(水) 10:29:52.09 ID:???.net
- 初心者的な質問です。
本を読んだり、ネットで調べてみたが分からなかったので聞いてみます。
cssファイルは複数使うものですか？
どういった方法が一般的なのかが知りたいです。
【複数使う場合】
トップページ.html + style.css
|
|-詳細.html + detail.css
|-サポート.html + support.css
|-以下 リピート...
↑
共通する部分はコピペして別cssとして読み込む方がいいのか
cssを複数読み込んで、、、うーん同じIDとかになっちゃいそう、、、
今、こういった管理？運用？方法が分からず吐きそうです。
【１つの場合】
全ページのスタイルを1つのcssで割り当てる。
（ただ長くなって見にくく感じます。でもこれが普通なのかな？）
- 318 ：Name_Not_Found：2013/02/13(水) 10:49:42.01 ID:???.net
- 自分が管理しやすいように作るのが一番
- 319 ：Name_Not_Found：2013/02/13(水) 11:01:51.03 ID:???.net
- 共通部分がイメージできないなら始めはそれぞれ個別にCSSを設定するしかない。
それはファイルでもいいし、HTML埋め込みでもいい。
各ページの完成形が見えて初めて、ああこことここは構造が似てるな、という共通部分の洗い出しが出来る。
全てを1つのCSSファイルに記述するのはやめた方がいい。名前空間がごちゃごちゃになるから。
- 320 ：Name_Not_Found：2013/02/13(水) 12:07:02.40 ID:???.net
- 単なる理想論を言えば、各ページでCSSが違うってのはそもそも問題
デザインもソースも一貫性が無いと色々とつらいじゃない
ほとんどを共通部分としておいて、ごく限られた箇所を個別とするなら、
全部一緒くたにして1ファイルでもそんなに困らないかもしれない 程度問題だが
パフォーマンスの面で言えば、HTTPリクエストの回数は少ないほうが良い
共通部分は外部ファイルで共有、個別の部分も外部ファイルで各ページで読み込み
このあたりが質問の雰囲気から落としどころのような気がしないでもない
あと長くなって見にくいというのは、ブロック（{ から } まで）の開閉や、
必要なブロックの一覧から必要な場所へジャンプできるエディタを使うと、
少なくてもその手間は解決できるかもしれない
- 321 ：Name_Not_Found：2013/02/13(水) 12:09:57.39 ID:???.net
- >>318
>>319
ありがとう。
メニューが増えたするかもしれないので、ページ毎にcssを書く事にします。
もう2点いいでしょうか？
■ファイルの管理（ディレクトリ）はどのように管理しますか？
トップページのindexが置いてある場所にimgフォルダcssフォルダがあります。
例えば別に詳細ページを作ります、この場合は詳細ページフォルダーを作って
詳細ページフォルダー内に詳細ページ用のimgフォルダとcssフォルダを作る感じでOKですか？
■indexを各ページに置くべき とは？
これは上記の詳細ページで例えると
今までは詳細ページフォルダーに「detail.html」として配置してました
indexページを置くべきと言うことは詳細ページフォルダー内に「index.html」で詳細ページを作ると言うことでしょうか？
index.htmlはトップページにのみ使うものだと思い込んでいました（汗）
- 322 ：Name_Not_Found：2013/02/13(水) 12:23:37.21 ID:???.net
- >>321です
「メニューが増えたり・・・」これ変ですね。。
増えるかもしれないなら尚更１つにまとめたほうがいいですね（汗）
>>320
ありがとうございます。
共通css＋各ページcss と2種のcssで読み込みがGoodと言うことでしょうか？
またはphpなどで共有部分を別ファイルにして読み込むということでしょうか？
（phpについてはもっと勉強が必要と感じています。）
- 323 ：Name_Not_Found：2013/02/13(水) 18:45:55.12 ID:???.net
- 左に設置したメニューバーを画面のスクロールに合わせてついてくるように設定をしようと思い、
position:fixedを試してみたのですが、メニューバーの上にヘッダーがあるため、
ヘッダーの高さの分だけ空白のまま、画面についていく感じになってしまいます。
メニューバーのてっぺんが画面一番上に来た以降、それに合わせてスクロールされるという風にしたいのですが、
どうすればよいのでしょうか？
よろしくお願いします。
- 324 ：Name_Not_Found：2013/02/13(水) 19:00:18.61 ID:???.net
- js使ってください
- 325 ：Name_Not_Found：2013/02/14(木) 02:05:30.19 ID:???.net
- 左に設置したメニューバーを画面のスクロールに合わせてついてくるように設定をしようと思い、
position:fixedを試してみたのですが、メニューバーの上にヘッダーがあるため、
ヘッダーの高さの分だけ空白のまま、画面についていく感じになってしまいます。
メニューバーのてっぺんが画面一番上に来た以降、それに合わせてスクロールされるという風にしたいのですが、
どうすればよいのでしょうか？
よろしくお願いします。
- 326 ：Name_Not_Found：2013/02/14(木) 02:20:44.71 ID:???.net
- スクロール量に応じてふるまいを変えるような CSS は
おそらく存在しないので、原理的に CSS だけではできない
- 327 ：Name_Not_Found：2013/02/14(木) 10:03:58.74 ID:???.net
- js使ってください
- 328 ：Name_Not_Found：2013/02/14(木) 15:44:58.20 ID:???.net
- >>326>>327
わかりました、ありがとうございます。
- 329 ：Name_Not_Found：2013/02/16(土) 18:03:47.44 ID:???.net
- heightについてなんですが、元の高さが200pxの要素が有ったとして、
height: 100px を指定した場合、「下から上」に100px削られる形になると思うのですが、
これを「上から下に」と言う形に指定することは出来ないでしょうか
これを こうではなく こうしたい
■■■ ■■■
■■■ ■■■
解りにくいかも知れませんが、宜しくお願いします
- 330 ：Name_Not_Found：2013/02/16(土) 19:03:04.95 ID:???.net
- ポジションじゃだめなん？
- 331 ：Name_Not_Found：2013/02/17(日) 09:51:38.75 ID:???.net
- めっちゃめんどそう・・・。
上の要素と下の要素にわけちゃえば
- 332 ：Name_Not_Found：2013/02/18(月) 13:43:00.07 ID:???.net
- 面倒とかじゃなくて無理
- 333 ：Name_Not_Found：2013/02/19(火) 06:50:41.74 ID:???.net
- display: inline-blockとvertical-align: bottom
- 334 ：Name_Not_Found：2013/02/19(火) 10:49:03.43 ID:???.net
- >>333
なんねーよ
- 335 ：Name_Not_Found：2013/02/19(火) 16:31:43.21 ID:???.net
- テーブルちゃうんかw
- 336 ：Name_Not_Found：2013/02/19(火) 21:00:36.15 ID:???.net
- height:100px;margin-top:100px;
- 337 ：Name_Not_Found：2013/02/21(木) 23:22:29.51 ID:???.net
- youtubeに出てくるkpopを非表示にしたいのですがどうやればいいですか
せめて名前だけでも非表示にしたいです。
- 338 ：Name_Not_Found：2013/02/22(金) 13:25:06.21 ID:???.net
- >>337
スレ違い
- 339 ：Name_Not_Found：2013/03/09(土) 21:00:44.50 ID:zFIkoJfH.net
- CSSのheight指定について質問があります。
現在、下記の様なhtml + css のコードを書いておりますが
内部要素のheight値が増えた場合に
外側の高さも毎度調整をしないと、
中の要素が外の要素を抜けて表示されてしまいます。
height:500px; → height:100% としてもはみ出てしまうのですが
内側の要素が増えたら、自動でその高さに合わせる方法とかありますか？
<div style="height:500px;"> ← 本当は、800px にしないといけない。
<div style="height:400px;clear:both;"></div>
<div style="height:4000px;clear:both;"></div>
</div>
- 340 ：Name_Not_Found：2013/03/09(土) 21:30:43.62 ID:???.net
- >>339
外側の要素にheightを指定しない
もし内側が float していて、親要素の高さが 0 になるのを防ぎたいなら clearfix を使う
- 341 ：Name_Not_Found：2013/03/09(土) 23:23:34.78 ID:zFIkoJfH.net
- >>340
ありがとうございます。
clearfix で出来ました。
ただ、
overflow:hidden;
を使っても同様の事が出来る様でした。
- 342 ：Name_Not_Found：2013/03/09(土) 23:39:10.61 ID:???.net
- overflow:hidden;もclearfixの一種だ
- 343 ：Name_Not_Found：2013/03/09(土) 23:46:12.23 ID:zFIkoJfH.net
- >>342
サンキューです。
ちょっと質問があるのですが
特定の <div> ブロックを画面内の特定の位置に
常に固定したのですがjQueryを使うべきか
それともCSSのみで出来るものなのでしょうか？
- 344 ：Name_Not_Found：2013/03/10(日) 00:36:27.30 ID:???.net
- >>343
position
- 345 ：Name_Not_Found：2013/03/11(月) 10:40:40.48 ID:9DZaqQs9.net
- >>344
absolute かな？
- 346 ：Name_Not_Found：2013/03/11(月) 10:57:46.61 ID:???.net
- fixedかと思ったけど
- 347 ：Name_Not_Found：2013/03/12(火) 12:04:15.58 ID:5nP+E9WQ.net
- clearfix の替りに overflow:hidden を使っているんですけど
Crome 上ではしっかり反映されているのですが
Internet Explorer で見た場合には
そうなっていません。
overflow:hidden って IE には効かないのでしょうか？
- 348 ：Name_Not_Found：2013/03/12(火) 12:58:49.83 ID:???.net
- IEのバージョンは？
あとソース貼ったほうが早い
- 349 ：Name_Not_Found：2013/03/12(火) 14:00:09.14 ID:???.net
- >>347
IE では overflow: hidden; を指定した要素の hasLayout が true でないと clearfix にならない
- 350 ：Name_Not_Found：2013/03/14(木) 23:45:43.79 ID:4zQDZvls.net
- 教えてください！
http://himasoku.com/archives/51770598.html
こちらのサイトのように画像を全体ではなく左端だけに並べたいのですがやり方がよく
わかりません。。。。。
わかる方いたら教えて下さい！！！！
livedoorです。
- 351 ：Name_Not_Found：2013/03/15(金) 00:03:12.20 ID:???.net
- 画像いっぱいあるけどどの画像よ
そもそも画像は何もしなければ左寄せになる
- 352 ：Name_Not_Found：2013/03/15(金) 00:12:50.11 ID:???.net
- >>350
エスパーしてみる
背景画像なら、 background-repeat: repeat-y;
普通の画像なら、 float: left;
- 353 ：Name_Not_Found：2013/03/15(金) 13:01:57.98 ID:6X7H3wBH.net
- >>352
さんくす！できました！！！
あと、どなたか記事を黒い枠で囲む方法を教えてください。
livedoorです
- 354 ：Name_Not_Found：2013/03/15(金) 14:44:14.46 ID:6X7H3wBH.net
- 黒く囲むのはできたわ。
記事タイトルの色変更ができない。。。
/** 記事タイトル */
.article-title-outer {
margin-bottom: 5px;
padding-right: 10px;
padding-bottom: 10px;
background-color:#000000;
}
.article-title {
clear: left;
margin: 0;
font-size: 300%;
font-weight: bold;
padding: 3px 0;
color:#ffffff;
}
これ間違ってるのか・・・・・・だれか教えて下さい。
- 355 ：Name_Not_Found：2013/03/15(金) 21:30:04.10 ID:???.net
- 他のスタイルで指定された color が優先されている可能性が高い
まさか color が適用可能な対象ではなかった（実はタイトルは画像だった、とか）
というオチではないだろうな
- 356 ：Name_Not_Found：2013/03/16(土) 09:02:54.86 ID:DpzHxcYG.net
- livedoorのRSS設置したいんだがやり方分かんねぇぇ
ググったけど分からんかった・・・
分かりやすく教えてくれる方いませんかね。
- 357 ：Name_Not_Found：2013/03/16(土) 11:40:40.14 ID:???.net
- つっこんだら負けか
- 358 ：Name_Not_Found：2013/03/16(土) 21:05:10.17 ID:Q8assncG.net
- 画面の幅（高さ）に応じて一定になる
フォントサイズ指定ってどうすればいいんですか？
解像度関係なく横幅の1/10の大きさにしたいとかです。
ググったら、dpとかいう単位がそれっぽいみたいなのですが
これはどうやらAndroid専用みたいです。
どうぞよろしくお願いします。
- 359 ：Name_Not_Found：2013/03/16(土) 21:10:56.20 ID:???.net
- >>358
vh か vw
詳しい仕様と実装状況については
https://developer.mozilla.org/en-US/docs/CSS/length#Viewport-percentage_lengths
- 360 ：Name_Not_Found：2013/03/16(土) 21:36:15.95 ID:???.net
- 最低なのでやめてほしいわー
- 361 ：Name_Not_Found：2013/03/20(水) 14:34:52.47 ID:???.net
- 任意の文字列に対し、文字がはみ出ることなく背景画像を表示させようとしています。
下記Webページやり方を真似て、画像が横に広がるバージョンをつくろうとしています。
http://www.be-webdesigner.com/tips/coding/extendable_box.htm
サンプルをいじって作成を試していた時に躓いた箇所が
・Web画面上の同じ高さで表示されない
・表示する文字の長さに関係なく、指定された幅分repeatされてしまう
・それぞれの画像の表示位置が取れていない
以上の解決方法はございましたらご教授ください。
よろしくお願いします。
- 362 ：Name_Not_Found：2013/03/20(水) 15:29:30.72 ID:???.net
- CSSより日本語を先に勉強したほうが良いと思う
- 363 ：Name_Not_Found：2013/03/20(水) 15:35:06.63 ID:???.net
- >>361
自分で書いたCSSがバグってるだけじゃね。
- 364 ：Name_Not_Found：2013/03/25(月) 15:14:21.02 ID:D6n8NQkE.net
- CSS初心者です
div#test a:hover{color: red;}みたいなのってありますよね
div.test a:hover{color: red;}クラスでいえばこうですね
IDやクラスの前にdivとかHTMLタグが付けられてるやつです
これどういうことなのかよく分かりません…
div内の#testが付いた要素のみに適用するってことですか？
- 365 ：Name_Not_Found：2013/03/25(月) 15:19:50.60 ID:???.net
- >>364
http://weboook.blog22.fc2.com/blog-entry-268.html
- 366 ：Name_Not_Found：2013/03/25(月) 15:30:41.53 ID:D6n8NQkE.net
- >>365
要素ってのはタグで囲まれたものでタグとかは属性に分類されるんですね
このサイトすごい分かりやすかったです 色々疑問が解消しました ありがとうでした
- 367 ：Name_Not_Found：2013/03/27(水) 13:15:59.29 ID:7N1dzBBI.net
- font-familyについて質問です。
カナ漢字と英数字、それぞれわけて特定の書体を指定するにはどういう風に指定すればよいでしょうか？
- 368 ：Name_Not_Found：2013/03/27(水) 18:06:43.49 ID:???.net
- 無理
英数字に指定するのが「英数字しかないフォント」なら一応できるけど
- 369 ：Name_Not_Found：2013/03/27(水) 21:09:54.57 ID:???.net
- span styleで指定すればいいんじゃね?
- 370 ：Name_Not_Found：2013/03/29(金) 15:48:02.53 ID:???.net
- div重なるんだがどうすりゃいいのか
回り込みの仕組みがよくわからん
- 371 ：Name_Not_Found：2013/03/29(金) 17:04:27.46 ID:???.net
- >>370
とりあえずclearfix
- 372 ：Name_Not_Found：2013/03/29(金) 19:17:58.26 ID:???.net
- >>371
ok
- 373 ：Name_Not_Found：2013/03/30(土) 00:01:34.32 ID:???.net
- clearfixってclear bothと同じ効果ですか？
- 374 ：Name_Not_Found：2013/03/30(土) 00:03:06.58 ID:???.net
- >>373
全然違う
clearfixでググれ
- 375 ：Name_Not_Found：2013/03/31(日) 02:38:35.48 ID:2Vziy7tR.net
- <div class="container">
<div class="menu">
</div>
<div class="main">
</div>
</div>
.container
{
/*width: 700px;*/
width: 100%;
}
.main
{
float:right;
width: 75%;
height:auto;
}
.menu
{
float:left;
width:25%;
height:auto;
}
これで、ページ全体を1:3で分割したいんです
横方向はいいんですが、縦方向がなぜか親(container)の上限まで達しません
- 376 ：375：2013/03/31(日) 17:21:37.10 ID:2Vziy7tR.net
- あげ
- 377 ：Name_Not_Found：2013/03/31(日) 19:55:20.36 ID:???.net
- 宜しくお願いします。
画像を横一列に並べて横幅800pxに入らないものは横スクロールで見れる用にしたいです。
CSSは
.yokonarabi {width:800px; height:150px; overflow:auto;}
と記述して
HTMLで
<table width="800px"><tr><td>
<div class="yokonarabi">
<img src="1.jpg" border="0" />
<img src="2jpg" border="0" />
<img src="3.jpg" border="0" />
.
.
.
</div>
</td></tr></table>
と行ってるのですがどうしても画像が800pxを超えると
下にスクロールしてしまいます。
ドコに間違いがあるのでしょうか?
ご指導をお願い致します。
- 378 ：Name_Not_Found：2013/03/31(日) 19:57:13.49 ID:???.net
- つスクロールバーの幅
- 379 ：Name_Not_Found：2013/03/31(日) 20:00:07.84 ID:???.net
- >>377
無指定だと勝手に改行してしまうので、「改行しない」ようにするためのCSSの指定が必要
- 380 ：Name_Not_Found：2013/03/31(日) 20:08:01.05 ID:???.net
- >>379
有難うございます。
今BODY部分に<nobr>を記述して解決しました。
またよろしくお願いします。
- 381 ：Name_Not_Found：2013/04/01(月) 13:29:27.17 ID:???.net
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" href="css.css" type="text/css">
これでIE9で見るとスクロールバーやカーソルを画像に変更するCSSが反映されてません。
IE7だと反映されています。
何が問題なんでしょうかよろしくお願いします。
- 382 ：Name_Not_Found：2013/04/01(月) 13:35:54.47 ID:???.net
- なぜCSSの部分を貼らないのか
- 383 ：Name_Not_Found：2013/04/01(月) 14:33:01.20 ID:???.net
- twitter.github.com/bootstrap/base-cs s.html の、スクロールするとナビゲーションだけ残 ったり ナビゲーションの現在表示している部分に色 が付くのはどうやっているんですか？
こういうのを勉強するのによい本とかあればお願いします。
- 384 ：Name_Not_Found：2013/04/03(水) 00:32:24.53 ID:xXqoC2Dn.net
- 下記をPCのchromeで見ると、ちゃんとcssが反映されるのですが、
iphoneのsafariで見るとcss部分が反映されていないようです。
iphoneで外部cssを読み込むには何か別に設定が必要なのでしょうか？
--- index.html ---
<!doctype html>
<html lang=ja>
<head>
<base href="http://example.com/xxx/">
<title>タイトル</title>
<meta charset=utf8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="./css/a.css">
</head>
<body>
<h1>あああああ</h1>
</body>
</html>
--- css/a.css ---
@charset "UTF-8";
h1 {
background: -webkit-gradient(linear, left top, left bottom,
from(#fff),
to(#000)
);
}
- 385 ：384：2013/04/03(水) 00:34:04.45 ID:xXqoC2Dn.net
- example.comの部分は自分のURLを書いています。
Chromeで見れているので、URLはあっています。
- 386 ：Name_Not_Found：2013/04/03(水) 01:11:54.83 ID:???.net
- CSSファイルがBOM付きだったりしないかい？
または@charsetの行より前に空行やコメントがあるとか
- 387 ：Name_Not_Found：2013/04/05(金) 10:53:22.59 ID:323rNRfE.net
- 複数のclassの要素（またはID）を記述するのってどうやるの？
例えば
.class1 .class2に
{
font-size: 24px;
}
を適用させたい場合はどうすれば･･･
一々別々に書かなければならないんですか？
- 388 ：Name_Not_Found：2013/04/05(金) 10:59:51.71 ID:???.net
- >>387
カンマで区切ればいけるらしい。
代わりにsassとかのmixin機能を使うとかいう手もある。
- 389 ：Name_Not_Found：2013/04/05(金) 11:00:37.43 ID:???.net
- >>387
>>2
- 390 ：Name_Not_Found：2013/04/05(金) 11:23:48.47 ID:323rNRfE.net
- >>388
.class1, .class2{
color: yellow;
}
だよなぁやっぱ
しかしなぜか.class2は黄色にならない
一体どこにミスがあるのか
- 391 ：Name_Not_Found：2013/04/05(金) 11:25:27.74 ID:???.net
- >>390
そういうのはfirefoxやchromeの開発ツール使って、
その要素にどのcssが適用されてるか見るんだよ。
- 392 ：Name_Not_Found：2013/04/05(金) 11:32:33.52 ID:323rNRfE.net
- >>391
ok
- 393 ：384：2013/04/05(金) 12:30:27.94 ID:???.net
- >>386
規制でいままで書き込みできませんでした。
BOMが原因でしたありがとうございます。
- 394 ：Name_Not_Found：2013/04/05(金) 21:53:00.70 ID:???.net
- fieldsetをCSSでbackgroundなどを指定した場合、IEの角の丸みが取れてしまうのは
仕様なのでしょうか？
fieldset {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border: solid #999999 2px;
background: #FFFFFF;
}
こんな感じにCSSで指定した場合、角の丸みが取れてしまいました
backgroundを指定しない場合は、角の丸みが取れずに反映されます
これは仕様と思ってbackgroundを使わないように諦めるべきですか
よろしくお願いします
- 395 ：Name_Not_Found：2013/04/05(金) 21:59:36.87 ID:???.net
- IEに期待しすぎ
- 396 ：Name_Not_Found：2013/04/06(土) 21:09:23.95 ID:???.net
- 実装めんどくさいから放置されてるんだろう
ニッチなニーズだから優先順位低そうだし
- 397 ：Name_Not_Found：2013/04/06(土) 21:13:26.84 ID:???.net
- もっとニッチで必要のない勝手な実装を幾つもしてるんだから
そういうのは言い訳にならんがなIE
- 398 ：Name_Not_Found：2013/04/07(日) 10:47:35.91 ID:???.net
- ニッチで誰得なことを実装するならIE
- 399 ：Name_Not_Found：2013/04/07(日) 15:29:08.26 ID:???.net
- z-index使っても後から記述したものが最前面になってしまう
なぜ？？
- 400 ：Name_Not_Found：2013/04/07(日) 18:06:52.84 ID:???.net
- html要素にスタイルを指定して枠を作ったり背景を入れたりするのってアリなのかな
- 401 ：Name_Not_Found：2013/04/07(日) 21:55:20.30 ID:???.net
- bodyじゃいかんのけ
＊みたいなイメージか
- 402 ：Name_Not_Found：2013/04/09(火) 09:27:47.08 ID:???.net
- このスレ知らなくて他で尋ねていたのですが
font-size:13px;
line-height:1;
margin:0;
padding:0;
としてもIEだけ天地が13pxより
微妙に広くなりますが
ぴったり13pxにおさめるには
どう記述したらよいですか？
- 403 ：Name_Not_Found：2013/04/09(火) 10:12:27.35 ID:???.net
- display : block;は？
- 404 ：Name_Not_Found：2013/04/16(火) 17:21:41.20 ID:???.net
- DIVのCLASSでwidth font-size font-familyを指定してます。
IEでは反映されますがFireFox Chromeでは反映されません。
何かバグ等が有るのでしょうか?
CSS
.item{ width:700px;font-size:13px;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
HTML
<div class="item">～～</div>
楽天市場のページ作りなので楽天の仕様も考えられるものでしょうか?
わかりにくくて申し訳ございません
- 405 ：404：2013/04/16(火) 17:30:59.33 ID:???.net
- ↑追記
TABLEのClass設定は 3ブラウザともに正しく反映されています。
- 406 ：Name_Not_Found：2013/04/16(火) 21:30:17.66 ID:???.net
- 普通にできたけど
;とか}とか漏れてないかcss全体見直したら
- 407 ：Name_Not_Found：2013/04/17(水) 07:25:39.35 ID:???.net
- あ～これバグ
- 408 ：Name_Not_Found：2013/05/01(水) 01:49:07.47 ID:???.net
- HTMLは以下のようになっています。
<h2>見出し1</h2>
<ul>
<li>リスト1</li>
<li>リスト1</li>
</ul>
<h2>見出し2</h2>
<ul>
<li>リスト2</li>
<li>リスト2</li>
</ul>
これを
見出し1 見出し2
・リスト1 ・リスト2
・リスト1 ・リスト2
のように、見出しの高さを揃えて横に並べたいのですがどのように書けばよいでしょうか？
要素は増やせません。
- 409 ：Name_Not_Found：2013/05/01(水) 07:53:38.95 ID:???.net
- dl使え
- 410 ：Name_Not_Found：2013/05/01(水) 08:03:48.77 ID:???.net
- ソーシャルボタン沢山並べたいのですが
マージンがそろいません
FBとかの吹き出しとかあるからでしょうか?
- 411 ：Name_Not_Found：2013/05/01(水) 09:06:30.79 ID:???.net
- >>408
セレクタ追加してposition使え
なんで要素追加できないか知らんけどdivで囲んでfloatかinline-blockが楽だよ
- 412 ：Name_Not_Found：2013/05/03(金) 03:48:15.90 ID:???.net
- 408です。アドバイスありがとうございます。
デザインの為に要素を追加するのはおかしくないですか・・・？
とれまpositionでやってみます。
- 413 ：Name_Not_Found：2013/05/03(金) 04:14:30.17 ID:???.net
- <section>
<h1>見出し1</h1>
<ul>
<li>リスト1</li>
<li>リスト1</li>
</ul>
</section>
<section>
<h1>見出し2</h1>
<ul>
<li>リスト2</li>
<li>リスト2</li>
</ul>
</section>
html5に移行できるならこうして section にスタイルを指定すればいいんじゃないかな
- 414 ：Name_Not_Found：2013/05/03(金) 07:32:55.35 ID:???.net
- >>412
だからdlつかえ
基本だろ
- 415 ：Name_Not_Found：2013/05/06(月) 19:56:32.36 ID:???.net
- Textのカラースキーム専門の本はないでしょうか?
- 416 ：Name_Not_Found：2013/05/14(火) 17:47:23.33 ID:DbpS60pk.net
- CSSの指定で、半角文字（英数字、半角かな）に対して
自動的に等幅フォントを使うように設定したいのですが
どうしたらよいでしょうか
- 417 ：Name_Not_Found：2013/05/14(火) 19:54:47.04 ID:???.net
- 無理。
- 418 ：Name_Not_Found：2013/05/14(火) 21:03:48.20 ID:???.net
- @font-faceを使えば多分できる
- 419 ：Name_Not_Found：2013/05/15(水) 14:20:15.88 ID:???.net
- <ul><li>等で
トップ | ニュース | 天気 | スポーツ
のように間に縦線 | を付けるメニューはどうやってできますか？
- 420 ：Name_Not_Found：2013/05/15(水) 14:26:33.15 ID:???.net
- >>419
画像、もしくは::afterにcontent挿入
- 421 ：Name_Not_Found：2013/05/15(水) 15:56:41.81 ID:???.net
- borderでもええんちゃう
- 422 ：Name_Not_Found：2013/05/15(水) 16:29:48.76 ID:???.net
- .content();
- 423 ：Name_Not_Found：2013/05/17(金) 01:21:44.02 ID:sjbQz9S3.net
- 写真が真ん中によってくれなく困っています
<div class="container">
<div class="ph1"><a href="xxxxx.jpg"><img src="xxxxxx.jpg" width="200" border="0" alt="番号１" /></a></div>
<div class="bunsyou1"><p>"test"</p></div>
</div>
css
.container{
text-align: center;
width:550px;}
.ph1{
height:auto;
width:200px;
line-height:0;
background-color:#ffffff;
box-shadow: 5px 5px 10px #999999;
text-align: center; }
.bunsyou1{width:450px;
margin:0px 10px;
background-color:#ff0000;
text-align: center; }
これを表示させると
画像は左に寄ってしまい
文字は右によっしまいます
.ph1のwidthを削除すると画像も文字も真ん中によってくれるのですが
box-shadow: 5px 5px 10px #999999;で影をつけているので
width指定をしないとcontainerの幅で影がかかってしまいます
うまく表示させるcssの修正をを教えて頂けないでしょうか？
- 424 ：Name_Not_Found：2013/05/17(金) 02:26:51.89 ID:???.net
- .container {
width: 550px;
}
.ph1 {
background: #fff;
box-shadow: 5px 5px 10px #999;
display: block;
margin: 0 auto;
text-align: center;
width: 200px;
}
.bunsyou1 {
background: #ff0000;
margin: 0 auto;
text-align: center;
width: 450px;
}
img {
border: 0;
vertical-align: bottom;
}
----------↑CSS↑----------↓HTML↓----------
<div class="container">
<a class="ph1" href="xxxxx.jpg"><img src="xxxxxx.png" width="200px" alt="番号１" /></a>
<p class="bunsyou1">"test"</p>
</div>
勝手にdiv抜いた
- 425 ：Name_Not_Found：2013/05/17(金) 08:46:56.26 ID:sjbQz9S3.net
- >>424
ありがとうございます
でもなぜDIVでclassをつけてあげるとうまく行かないのでしょうか
説明しているサイトがあったらおしえていただけないでしょうか
- 426 ：Name_Not_Found：2013/05/17(金) 09:39:07.15 ID:???.net
- >>425
>>2
- 427 ：Name_Not_Found：2013/05/17(金) 12:45:43.28 ID:???.net
- >>425
ポイントはそこじゃなくて margin: 0 auto; のとこな
>>424はなぜかdiv.ph1なくしてるけどそのままでおｋ
div.ph1に margin: 0 auto; してみ？
あと全体センター寄せにするなら .bunsyou1 も
margin: 0 auto; じゃねーかと思うがええの？
- 428 ：Name_Not_Found：2013/05/17(金) 21:01:52.61 ID:???.net
- >>426
>>427
margin: 0 auto; はかなりいいものを知りました
ありがとうござごいます
- 429 ：Name_Not_Found：2013/05/17(金) 22:05:37.23 ID:???.net
- 基本だろガチバカwww
- 430 ：Name_Not_Found：2013/05/17(金) 22:11:48.52 ID:???.net
- >>428
ごめん初心者スレと勘違いした、>>2に何もないな
初心者スレのテンプレの基礎サイト観てきた方がいい
- 431 ：Name_Not_Found：2013/05/18(土) 15:02:57.88 ID:???.net
- CSSファイルで
h2.hdh2 {
font-size: 12px;
color: red;
}
とやって、HTMLで
<h2 class="hdh2">１．おはよう</h2>
とやってるのに、どうしても反映されません。
いくら調べても分からず助けてください。
ディベロッパーツールで見ても「hdh2」が出て来ません。
- 432 ：Name_Not_Found：2013/05/18(土) 15:10:30.81 ID:???.net
- cssファイルが読み込まれてない可能性は？
- 433 ：Name_Not_Found：2013/05/18(土) 15:14:36.40 ID:???.net
- >>432
他の部分で試してみましたが
ちゃんと反映されるんです。
クラス名に問題があるかとも思ったんですが、
頭がアルファベットだから多分問題ないです。
ちなみにワードプレスです。
- 434 ：Name_Not_Found：2013/05/18(土) 15:27:35.77 ID:???.net
- > 「hdh2」が出て来ません
デベロッパツールではスタイルが上書きされると取消線がつくことが多いけど、取消線すらなくてそもそも hdh2 が認識されてないということでおｋ？
cssの文法チェックしてみた？
- 435 ：Name_Not_Found：2013/05/18(土) 15:59:37.05 ID:???.net
- >>434
デベロッパツールでは全く認識されてない状況です。
文法チェックはまだしてなかったので、これからやってみます。
ありがとうございます。
- 436 ：Name_Not_Found：2013/05/18(土) 16:19:52.38 ID:???.net
- >>434
解決しました！大感謝です。
貴レスを拝見後、早速、「CSS Validation Service」（http://jigsaw.w3.org/css-validator/）
というCSSのチェックサイトでチェックしたら該当箇所について調べてみましたら次のような表示が出ました。
文法解析エラーが発生しました
[:120%; /*a??a??new-css1-enda??a??*/ /*a? a? a? a? new-css2-starta? a? a? a? */ .hdh2]
なんだろうと思ってCSSファイルをよく見てみると、次のような並びにしてありました。
・・・
/*◆◆new-css1-end◆◆*/
/*■■■■new-css2-start■■■■*/
.hdh2 {
font-size: 12px;
color: #ff0000;
}
・・・
コメントアウトがコメントアウトになっていなかったのかなと思い、「.hdh2」の記述をもっと後ろの方にう移しましたら反映されるようになりました。
ワードプレスのテンプレートCSSへの追加分を上記のコメントで区切っていたんですが、それがどうやら悪かったようです。（何が悪いのかはよくわかりませんが…。）
とにかくやっとスッキリしました。アドバイス有難うございました。
- 437 ：436：2013/05/18(土) 16:35:48.50 ID:???.net
- 追記
真の原因が分かりました。
メイリオのデフォルトの行間の広さをなんとかしようとして記述した、
クラス名もID名も｛｝もない
「 line-height:120%; 」という記述が問題でした。
コメント自体にも、「全角文字で*/の前に半角スペースを入れない」という問題があったと思いますが、
真の原因は単なる「 line-height:120%; 」という記述。
ネットで調べて真似してやってみたんですが、
やはり何かまずかったようです。
今は削除して、なんとか希望通りに表示がされるようになりました。
どうもお騒がせでした。
- 438 ：Name_Not_Found：2013/05/18(土) 17:52:01.65 ID:???.net
- 全角文字の前になんだって？
聞いたことないな
- 439 ：Name_Not_Found：2013/05/18(土) 18:24:31.75 ID:???.net
- >>438
コメントが全角文字の場合は、
終了タグの「*/」の前に半角スペースが必要らしいです。
- 440 ：Name_Not_Found：2013/05/20(月) 19:27:02.51 ID:???.net
- ttp://blog.esuteru.com
ttp://blog.esuteru.com/archives/7126615.html
はちま起稿さんというホームページの
左側の部分は左側の部分のスクロールが最後まで行くとそれ以降、下に行かずに止まって表示し続けてくれています
このような表示はどのようなものを使えばできるでしょうか？
- 441 ：Name_Not_Found：2013/05/21(火) 06:04:15.56 ID:???.net
- 好奇心としての質問です
div#hoge{} と div[id="hoge"]{} の違いは何でしょうか？
CSSの知識は十年ぐらい前に軽く触った程度です
- 442 ：Name_Not_Found：2013/05/21(火) 06:25:24.85 ID:???.net
- 後者はIE6非対応
- 443 ：Name_Not_Found：2013/05/21(火) 20:52:23.25 ID:???.net
- >>440
ソース見れ
- 444 ：Name_Not_Found：2013/05/24(金) 22:44:47.15 ID:???.net
- テスト
- 445 ：Name_Not_Found：2013/05/28(火) 20:17:53.91 ID:???.net
- bodyのバックグラウンドにグラデーション指定したとき
コンテンツ高さよりブラウザの表示領域が縦に長い場合に
グラデーションが繰り返しになってしまうのを回避する方法ってないでしょうか？
範囲外は終端の色ふらっとにしたい
<html><head><style>
body{ background:linear-gradient(to bottom,#000,#fff);}
div{ height:100px;}
</style></head><body><div></div></body></html>
- 446 ：Name_Not_Found：2013/05/28(火) 20:38:39.08 ID:???.net
- >>445
背景色設定して繰り返しは縦だか横だかだけにすればいい
- 447 ：Name_Not_Found：2013/05/28(火) 20:56:18.57 ID:???.net
- >>446
トン
background: #f80 linear-gradient(to bottom,#f00,#f80) no-repeat;
でうまくいった
background-color: #f80;
background: linear-gradient(to bottom,#f00,#f80);
background-repeat:no-repeat;
って別々に指定するとダメなのね
- 448 ：Name_Not_Found：2013/05/28(火) 21:03:24.83 ID:???.net
- >>447
backgroundは、background-*をまとめて指定するショートハンドプロパティだから、
省略した部分はデフォルトに再設定されちゃう。
下のように書きたいなら、
background-image: linear-gradient(...);
ってしないと。
- 449 ：Name_Not_Found：2013/05/29(水) 18:46:52.84 ID:???.net
- なるほど、linear-gradientはimage扱いなのか
- 450 ：Name_Not_Found：2013/05/31(金) 10:36:56.34 ID:???.net
- html
<a href="http://xxxx">価格：230円<div class="percentoff">22.2%OFF</div></a>
<a href="http://xxxx">価格：500円<div class="percentoff">32.2%OFF</div></a>
css
.percentoff{
color:#ff0000;
display: inline;
display: inline-block;
font-size:130%;
}
CSSで
aタグの中の文字230円22.2%OFFの22.2%OFFの部分だけを赤文字にしたいと思っております
230円と22.2%OFFの間は自動的に改行されないようしたいです
aタグの中にdivを入れてはいけないと書いてあるのですが
リンクの一部の文字を変更するCSSの正しい書き方を教えていただけないでしょうか
よろしくお願い致します
- 451 ：Name_Not_Found：2013/05/31(金) 10:50:41.35 ID:???.net
- >>450
span じゃ駄目なの？
- 452 ：Name_Not_Found：2013/05/31(金) 11:51:52.49 ID:???.net
- >>451
spqnで全く問題ないようです
ありがとうございます
- 453 ：Name_Not_Found：2013/05/31(金) 22:46:16.56 ID:???.net
- なに ｽﾌﾟｸﾝ ?
- 454 ：Name_Not_Found：2013/05/31(金) 22:47:47.65 ID:???.net
- >>450
つーかリストにしろｗ
- 455 ：Name_Not_Found：2013/06/03(月) 00:22:18.96 ID:???.net
- liで十個程のリストを作りスクロールで見れるようにしたい
ボックスからあふれた y軸方向にはスクロール、X軸方向は非表示にすしようと思って
overflow:hidden;にするとy軸方向、X軸方向ともに消えてしまい
overflow-y:scroll;overflow-x:hidden;としてみたのですがうまく実現できないでいます
やりかたを教えてください。お願いします
- 456 ：Name_Not_Found：2013/06/03(月) 00:32:55.84 ID:???.net
- >>455
ブラウザの環境は？
うまく実現できないってのを具体的にね
- 457 ：Name_Not_Found：2013/06/03(月) 07:20:23.59 ID:???.net
- >>456
IE7,IE8,IE9,safari6,firefox21で表示させてみました。結果は全て同じで
overflow-y:scroll;overflow-x:hidden;とすると
縦Y軸のスクロールは表示されるのですが 横のX軸は折り返してしまい
ウィンドウを小さくすると 何行も使用してしまいます
１個のliに１行 横にはみ出したのは折り返さず非表示にしたいと思っております
HTML
<ul class="scr">
<li>スクロール（英: Scrolling）は、コンピュータグラフィックスやテレビで、テキスト・絵・画像など画面に収まりきらないコンテンツを水平または垂直にスライドさせて表示する手法。</li>
<li>普通のテキストは基本的に1次元であり、2次元構造を持たない。従って上から順に読んでいくとき（横書きの場合）、水平方向のスクロールが必要な状況では行ごとに左右にスクロールさせる必要</li>
</ul>
CSS
.scr {overflow-y:scroll;overflow-x:hidden;height: 100px;}
- 458 ：Name_Not_Found：2013/06/03(月) 11:56:57.33 ID:???.net
- >>457
white-space: nowrap;
- 459 ：Name_Not_Found：2013/06/03(月) 20:15:40.05 ID:???.net
- >>458
ありがとうございます
やりたい事ができました！
- 460 ：Name_Not_Found：2013/06/05(水) 23:54:31.39 ID:???.net
- html4で書いたページでcss3のアニメーションは動きますか？
- 461 ：Name_Not_Found：2013/06/06(木) 11:49:04.12 ID:???.net
- うごきますん
- 462 ：Name_Not_Found：2013/06/09(日) 00:15:28.29 ID:???.net
- width:～px; margin:0 auto;
でセンタリングしたdivの子input type="button"をセンタリングするにはどうしたらいいのでしょう
おなじくmargin autoでは相殺？されてなのかセンタリングされません
- 463 ：Name_Not_Found：2013/06/09(日) 01:05:09.59 ID:???.net
- >>462
ボタンがそれだけなら
divの方にtext-align:center;を設定する。
- 464 ：Name_Not_Found：2013/06/09(日) 01:19:41.93 ID:???.net
- >>462
ブロック要素とインライン要素（HTML5では厳密には違うけど）
の分類について勉強したほうがいい
- 465 ：Name_Not_Found：2013/06/09(日) 01:26:48.07 ID:???.net
- >>463
それだけじゃないので、ボタンだけセンタリングしたいのです
- 466 ：Name_Not_Found：2013/06/09(日) 01:38:03.84 ID:???.net
- できますん
- 467 ：Name_Not_Found：2013/06/09(日) 01:43:14.68 ID:???.net
- すみません>>463-464のヒントいただいて解決しました
inputだけをさらにdivまたはformで囲んでmargin auto、text-align:centerでいけますね
こんな質問に答えていただきありがとうございました
- 468 ：Name_Not_Found：2013/06/13(木) 15:35:43.37 ID:ceYpLJF/.net
- html4 loose.dtd + css2
<span style="float: left">aaa</span>
<span style="float: right">bbb</span>
<table style="width: 100%;clear: both">
中略
</table>
と同じような見た目を、テーブルのcaptionにaaaを指定した状態で再現したいのですが、
bbbのcssに何を指定すれば良いでしょうか。
<span style="">bbb</span>
<table style="width: 100%">
<caption style="text-align: left">aaa</caption>
中略
</table>
- 469 ：Name_Not_Found：2013/06/27(木) 00:57:55.88 ID:???.net
- すいません、下記サイトのプルダウンメニューを楽天RMS内で使おうと思ったのですが、
http://ash.jp/web/css/pulldown.htm
win IE（8）でのみ動作しませんでした。
おかしいと思ってしらみつぶしに調べてみたのですが、
楽天RMSではDOCTYPE宣言がないことが原因ということがわかったとこで力尽きました。
先輩方に質問なのですが、
DOCTYPE宣言なしにまたjavascriptなどを使わずに上記プルダウンメニューを動かすには、
どこを変更すればよいのでしょうか。
よろしくおねがいします
- 470 ：Name_Not_Found：2013/06/27(木) 01:23:17.74 ID:???.net
- 無理
- 471 ：Name_Not_Found：2013/06/28(金) 07:27:37.71 ID:???.net
- どもです、初心者です。
<div class%3d"navi">
<ul>
<li>あああ</li>
</ul>
に対して
.navi ul{
}
という風にクラス内の要素にcssをかけていたのですができなかったため数時間がんばってた後に
書き方の間違いに気が付きました、、、。
ul.navi{
}
が正しいのですね。。。
これに続いて
クラスの中の<ul>の中の<li>にcssを書けたい場合は
ul.navi li{
}
でよろしいのでしょうか？
- 472 ：Name_Not_Found：2013/06/28(金) 08:46:24.75 ID:???.net
- すみません 上記の件 自己解決しました。
バカでした、、
- 473 ：Name_Not_Found：2013/07/01(月) NY:AN:NY.AN ID:VOFF/gb6.net
- テーブルの先頭の列だけをセレクトしたい場合
#テーブルID tr+td {
}
ではダメなんですか？
- 474 ：Name_Not_Found：2013/07/01(月) NY:AN:NY.AN ID:???.net
- はい
- 475 ：Name_Not_Found：2013/07/01(月) NY:AN:NY.AN ID:???.net
- colgroup使ったら
- 476 ：Name_Not_Found：2013/07/04(木) NY:AN:NY.AN ID:???.net
- cssの設定でリンクを「新しいタブで開く」にできる？
出来れば開いても開いた方に画面が移動しないようにしたいんだ
- 477 ：Name_Not_Found：2013/07/04(木) NY:AN:NY.AN ID:???.net
- できない
そういうのはCSSの仕事じゃない
- 478 ：Name_Not_Found：2013/07/04(木) NY:AN:NY.AN ID:???.net
- そんなスパムサイトには行きたくない
- 479 ：Name_Not_Found：2013/07/04(木) NY:AN:NY.AN ID:???.net
- う～ん
分かったありがとう
- 480 ：Name_Not_Found：2013/07/06(土) NY:AN:NY.AN ID:???.net
- target＝"_branko"でおっけー
- 481 ：Name_Not_Found：2013/07/06(土) NY:AN:NY.AN ID:???.net
- <label>ラノベ</label>
<h1>見出し</h1>
という記述で、labelを左寄せしつつ改行して、次のh1を表示したいんですが、
label {
float: left;
width:300px;
display: block;
}
だと、左寄せはできるものの改行ができません。
追加で
label:after {
contents: "";
display: block;
clear:both;
}
を入れてみても同様です。
labelをdivで囲んでtext-align:leftするとか、br付けるとかあるんでしょうけど、
label単体で左寄せと改行する方法ありませんか？
- 482 ：Name_Not_Found：2013/07/07(日) NY:AN:NY.AN ID:???.net
- >>481
ちょっと待て
そこにlabelが出てくる時点で構造間違ってる悪寒しかしないのだが
- 483 ：Name_Not_Found：2013/07/07(日) NY:AN:NY.AN ID:???.net
- 見掛けだけならlabelをdisplay:blockすればいいだけだが
h1の前にlabelって絶対使い方間違えてると思う
- 484 ：481：2013/07/07(日) NY:AN:NY.AN ID:???.net
- >>482-483
ありがとうございます。
labelの主たる目的はフォーム要素と対で使いたいんですけど、
label単体での改行とかどうするのかなと思った次第で。。。
- 485 ：Name_Not_Found：2013/07/07(日) NY:AN:NY.AN ID:???.net
- >>484
formの中って基本ブロック要素の下に部品を置かなきゃならないから
別にラベルもpやddの中に入れていいんだよ？
- 486 ：Name_Not_Found：2013/07/07(日) NY:AN:NY.AN ID:???.net
- >>485
なるほど、ありがとうございます。
さっそくpやdivなどブロック要素内に入れることにしました。
無理に単体で使う必要も無いんですね。
- 487 ：Name_Not_Found：2013/07/07(日) NY:AN:NY.AN ID:???.net
- >>486
strict勉強するといいよ
- 488 ：Name_Not_Found：2013/07/08(月) NY:AN:NY.AN ID:???.net
- >>487
ぐぐってみましたら厳密型、厳格仕様ってことなんですね。
我流だといろいろ危なさそうなので、基礎勉強してみます。
アドバイスありがとうございます。
- 489 ：Name_Not_Found：2013/07/09(火) NY:AN:NY.AN ID:Guxsqwz6.net
- name属性に対してcssって適用できます？
- 490 ：Name_Not_Found：2013/07/10(水) NY:AN:NY.AN ID:???.net
- できますお
- 491 ：Name_Not_Found：2013/07/13(土) NY:AN:NY.AN ID:FIOICza+.net
- 質問させて下さい
background: url(.画像指定);
background-repeat:no-repeat;
テキストの位置を指定したのですが、どのようにかけばいいのでしょうか？
- 492 ：Name_Not_Found：2013/07/13(土) NY:AN:NY.AN ID:???.net
- どこに"テキスト"が有るのかね ?
- 493 ：Name_Not_Found：2013/07/14(日) NY:AN:NY.AN ID:???.net
- 馬鹿だろ
- 494 ：Name_Not_Found：2013/07/25(木) NY:AN:NY.AN ID:???.net
- jquery.wookmarkを使ったページで
bootstrapのドロップダウンやタブを使うと表示がズレてしまう
解決法はありますか?
- 495 ：Name_Not_Found：2013/07/27(土) NY:AN:NY.AN ID:0H8ypC5Z.net
- 質問させていただきます。
リサイズ可能なウインドウを使い、ユーザによるウインドウリサイズを許容しております。
そして画面レイアウトは次のようになっており、
高さ可変エリアはウインドウのリサイズ時にウインドウの高さに合う高さに連動するようにしたいです。
┌──────────────────────────┐
│ ┌──────────────────────┐ │
│ │ │▽│ │
│ │ 高さ固定エリア │ │ │
│ │ │△│ │
│ └──────────────────────┘ │
│ ┌──────────────────────┐ │
│ │ │▽│ │
│ │ 高さ可変エリア │ │ │
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
│ │ │△│ │
│ └──────────────────────┘ │
└──────────────────────────┘
これをCSSで実現するにはどのように書いたらいいのでしょうか。
CSSで無理ならJavaScriptでも構いません。
高さ可変エリアにも高さ固定エリアにも垂直スクロールバーを付けたいです。
よろしくお願いいたします。
- 496 ：Name_Not_Found：2013/07/27(土) NY:AN:NY.AN ID:???.net
- わろた
- 497 ：Name_Not_Found：2013/07/27(土) NY:AN:NY.AN ID:???.net
- ww
- 498 ：495：2013/07/27(土) NY:AN:NY.AN ID:0H8ypC5Z.net
- Chromeだとこれで動きましたけど、問題はWindows7のIE8で動くかどうか。。。
<html>
<head>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).on('resize', function () {
$('#div1').css('height', '60px');
for (var i = 0; i != 10; i++)
$('#div2').css('height', $(document).height() - 110 + 'px');
});
</script>
</head>
<body style="height: 100%; overflow: hidden;">
<div id="div1" style="overflow-y: scroll;">
あああ<br />
<input type="text" /><br /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br />
</div>
<br />
<div id="div2" style="overflow-y: scroll;">
あああ<br />
<input type="text" /><br /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br />
<input type="text" /><br /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br />
<input type="text" /><br /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br />
<input type="text" /><br /><input type="text" /><br /><input type="text" /><br /><input type="text" /><br />
</div>
</body>
</html>
- 499 ：Name_Not_Found：2013/07/28(日) NY:AN:NY.AN ID:2v4iwk0h.net
- >>498
for文の中、
$(window).height() - ...
じゃないですかね？
- 500 ：Name_Not_Found：2013/07/28(日) NY:AN:NY.AN ID:NkfCUgty.net
- >>499
windowにしたらループする必要がなくなりました！
Chromeではonresizeイベントだけハンドリングすればいいみたいですが、
IE10のIE8モードで動作確認したところonloadイベントもハンドリングする必要があるようです。
ありがとうございました。
- 501 ：Name_Not_Found：2013/07/30(火) NY:AN:NY.AN ID:0ZbRqFic.net
- ヘッダー、サイドバー左、メイン、サイドバー右、フッターの
3カラムレイアウトのホームページを作成しているのですが、
フッターがサイドバーの下に行ってしまい、メインの下に空白ができてしまいます。
図にするとこうです↓
Before
http://i.imgur.com/mIQYpMW.jpg
After
http://i.imgur.com/EeRDG5W.jpg
Afterのようにしたいのですが、どうしたらいいでしょうか？
ヘッダーとフッター以外はcontainerで囲っています。
両サイドバーとメインのボックスのようなものができてしまい、フッターが下にいっているんだと思うのですが、
floatの原理がイマイチ理解できていなくて困っています･･･。
- 502 ：Name_Not_Found：2013/08/01(木) NY:AN:NY.AN ID:yVF34ysC.net
- 質問
<div id="buttonBox">
<input type="button" value="left" id="buttonLeft">
<input type="button" value="right" id="buttonRight">
</div>
この両者のボタンをbuttonBoxのサイズにあわせてbuttonLeftとbuttonRightのwidthを常に同じに且つ左右一杯に広げたいです。
buttonBoxのサイズを決めれば、それを2で割った値にしてやればいいと思うのですが、
ボーダーサイズであったりブラウザによる違いであったりCSSの仕様が酷いのでそれはあまりしたくありません
- 503 ：Name_Not_Found：2013/08/01(木) NY:AN:NY.AN ID:???.net
- >>502
width:50%;
- 504 ：Name_Not_Found：2013/08/01(木) NY:AN:NY.AN ID:rCspCHaJ.net
- <div id="wrapper">を複数のページで使っていて、別ファイルの1枚のCSSでdiv#wrapperとして設定しているのですが、
1ページの<div id="wrapper">にだけbackground-image:url("aaa.jpg");を入れたいと思い、
<div id="wrapper" style="background-image:url("aaa.jpg");">としましたが反映されません。
別ファイルのCSSファイルのdiv#wrapperにbackground-image:url("aaa.jpg");を記述すると反映されるのですが、
タグの中にstyleを使って記述するとうまくいきません。
どこが間違っているのでしょうか？分かるかたいましたらよろしくお願いします。
- 505 ：Name_Not_Found：2013/08/01(木) NY:AN:NY.AN ID:jkQMjz6H.net
- >>504
まさかとは思うが、"と'を使い分けてないとかじゃないよな？
どちらにしよ、style属性は非推奨なので、そのページのbodyにidつけて
#special-page #wrapper{ ... }
みたいにするとか、そのページだけ wrapper じゃなくて別のIDつけるとかしたほうがいいよ
- 506 ：Name_Not_Found：2013/08/02(金) NY:AN:NY.AN ID:???.net
- クラス使えよクラス
- 507 ：Name_Not_Found：2013/08/02(金) NY:AN:NY.AN ID:???.net
- >>506
クラスって何ですか？
- 508 ：Name_Not_Found：2013/08/02(金) NY:AN:NY.AN ID:AnYv5ctr.net
- CSS3の質問なんですが
http://www.rwe-uk.com/static/ichat_with_css3/speech_bubbles.html
上記のStyle 3～Style 6までがSafari、Chromeは正しく表示してるのですが
Firefoxでは正しく表示しません
border-imageあたりが問題なのは分かるんですが
どういう風に修正すればわかりません・・・
border-width: 8px 10px 8px 17px;
border-image: url(speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
-webkit-border-image: url(speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
-moz-border-image: url("speech_bubble_left_2.png") 8 10 8 17 stretch stretch;
-o-border-image: url(speech_bubble_left_2.png) 8 10 8 17 stretch stretch;
上記のファイルは
http://www.rwe-uk.com/images/uploads//speech_bubbles.zip
からダウンロード出来ます。
よろしくお願い致します
- 509 ：Name_Not_Found：2013/08/07(水) NY:AN:NY.AN ID:kSkr2MR5.net
- javascriptで計算した結果をtableの中に表示しているのですが、
数字の幅に対してtdの幅を多めに取っていて、余裕がある状態でも
数字の桁が1つ増えて幅が少し延びると微妙に(1pxくらい)tdの幅が変わってしまいます。
これはしょうがないのでしょうか？
- 510 ：Name_Not_Found：2013/08/07(水) NY:AN:NY.AN ID:???.net
- すいません
INPUT要素のVALUE属性をCSSから指定したいんですけど
どうしたらよろしいのでしょうか？
- 511 ：Name_Not_Found：2013/08/07(水) NY:AN:NY.AN ID:???.net
- 属性いじりはCSSの仕事じゃありません
JavaScriptとかでやってください
- 512 ：Name_Not_Found：2013/08/07(水) NY:AN:NY.AN ID:???.net
- おおなるほど、レスありがとうございました！
- 513 ：Name_Not_Found：2013/08/12(月) NY:AN:NY.AN ID:???.net
- 属性セレクタは^*$の条件指定はできるけども
排除指定ができないのがダメダメなんだよな
- 514 ：Name_Not_Found：2013/08/12(月) NY:AN:NY.AN ID:???.net
- :not じゃだめなの？
- 515 ：Name_Not_Found：2013/08/16(金) NY:AN:NY.AN ID:IzAAJSLk.net
- css3でmedia queriesを使って、Full HDの解像度のスマートフォンに対応させたいのですが
device-widthが1080pxもあるということで、PC用の条件とかぶってしまいます
そこでdevice-widthが1025pxから1279pxまでかつportlaitということにしても
これだとFull HDのPCディスプレイを縦にして使ってる人(少数だと思いますが)も含まれてしまいます
つまりFull HDのスマートフォンは、Full HDのPCディスプレイを縦にしてる人と同じ条件なのでかぶってしまうということです
- 516 ：Name_Not_Found：2013/08/16(金) NY:AN:NY.AN ID:???.net
- >>515
それって解像度（１画素の大きさ）の方が問題ではないの？
仮にスマホのディスプレイがPCディスプレイと物理的に同じ大きさ
だとするなら対応する必要ないわけで
- 517 ：Name_Not_Found：2013/08/16(金) NY:AN:NY.AN ID:???.net
- 質問でござる
ユニバーサルセレクタをつかった昔の一括リセットや、リセットcssについてなんですが、
「padding : 0;」がそこには書いてあります
margin ならともかく、最初から padding がある要素なんてあるのでしょうか？
仕様書には見当たりませんでした。ので、あるとすればブラウザが独自に加えているんだと思いますが、
ご存知でしたらお教えください
- 518 ：Name_Not_Found：2013/08/16(金) NY:AN:NY.AN ID:???.net
- リストがそうでござったすみませぬ
- 519 ：Name_Not_Found：2013/08/16(金) NY:AN:NY.AN ID:???.net
- >>517
ttp://www.iecss.com/
それぞれブラウザによってそこらへん好きに設定してるから
- 520 ：Name_Not_Found：2013/08/18(日) NY:AN:NY.AN ID:rnw1Uzky.net
- >>516
キミが言いたいのはドットピッチのことだよね
で、だからそれが違って同じレイアウトだと見づらくなるから質問しているんだけど？ｗ
頭悪いのは回答しなくていいよｗｗ
あと、～なわけで・・・←これ気持ち悪いだけだから使うのやめとけよｗｗｗ
- 521 ：Name_Not_Found：2013/08/18(日) NY:AN:NY.AN ID:???.net
- おまいも頭悪いから解らなくて質問してんじゃね ?
- 522 ：Name_Not_Found：2013/08/20(火) NY:AN:NY.AN ID:???.net
- 頭悪い奴が、頭悪い奴の回答なんて求めないだろ・・・・・・ほんと頭悪いな
- 523 ：Name_Not_Found：2013/08/21(水) NY:AN:NY.AN ID:7j69Mlm2.net
- border-radiusを使って角を丸くした<div id="box">のサイズを例えば600x400にして、
その中に同じサイズ（600x400）の画像を入れようとすると、隙間が出来てしまうのですが
これはしょうがないのでしょうか？
また、これを解消するにはどうすればいいのでしょうか？
- 524 ：Name_Not_Found：2013/08/21(水) NY:AN:NY.AN ID:Lh/NnTSO.net
- >>523
どこの隙間かわからんがとりあえず
vertical-align:bottom;
- 525 ：Name_Not_Found：2013/08/22(木) NY:AN:NY.AN ID:???.net
- コード晒せ
- 526 ：Name_Not_Found：2013/08/22(木) NY:AN:NY.AN ID:???.net
- >>515
これで対応出来ないっすかね。
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { }
試してないので出来なくても怒らないでね。
- 527 ：Name_Not_Found：2013/08/22(木) NY:AN:NY.AN ID:???.net
- >>523
いまいちイメージできないんだけど、
要素の角は丸まっているのに画像の角は丸まっていなくて、画像の角だけはみ出している状態ってこと？
もしそうなら
HTML
<span class="クラス（ID）名" style="background: url(画像の場所); width: 横幅px; height:高さpx;">
<img src="画像の場所" style="opacity: 0;">
</span>
CSS
クラス（ID）名 {
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
こんな感じで背景に画像を指定すれば角丸適用されると思う。
- 528 ：Name_Not_Found：2013/08/28(水) NY:AN:NY.AN ID:???.net
- ふぁっきゅーぼーだーれいでぃあす
- 529 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:SX6ZnRwe.net
- <li><input id='a' type='checkbox' /><label for='a'>aaa</label></li>
labelをクリックでチェックボックスがチェックされるのですがcssでlabelの範囲をli全体にすることは
できるでしょうか？
- 530 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???.net
- それはCSSちゃうで、htmlや。
- 531 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:Z7RGKms4.net
- CSSって難しいなって思ってここいま見つけて１から読んでる途中だが
俺より馬鹿がいっぱいいて安心したw
CSSの勉強したい人はソシムから出てる「HTML/XHTML&スタイルシートレッスンブック」「HTML/XHTML&スタイルシートデザインブック」が分りやすいですよ
今までhtml 4.01しか知らなくてもxhtml 1.0は殆ど変わらないのでとまどわなかった。
ただいままで勉強してた本にはスタイルシートは外部リンクで書いてたので埋め込み式に最初とまどったが、勉強する初期にはこの方式の方が分りやすい。
それと今回勉強するにあたって高かったけどドリームウィーバーより安いからいいやと思って思い切ってCoda2入れたらこれが大正解
htmlもCSSも書き換えると分割画面にリアルタイムで表示が変わるのでどこに影響するのかが一目瞭然
いままではコットエディターで書いて一旦保存して、ブラウザで確かめてって面倒だった
- 532 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:H939ZMqA.net
- >>529
CSSで本質的にインライン要素をブロック要素に変えることはできない
- 533 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???.net
- >>531
チラ裏にどうぞ
スレチ
- 534 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:SX6ZnRwe.net
- >>530
>>532
解答ありがとうございました。
display,position,padding,top,left,width,heightを設定して
一応実現できました。
- 535 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???.net
- なんねーよｗｗｗ
- 536 ：Name_Not_Found：2013/08/29(木) NY:AN:NY.AN ID:???.net
- >>531
馬鹿過ぎてﾜﾛﾀw
- 537 ：Name_Not_Found：2013/08/30(金) NY:AN:NY.AN ID:???.net
- ここで聞いていいのかわからないけど
>dpi 1インチは2.54cmなので、1dpi≒2.54dpcmです。
>dpcm 1インチは2.54cmなので、1dpcm≒0.39dpiです。
http://www.atmarkit.co.jp/ait/articles/1308/29/news004_2.html
この説明というか換算式が逆に思えて仕方がない。自分が間違ってるのは分かってるんだけど正解に辿りつけない…。
1dpi ≒ 1dp2.54cm ≒ 0.39dpcm になってしまう。
- 538 ：Name_Not_Found：2013/08/30(金) NY:AN:NY.AN ID:???.net
- うん、ここで聞くことじゃないかな…
- 539 ：Name_Not_Found：2013/08/30(金) NY:AN:NY.AN ID:???.net
- ここで聞いていいのかわからないけど
>dpi 1インチは2.54cmなので、1dpi≒2.54dpcmです。
>dpcm 1インチは2.54cmなので、1dpcm≒0.39dpiです。
http://www.atmarkit.co.jp/ait/articles/1308/29/news004_2.html
この説明というか換算式が逆に思えて仕方がない。自分が間違ってるのは分かってるんだけど正解に辿りつけない…。
1dpi ≒ 1dp2.54cm ≒ 0.39dpcm になってしまう。
- 540 ：537：2013/08/31(土) NY:AN:NY.AN ID:???.net
- レスついてる、と思って見たら539…。
自分で書き込んだ記憶は無いんですが、
とりあえずここで聞くことじゃなかったですね、すみませんでした。
- 541 ：Name_Not_Found：2013/09/06(金) 15:32:12.56 ID:???.net
- :visited の機能を本当の意味で無効化する方法って無いですか？
つまり CSS で :link を一切設定しないまま
:visited のスタイルをブラウザのデフォルトの :link のスタイルと
同じにしたいのです
- 542 ：Name_Not_Found：2013/09/06(金) 15:36:07.07 ID:???.net
- CSSで機能を無効化することは無理
見掛けだけでもブラウザの:link設定を引っ張ってくるのは無理
- 543 ：Name_Not_Found：2013/09/06(金) 17:41:10.65 ID:???.net
- >>541
同じ設定を二度も書くのが美しくないのはわかるが、
「本当の意味で無効化」と「デフォルトの :link のスタイルと同じにしたい」は等価じゃないし、
:visitedが:linkを継承するというルールも存在しない。
今のところSassなどを利用するのが一番綺麗にcssを書ける。
- 544 ：Name_Not_Found：2013/09/06(金) 17:42:43.31 ID:???.net
- >>543
いやその二つは同じ表示にしたいだけなら二度書く必要なんかないぞ…
そういう意味で言ってるんじゃないと思く、ブラウザのスタイルを取得したいってことだろう
- 545 ：Name_Not_Found：2013/09/06(金) 18:07:17.04 ID:???.net
- :visitedと:activeが意外と使えることが分かった。
悪いことをちょっとな。
- 546 ：Name_Not_Found：2013/09/06(金) 19:41:53.20 ID:???.net
- >>541
>>544みたいなことがやりたいならJSだね
- 547 ：Name_Not_Found：2013/09/06(金) 22:29:56.50 ID:???.net
- >541です
>>544
はい、その意味です
あたかも :visited の機能がブラウザに存在しないかのように
ふるまわせたかったんですが
今の所CSSだけではどうも無理なのかな
皆様コメントありがとうございました
- 548 ：Name_Not_Found：2013/09/08(日) 11:52:50.09 ID:???.net
- 幅460px、高さ120pxのボックス（paddingとborderも含め）を作り、中のコンテンツをすべて左詰めにしたいのですが、floatについて不明点があります。
下のソースについて、h2にfloatをかければ後に続く要素もすべて自動で回り込んでくるかと思ったのですが、実際の表示はこんな感じになっています。
http://i.imgur.com/J4dEG5g.jpg
class="photo"にもfloatをかければ左寄せになるのですが・・・。
http://i.imgur.com/XgsDLXt.jpg
しかし、h2にのみfloatをかけても後続要素が回り込んで来ない原因はなんでしょうか？
floatで浮動化した要素の後に続く要素は幅が許す限り自動で回り込んでくるという認識だったのですが、認識自体が間違ってるんでしょうか？
よろしくお願いします。
<body>
<div id="sample" class="clearfix">
<h2>sample</h2>
<div class="photo">
<a href="#"><img src="sampl.gif" width="100" height="100" alt="sample" /></a>
</div>
<div class="photo">
<a href="#"><img src="sampl.gif" width="100" height="100" alt="sample" /></a>
</div>
<div class="photo default">
<a href="#"><img src="sampl.gif" width="100" height="100" alt="sample" /></a>
</div>
</div><!-- /sample -->
</body>
- 549 ：Name_Not_Found：2013/09/08(日) 11:54:58.51 ID:???.net
- >>548
*******CSS部分*******
img {
vertical-align: bottom;
}
#sample {
width: 440px;
padding: 9px;
border: 1px solid #000;
}
#sample h2 {
height: 100px;
width: 110px;
margin-right: 10px;
float: left;
}
.photo {
width: 100px;
margin-right: 10px;
}
.default {
margin: 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}
- 550 ：Name_Not_Found：2013/09/08(日) 15:23:46.25 ID:???.net
- >>548
回り込みはfloat同士でしか起こらない。
- 551 ：Name_Not_Found：2013/09/08(日) 16:58:36.40 ID:???.net
- １と２をくくっちゃう
「photo1にfloat: left、photo2にfloat: right」これにclass名付けて括っちゃってfloat: left
photo3にfloat: right
だからじゃんじゃんfloatでくくって行くしかないよね
photoが４つあったら
１と２をそれぞれ右と左に指定して
その１と２をまとめて左に指定して
３と４をそれぞれ右と左に指定して
３と４をまとめて右に指定すれば横並びに１、２、３、４って出来る
- 552 ：Name_Not_Found：2013/09/10(火) 07:24:46.38 ID:???.net
- >>550-551
解釈自体が根本的に間違っていたんですね。ありがとうございます。
こういう記事も見つかりました。
http://weeeeb.mobify.me/technique/css_float_kouryaku
- 553 ：Name_Not_Found：2013/09/13(金) 18:05:14.82 ID:???.net
- 質問
ネットでダウンロードしてきたフォントを使ってみようとしたのですが
ぐぐってみたやりかたを真似したつもりですが上手くいきません。
ひょっとしてパスか何かが間違ってるのかと、<head>の中に書いてみたのですがそれでもだめです。
落としてきたttfファイルをFTPでサーバー側に上げるだけじゃだめなんでしょうか。
属性を変えるとかのような、なにかやるべき必須のことがありますか？
同じディレクトリの中にttfとhtmlをおいてあります。
以下、htmlをまるごとコピペします。
<html>
<head>
<style type="text/css">
<!--
@font-face {
font-family: 'Test';
src: url("test.ttf");
}
.font {
font-family:'Test';
font-size:300%;
}
-->
</style>
</head>
<body>
<div class="font">てすと</span>
</body></html>
- 554 ：Name_Not_Found：2013/09/13(金) 18:13:51.53 ID:???.net
- >>553
この辺を見てみることをオヌヌメ
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face
- 555 ：Name_Not_Found：2013/09/13(金) 18:33:01.80 ID:???.net
- >>554
ありがとうーーーーー！！
元のとどこが書き換わったのかよく分からないけどw
そのサイトからコピペしてみたら、何故か上手くいきました！
- 556 ：Name_Not_Found：2013/09/13(金) 18:34:01.92 ID:???.net
- シングルコーテーションがあかんかったんかな？？？
- 557 ：Name_Not_Found：2013/09/14(土) 22:26:09.39 ID:7F2UPUEk.net
- 質問です。
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
このような4段のボックスがあって、
#container { width : 850px ; }
#header { }
#navigation {border-bottom: 1px solid #000000;}
#main { }
#footer { }
上記のnavigation欄のボトムのラインを親要素の850pxを無視してブラウザの横一杯まで横線を引きたいです。
ブラウザの横スクロールバーを出さずに1ピクセルの横線が引ければborder-bottomに拘りません。
よろしくお願いします。
- 558 ：Name_Not_Found：2013/09/14(土) 22:29:50.20 ID:???.net
- >>557
containerに幅を設定せず
header、navigation、main、footerに幅を設定する
- 559 ：Name_Not_Found：2013/09/14(土) 23:05:34.91 ID:7F2UPUEk.net
- >>558
ありがとうございます。
しかし、navigationに幅指定をしたらボトムラインもそれに準じてしまいます。
具体的には下のページを真似したいのですが、どうやってるのでしょうか？
ttp://www.arincoroll.jp/
- 560 ：Name_Not_Found：2013/09/15(日) 12:04:31.48 ID:???.net
- >>559
navigationを100%、その中のulとかを850pxにすればいい
そのサイトは、白一色に一本線の巨大な画像をbodyの背景にしてるだけ
- 561 ：Name_Not_Found：2013/09/15(日) 15:56:19.75 ID:???.net
- 参考サイトのソース見もしない奴って多いよな
- 562 ：Name_Not_Found：2013/09/30(月) 09:56:33.13 ID:???.net
- ド素人なもんでこのスレの書き込みが半分もわからん
ネットで検索すればブログつくりの解説はたくさんでてくるが
まるでピンとこない、本を買います
- 563 ：Name_Not_Found：2013/09/30(月) 09:58:22.15 ID:???.net
- >>562
Webサイト制作初心者用質問スレ part236
http://toro.2ch.net/test/read.cgi/hp/1375249110/
本は買わなくていいからここの2を読みなされ
- 564 ：562：2013/09/30(月) 13:09:00.88 ID:???.net
- これはご丁寧に
わかりました、苔の一念で読んで見ます
- 565 ：Name_Not_Found：2013/10/01(火) 04:24:51.11 ID:???.net
- レスポンシブWebデザインの書き方がわかりまへんorz
- 566 ：Name_Not_Found：2013/10/01(火) 12:52:10.76 ID:???.net
- おとなしくbootstrapでも使ってろ
- 567 ：Name_Not_Found：2013/10/06(日) 19:11:42.73 ID:???.net
- <div id="container">
<div id="menu"></div> <div id="content"></div>
</div>
#container { height: 100%; }
これでmenuやcontentのheightを指定せず(auto)
menuとcontentの合計の縦幅がcontainerを超えた時に
contentだけoverflowでscrollさせたいのですが上手く行きません。
どのように設定したら良いか教えて頂けないでしょうか？
- 568 ：Name_Not_Found：2013/10/06(日) 19:21:25.41 ID:???.net
- >>567
ちょっと何がしたいかわかせないが多分これ
ttp://loconet.web2.jp/blog/archives/2006/04/cssheight100.html
- 569 ：Name_Not_Found：2013/10/06(日) 19:24:45.07 ID:???.net
- >>567
html5のメディアクエリで条件付けするのが楽そう
- 570 ：Name_Not_Found：2013/10/08(火) 19:34:07.83 ID:z5YN6DFO.net
- スマホ向けって、viewport 320pxにしときゃあとは勝手に拡大してくれんだろ？
画像は元から高解像度用意しとけばいいだけだし。
@mediaとかいらなくね？
- 571 ：Name_Not_Found：2013/10/08(火) 19:57:58.97 ID:???.net
- >>570
知ったかが聞きかじった知識披露してんじゃねーよ
こっちが恥ずかしくなる
- 572 ：Name_Not_Found：2013/10/09(水) 11:54:14.89 ID:???.net
- >>570の言ってることは間違いじゃないよ
viewportをpx固定したら後はブラウザが拡大なり縮小なりしてくれる
- 573 ：Name_Not_Found：2013/10/19(土) 21:47:55.63 ID:???.net
- すごい初心者で、何時間も悩んだのだけど、
なぜか、header .inner {} クラスの前に空白をあけないと動かない。
header.inner {} だと動かない。
逆に、ほかの、タグは、クラスの前に空白をいれると動かない。
IDとクラスのくみあわせでもある。
#contents .inner {} これは、空白がないと動かなかった。ほかの場合は、空白があると動かない。
なのに#contents.inner {} にしてみると動かない。
空白の法則がわからない。
- 574 ：Name_Not_Found：2013/10/19(土) 21:53:06.75 ID:???.net
- header .inner （空白アリ） これはheader内の.innerクラスを持つ要素に適用される
header.inner （空白ナシ） これは.innerクラスを持つheader要素に適用される
- 575 ：Name_Not_Found：2013/10/19(土) 22:13:55.65 ID:???.net
- ブートストラップとか使用してレスポンシブやってCSSいじくると分けわかんねーな！
- 576 ：Name_Not_Found：2013/10/19(土) 22:15:43.79 ID:???.net
- 空白ありのほうが適用範囲がひろいのか
ありがとう
つかれたのであとはあしたにします
- 577 ：Name_Not_Found：2013/10/19(土) 22:19:19.85 ID:???.net
- header.inner.hogehoge （空白ナシ）
だとしたら、innerクラスとhogehogeクラスを同時に持つ
header要素ってこと？
- 578 ：Name_Not_Found：2013/10/20(日) 00:40:26.55 ID:???.net
- >>577
だよー。ちなみに
header .inner .hogehogeだとheaderの中の.innerを持つ何かの中の.hogehogeだからね。
header *.innner *.hogehoge見たいなイメージだ。(左のは通らないけど。)
A B C ってするとAの中のBの中のCになる。
- 579 ：Name_Not_Found：2013/10/22(火) 18:44:38.03 ID:???.net
- これからは、HTML5とCSSでウェブを作るのが主流なの？
xmlとかはどうなったのだろう？
- 580 ：Name_Not_Found：2013/10/22(火) 18:48:47.25 ID:???.net
- >>579
主流なのは今でもXHTML1.0
これから先のことはわからないが用途に合わせてマークアップすればおｋ
- 581 ：Name_Not_Found：2013/10/22(火) 18:49:49.78 ID:???.net
- ってここCSSスレじゃないかｗ
それこそマークアップ形式はstrictなら何でもいいよ
- 582 ：Name_Not_Found：2013/10/22(火) 18:53:29.77 ID:???.net
- 今、よくわかるHTML5+CSS3の教科書 読んでるんだけど。
まだ、XHTMLなのかな。
まあ、これからだんだんHTML5になりそうな感じだね。
- 583 ：Name_Not_Found：2013/10/25(金) 04:11:37.40 ID:???.net
- >>582
俺も今それ読んでるｗｗ
HTML5が主流になることを期待しながら読んでるわ
- 584 ：Name_Not_Found：2013/10/25(金) 11:06:00.52 ID:???.net
- >>582はマルチの基地
- 585 ：Name_Not_Found：2013/10/25(金) 14:55:29.84 ID:???.net
- マルチってどういう意味？
- 586 ：Name_Not_Found：2013/10/25(金) 18:44:10.25 ID:???.net
- >>585
ほら、あれやがな、マルチーズの仲間や。
- 587 ：Name_Not_Found：2013/10/26(土) 02:05:20.80 ID:???.net
- チーズおいしいよね
- 588 ：Name_Not_Found：2013/10/26(土) 09:59:01.83 ID:???.net
- >>582-583
その本に興味あります。
誤字とか間違いとかそういうのは少ないですか？
それと内容はhtml5+css3が多いですか？
- 589 ：Name_Not_Found：2013/10/26(土) 12:32:56.38 ID:???.net
- 初心者なのでよくわからない。
html5+css3は多い。
- 590 ：Name_Not_Found：2013/10/31(木) 02:29:30.36 ID:???.net
- シンプルな3カラム、2カラムは作成できるようになったのですが
ヘッダーフッターだけが広く広がるような構成のやり方がありません
何が適当な解説サイトなど教えてください
- 591 ：590：2013/10/31(木) 02:55:11.96 ID:???.net
- 解決しました。すみません
- 592 ：Name_Not_Found：2013/10/31(木) 09:23:30.19 ID:???.net
- >>590
ド素人の私が合ってるか分りませんが答えますと
header {width: 100%;
margin-left: auto;
margin-right: auto;
}
footer {clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
}
でいいような気はします。
- 593 ：Name_Not_Found：2013/11/08(金) 11:00:34.89 ID:???.net
- 全体を囲むように<div id ="wrapper">を配置したのに表示するとちゃんとかこめてないし、footerがなんか上の方まで勝手に範囲とってるしもう逃げ出したい
- 594 ：Name_Not_Found：2013/11/08(金) 15:12:18.61 ID:???.net
- >>593
footerに関してはcontentの高さ（分量）によるのとfooter {clear: both;}とかではなくてか！？
- 595 ：Name_Not_Found：2013/11/09(土) 13:28:24.01 ID:???.net
- >>594
overflow:hiddenやったら両方解決しました
floatってめんどくさいですね…
- 596 ：Name_Not_Found：2013/11/09(土) 14:02:39.78 ID:???.net
- 1行２列の「テーブル」があって（実際は、別にテーブルでなくても
２カラムのレイアウトならなんでもいいです）
1列目の「セル」の内容は
(1) ユーザの環境に依存するので正確なサイズは予測できない
(2) レイアウトは環境に依存しない（ウィンドウがリサイズされてもサイズは一定）
とします
2列目のセルのサイズを、その内容がなんであっても
（また、ウィンドウがリサイズされたりズームされたとしても）
(1) 高さを1列目のセルの高さと同じにする
(2) 幅をテーブル全体の幅が現在のウィンドウ幅と超えないサイズにしつつ
できるだけ広くとる（ウィンドウ幅は1列目のセル幅よりある程度大きいとします）
ようにすることは可能でしょうか？
- 597 ：Name_Not_Found：2013/11/09(土) 21:50:10.89 ID:Ym3MUUfZ.net
- >>596
可能です。
- 598 ：Name_Not_Found：2013/11/09(土) 21:55:53.32 ID:???.net
- >>596
1列目に関して
(1)で依存すると言いながら(2)で依存しないとか矛盾してるんだけど。
- 599 ：Name_Not_Found：2013/11/10(日) 03:01:48.19 ID:???.net
- >>598
言葉足らずでした
1列目の「セル」の内容は
(2) レイアウトボックスの生成個数やレイアウトボックスどうしの相対的な位置関係（上下左右）は環境に依存しない（ワードラップなどは生じない）
(1) 利用フォントやデフォルトのマージン量や行高その他はユーザの設定に依存するのでゼル全体に要する実際の表示サイズは予測できない
- 600 ：Name_Not_Found：2013/11/10(日) 05:01:45.00 ID:???.net
- デザインレイアウトは同じクラスで済むのだけれども、
その同じクラスに別々の余白値を入れたい場合、
余白用のクラスを用意すると思うのですが…
皆さんは、どういったクラス名にしていますか？
ネーミングセンスに悩んでいるってだけなんですが
blank01~とかspace01~とかソース上なんか格好が悪い。
何か良いネーミングないですかね。
margin-bottomは長いし、略してmb01とかbottomも微妙…
ううんといったところ。
- 601 ：Name_Not_Found：2013/11/10(日) 05:12:39.36 ID:???.net
- >>600
あー、頭いたいわｗ
bootstrapのせいかいな。そんな名前をつけるなっていうの
セマンティックという言葉で調べてくれ。
CSSのクラス名としてblankとかspaceとかそういった名前を付けてはいけない。
もしblankがいらなくなったら、HTMLを修正するのかい？
マークアップとデザインは分離しているのだから
原則としてHTMLは修正なしでデザインを変えられないといけない。
つまりだな、CSSの名前として、デザインを意味する単語を使ってはいけない。
わかり易い例ではredとかそんなのな。
デザインを変える時にHTMLを修正しなければいけないようなクラス名は間違いなんだよ。
CSSはそこがどういった意味のパーツであるか、それによって名前をつける。
そのパーツに対して、どんなスタイルを割り当てるか、それは全部CSS内で完結させる。
- 602 ：Name_Not_Found：2013/11/10(日) 10:56:52.40 ID:???.net
- >>601
これクソコテの悪寒
- 603 ：Name_Not_Found：2013/11/10(日) 11:03:44.22 ID:???.net
- >>599
display: table-cell;かテーブルレイアウトでやって、幅は%表記で指定すればいいんじゃね。
- 604 ：Name_Not_Found：2013/11/10(日) 11:07:20.72 ID:???.net
- >>602
コテなんか付けたことねーぞ？
- 605 ：Name_Not_Found：2013/11/10(日) 11:18:24.89 ID:???.net
- >>600
使いまわせる設定ならそれなりの意味のある名前を付けられるはず。
そうでなければインラインで書いた方が良い。
- 606 ：Name_Not_Found：2013/11/10(日) 11:23:05.36 ID:???.net
- CSSを設定とかｗ
ってか、設定なんて思ってるから
使い回しできない名前ができちゃうんじゃん？
- 607 ：Name_Not_Found：2013/11/10(日) 12:24:46.03 ID:???.net
- 設定に名前を付ける場合の問題点は
設定の数だけ名前が必要だってこと。
>>600が困ってるのはつまりそういうこと。
設定（margin-bottomとか）に名前をつけようとしているから
設定の数だけ名前が必要になってる。
すでに名前がついてるのだから、単純にそれを使えばいい。
名前はついてない所につけるべきだ。つまりその設定（margin-bottom等）を
割り当てたい場所に、（設定名ではなく）その部分の名前をつける。
- 608 ：Name_Not_Found：2013/11/10(日) 12:39:23.29 ID:???.net
- ＞つまりだな、CSSの名前として、デザインを意味する単語を使ってはいけない。
＞わかり易い例ではredとかそんなのな。
なるほど、これはすごく勉強になりました。気をつけます
そのレイアウトのクラスを他でも使いまわせるけど、
余白がそれぞれ別々の値が必要っていう話がそもそも
すでにダメなデザインという言い方はおかしいのですが、
ちょっとしたコーディング泣かせなんでしょうか…
- 609 ：Name_Not_Found：2013/11/10(日) 12:49:44.11 ID:???.net
- >>608
だから、レイアウトのクラスというのがおかしい。
レイアウトにクラスを作るから、使いまわせるはずだけど、
似て非なるものがたくさん出来てしまうんだよ。
red、暗いred、明るいred、いろんなred・・・って。
悩んでるのはそういうことだろ？
余白、少し広い余白、広い余白、狭い余白、それより少しだけ広余白って
余白がそれぞれ別の値が必要なのは当たり前。
デザインにこだわるならば、場所が違えばそれに最適化した
デザインになるのは当然だろう。
だから余白に名前をつけたらいかん。
例えばサイドバーとかトップメニューとか
ナビゲーションとかセクションとかあるだろ？
デザインを割り当てたい場所の名前をクラスにするんだよ。
そしたらとは、そのクラスの余白をCSSで好きに調整したらいいやん。
セマンティック CSSとかで調べて勉強してくれ
- 610 ：596：2013/11/10(日) 12:57:43.12 ID:???.net
- >>603
>幅は%表記
一列目の幅が何％になるのかわからないので二列目が確定できない
- 611 ：Name_Not_Found：2013/11/10(日) 13:30:49.22 ID:???.net
- >>608
セレクタを使いこなしてさえいればだいたい何とかなる。
あるいは「それぞれ」に対して固有の名前を付けるとか。
- 612 ：Name_Not_Found：2013/11/10(日) 13:31:47.94 ID:???.net
- >>610
一列目の幅を決めるルールを言えよ。
- 613 ：Name_Not_Found：2013/11/10(日) 13:40:04.01 ID:???.net
- >>611
さすがに、htmlやbodyからの
セレクタを書いたりはしないでしょう？
html body div ul li a {・・・}
こんなのはやらんよね？
途中に起点となるクラス名が必要になる。
それが場所の名前ということ。
余白に対して名前をつけるというのは
CSSの本質を間違ってる。
- 614 ：596：2013/11/10(日) 16:26:47.44 ID:???.net
- >>612
1列目の幅は内容が収まる最小の幅です（内容自体は固定）
2列目の内容は動的に変化します
- 615 ：Name_Not_Found：2013/11/10(日) 17:09:47.59 ID:???.net
- >>614
それならテーブルにして、テーブルの幅を100%にして、
各セルの幅は無指定かautoにするとできるよ。
- 616 ：Name_Not_Found：2013/11/10(日) 17:11:29.23 ID:???.net
- >>615
できないよ。
- 617 ：608：2013/11/11(月) 01:10:50.31 ID:???.net
- >>609
なんだかんだ返信下さいまして、ありがとうございます。
もちろん、デザインしたい場所にクラスを指定しているんですけれども
それでも別々の余白値が入るのも当たり前だというのも分かっていると思います。
それを踏まえて別々の余白値を入れるには、
余白CSSを付けずに、デザインを施すCSSに余白を入れる。
間違ってるかもしれませんが
クラスの名前を少し変えて別々にしていかないとダメってことですよね…？
その名前の付け方として、自分は文末に01～03ってつけてることもあるんですが
これは、別に問題ないということですよね？
似たようなCSSを2～3度書いてしまう事がなんとも気に入らず
別々に余白CSSとか作ってしまったわけです（他のレイアウトでも調整できてしまうという利点もあったので…）
しかし、それはセマンティック的には間違えであると今回気づけました。
これ以上みなさんの長文の返信頂くのは恐縮なので、ダメか合ってるか、教えていただければと思います。
- 618 ：Name_Not_Found：2013/11/11(月) 01:13:42.42 ID:???.net
- nth-child使えばと思わなくも無い。
- 619 ：Name_Not_Found：2013/11/11(月) 01:28:11.27 ID:???.net
- >>617
では一言だけ。
セマンティックの話題で釣れないのでつまらない。
- 620 ：Name_Not_Found：2013/11/11(月) 01:48:53.46 ID:???.net
- なるほど、つまらないんですね
つまらなければ、レスしなければいいのに…
その上でレスしてくれる人は、いい人なんだね…ここは良いスレッドだ
CSS3は使いたくありまてん。
- 621 ：Name_Not_Found：2013/11/11(月) 05:47:48.75 ID:???.net
- 同じクラス名で、使う場所によって余白などを微妙に変える
といったことは、CSSの基本を理解すれば簡単にできること
数字付きクラスを量産なんてアホなことはやめましょう
- 622 ：Name_Not_Found：2013/11/11(月) 16:33:12.76 ID:6jE8AON4.net
- 便乗質問かもしれませんが、自分もCSSの書き方について悩んでいます。
今まではログインボタンなら
<input class="btn-login">
または
<p class="btn"><input class="login">
みたいな書き方をしていたのですが、OOCSSに変更しようか悩んでいます。
今後はOOCSSの書き方が浸透していくのでしょうか？
それとも、ある程度セマンティックな命名であれば、
自分の好みでやればいい、でしょうか？
一からCSSを勉強し直しているので、皆さんの考えを教えてください。
- 623 ：Name_Not_Found：2013/11/11(月) 16:55:03.35 ID:???.net
- <form id="hogehoge">
<input type="button" class="login" />
</form>
の場合、#hogehoge input[type="button"] に対してフォームのボタン共通のCSSを設定すればいい。
- 624 ：Name_Not_Found：2013/11/11(月) 17:06:53.15 ID:???.net
- 情報がきちんと区分けされていて、
その区分ごとにちゃんと名前がついていれば、
あとはセレクタで何とかなる。
- 625 ：622：2013/11/11(月) 18:01:02.79 ID:???.net
- >>623-624
自分も今まではそんな感じのコーディングをしていましたが、
「IDは使うな」とか「似たような箇所が多いCSSは混乱を招く」とかで
CSSのコーディングを見直しているんです。
ただ、OOCSSの場合、レイアウトやデザインを変えたくなった時、
CSSだけではなく、HTMLも変えなくてはいけないので、
余計に手間になると思うんですよね・・。
<input class="btn btn-login left">
みたいなソース見ても、余計分かりづらいような・・。
- 626 ：Name_Not_Found：2013/11/12(火) 00:00:04.19 ID:???.net
- IDは使うなは概ね合ってる。
一個しか無いことって殆ど無いからね。
OOCSSは考え方の違いとかではなく、
CSSの使い方として明らかに間違いなので
参考にしない方がいいよ。
クラス名を組み合わせてって話なら
SASS（SCSS）を使うのがいい。
OOCSSで実現したいことを
正しいCSSで実現できる。
- 627 ：622：2013/11/12(火) 01:05:02.84 ID:???.net
- >>626
「汎用性の高いコーディング」「誰が見てもある程度理解できる」
のは、>>622-624みたいな書き方か、OOCSSかどっちですかね？
Sassはツールとして概念は分かりますが、
まずは基本的なCSSの書き方を見直したいと思いまして。
- 628 ：Name_Not_Found：2013/11/12(火) 01:08:47.97 ID:???.net
- SASS（SCSS)はCSSの文法を改良しただけだよ。
考え方としてはCSSと同じ。
もしOOCSSにメリットを感じてしまったなら
SASSを知ることで、OOCSSを使わずに
もっと良い書き方ができることがわかる。
- 629 ：Name_Not_Found：2013/11/12(火) 01:48:58.97 ID:???.net
- 団体メンバーの自己紹介ページを作っていてリーダーとその他メンバーでデザインを変えようと思っています
クラスを.name、.ageなどとしておき
その親クラスを設定して見やすくする方法を考えていますがこの方法で何か不都合はありますか？
exp .leader .name{color:blue;}
- 630 ：Name_Not_Found：2013/11/12(火) 09:13:07.35 ID:???.net
- クソが
- 631 ：Name_Not_Found：2013/11/12(火) 22:35:38.93 ID:???.net
- ttps://crowd.biz-samurai.com/landing/i?c=7cd89a0a101d082e79b93090c9dda88a
あなたの知識や経験を活かしてみませんか？
- 632 ：Name_Not_Found：2013/11/13(水) 18:52:25.76 ID:???.net
- LESSからCSSに変換するWebサービス
って存在するんですか？
- 633 ：Name_Not_Found：2013/11/13(水) 21:15:38.06 ID:???.net
- lessだったら、ローカルコンパイルできるjsまで付いてるだろ
- 634 ：Name_Not_Found：2013/11/13(水) 21:48:03.24 ID:???.net
- ローカルコンパイルってどうやるんですか？
- 635 ：Name_Not_Found：2013/11/14(木) 08:03:45.90 ID:???.net
- 外部リンクに画像アイコンを表示させたく、
mydomain.comを除くhttpを指定することはできるのでしょうか？
①a[href^="http"]
②:not([href*="mydomain.com"])
この二つの条件を組み合わせたいです。
- 636 ：Name_Not_Found：2013/11/14(木) 18:39:38.23 ID:???.net
- input type=text とかの横幅の大きさを
100% にするとbodyの横幅をベースに考えるっぽいんだけど
一番内側の要素の横幅をベースに考えてくれんかな
- 637 ：Name_Not_Found：2013/11/14(木) 19:45:25.87 ID:???.net
- お断りだ
- 638 ：Name_Not_Found：2013/11/18(月) 14:47:53.70 ID:???.net
- >>636
ソース見なおせ
- 639 ：Name_Not_Found：2013/12/03(火) 12:29:40.52 ID:qU0OS7de.net
- テーブルの中にボタンを配置してるときに、
ボタンの大きさを そのセルの大きさいっぱいにしたいんだけど
どう指定したらいいんかな
- 640 ：Name_Not_Found：2013/12/03(火) 12:38:03.97 ID:???.net
- widthとheightを100%にします
- 641 ：Name_Not_Found：2013/12/03(火) 13:06:31.06 ID:???.net
- >>640
おっ、さんくす。
100%って画面全体に対する師弟かと思ってたわ
- 642 ：Name_Not_Found：2013/12/03(火) 13:38:35.49 ID:???.net
- え・・・そのレベルなのか・・・
- 643 ：Name_Not_Found：2013/12/03(火) 13:58:52.82 ID:???.net
- >>642
初心者スレへようこそ
- 644 ：Name_Not_Found：2013/12/03(火) 15:02:48.89 ID:???.net
- すみません、質問なのですが、
今制作している作品で、サイドバーにページ遷移するボタンを配置しているのですが、
画像をただ並べて配置するのではなく、
回転させたうえ、テキストや画像が右にいくほど小さく斜めになるように表現したいです。
イメージでいうと、部屋に入ったら左手の壁にかかっている絵のようなものです。
回転の方はtransform:rotateで、できたのですが、他のことがわかりませんでした。
何か、参考になるものはございませんでしょうか？
- 645 ：Name_Not_Found：2013/12/03(火) 15:39:46.17 ID:???.net
- パーセント指定して画像のサイズを変えていくのはどうだ？
- 646 ：Name_Not_Found：2013/12/03(火) 22:59:49.65 ID:???.net
- 質問させて下さい。
以下に見本の画像をアップしました。
http://fcimaichi.web.fc2.com/test.gif
灰色の部分、幅800pxが本文です。
グリーンの部分（仮にbg1,bg2としました）はfixedなどで固定して、
灰色の部分だけを縦にスクロールさせたいのですが、
どんなCSSを記述すればいいのかこんがらがってしまいました。
ご享受いただければ幸いです。
どうぞよろしくお願いします。
- 647 ：Name_Not_Found：2013/12/04(水) 00:21:19.44 ID:???.net
- >>646
bg1,bg2をfixedで固定すればいいです
- 648 ：Name_Not_Found：2013/12/04(水) 01:36:30.47 ID:???.net
- >>646
まず3カラムでレイアウトする
んで左右の部分はposition:fixedとtopとleft調整してz-index使って本体に重ねる
んで上の部分はそのままfixedにすればいい
position理解したらすぐできる
- 649 ：646：2013/12/04(水) 12:56:45.73 ID:???.net
- あ
- 650 ：646：2013/12/04(水) 17:21:34.72 ID:???.net
- >>647
fixedするとmarginの中央寄せが解除になったりしてうまくいきません。
>>648
３カラムで、真ん中は800pxで固定したとして、
左右のカラムをモニターの解像度によって可変する方法がわかりませんでした。
HTMLとCSSを記述しますのでまたのちほどご教授いただけますでしょうか。
よろしくお願いいたします。
- 651 ：Name_Not_Found：2013/12/05(木) 03:04:43.69 ID:???.net
- >>650
解像度によって可変するならMedia Queries使えばいい
それともリキッドレイアウトのことを言ってるのなら、親要素のwidthを%指定して
真ん中の要素をmargin: 0 auto;でセンターに持ってきて左右の要素のwidthを%指定にすればいい
position: fixedは常にウィンドウサイズを基準とするから
例えば親要素がwidth:80%だった場合、右の要素は100-80/2のright:10%を指定すれば親要素にぴったり収まる
ちなみに左の要素はleft指定しなければ左端は親要素の左端になる
left指定したらウィンドウの左端が基準になる
もし親要素を固定幅にしたいならjavascriptが必要になる
- 652 ：Name_Not_Found：2013/12/10(火) 00:36:45.73 ID:cv4oGz11.net
- Firefoxの新しいタブを開く際の [+] の背景色を変えたいです。
タブの背景色を変えても変わりませんでした。
- 653 ：Name_Not_Found：2013/12/10(火) 23:46:47.85 ID:???.net
- iOS7のブラウザ用にHTML+CSS組んでるんだけど、
position:fixedでモーダルダイアログ出して
その中にtextarea入れてみたら、
textareaにフォーカスした際にソフトウェアキーボードが出て
くるのはいいんだけど、同時にtextareaからフォーカスが外れて
エラいひどい挙動になる。
- 654 ：Name_Not_Found：2013/12/12(木) 21:05:45.90 ID:???.net
- すべてのサイトの背景画像を○○にするという記述はどうすればいいでしょうか？
- 655 ：Name_Not_Found：2013/12/12(木) 23:45:22.43 ID:???.net
- CSSにそんな包括的な記述はありません
背景画像を指定した共通のCSSファイルを作って、それを全てのHTMLファイルに
あなたの手で適切に設定してください
- 656 ：Name_Not_Found：2013/12/13(金) 03:13:28.73 ID:???.net
- body{
background-image:url('./hoge.jpg')
}
- 657 ：Name_Not_Found：2013/12/18(水) 21:54:58.07 ID:???.net
- >>656
thx
- 658 ：Name_Not_Found：2013/12/18(水) 21:59:33.81 ID:HjTJrLUg.net
- 例えば「Amazon」でぐぐった場合、
検索ボックスに表示されている「Amazon」という文字と
表示されている候補サイトのタイトルなどに含まれている「Amazon」という文字色を変更したいのですが
どうやって指定すればいいでしょうか？
- 659 ：Name_Not_Found：2013/12/18(水) 22:21:38.45 ID:???.net
- >>658
javascriptでAmazonという文字を <span class="searched">Amazon</span> か何かに置換してCSSを適用
- 660 ：Name_Not_Found：2013/12/19(木) 02:34:36.36 ID:???.net
- http://xn--ick8azb8134b5a9090a0hu.jpn.com/
http://xn--ruq25edz7dz0kglj.jpn.org/
http://xn--n8jvhp65hct1c3fc.jpn.org/
http://xn--mbtx10atl4a.jpn.org/
http://xn--pckp0b6k2c.jpn.org/
http://xn--cckzbudsbyb0a6i3c5264j.jpn.org/
http://www.hoken-q.net/
http://www.kaitoriheroes.jp/
http://www.tokyo-katei.com/
http://www.kanamachi-kobetsu.com/
http://xn--08j272m61f.jpn.org/
http://xn--yckk7a1cwaf9a5qc5788e28zb.jpn.org/
http://xn--ipwn85b.jpn.org/
http://xn--08jv93hzebq1kfujxjs8m8a.biz/
http://guidatour.net/koyouhoken/index.html
http://o-dental.blogspot.jp/
http://www.cabalink.net/
http://katei-education.blogspot.jp/
http://www.yamaichi4320.com/
http://mechabakuro.com/
http://ebilog.biz/
- 661 ：Name_Not_Found：2013/12/22(日) 17:34:27.90 ID:???.net
- CSSじゃあない気がするけど一応聞いてみたい
FORMタグのMETHODって、スタイルシートで設定できませんかね
できませんよね
- 662 ：Name_Not_Found：2013/12/22(日) 18:34:19.73 ID:???.net
- できませんよ。
役割がまったく違いますから。
- 663 ：Name_Not_Found：2013/12/23(月) 13:45:59.16 ID:???.net
- できませんか。
そうですよね。
- 664 ：Name_Not_Found：2013/12/23(月) 14:49:15.82 ID:???.net
- むしろ、ロジック的なことを何故CSSでやりたいのかが聞きたい
- 665 ：Name_Not_Found：2013/12/23(月) 21:29:01.33 ID:???.net
- 最近覚えて便利だったから
あれもこれもやらせたくなったんだろう
- 666 ：Name_Not_Found：2014/01/07(火) 23:49:12.72 ID:rX7vnyd2.net
- divにposition:fixedを指定したらdisplay:inline指定もwidth指定もしていないのにインライン要素みたいに小さくなってしまいました。
指定前の横幅をそのままキープさせる方法を教えて下さい。
※確認環境はIE10とChrome31です。
- 667 ：Name_Not_Found：2014/01/08(水) 01:39:09.80 ID:???.net
- position:fixed使う場合は、
width,heightを明示的に指定してやらないと
いけないんじゃなかったっけ？
- 668 ：Name_Not_Found：2014/01/08(水) 12:50:05.73 ID:pJtZzs+H.net
- タグ使える掲示板とかWordpressなどの入力フォームで、
段落頭にタブキーを入れるとその段落を自動的にblockquoteで囲んでくれるようなcssの書き方ありますか？
- 669 ：Name_Not_Found：2014/01/08(水) 18:21:08.12 ID:???.net
- はじめまして、こんばんは。
今webfontを使いたくて調べているのですが、完全にハマってしまいました。
http://fast-uploader.com/file/6944728121939/
このフォントファイルを使って、CSSの先頭に
@font-face{
font-family:'testFont';
src:url('Old Block Black.ttf') format('truetype');
}
と記述した状態で
.test2{
font-family:'testFont';
font-size:50px;
}
というクラスを使って適用してみたのですが、このフォントになってくれません。
ちなみに、CSSとフォントファイルは同じディレクトリに入っている状態です。
一応、自分のWindows7マシンにこのフォントをインストールして
.test3{
font-family:'Old Block Black';
font-size:50px;
}
と設定した所、test3クラスの文字はフォントが適用されてみえています（当たり前かもしれませんが＞＜；）
こちらのテストページ上で実行しました。
http://htbq.main.jp/wp-content/themes/gridly/gridly/css/test.php
なぜ、このフォントがウェブフォントになってくれないのかわからない状態です。
- 670 ：Name_Not_Found：2014/01/08(水) 18:23:15.83 ID:???.net
- すみません、長文の為一度投稿してしまいました。
ちなみにこのフォントのみでなく、他のフォントも同じ様に試してみたのですが、上手くいきませんでした。
何かが間違っているのでしょうが、その何かがわからない状態に置かれています。
確認したブラウザはChromeのバージョン31.0.1650.63 mです。
長々と長文失礼しました。
諸先輩型、どうぞよろしくご教示いただけると幸いです。
- 671 ：596：2014/01/08(水) 22:20:14.75 ID:???.net
- >>669,670
おそらくwebオリジンのセキュリティ制限に引っかかってると思われ
Chrome はローカル環境だとどのリソースも別々のオリジンに属する
（別サイトに属する）ものと見なす
Firefoxで試してみるか、またはwebサーバに置いて試してみるといい
- 672 ：Name_Not_Found：2014/01/09(木) 09:05:56.54 ID:???.net
- おはようございます。
>>596さん返信ありがとうございます。
Firefox Ver26でも試してみたのですがインストールして表示したフォントも適用されない状態でした。
同時にChromeで確認してみると、そっちの方は適用されています。
また、別のWebserverのルートにフォントファイルを置いて、試してみたのですが、
Webfontはやはり適用されないままでした。（Chrome、FF両方）
別サーバーなので絶対アドレスにてhttp://から指定しているのですが・・・。
ちなみにそのアドレスをブラウザのアドレス欄にコピペしてジャンプするとフォントファイルのDLダイアログが開きます。
まだイマイチ原因がわからない状況ですね・・・。
どなたか心当たりのある方はご教示いただけると幸いです。
よろしくお願いいたします。
- 673 ：Name_Not_Found：2014/01/09(木) 09:06:49.15 ID:???.net
- あれ、アンカーを間違えておりました。
>>671様、ご返信いただき感謝いたします。
- 674 ：Name_Not_Found：2014/01/09(木) 12:00:09.60 ID:???.net
- >>669のアップローダーのパスは1212です(；´∀｀)書いていませんでした。すみません。
GoogleWebFontサービスを使ってみたのですが、こちらは上手くいきました。
ただ、自分の持っているフォントをWebFont化したいんです。
度重なるスレ汚しすみません。
よろしくお願いいたします。
- 675 ：Name_Not_Found：2014/01/09(木) 12:15:54.63 ID:???.net
- 皆様ありがとうございました。
自己解決しました事を報告させていただきます。
問題はフォントファイルにあったようです。
あるフォントコンバーター
http://www.fontsquirrel.com/tools/webfont-generator
にかけてみた所、ファイルに異常があるという事を指摘されたのですが、
http://everythingfonts.com/woff-to-ttf
ここでttfをwoffに変換してみたところ、上手くいきました。
そのwoffを使って
@font-face{
font-family:'testFont';
src:url('OBGB.woff') format('woff');
}
上記のように処理してみたところ、うまくクラスにtestFontを適用させる事ができました。
皆さんどうも、長々とお付き合いさせてしまってすみませんでした。
ありがとうございました。
- 676 ：Name_Not_Found：2014/01/14(火) 19:06:32.60 ID:???.net
- くだ質なんだけど
擬似クラスってのを今日学んだ
テキストの例題では「hover」を例に挙げて解説してたんだけど
hoverが擬似ってのは分かる。
だってマウスカーソルがホバーするまで、そんなクラスは存在してないから
擬似的に（仮に）にクラスを作成してるってことでしょ？
類似のプロパティにfirst-childも擬似クラスって解説が載ってたんだけど
first-childはそもそも何かしらの要素の子要素は最初から存在してるんだから
擬似じゃねーじゃん！って思ったんだけど、どのへんが擬似なの？
そんなこといいから覚えろって言われればそれまでなんだけどさ。
- 677 ：Name_Not_Found：2014/01/14(火) 19:28:48.89 ID:???.net
- 教材見ながらCSS勉強してんだけど
下のfloatを書いたところ、画像の縦サイズが248pxあった画像が146pxになった。
gameboardクラスでは特にheight:autoなんて指定してないのに
本来の画像サイズ（524px * 452px）を無視して画像の縦のサイズが変わったの？
http://imgur.com/GWDrK9g
以下ソース
.gameboard{
border: solid #000000 1px;
border-top: solid #000000 10px;
width: 484px;
padding: 20px;
margin: auto;
background-color: rgb(255,128,0);
background-image:url("img/stageback.jpg");
border-radius: 8px;
box-shadow: 0px 0px 36px #444444;
}
.hatholder li{
float: left;
}
- 678 ：Name_Not_Found：2014/01/14(火) 22:55:51.58 ID:???.net
- height:autoが初期値だったと思う
リストを横並びにしたことで、縦の長さが必要なくなったから、ボックスも縦に短くなった
横幅は指定されているから、そのまま
- 679 ：Name_Not_Found：2014/01/15(水) 02:06:36.46 ID:???.net
- >>676
いや、擬似クラスの擬似は、classに書いてないのに使える！
何も書いてないのに使える！って意味の擬似だろ。
- 680 ：Name_Not_Found：2014/01/15(水) 06:30:02.21 ID:???.net
- 自分で指定したクラスじゃないけど
クラスみたいな感じのものってことだよ
- 681 ：Name_Not_Found：2014/01/15(水) 17:58:29.88 ID:???.net
- >>677
HTMLわかんないからなんとも言えないけど
.gameboardに overflow:hidden を指定するか
それでだめなら clearfix でググればなんとかなるかも
- 682 ：Name_Not_Found：2014/01/16(木) 14:21:14.86 ID:???.net
- >>676
「クラス」の概念を備えていないマークアップ言語にも通用する
ある種の普遍性がある
例えば :first-child 疑似クラスはツリー構造を持つどんなデータにも適用できる
- 683 ：sage：2014/01/22(水) 17:23:07.09 ID:???.net
- おまいらCSS Frameworkは何使ってますか？
skeleton試してみたけどシンプルでわかりやすかった。
ただMedia Queriesでemを使用してる方がいいらしいので、他になんかいいの無いかな。
- 684 ：Name_Not_Found：2014/01/23(木) 03:45:34.70 ID:???.net
- PHPとかプログラム大好きっ子（おっさん）なんだけどCSSに最近興味が出てきた
正直個人で制作する分にはもうブラウザバグとか気にせんでいいんだろうか
どんどんブラウザもバージョンアップしてきてるし、いまだブラウザ固有のバグとかあるの？
- 685 ：Name_Not_Found：2014/01/24(金) 18:24:49.11 ID:???.net
- >>684
あるけど気にするほどじゃないのでガンガンやっとけ
- 686 ：Name_Not_Found：2014/01/24(金) 19:34:43.77 ID:???.net
- >>685
ありがとう やってみる
- 687 ：Name_Not_Found：2014/01/27(月) 01:19:52.58 ID:???.net
- テスト
- 688 ：Name_Not_Found：2014/01/27(月) 14:43:16.47 ID:kqkeCpXz.net
- レスポンシブで、ナビゲーションを縮小してもパネル化しないようにしたい
http://hikutei.com/test/
上記ウェブサイトを制作中なのですが
width1199px以下でナビゲーションをパネル化しています。
これをwidth480px以下でパネル化したいです。
width1199pxで設定されているパネル化を削除したり、
width480pxでパネル化を設定してあげたり、いろいろ試しているのですが
レイアウトが崩れたり、なかなかうまくいきません。
どwidth480pxまで横並びのナビゲーションの表示のままにしたいのですが
どうしたらいいでしょうか？
- 689 ：Name_Not_Found：2014/01/28(火) 23:33:55.12 ID:fkHwk5i0.net
- 表の縦列まとめてスタイルを設定したいのですがうまくいきません。
<col class=aaa>
.aaa {font-weight:bold; color:green;}
colgroupでもだめでした。
- 690 ：Name_Not_Found：2014/01/28(火) 23:41:01.11 ID:???.net
- ?：<col class=aaa>
○：<col class="aaa">
- 691 ：Name_Not_Found：2014/01/28(火) 23:49:51.66 ID:???.net
- colやcolgroupにフォント系の装飾はできないらしいです
- 692 ：Name_Not_Found：2014/01/30(木) 20:36:05.02 ID:???.net
- >>689
column combinator
col.aaa || td { スタイル }
がサポートされるようになるまで待て
- 693 ：Name_Not_Found：2014/01/31(金) 13:04:17.09 ID:???.net
- レスポンシブデザインでのメディアクエリについて教えて下さい。
http://hikutei.com/test/
上記サイトでブラウザを最小限までに縮めるとナビがスマホ用に変わるようにしているのですが
見ていただければわかると思いますが
どうしてもレイアウトが上記のサイトのように崩れてしまいます。（ボタンを押すと出るナビも最初から出たまんま）
どこらへんを改善すればなおるでしょうか？
- 694 ：Name_Not_Found：2014/01/31(金) 17:47:03.01 ID:???.net
- CSSを利用して、記事内の画像ファイルを、背景(background-image)で指定する
メリットってあるんでしょうか?
ページ上には、印刷ボタンが無いページなので、印刷させたくないから?
このWebページを印刷しようとしたら、画像部分が印刷できなかった為、
ブラウザ(Firefox Ver26.0)で背景も印刷するように指定したら、画像
部分も印刷できました。
Webページ
http://xbrand.yahoo.co.jp/category/bodycare/11833/1.html
画像部分の一例
http://xbrand.c.yimg.jp/images/xbrand/entry/files/11833/21993a8a9e3ef18a3d1b0c1597f6cc8a.jpg
http://xbrand.c.yimg.jp/images/xbrand/entry/files/11833/dac555918c9e16673e2c02b61dfb3c28.jpg
http://xbrand.c.yimg.jp/images/xbrand/entry/files/11833/381422e22be1743617593be38d1c3c48.jpg
HTMLソースでは、画像部分をこの様に指定しているようです
style="background-image: url(http://example.com/hoge1.jpg)
- 695 ：Name_Not_Found：2014/01/31(金) 17:56:52.17 ID:???.net
- 右クリックでの保存ができなくなるな
CSSに精通してる人には無力だけど
- 696 ：Name_Not_Found：2014/01/31(金) 18:01:35.10 ID:???.net
- >>695
なるほど
カジュアル盗用を防ぐ為かもしれませんね
(それなりに)有名なタレントを使っているので、直リンさせない為なのかと...
- 697 ：Name_Not_Found：2014/01/31(金) 19:31:33.43 ID:???.net
- >>694
CSS の目的を考えればいい
CSS背景画像は記事の主題ではない
- 698 ：Name_Not_Found：2014/02/01(土) 01:09:18.20 ID:???.net
- テーブルのセル全体をクリックできるようにしたいのですが
a{display:block;}
とすると同じ行の別のセルの中身が複数行になったときにセル全体がリンクになりません。
何かよい方法はないでしょうか。
- 699 ：Name_Not_Found：2014/02/01(土) 10:36:06.52 ID:???.net
- >>698
table a みたいなのを追加すればいいだけじゃ？
- 700 ：Name_Not_Found：2014/02/01(土) 20:03:00.45 ID:???.net
- 初めて質問します。お力をおかしください。
あるサイトのサイト内検索のテキストボックスのサイズを変えたいのですが、
Firefoxの要素を調査というので該当箇所が
<input type="text" size="10" value="" name="k"></input>
というふうになってるところまでわかりました。
この size="10" のところだけ size="50"にさせたいのですがこれをCSSで行うにはどう書けばいいのでしょうか？
CSSなどについて知識が乏しいのでここで聞くのが間違いでしたらすみません。
- 701 ：Name_Not_Found：2014/02/02(日) 01:09:08.34 ID:jLeZG2IN.net
- 質問させていただきます。分かる方がいたら、力をお貸しください。現在このように書いています
■HTML■
<div class="parent">
<div class="child">
O
</div>
<div class="child">
O
</div>
<div class="child">
O
</div>
<div class="child">
O
</div>
</div>
■CSS■
div.parent {
text-align: center;
}
div.child {
display: inline-block;
width: 100px;
height: 100px;
border: solid 1px;
margin: 10px 10px 10px 10px;
}
- 702 ：701の続き：2014/02/02(日) 01:09:50.44 ID:jLeZG2IN.net
- これだとウインドウ幅を広めたり狭めたりしても
幅に合わせて自動的にchild要素が二段目に表示され、
且つ左右に出来る余白幅も均等で見た目がいいです。
http://i.imgur.com/cnaW04J.png
しかし、残念なことにchild要素が二段目に表示された時に真ん中に来てしまいます。
http://i.imgur.com/boxxoGJ.png
このchild要素が左詰めになるようにchild要素へ float:left を加えると今度は
このように左右の余白幅が均等ではなくなります。
http://i.imgur.com/2b7Hzdg.png
・左右の余白幅を均等にしつつ
・且つ二段目にchild要素が来たときに左詰めで表示されるようにする
にはどのようにCSSを書けば良いでしょうか？
長々となってしまい申し訳ありません。
- 703 ：Name_Not_Found：2014/02/02(日) 10:34:08.25 ID:???.net
- CSSからは外れるけど
ダイナミック・グリッド・レイアウト系のjQueryプラグイン使ったほうが楽かも。
http://bashooka.com/coding/jquery-plugins-for-creating-grid-layout/
wookmark使ってるけど便利だよ
- 704 ：Name_Not_Found：2014/02/03(月) 11:44:09.62 ID:???.net
- >>702
これってmedia queriesでグリッドの制御しなきゃ出来ない操作じゃないかな？
marginやfloatをいじるだけでやれるもんかな
- 705 ：Name_Not_Found：2014/02/03(月) 20:51:49.44 ID:???.net
- HTML
<div class="parent1">
<div class="parent2">
<div class="child">O</div>
<div class="child">O</div>
<div class="child">O</div>
<div class="child">O</div>
<div class="dummy"> </div>
<div class="dummy"> </div>
</div>
</div>
CSS
div.parent1 {margin:0 auto; display:table;}
div.parent2 {text-align:center;display:table-cell;width:500px;}
div.child {display:inline-block;width:100px;height:100px;border:1px solid black;margin:10px;}
div.dummy {display:inline-block;width:100px;height:0px;margin:0 10px;}
- 706 ：Name_Not_Found：2014/02/04(火) 08:17:19.25 ID:???.net
- >>705
なるほど、ダミーをかますのか
table-cellも知らなかった
ありがとう、参考になったよ
- 707 ：Name_Not_Found：2014/02/04(火) 20:15:18.64 ID:???.net
- >>705
childの数がページによっては１つだったり１０あったりと
１～１０個の間で上下するのですが
ページがレンダリングする際に
いくつdummy要素を置くか毎回計算してレンダリングしないといけないってことでしょうか？
- 708 ：705：2014/02/05(水) 21:57:18.78 ID:???.net
- >>707
>>705はparentを1個にして
div.parent {margin:0 auto;text-align:center;max-width:500px;}
のほうがすっきりしてよかった。
childの数が1～10の間で変わる場合、dummyは8個固定でよいが、max-widthの値は
childの数によって変えないといけない。（dummyが最上段に上がってこないように。）
htmlを手作業で作っているならmax-widthを手打ちで設定できるが、ブログサービス
のようなのだとjQuery等でchildの数を数えてmax-widthを設定するしかないかな。
- 709 ：705：2014/02/05(水) 23:12:44.76 ID:???.net
- javascriptだとこんな感じで(行数を詰めるため醜くてすみません)。
<script type="text/javascript">
function init() {
var w=130;n=0;e=document.getElementsByTagName("DIV");
for(var i=0;i<e.length;i++){if(e[i].className=="child"){n++;}}
for(var i=0;i<e.length;i++){if(e[i].className=="parent"){e[i].style.maxWidth=w*n+"px";}}
}
</script>
htmlの<body>を<body onLoad=init();>にしてページ読み込み完了後init()起動。
- 710 ：Name_Not_Found：2014/02/09(日) 11:32:41.69 ID:???.net
- このスレって質問するだけでお礼言わないのがデフォなんだね
- 711 ：Name_Not_Found：2014/02/09(日) 12:50:47.36 ID:???.net
- このスレの回答者は
無償の愛
- 712 ：Name_Not_Found：2014/02/09(日) 13:30:39.24 ID:???.net
- 教えることは教わること
- 713 ：Name_Not_Found：2014/02/09(日) 20:30:52.34 ID:???.net
- んだんだ
- 714 ：Name_Not_Found：2014/02/11(火) 19:41:42.99 ID:fKDa27m6.net
- レスポンシブデザインでの質問なんですが、
JSでナビの表示非表示を切り替える場合にナビゲーションのマークアップ、CSSは皆さんどうしてますか？
このサイトなんかだと切り替え用にナビ部分を複数用意されてるけど、
3個以上ナビがあるのはSEOとかWEB標準的にどうなんでしょうか。
ttp://plugins.adchsm.me/slidebars/
今作ってるサイトでは上部とフッターにナビがあるんですが
上部のナビをタブレット以下の画面でのみ切り替え可能にしてます。
ここで問題があって1024px以下の状態でJSで非表示にし、
その状態で画面を1024以上に広げるとPC用のレイアウトで配置される位置に
ナビが表示されていないのです。
この問題はjsで挙動制御して解決できるんですがもっといい案があれば知りたいです。
- 715 ：Name_Not_Found：2014/02/11(火) 23:59:12.15 ID:???.net
- そのサイトはナビUIそのものの宣伝だから
複数用意されているのも当然じゃないかw
複数と標準とは関係ない。
一般論としては代替手段は多い方が好ましい。
好印象を受ける人が多ければその結果としてSEOに反映されることは
あるかもしれないが、 UIで左右されるほどでもないかもしれない
スライドさせるアニメーションとかどうでもいいときは
ナビをposition:fixedにして display で表示を切り替えるのが簡便かな
>その状態で画面を1024以上に広げる
js で対応するより先に CSS による対応を考えるべきだろう
@media screen and (max-width:1024px) {
1024px 以下のときだけ適用されるふるまいをCSSで記述
}
そもそも@media はその種の目的を実現するために考え出された仕組みなのだから
- 716 ：Name_Not_Found：2014/02/12(水) 11:28:35.31 ID:???.net
- >>>715
丁寧にありがとうございます。
@mediaで振り分けてたんですがJSでアニメーションしながら表示の切り替えをしていたら
JSで生成されたインラインCSSが@mediaを上書きしてしまっていて挙動がおかしかったようです。
保守性を考えてシンプルに切り替え用のナビを別に用意して解決しました。
本当に助かりました。
レスポンシブサイトってデザインより機能をレスポンシブにする方が難しいんですね。(´･ω･`)
- 717 ：Name_Not_Found：2014/02/12(水) 11:59:34.78 ID:???.net
- FirefoxアドオンのStylishというアドオンでサイトを見やすくしています。
特定の子要素以外という指定方法が分かりません。
sc_lidAdd_gmenu という要素内のdiv要素の2番めの要素以外を
指定しようとすると下のような感じになると思うのですが
エラーが出てしまいます。
#sc_lidAdd_gmenu:not(div:nth-child(2))
"何番目の要素以外"という指定は出来るのでしょうか？
- 718 ：Name_Not_Found：2014/02/13(木) 03:24:40.30 ID:???.net
- メディアクエリでviewport=device widthにして800以下はスマホだから～とかほざいてるやつは何なの？バカなの？
Full HDのスマホとか当たり前なんだが？対応できてないくせにアフィ目的で糞ゴミ記事のせてんじゃねえよカス死ね
- 719 ：Name_Not_Found：2014/02/13(木) 15:30:14.14 ID:???.net
- ちょっと何言ってるかわかんない
- 720 ：Name_Not_Found：2014/02/14(金) 22:58:14.80 ID:???.net
- >>718
Full HDでも幅は800以下だよｗ
お前の知らない世界。
- 721 ：Name_Not_Found：2014/02/20(木) 21:13:56.74 ID:???.net
- ちょっと男子ー 弱いものいじめはやめなよー
- 722 ：Name_Not_Found：2014/02/22(土) 21:08:27.04 ID:???.net
- 俺は女だ !
- 723 ：Name_Not_Found：2014/03/07(金) 23:54:39.77 ID:QaNqG06j.net
- css書くときにクラス属性で
.classをp.classとかする意味はなんですか
pに対してのみ使うって意味ですか
- 724 ：Name_Not_Found：2014/03/07(金) 23:59:04.39 ID:???.net
- >>723
.classだと、要素がpでもdivでもblockquoteでもクラスにclassがあれば適用される
p.classだとp要素のみ適用し、divやblockquoteのクラスにclassがあっても適用されない
- 725 ：Name_Not_Found：2014/03/08(土) 00:51:03.97 ID:s3deH4C7.net
- >>724
理解出来ました
どうもっす
- 726 ：Name_Not_Found：2014/03/12(水) 03:36:16.91 ID:LZnK/1kk.net
- 連れて帰ってくれませんか、こちらの人でしょ
http://hissi.org/read.php/chakumelo/20140311/a3RybVVibHQw.html
http://hissi.org/read.php/chakumelo/20140312/M01xMmQxUE4w.html
- 727 ：Name_Not_Found：2014/03/12(水) 05:16:01.61 ID:???.net
- >>726
そうかもしれませんが、連れ帰るのは不可能です。
なぜなら、誰にも他人の行動を制限することは出来ないからです。
まあ近くに住んでるとわかるなら別ですが。
だから諦めてください。もしくは最低限その人の個人情報を
あなたが調べてください。（調べたとしてもその人が近くになければ無理ですが）
他人にお願いするなら。まずそれ相応の行動をあなたが示してください。
頼むだけでなんでもやってくれると思ってたとしたら、世の中そんなに甘くないですよ。
- 728 ：Name_Not_Found：2014/03/12(水) 20:27:24.58 ID:51Nylvtm.net
- HTML5で写真を貼って<figure>~</figure>で囲むように説明があるのでそうしたら
その写真だけ右にズレて表示される
だからCSSに
figure { margin: 0; }
ってすれば左詰めで表示される
あるいはHTMLに<figure>~</figure>で囲まなければちゃんと表示される
でも本には囲むように書いてある
もう無理
- 729 ：Name_Not_Found：2014/03/13(木) 04:28:21.64 ID:???.net
- >>728
figure { text-align: center; }
- 730 ：Name_Not_Found：2014/03/13(木) 14:47:59.91 ID:???.net
- 728だけど
Coda2でずっとやってても同じで
外部のCotEditorで一度figure { margin: 0; }を削除しても画像がズレないのでもう一度Coda2で開いたら写真がズレずに表示された
なんだよこれよ
Coda2でも何度も保存してやったのに何でだよ
- 731 ：Name_Not_Found：2014/03/13(木) 17:34:38.00 ID:???.net
- 結局やっぱりfigureで囲んだ写真が左にズレるので色々見たら原因が完璧に分かった
figureがどうのじゃないんだよ
本に載ってるnormalize.cssはヴァージョンがv2.1.3
俺がダウンロードしたのはv3.0.0
v2.1.3では
figure {
margin: 0;
}
v3.0.0では
figure {
margin: 1em 40px;
}
だからズレてたんだ
結局style.cssでfigure { margin: 0; }で良かったんだ。
本と違うから悩んだよ一日
- 732 ：Name_Not_Found：2014/03/13(木) 18:32:37.16 ID:???.net
- >>731
,．-─ ─-､─-､
, イ)ィ -─ ──- ､ﾐヽ
ノ ／,．-‐'"´ ｀ヾj ii / Λ
,ｲ／／ ^ヽj(二ﾌ'"´￣｀ヾ､ﾉｲ{
ノ/,／ミ三ﾆｦ´ ﾞ､ﾉi!
{V /ミ三二,ｲ , -─ Yｿ
ﾚ'/三二彡ｲ .:ィこﾗ ;:こﾗ j{
V;;;::. ;ｦヾ!V ｰ '′ i ｰ ' ｿ
Vﾆﾐ( 入 ､ r j ,
ヾﾐ､｀ゝ ｀ ｰ--‐'ゞﾆ<‐-イ
ヽ ヽ -''ﾆﾆ‐ /
| ｀､ ⌒ ,/
| ＞ ---- r‐'´
ヽ＿ |
ヽ ＿ ＿ 」
Agernacus （西暦一世紀のギリシャの愚人）
- 733 ：Name_Not_Found：2014/03/13(木) 19:24:55.86 ID:???.net
- あれ ?
お婿さんにいったの ?
- 734 ：Name_Not_Found：2014/03/16(日) 14:55:05.11 ID:???.net
- すみません質問です。
5px×5pxの画像をbodyの四方に配置したいのですがその場合どうやれば出来るのでしょうか。
body { background-image: url("imags/example.png");
background-repeat: repeat-x;
backgroud-position: top;
}
とかやりますよね
上のだと当然上一列横方向には表示出来ますが
左右の縦方向と下の横方向は当然表示されません。
試しに{ background-repeat: repeat-x repeat-y }
とやっても駄目
{ backgroud-repeat: repeat-x,repeat-y; }としても駄目
{ backgroud-repeat: repeat-x;
backgroud-position: top bottom; }としてもカンマで区切っても駄目でした
四隅の周りを縁取るように配置するにはどのようにしたら出来るのでしょうか。
- 735 ：Name_Not_Found：2014/03/16(日) 19:43:27.24 ID:???.net
- >>734
やりたいことは多分border-image-repeatだと思う
CSS3なので対応ブラウザが少ないけど
- 736 ：Name_Not_Found：2014/03/16(日) 20:01:33.53 ID:???.net
- マルチには答えないようにしましょう
- 737 ：Name_Not_Found：2014/03/28(金) 20:48:10.09 ID:KsU3zai7.net
- 以下のようなコードでブラウザ幅にあわせて改行するにはどうすればいいでしょうか
<span>-a-</span><span>-b-</span><span>-c-</span><span>-d-</span>
- 738 ：Name_Not_Found：2014/03/28(金) 21:30:01.04 ID:???.net
- HTMLを一から勉強したほうがいいと思うぞ。
- 739 ：Name_Not_Found：2014/03/28(金) 21:34:18.14 ID:???.net
- >>737
ブラウザの横幅は君の家と僕の家では違うけど！？
しかもフォントの大きさも違う
フォントの種類も違う
常に一定じゃない
パソコンとスマホで同じ文字数だとおかしいよねそういう事
それともレスポンシブルWebデザインのこと言ってるのかな！？
フォントサイズをピクセルじゃなくパーセントで指定すればいいんだよ
- 740 ：Name_Not_Found：2014/03/28(金) 23:13:30.93 ID:???.net
- 737は周りから SpanKing と呼ばれているに違いない・・・
- 741 ：Name_Not_Found：2014/03/29(土) 14:16:55.00 ID:???.net
- スパンキング趣味のあるSpanKing様降臨！
spanはインライン要素
- 742 ：Name_Not_Found：2014/03/29(土) 16:17:44.59 ID:???.net
- ドラゴンボールの歌詞であったじゃないか？
スパンキング！って
- 743 ：Name_Not_Found：2014/03/29(土) 20:17:13.15 ID:???.net
- リスト
ブロック
- 744 ：Name_Not_Found：2014/04/01(火) 20:25:16.13 ID:???.net
- CSS のEditor's draft が何かすごいことになってるw
例えば
ttp://dev.w3.org/csswg/css-animations/
- 745 ：Name_Not_Found：2014/04/01(火) 23:15:51.88 ID:???.net
- 何が凄いの？ 解説してくれない？
- 746 ：Name_Not_Found：2014/04/01(火) 23:50:24.88 ID:???.net
- スタイルが仕様書にはあり得ない
（普段の状態知らなければわからないかもね）
エイプリルフールなのかな
- 747 ：Name_Not_Found：2014/04/10(木) 17:37:09.58 ID:j4mbLY5V.net
- 質問させてください
横にA B Cの３つのカラムがあります
AとCに背景画像、Bに本文を入れます
Bを中央に配置し、ブラウザを狭めるとAとCが消えるようにするにはどうしたら良いでしょうか？
- 748 ：Name_Not_Found：2014/04/10(木) 19:58:50.82 ID:???.net
- >>747
media queries がまさにそういう用途のためのCSS
- 749 ：Name_Not_Found：2014/04/10(木) 21:21:00.54 ID:j4mbLY5V.net
- >>748
ありがとうございます
しかしながら普通にcssでやりたいのですが、出来ませんか？
- 750 ：Name_Not_Found：2014/04/10(木) 22:42:54.50 ID:???.net
- >>749
論理的に考えれば
表示幅を、消すか表示するかの２択に写像するような機能が
その「普通のCSS」に存在しなければならない
以下「普通にCSS」がmedia queries は未サポートを意味すると仮定する。
そのような例としては display:inline-block や float が考えられる
これらは消すか表示の２択ではないが、レイアウトを２択っぽくする
B の高さを（内容が収まる十分な大きさに）固定する
条件付きであれば overflow: hidden と組み合わせる方法が考えられる
- 751 ：Name_Not_Found：2014/04/10(木) 23:46:26.05 ID:???.net
- >>750
なるほど、試してみます
- 752 ：Name_Not_Found：2014/04/11(金) 15:07:11.03 ID:ZQzqv/pM.net
- アメブロでcssを使ってカスタマイズしたのですが、読者一覧やブックマーク一覧の背景が写真のように真っ白です
色を変更する事は出来ないのでしょうか？
http://imepic.jp/20140411/540620
- 753 ：Name_Not_Found：2014/04/11(金) 17:43:35.83 ID:XmT8wFGm.net
- inputのwidthを100%にして余白を5pxにしたいと思います。
input{
width:100%;
padding:5px;
}
こうすると当然ながら100% ＋10px分のwidthになりますが、
「100%に伸ばして余白を空ける」事って出来ないでしょうか？
HTMLを変更する以外で方法があれば教えて下さい。
- 754 ：Name_Not_Found：2014/04/11(金) 18:42:14.86 ID:???.net
- >>753
margin: 5px;
では？
- 755 ：Name_Not_Found：2014/04/11(金) 20:31:07.38 ID:???.net
- いえ、違います。それはinputの周りに対する処理であり、
inputの中に（余白）に対しての処理がしたいのです。
- 756 ：Name_Not_Found：2014/04/12(土) 00:04:43.77 ID:???.net
- >>755
calc()
- 757 ：Name_Not_Found：2014/04/12(土) 11:46:35.78 ID:???.net
- >>756
まさにこれです！こんなに便利なものがあったとは！！！
本当に勉強になりました。ありがとうございました。
- 758 ：Name_Not_Found：2014/04/12(土) 12:05:56.06 ID:???.net
- calcもいいけど、box-sizingを使うって手もあるよ
- 759 ：Name_Not_Found：2014/04/12(土) 12:25:16.99 ID:???.net
- すごい勉強になるスレ
- 760 ：Name_Not_Found：2014/04/17(木) 17:03:04.95 ID:???.net
- IE8に対応してないから、業務には使えないよね？
IE8は切り捨てたの？
- 761 ：Name_Not_Found：2014/04/17(木) 19:01:59.60 ID:???.net
- 本家が切り捨ててるのに、俺らが対応しなければいけない理由を教えてくれ
- 762 ：Name_Not_Found：2014/04/17(木) 22:02:54.61 ID:???.net
- >>761
ユーザーがさぁｗ
- 763 ：Name_Not_Found：2014/04/18(金) 04:39:40.27 ID:???.net
- 762はIE8のシェア知ってる？
- 764 ：Name_Not_Found：2014/04/18(金) 11:07:31.04 ID:???.net
- 21.73%
- 765 ：Name_Not_Found：2014/04/18(金) 16:09:56.75 ID:???.net
- それくらい
まだ1/5もいるからね…
- 766 ：Name_Not_Found：2014/04/18(金) 22:07:34.93 ID:???.net
- サイトによってはもっといるからな
- 767 ：Name_Not_Found：2014/04/20(日) 14:51:06.64 ID:???.net
- なんでbodyの幅を例えば400pxとかに指定しても、背景すべてがbodyで指定した背景色に染まるの？
body
{
width:400px;
background-color:blue;
}
- 768 ：Name_Not_Found：2014/04/20(日) 15:12:14.74 ID:???.net
- なんで試してから書き込まないの？
- 769 ：Name_Not_Found：2014/04/20(日) 16:22:37.67 ID:???.net
- >>767
bodyの場合のふるまいは特別で
背景画像の領域が初期ビューポートにされるからだろう
400px にしたければ DIV でくるんでやるくらいか
- 770 ：Name_Not_Found：2014/04/20(日) 23:55:52.90 ID:???.net
- >>769
なるほど背景だけが同じになってるんだ
じゃあhtmlにスタイル指定できるのはなぜなんだとか思ったり
色々ややこしいよねHTMLって
回答ありがとう
- 771 ：Name_Not_Found：2014/04/23(水) 00:21:06.25 ID:???.net
- <div class="A1 B1">あ</div>
<div class="A1 B1">か</div>
<div class="A1 B2">さ</div>
<div class="A2 B2">た</div>
<div class="A2 B3">な</div>
<div class="A2 B3">は</div>
こういうhtmlがあった時に、レスポンシブデザインで
幅が一定以上の時は
あさな
かたは
一定未満の時は
あた
かな
さは
の順で表示させるようなことって可能でしょうか？
単純な方法を教えてください。
- 772 ：Name_Not_Found：2014/04/23(水) 18:57:16.50 ID:???.net
- はい
- 773 ：Name_Not_Found：2014/04/23(水) 23:27:10.23 ID:???.net
- CSSフレームワーク使うよろし
- 774 ：Name_Not_Found：2014/04/24(木) 21:16:58.88 ID:???.net
- <div class="hoge">～</div>のある場所から(同じページ内の)遠く離れた位置に
もう一度、<div class="hoge">～</div>の内容を表示する方法はないでしょうか？
同じ(長めの)文章を、1回の<div>～</div>を使って2回表示したいのです
ページの容量(転送量)を削減するのが目的です
- 775 ：Name_Not_Found：2014/04/24(木) 21:43:35.22 ID:???.net
- >>774
はい
- 776 ：Name_Not_Found：2014/04/25(金) 07:16:12.22 ID:???.net
- 容量削減目的で
同じ文章を2回表示？
禅問答かよ
- 777 ：Name_Not_Found：2014/04/25(金) 09:18:53.67 ID:???.net
- >>774
CSSだけじゃ無理だからjs使うだね。
- 778 ：Name_Not_Found：2014/04/25(金) 15:14:03.24 ID:???.net
- ページの容量を減らしたいのなら圧縮すればいいだけ。
- 779 ：Name_Not_Found：2014/05/05(月) 00:15:50.40 ID:???.net
- <div>
<p>いち</p>
<p>に</p>
<p>さん</p>
<p>よん</p>
</div>
div{list-styl-type:decimal}
p{display:list-item}
-----結果-----
0.いち
0.に
0.さん
0.よん
Firefoxだとこういう結果になるんですが対処法はありますか？
- 780 ：Name_Not_Found：2014/05/05(月) 05:36:09.32 ID:???.net
- olを使わない理由を教えてもらおうか
- 781 ：Name_Not_Found：2014/05/05(月) 11:26:38.00 ID:???.net
- >>779
あります
- 782 ：Name_Not_Found：2014/05/13(火) 16:57:23.16 ID:???.net
- STAP細胞は
- 783 ：Name_Not_Found：2014/05/14(水) 00:40:45.14 ID:???.net
- ありません
- 784 ：Name_Not_Found：2014/05/15(木) 06:23:35.93 ID:???.net
- >>780
ほんとだ
- 785 ：Name_Not_Found：2014/05/17(土) 09:11:53.67 ID:???.net
- 画像の中央寄せてのは幅を固定するしがだめでしょうか？
汎用のグラスで統一しようと思ってるのですができません。
これではダメでした
margin-left auto
margin-right auto
- 786 ：Name_Not_Found：2014/05/17(土) 17:12:43.71 ID:???.net
- >>785
画像（ img ）は通常、インラインレベルの要素として扱われるので
（img に対する display プロパティのブラウザの既定の値は通常 inline ）
margin の auto は 0 と見なされる
（正しくは、日本語や英語などの左横書きでは、 left-margin の auto が 0 と見なされるので、左寄せになる）
（何故そうなってるかは、 img などのインラインレベルが複数個 並んだときの流し込みのふるまいとの一貫性をとるため）
中央に揃えるためには、
(1) img の display プロパティに block を指定してブロックレベルにする
または
(2) img の親で
<div style="text-align:center"> <img ... > </div>
のようにする
(2) の方法では、インラインレベルが複数個 続いたときにも中央揃えになる
- 787 ：Name_Not_Found：2014/05/17(土) 21:29:02.13 ID:???.net
- >>786
ありがとうございます。勉強になりました。
特にdivにtext-alignをいれるなんで思いませんでした。
- 788 ：Name_Not_Found：2014/05/18(日) 10:23:22.15 ID:???.net
- >>779
報告がないんだな
- 789 ：Name_Not_Found：2014/05/19(月) 10:42:43.81 ID:???.net
- 見出しを作成しているんですが、テキストの右側にTOP50%の位置に来るように
水平線（またはborder）を置く場合はどのようにCSSを書けばいいでしょうか？
中央揃えのテキストの両側に水平線を置くやり方はあったのですが…。
- 790 ：Name_Not_Found：2014/05/19(月) 18:52:07.88 ID:???.net
- >>789
>中央揃えのテキストの両側に水平線を置く
その方法を応用できないのか？（どんな方法か興味あるので教えてほしい）
見出しテキスト（複数行は不可）の後ろにページ幅の残り（可変幅）を占める水平線を生成する方法：
<div><span>見出し</span></div> とするとき
div {
white-space:nowrap; /* 改行なし */
overflow:hidden; /* ページ幅を越える部分は非表示 */
}
/* 見出しの後に水平線を生成 */
span::after {
content:""; /* 何かを表示させるために必要 */
display:inline-block; /* ブロックレベルにして width を有効化 */
width: 10000px; /* 見出しの右側を埋め尽くす十分な長さ */
height: 1px; /* 線の太さ */
vertical-align: middle; /* 水平線の高さを行高の中央にする */
background: black; /* 線の色 */
margin-left: 10px; /* 見出しと水平線の間隔 */
}
- 791 ：Name_Not_Found：2014/05/19(月) 18:52:51.84 ID:???.net
- >>789
flex ボックスを利用する方法もある
（コードは簡単になるが、 ::after は使えないかも）：
<div style="display:flex; align-items:center;">
見出し
<span style="
flex-basis: auto; /* 可変幅 */
flex-grow: 1; /* 残りの幅を占めさせる */
height: 1px; /* 線幅 */
background: black /* 線色 */
"></span>
</div>
- 792 ：Name_Not_Found：2014/05/19(月) 19:36:32.40 ID:???.net
- 質問なのですが、divのボーダーの中に画像を表示したいのですが、ブラウザによって画像のボトムに隙間があきます。
よろしくお願いします。
div{boder:1px solid black;width:1000px;}
Img{vertical-align:bottom;width:980px;padding:10px 10px 0 10px; }
<div>
<img src…>
</div>
- 793 ：Name_Not_Found：2014/05/19(月) 19:59:15.21 ID:???.net
- >>792
画像のマージンやパディングが 0 でないかもしれない
- 794 ：Name_Not_Found：2014/05/23(金) 10:21:26.08 ID:icALDIH/.net
- こんな専門的な板で無知な初心者質問を書き込むのは非常に恐縮なのですが、
教えていただけると助かります…
下記のサンプルページにおける社名の部分、
サンプルコーポレーションの部分ですが
この余白を広げるにはどうしたらいいでしょうか…
http://nikukyu-punch.com/template/biz11_green/index.html
スタイルシートをいじればいいのはわかるのですが、
nav menuの部分もうまく下にさがってくれません…
結構詰まってます…詳しい方、助けて下さい…よろしくお願いします。
- 795 ：Name_Not_Found：2014/05/24(土) 21:15:40.19 ID:???.net
- >>794
ありがとう
ベースラインでしたか
- 796 ：790：2014/06/03(火) 22:14:58.15 ID:???.net
- >>790
レス遅れてしまってすみません。
応用しようと思ったんですけど力不足で無理でした…
教えて頂いた2つの方法でどちらも再現できました。
>>791の方を今一理解できていないのでじっくり検証してみます。
参考にしたのはこのサイトです。
ttp://terkel.jp/archives/2014/01/text-with-horizontal-line/
詳しく解説して頂いて本当に勉強になります。
ありがとうございました！
- 797 ：Name_Not_Found：2014/06/06(金) 00:19:21.75 ID:???.net
- target-densitydpi=medium-dpi(160dpi)
にすると、４インチのiPhoneでギリギリ320pxいかないんだよね
iPhoneは326dpiで640pxだから、画面の長さが２インチに届かない
160dpi x 2inch = 320px
だったらこの設定でレスポンシブにできるのに
なんであんな中途半端なdpiなんだろうね？
対角線の長さのキリのよさにこだわらなくてもいいと思うんだけど
- 798 ：Name_Not_Found：2014/06/13(金) 01:11:23.54 ID:???.net
- １カラムだと幅800px以上は無意味だな
- 799 ：Name_Not_Found：2014/07/03(木) 09:37:37.60 ID:???.net
- tableの中のtdタグにwidthを指定しても
ブラウザを小さくすると追従して幅が狭くなってしまうのはなぜでしょう？
<td style="width:100px">hoge</td>
- 800 ：Name_Not_Found：2014/07/03(木) 11:14:50.69 ID:???.net
- そこらへんの仕様はブラウザに任せられている任意
でも普通は横スクロールバーが出るような気がするが
それ以外のところでなんかやってないか
- 801 ：Name_Not_Found：2014/07/03(木) 16:59:59.03 ID:???.net
- min-widthというのがありました。
- 802 ：Name_Not_Found：2014/07/03(木) 17:20:34.53 ID:???.net
- table-layoutとか？
- 803 ：Name_Not_Found：2014/07/03(木) 21:20:26.39 ID:???.net
- >>800
ウソ教えるなよ
- 804 ：Name_Not_Found：2014/07/11(金) 19:48:43.82 ID:tq8ETiMk.net
- <ul><li>とか<dl><dt><dd>使って無理矢理横並びにデザインしたんだけど
CSS読み込めなかったりIEの互換表示とかだと思いっきり縦並びになって崩れるんだよなぁ
tableタグのところはまともに見れるんだがいっその事tableの方がよくね？って思ったｗ
- 805 ：Name_Not_Found：2014/07/11(金) 22:01:05.71 ID:???.net
- CSSだけ読み込めないなんて滅多にあることじゃないし
互換表示は見てる側が勝手にやってんだから気にすることはない
崩れるのは「お前のブラウザが悪い、俺は悪くない」でいいじゃないか
そんな配慮してるからいつまでたっても古いブラウザがなくならないんだ
- 806 ：805：2014/07/12(土) 01:18:29.64 ID:???.net
- とりあえずコンテンツで縦表示になると思いっきりヤバイところはtableタグに戻した
表関係とページ部品とか縦表示になってしまうと訳わからなくなりそうなとこだけｗ
- 807 ：Name_Not_Found：2014/07/12(土) 01:49:47.43 ID:???.net
- >>806
二軸で管理してるものはテーブルでいいんだよ？
表はもとからテーブルでやるもんでしよ
- 808 ：Name_Not_Found：2014/07/24(木) 17:23:36.73 ID:???.net
- 今の人は、有史以前のテーブルレイアウトと言うものの恐ろしさを知らんから
TABLEタグそのものが悪いものと誤解している
- 809 ：Name_Not_Found：2014/07/30(水) 23:45:08.86 ID:???.net
- WEBカメラのストリーミング動画を上下反転表示させたく下記の様に書いたところ、
上下反転は出来た物の、動画でなく読み込んだ瞬間の静止画になってしまいました。
transform: rotateで指定できるのは文字や静止画のみなのでしょうか？
また、他に書き方が有れば教えていただけないでしょうか？
よろしくお願いいたします。
HTML
<div>
<img width="320" height="240" src="http://192.168.39.3:8080/?action=stream"/>
</div>
CSS
div{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
- 810 ：Name_Not_Found：2014/08/01(金) 19:43:12.33 ID:???.net
- bootstrapのnavbarの高さの変更の仕方教えてください
- 811 ：Name_Not_Found：2014/08/11(月) 02:03:58.05 ID:AJ4bvyyH.net
- http://i.imgur.com/4SjR8lt.png
このテキストエリアの右下の引っ張るとサイズを変更できる部分をCSSで操作することは出来ないのでしょうか
具体的にはここにマウスが乗った時にマウスの形を「＼」こんな感じのリサイズ出来ますよアイコンにしたいのですが。
- 812 ：Name_Not_Found：2014/08/11(月) 10:12:02.13 ID:uweigKaa.net
- >>811 最悪JavaScriptでやらないとむりぽ。
もしくは疑似セレクタ使えば多分いけると思うよ。
疑似セレクタでその部分に疑似要素を作り、
その部分にマウスが乗ったらいつもの様にマウスアイコン替えるみたいな。
- 813 ：Name_Not_Found：2014/08/11(月) 21:48:48.58 ID:???.net
- >>811
-webkit-resizer
- 814 ：Name_Not_Found：2014/08/12(火) 15:23:39.23 ID:3wIG//Vk.net
- FC2ブログの画像表示の指定が以下のようになっています。
.mainEntryBody img{
float: center;
margin:0px 0px 0px 30px;
padding: 8px;
border:solid 1px Black;
}
テキストを場合によって画像の表示位置に合わせたいときがあるのですが、
どうすればよいですか?
本当の初心者ですのでよろしくお願いします。
- 815 ：Name_Not_Found：2014/08/13(水) 03:50:26.99 ID:???.net
- 遅くなりましたがありがとうございます。
>>812さん
うまく右下隅に合わせるのが難しいですが頑張ってみます。
>>813さん
私の環境だとボーダー等の設定は出来ましたがカーソルの指定は出来ませんでした。
- 816 ：Name_Not_Found：2014/08/14(木) 11:49:28.61 ID:???.net
- オブジェクト志向のCSSがバランスがわかりません
BOXを細かくつくったら文句いわれたりスキン足りないとかいわへてハゲそうです。
- 817 ：Name_Not_Found：2014/08/14(木) 17:15:03.29 ID:???.net
- ∧_∧
(´･ω･)∧∧l|l
/⌒_つ⌒ヽ) ハゲてもかわいいよ
( ( )
""""""""""""""""""""
- 818 ：Name_Not_Found：2014/08/14(木) 17:18:00.85 ID:???.net
- 彡 ノ
ヴィィィイイン ﾉノ ノ
〃￣ヽ ── ─ ─ ∩ ⌒ ミ
r'-'|.| O | ── ─ (´･ω･｀∩
`'ｰヾ､＿ノ ── ─ 丿 丿
| ,| ─ ─ ─ ⊂― ⊂´
,-/￣|､
ｰ---‐'
- 819 ：Name_Not_Found：2014/08/17(日) 15:54:23.41 ID:???.net
- ul要素を横に並べて表示する方法を教えて下さい
- 820 ：Name_Not_Found：2014/08/17(日) 16:21:05.18 ID:???.net
- <ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul><ul>
- 821 ：Name_Not_Found：2014/08/17(日) 16:30:03.50 ID:???.net
- >>819
http://img.nipple-img.com/wp-content/uploads/2014/07/20140722-2-23.jpg
- 822 ：Name_Not_Found：2014/08/17(日) 17:03:12.23 ID:???.net
- >>821
２つのY軸をOPENにする方法を教えて下さい
- 823 ：Name_Not_Found：2014/08/17(日) 17:10:25.92 ID:???.net
- < i >
- 824 ：Name_Not_Found：2014/08/17(日) 17:11:16.71 ID:???.net
- < i >
- 825 ：Name_Not_Found：2014/08/17(日) 19:12:48.83 ID:???.net
- olの方がいいのではないか
- 826 ：Name_Not_Found：2014/08/17(日) 20:01:42.10 ID:???.net
- GJ
- 827 ：Name_Not_Found：2014/08/20(水) 03:17:15.92 ID:???.net
- http://jobinjapan.jp/job-listing/keyword-css.html
- 828 ：Name_Not_Found：2014/08/21(木) 02:40:27.27 ID:???.net
- 自分のサイト名で検索したら、トップページに全く知らないサイトが表示されました
そこをクリックすると、一瞬私のサイトが出てきて、すぐに別のサイトに飛びます
別のサイトのソースを見ると、「link rel="stylesheet" 」
「link rel="alternate"」「link rel="shortcut icon" 」
などがすべて私のサイトが指定してあります。
私のソースからコピペしたようなのです。
私のサイトはヴォリュームも多くページランクも高いので
そういう行為にメリットが有るのかもしれませんが
私は大変迷惑しています。
それを防ぐ方法はないでしょうか。
- 829 ：Name_Not_Found：2014/08/21(木) 11:04:15.98 ID:???.net
- cssと全く関係なくてスレ違いだけど
Refererによるアクセス制限とかすれば
- 830 ：Name_Not_Found：2014/08/21(木) 20:02:03.68 ID:???.net
- display: inline;
と
display: inline-block; width: auto
の重要な違いって、どこにありますか？
例えば、自分の制作しているページで
span, a, code, ... その他のインライン要素 {
display: inline-block !important;
width: auto !important;
}
のようなコードを追加して、インラインレベルのスタイルを全部 inline-block にしてみましたが、目に見える違いが生じてきません。
となると display: inline; は、実はシンタックスシュガーでしかないのでは？とも思えてきます。
display: inline; にできて display: inline-block; ではできない機能には、どんなものがありますか？
- 831 ：Name_Not_Found：2014/08/21(木) 20:23:05.59 ID:???.net
- heightどうだったっけ
- 832 ：Name_Not_Found：2014/08/21(木) 22:45:00.85 ID:???.net
- 上下のmarginとか
- 833 ：Name_Not_Found：2014/08/21(木) 22:45:39.92 ID:???.net
- まーじですか！
- 834 ：Name_Not_Found：2014/08/22(金) 13:36:22.68 ID:???.net
- ブロック要素追加で幅と高さ指定できるようになるんちゃうか
- 835 ：Name_Not_Found：2014/08/23(土) 02:17:08.62 ID:???.net
- 画像の挙動がインラインブロックだとおもっとけば大体あってる。
- 836 ：Name_Not_Found：2014/09/03(水) 07:15:07.83 ID:???.net
- とあるサイトのユーザーCSSを作ってます
広告部分を除外したいのですが、divのクラス名がコンテンツと同じ指定のされた広告が有り
単純にそのクラス名で指定できません
具体的に構造を書くと
div ID=Left
div class=ad
div class=parts
div class=ad
div class=parts
div class=parts
div class=parts
/div
というようになっていて、このクラスpartsのうち、2番めと3番めが広告になっています。
nth-of-type()やnth-child()では、類似した別のページでは順番が変わったりするため
使えません。partsの子（Leftの孫)まで見れば消すべき部分が判定できるのですが、
div#Left>div.parts>h3 {display:none !important}してもh3しか消えません
孫にh3のある子div.partsに適応するにはどうすればいいでしょうか？
- 837 ：Name_Not_Found：2014/09/04(木) 00:22:59.14 ID:???.net
- >>836
CSS3 だとムリじゃね
jQuery 使っていいなら :has() でできると思う
- 838 ：Name_Not_Found：2014/09/06(土) 11:44:09.05 ID:Nu/6dnVd.net
- cssでつくるフキダシで背景を透過させるのってむずかしいですか？ちなみにボーダーはあり。
- 839 ：Name_Not_Found：2014/09/06(土) 13:41:32.28 ID:???.net
- >>838
opacity: 0.5; とかじゃいかんのか？
そういうことじゃなくて？
- 840 ：Name_Not_Found：2014/09/06(土) 16:04:50.21 ID:???.net
- rgbaでアルファ値落とす
- 841 ：Name_Not_Found：2014/09/07(日) 06:10:51.19 ID:???.net
- >>836
>このクラスpartsのうち、2番めと3番めが広告になっています
それらを別に扱うのなら、別のクラスにした方がよいかも
これはプログラムのバグを生む、設計上のミス
- 842 ：Name_Not_Found：2014/09/09(火) 17:59:16.38 ID:???.net
- 質問です。
topにpxで指定するとして、入れられる値の最大値を教えてもらいたいです。
仕様のアドレスがあれば、それも教えてもらえるとうれしいです。
css 最大とかmaxでググっても関係無いものが大量にヒットして分かりませんでした…
- 843 ：Name_Not_Found：2014/09/09(火) 18:53:04.22 ID:???.net
- >>842
スクロールできる限り青天井だろ。
公用語で説明をきっちりしてくれ。
- 844 ：843：2014/09/09(火) 19:08:05.91 ID:???.net
- >>843
確かにtopに26000pxまでは問題無く指定出来ましたが、どこかでエラーにならないか
仕様的な面で気になったので質問しました。
すみません、１つ言い忘れてましたが、指定してるのはJavaScriptでした。
hoge.style.top = iTop + 'px';
と指定してます。
JavaScriptで表現出来る範囲で青天井な気はしてます。
- 845 ：Name_Not_Found：2014/09/11(木) 11:17:32.58 ID:???.net
- ul.olタグの文字を大きくしたいのですが
ul li{
font-size: 17px;
line-height: 25px;
}
でCSS書いてもあきません。
フォントサイズ変更されないのですよ。
ワードプレスを小テーマ使ってほそぼそとやらせてもろてます。
小テーマのstyle.cssを修正しています。
ワードプレススレで聞こうと思ったら、CSSスレで聞けってさ。
- 846 ：Name_Not_Found：2014/09/11(木) 18:54:09.65 ID:???.net
- HTML5で簡単なページ作ったんですが、IE11で表示した場合、footerセクションに対して
・ファイルサーバーから実行した場合
CSS適用されない
・ローカルPCから実行した場合
CSS適用される
FirefoxとChromeはどちらも問題なくCSS適用されました。
divに置換えて対応しましたが、この現象はIE11の仕様ですか？
- 847 ：Name_Not_Found：2014/09/11(木) 21:09:49.93 ID:???.net
- >>846
あなたの書いたコードのバグです。
- 848 ：Name_Not_Found：2014/09/14(日) 19:05:54.01 ID:???.net
- 彡 ⌒ミ
(´・ω・`) .｡ｏＯ（・・・…)
- 849 ：Name_Not_Found：2014/09/14(日) 23:33:36.92 ID:???.net
- >>846
ぐぐってみたけど似たような事例は見つからなかった
footer の代わりに div にすれば回避できるんだよな？
後学のためにコードを見せてはくれないか？
- 850 ：Name_Not_Found：2014/09/18(木) 23:16:58.04 ID:???.net
- >>846
IEの互換モード関連だと思う
FC2ブログなんかだと勝手に古いヴァージョンの互換モードで実行される
- 851 ：Name_Not_Found：2014/09/18(木) 23:17:29.57 ID:???.net
- column-span:all が Firefoxだけ対応してないのってなんで？Googleの嫌がらせ？
- 852 ：Name_Not_Found：2014/09/19(金) 19:45:33.14 ID:uplvQZK1.net
- display:table-cell を使い li を横並びにしています
画像を含む li と文字を含む li の縦位置を合わせたいのですが
vertical-align:middle を使ってもあいません
どうすればよいでしょう
- 853 ：Name_Not_Found：2014/09/19(金) 20:48:03.71 ID:???.net
- vertical-align はブロック要素の高さをあわせることはできない。
li の中に <p> とか img{display:block}を指定していないか？
そもそも中身のインライン要素の上下配置を親ボックスの中で合わせるということを、
table-cell に指定した親ボックス同士の上下配置を揃えることと勘違いしていないか？
- 854 ：Name_Not_Found：2014/09/19(金) 23:24:10.52 ID:???.net
- まさにその通りでした
ググったら、imgにvertical-alignを。というページがあって
そうしたのですが、li にvertical-alignをすべきでした
- 855 ：Name_Not_Found：2014/10/11(土) 11:07:30.99 ID:???.net
- ＿＿＿
(＼ ∞ ﾉ
ヽ)＿ﾉ 迫る～パンチ～～♪
(=O┬O
◎-ヽJ┴◎ ｷｷ～
- 856 ：Name_Not_Found：2014/10/22(水) 08:29:55.81 ID:???.net
- vertical alignって使いたい場面多いけどたまにしか効いてくれない
- 857 ：Name_Not_Found：2014/10/22(水) 09:22:03.34 ID:???.net
- text-alignの縦版だと思って使うからそうなる
- 858 ：Name_Not_Found：2014/10/22(水) 16:49:27.28 ID:???.net
- ブロック要素につこたらあかんで
- 859 ：Name_Not_Found：2014/10/22(水) 22:13:18.03 ID:???.net
- 会社でsass取り入れてる人居ます？
- 860 ：Name_Not_Found：2014/10/23(木) 23:40:59.98 ID:???.net
- インラインにしかきかんのか
- 861 ：Name_Not_Found：2014/10/23(木) 23:45:59.57 ID:???.net
- sass使ってるよ
- 862 ：Name_Not_Found：2014/10/24(金) 03:23:43.47 ID:cHB3Al4E.net
- 中１の時につかった、英語の４本線のノートを覚えてるか？
３本目が赤い線のやつ
文字（インラインレベルとインラインブロックレベル）を
あの４本線のどこに揃えるか、を決めるのがvertical-align
- 863 ：Name_Not_Found：2014/10/24(金) 13:18:12.79 ID:???.net
- この淫乱豚！
- 864 ：Name_Not_Found：2014/10/24(金) 18:18:32.91 ID:???.net
- >>860>>856
inline-block に効く
例えば幅広のスクリーンでは
画像とテキストブロックを横に並べたい時に上端揃えにできる
- 865 ：Name_Not_Found：2014/11/16(日) 01:08:57.55 ID:gxeEZquf.net
- a:hover
{
color:red;
}
と指定するとページ内の全てのリンクに対してhover時の
色が赤に設定されてしまいます。
同一ページにおいてリンク毎に
hover時の色を変えるにはどうすれば良いでしょうか？
<a id="id_red" href="">hover時に赤</a>
<a id="id_blue" href="">hover時に青</a>
- 866 ：Name_Not_Found：2014/11/16(日) 02:14:24.24 ID:???.net
- >>865
a#id_red:hover{color:red;}
- 867 ：Name_Not_Found：2014/11/16(日) 11:29:16.93 ID:FkO4XEXF.net
- >>866
ありがとうございます！出来ました！
- 868 ：Name_Not_Found：2014/11/19(水) 18:21:03.18 ID:K+LWNDJq.net
- font-familyで前の方に欧文（例えばサンセリフ系）のフォント名を書き
後ろの方に和文（例えばゴシック系）のフォント名を書くと
和文の文字のときには和文フォント欧文数字の時には欧文フォントのような
書体の混植みたいなことができますが
このときに欧文フォントが適用された場合にだけ
font-sizeやベースラインを上げたりっていう方法は何かないですかね？
- 869 ：Name_Not_Found：2014/11/23(日) 16:29:26.56 ID:???.net
- 業務アプリケーション作っている人に質問
業務画面のCSSどこに書いてますか？
styleタグに書くと問題ありますでしょうか
- 870 ：Name_Not_Found：2014/11/23(日) 23:07:34.81 ID:7HPySh6B.net
- <table>
<tr><td rowspan=3>AAA</td><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td rowspan=3>BBB</td><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
このようなテーブルで上3行と下3行の間に隙間を空けたいのですが、うまくいきません。。。
<tr><td colspan=2 class=dummy></td></tr>
ダミー行を挟み込むしかないのでしょうか？
.dummy{border:none;}
- 871 ：Name_Not_Found：2014/11/23(日) 23:19:15.82 ID:???.net
- >>869
単純にstyleタグに書くと、開発効率が悪い。
ようするに開発コストがかかって迷惑になる。それが一番の問題。
CSSは通常は別ファイルにして、いろんなページから再利用するもの。
ただ別ファイルにしたからといって、再利用できるわけじゃなくて
再利用できるようなHTML（マークアップ）を書かないといけない
その為にHTMLをモジュール化して考えないといけないんだけどね。
自分が望んだ見た目になるように、CSS主導でHTMLを書くというやり方じゃだめ。
あと、Googleとかみてstyleタグ使ってそこにCSS書いてるじゃないですか！と
いいたくなるかもしれないが、それは間違い。Googleとかでも開発するときは別ファイルで開発してる。
そしてそれをツールを使って変換している（だからGoogleのHTMLは人間が書いたコードになってない）
初心者は最初からパフォーマンスが～とかいって、手動でstyleタグ埋め込みなんて
開発コストがかかる方法をとるが（そんな方法しか出来ないから初心者なわけだが）
一番重要な考え方はまず最初に開発コスト。だからそれを下げるために別ファイルで開発する。
そして更にパフォーマンスを上げたいのであれば、ツールを使って変換する。
- 872 ：Name_Not_Found：2014/11/23(日) 23:29:30.37 ID:???.net
- >>870
最初にCSS、つまり見た目を考えているからわからない。
CSSが適用されない状態で考えてみよう
>>870のtableタグは何のtableなのかよくわからないだろう？
それはヘッダがないから。だから入れればいい。
<table>
<tr><th>名前</th><td><th>値</th></tr>
<tr><td rowspan=3>AAA</td><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><th>名前</th><td><th>値</th></tr>
<tr><td rowspan=3>BBB</td><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
これでCSSが適用されてない状態でも読みやすくなっただろう？
隙間？ thの部分のテキストを見えなくすればいいよ。
最初の行は隙間ではなく消したいのであれば、theadを使えば良い。
重要なのはCSSがなくてもわかりやすいマークアップにするということ。
- 873 ：Name_Not_Found：2014/11/23(日) 23:45:33.15 ID:???.net
- >>871
勉強になりました。
ところが、1つだけ質問があります。
共通部分 ---> CSSを外出しする
共通じゃない部分 ----> 無理やり外出しCSSにする？ ここは、styleに書いたほうがいい気もするのですが
- 874 ：Name_Not_Found：2014/11/23(日) 23:57:06.06 ID:7HPySh6B.net
- >>872
ありがとうございます。
ダミーじゃなくてちゃんと書いといて非表示、確かにわかりやすいですね。
- 875 ：Name_Not_Found：2014/11/24(月) 00:04:38.32 ID:???.net
- >>873
共通じゃない部分、が存在すること自体がモジュール化の考え方に反している。
ページをイラストレータとかで作ったイラストを
そのまま再現するって形で作っていくとそうなる。
やり方としては各箇所に名前をつける。これがclass名になる。
といっても要素一つ一つに名前をつけるってことじゃないぞ。あるブロック単位で名前をつける。
ナビゲート部分とか、サイドバーとか、記事ブロックとか。おそらく頭のなかでは
自然にそう呼んでいるだろう？
ちなみに俺のやり方では記事タイトルという名前は付けない。
なぜなら記事ブロックに含まれるタイトル(h2とか)で十分だから
名前をつけすぎるのもよくない。人間が名前を把握できない。
そうしていると、そのページでしか使わないブロックがあるかもしれないが、
ブロック単位でその他のページでも使えるのだから、外出しでよかろう？と考えるようになる。
そうそう。クラス名は二種類にわかれる。サイト全体で共通して使われ名前（＝ブロック名）と
そのブロックの中で使われる、ごまごまとした名前。サイト全体で使われる名前は、
被ったりしないように分かりやすくプリフィックスをつけてる。細々とした名前は結構適当。
こういう風にブロックを作って名前をつけていると、そのページだけでしか使わない
スタイルっていうのはほぼ無くなる。例外的になくもないんだけど、それはそれで
例外だと分かりやすくなる意味もあるからやっぱり外出ししてるな。
ページ（HTML要素かbody要素）に他と被らないID振って、そのページだけのものですよって。
なお俺はブロックとは読んでない。 もう少し種類ごとに分けて
呼んでいるが身元ばれするので書かないｗ
- 876 ：Name_Not_Found：2014/11/24(月) 14:54:37.49 ID:???.net
- >>875
わかりました。ありがとうざいます。
- 877 ：Name_Not_Found：2014/11/25(火) 01:32:18.33 ID:O09RAh7T.net
-
お世話になります。
私、責任者の加茂と申します。以後、宜しくお願い致します。
http://www.apamanshop.com/membersite/27009206/images/kamo.jpg
浪速建設様の見解と致しましては、メールによる対応に関しましては
受付しないということで、当初より返信を行っていないようで、今後につい
てもメールや書面での対応は致しかねるというお答えでした。
http://www.o-naniwa.com/index.html 事務員 東条 南野
http://www.o-naniwa.com/company/
このように現在まで６通のメールを送られたとのことですが、結果一度も
返信がないとう状況になっています。
http://www.apamanshop-hd.co.jp/
http://www.data-max.co.jp/2010/10/01/post_11983.html
私どものほうでも現在までのメール履歴は随時削除を致しております
ので実際に１１通のメールを頂戴しているか不明なところであります。
・ハンガー・ゲーム http://s-at-e.net/scurl/TheHungerGames-Aircraft.html
・アバター http://s-at-e.net/scurl/Avatar-Shuttle.html
・艦これ http://s-at-e.net/scurl/KanColle.html
・BRS http://s-at-e.net/scurl/BRS.html
・ベヨネッタ http://s-at-e.net/scurl/BAYONETTA.html
・風ノ旅ビト http://s-at-e.net/scurl/JOURNEY.html
http://s-at-e.net/scurl/kabetokyojinto.html
・2012 http://s-at-e.net/scurl/2012.html
大阪府八尾市上之島町南 ４-１１ クリスタル通り２番館203
に入居の引きこもりニートから長期にわたる執拗な嫌がらせを受けています。
この入居者かその家族、親類などについてご存知の方はお知らせ下さい。
hnps203@gmail.com
- 878 ：Name_Not_Found：2014/11/25(火) 05:34:27.92 ID:???.net
- >>873
共通のCSSファイルと、個別のCSSファイルの、
2つのに分ければ？
- 879 ：Name_Not_Found：2014/12/05(金) 15:22:45.59 ID:iE2u/88f.net
- AAA BBB
CCC
のように、BBBとCCCの行頭を合わせるのであれば、
無理に凝るよりTable使った方が良いでしょうか？
他人の作ったページを修正するハメになって、
<div style="width:20%">みたいな単純な事も反映されず困っています
どなたかご教授下さい
- 880 ：Name_Not_Found：2014/12/05(金) 15:48:18.06 ID:???.net
- ある程度まとまったソースを見せてくれないことにはなんとも
- 881 ：880：2014/12/05(金) 16:06:00.62 ID:???.net
- >>880
<div>
<div class="A">AAA</div>
<div class="B">BBB</div><br>
<div class="C">CCC</div>
<div>
こんな感じで、CSSの方は
.A {
font-weight: bold;
display: inline; ←※ここはB,Cでは inline-block;
padding: 1%, 4% !important;
margin: 1%, 4% !important;
}
でも表示は
AAA BBB
CCC
になってしまい、880の通りwidth指定しても反映されず、です
- 882 ：880：2014/12/05(金) 16:14:27.72 ID:???.net
- 続き
padding, marginの値をもっと極端にしても、表示に反映されません
他人のHTMLを弄っているので、CSSの全容を把握出来て無いのが
原因ではあると思うのですが、
突然会社のHPをスマホ対応にしろって言われて困っているところですｗ
※一生懸命閉じてない</div>とか探して、潰している最中なんです
- 883 ：Name_Not_Found：2014/12/05(金) 23:13:10.38 ID:???.net
- > ※一生懸命閉じてない</div>とか
そんなのツール使えば簡単な事なのに。
まあちまちまと、手動で修正するしか
できないんだろうな。
効率化してない。つまり仕事をサボってる。
- 884 ：Name_Not_Found：2014/12/06(土) 00:31:50.29 ID:???.net
- >>882
ツール使って調べてみればよくね？
IE なら開発者ツール、Chrome ならデベロッパーツール
- 885 ：Name_Not_Found：2014/12/06(土) 02:20:34.65 ID:Jz1x97Tv.net
- colgroupのbackgroundでtdのbackgroundを上書きする方法ってある？
important付けても無理だったからたぶん無理そうだけど…
- 886 ：Name_Not_Found：2014/12/06(土) 02:36:02.05 ID:???.net
- >>885
1列全部か？
- 887 ：Name_Not_Found：2014/12/06(土) 08:22:26.51 ID:???.net
- >>886
colspan含んだ2列
colspanがなければnth-child使えるんだけど…
- 888 ：Name_Not_Found：2014/12/06(土) 15:25:15.01 ID:???.net
- 聞いたもののソース見んとわからんわｗちょいと晒してくれんか。
- 889 ：Name_Not_Found：2014/12/06(土) 15:54:40.65 ID:???.net
- >>885
現状のCSSではcolgroupのスタイルは
テーブル列には継承されない仕様なので無理だろうね
スクリプトを使えばもちろん可能だが
そのものズバリの column combinator という機能が
最新の selector 仕様にはあるが、まだ実装されていないだろう
- 890 ：Name_Not_Found：2014/12/09(火) 22:05:32.04 ID:???.net
- スレチでしたらすみません
MacにSass環境を構築したいのでCompassをインストールしたいのですが、ターミナルに
$ sudo gem install compass
と打ち込むと、
Building native extensions. This could take a while...
ERROR: Error installing compass:
ERROR: Failed to build gem native extension.
と表示されます
解決法をご教示頂きたいです
- 891 ：Name_Not_Found：2014/12/09(火) 22:14:20.69 ID:???.net
- 使い方以前の話はスレ違い
- 892 ：Name_Not_Found：2014/12/10(水) 14:12:56.65 ID:nU+c/Bm+.net
- CSSで貸借対照表を作ろうと思い色々悩んでいます
┌table────────────────────┐
│┌table-cell──────┐┌table-cell────┐│
││┌flex──────-┐││
│││┌table-cell──┐│││
││││A ││││
│││└──────┘│││
│││┌table-cell──┐│││
││││B ││││
│││└──────┘│││
│││┌table-cell──┐│││
││││C ││││
│││└──────┘│││
└└└────────┘┘└────────┘┘
右側のカラムの高さに合わせて左側のtable-cellの高さが変わります。
この時、内側のtable-cell「C」だけを下揃え（flex の bottom）にしたいのですが、
A, B, に並んで上揃えになってしまいます。
Cのtable-cellに justify-content: flex-end; を付けて失敗で、
試しに flex にも付けてみたのですが同じでした。
jquery を使わずに実現する方法ってありますか？
- 893 ：Name_Not_Found：2014/12/10(水) 15:17:09.46 ID:???.net
- >>892
flex-direction は縦横どっちの方向にしているのだ？
（デフォルトは右方向）
justify-content は flex-direction 方向に従うので、デフォルトだと
flex-end ＝ 右寄せ
になる
ところでtable＞ flex > table-cell と入れ子になっているが
table-cellが本当にテーブルの <td> だったりすると
flex > table-cell の間に勝手に <table><tbody><tr>
が挿入されると思われ
- 894 ：Name_Not_Found：2014/12/10(水) 15:18:53.10 ID:???.net
- >>892
flex-direction を設定していない？
デフォルトは右方向なので
justify-content: flex-end; も右寄せを意味することになる
- 895 ：893：2014/12/10(水) 15:50:23.86 ID:???.net
- >>893-894
ご回答ありがとうございます
恥ずかしながら晒すとflex 側は、
.bs_flame_flex {
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
}
外側のtable-cell 側は、
.bs_flame_left {
padding: 0;
margin: 0;
display:table-cell;
width: 40%;
box-sizing: border-box;
float: left;
}
こんな感じで、table-cellの float: left; があるために、
table-cell にも関わらず右と左で高さが揃っていないのが原因なようです。
- 896 ：893：2014/12/10(水) 15:52:39.32 ID:???.net
- ただ、スマホで表示した時に、
右側カラムを左側の下に移動させたいため、
float: left; を外すと意図した動きにならないので困っています。
どうにか解決したいのですが、何か方法はありますか？
- 897 ：Name_Not_Found：2014/12/10(水) 16:05:34.17 ID:???.net
- >>895
float やめて
最も外側のtableもflexにして
flex-wrap:wrap （横並びに収まらなければ下へ「改行」）
とすればどうなん？
- 898 ：880：2014/12/10(水) 16:16:47.83 ID:???.net
- >>897
凄い！
flex: left; を外して一番外をdisplay: flex; flex-wrap: wrap;で
左右のカラムの高さが揃いました！
ありがとうございます
ただ、Cを bottom に、がまだ実現出来てません
もう少し研究してみます、、、
- 899 ：Name_Not_Found：2014/12/11(木) 08:21:03.01 ID:5QCzvQc0Q
- アマゾンやDMMの通販商品等一覧の下部にある
「000ページ中00ページ目を表示 前へ 1 2 3 4 5・・ 次へ 最後へ」
はどのように作られているのでしょうか？
ご教示お願いします。
- 900 ：Name_Not_Found：2014/12/11(木) 21:27:39.30 ID:???.net
- ただ、対応ブラウザが限られるから注意なｗ
- 901 ：Name_Not_Found：2014/12/12(金) 14:14:01.50 ID:???.net
- レスポンシブの勉強を兼ねて、CSSグリッドを自作し始めたのですが
画面幅に対する各カラムのwidthの定義を、pxでやるのと%でやるのとでは
どちらのほうがポピュラーなんでしょうか？
- 902 ：Name_Not_Found：2014/12/16(火) 11:22:10.35 ID:???.net
- 最近よくまわってくる、とあるコーダーさんの基礎コーディングが
なんかいろいろクセがあってやりずらい。
font-size指定がpとかtdとかliとかにいちいち％指定（85％とか）されていて
入れ子が必要になるとどんどん縮小%になるので
その都度 li > p とか li > li とかtd > pとかいろんなパターンで縮小されないように
cssを追記するのだけど、正しい方法としてはどうなんですか？
- 903 ：Name_Not_Found：2014/12/16(火) 11:47:12.95 ID:???.net
- 何を基準に正しい方法というかは難しいな
自分の場合はフォントサイズ指定にはremを使ってる
- 904 ：Name_Not_Found：2014/12/16(火) 12:01:52.80 ID:???.net
- セレクタをフルで書いて回避すればいいんじゃないの。長いけど
- 905 ：904：2014/12/16(火) 12:24:48.87 ID:???.net
- >>904
それがそのコーダーさんの一番（自分的に）嫌なところで
セレクタフルで書きつついちいち％指定してるんですよ。
なのでclass指定を増やしたり、!important 多様したり、
それが嫌だから汎用的に使える入れ子の縮小回避を記述したりなんですが。
やっぱりこのコーダーさん普通じゃないってことですか？
- 906 ：Name_Not_Found：2014/12/16(火) 14:01:48.68 ID:???.net
- 普通じゃないって返事をもらいたくて書いているようだけれど、問題はそこじゃないでしょ
影でもんもんとするくらいなら、具体的にサンプルページを作って貴方が希望するコード例を示すほうが早い
あなたのやり方の利点を提示して、相手の主張も求めて両者が意見を出し合って協議すればいいんじゃね
- 907 ：Name_Not_Found：2014/12/16(火) 19:12:14.87 ID:???.net
- おしゃるとおりです・・
- 908 ：Name_Not_Found：2014/12/16(火) 19:17:32.37 ID:???.net
- まあ仕事でやってるんなら
「立場上強いほうのやり方が"普通"」
でしょうな
- 909 ：Name_Not_Found：2014/12/17(水) 01:27:10.63 ID:E2wN9BTEv
- すいません、初歩的な質問かと思うのですが...。
CSSテンプレートをダウンロードし、htmlファイルを編集しているのですが、
<li><img src="img/sample.gif" width="1" height="9" alt=""></li>
<li><a href="sample.html">sample</a></li>
とあったのを、URLを変えたかったので
sample.htmlの名称をprof.htmlに変更し、htmlファイルも
<li><img src="img/sample.gif" width="1" height="9" alt=""></li>
<li><a href="prof.html">profile</a></li>
に変更したんですけど、いざブラウザでhtmlファイルを開いてみると、
ファイルが見つかりません と出てきます。
なぜでしょうか？
- 910 ：Name_Not_Found：2014/12/17(水) 14:38:40.97 ID:???.net
- まぁでも実際、pxかremが使いやすいからそれで指定することが多いね
- 911 ：Name_Not_Found：2014/12/17(水) 16:13:26.31 ID:???.net
- %が推奨された記事をけっこう見かけたのは、
CSSでpx指定すると完全にサイズが固定されてブラウザで拡大縮小ができなくなっちゃった時代ですね
懐かしいな
- 912 ：Name_Not_Found：2014/12/18(木) 10:42:14.12 ID:???.net
- 前に業務委託で入った仕事先の社員様が
「スタイルを別ファイルにするのは、ひと目で見てわかりにくいから可読性が低い
すべてHTMLのタグの中にstyle属性で実装し
style属性内ではパラメータごとに改行すること」
と指定して異論は認められず、それが普通だった
世の中そんなもんですよ
- 913 ：Name_Not_Found：2014/12/18(木) 10:57:49.09 ID:???.net
- 10年ぐらい前の話？
- 914 ：Name_Not_Found：2014/12/18(木) 11:05:16.74 ID:???.net
- いや、去年の話し
しかも某大手SIerが受注した大手企業の
イントラ系のwebシステム開発現場
発注側もあんなものが出来上がって運用大変だろうなと思った
- 915 ：Name_Not_Found：2014/12/18(木) 11:13:51.41 ID:???.net
- 超大手のインシデント管理システムだったら
笑う
そーゆーの言いそうなリーダーいたわ
- 916 ：Name_Not_Found：2014/12/18(木) 11:22:06.29 ID:???.net
- 業務委託でweb制作の仕事をあちこちでしてるけど
大手のSIerだと意外とフロントエンドの技術力が低いところが多い気がする
サーバー側はけっこうまともみたいだけど、聞いてるとそれこそ10年前に
主流だった技術を安定しているからってことで今でも使ってたりするね
そういうところでは画面側もサーバー担当の人が実装担当してて
CSSなにそれどころか、JSわかりませんとかいう現場もあったよ
コンシューマ向けでスマホが絡む現場はけっこう新しいことをどんどん
取り入れてく感じ
- 917 ：Name_Not_Found：2014/12/18(木) 14:24:38.17 ID:???.net
- 一瞬愚痴スレかとｵﾓﾀw
- 918 ：Name_Not_Found：2014/12/20(土) 21:26:52.86 ID:???.net
- >>912
擬似要素は使うなってことか…
clearfixとかどうするんだ
- 919 ：Name_Not_Found：2014/12/22(月) 18:11:51.12 ID:UZ0tktuh.net
- CSS2以下で画像を使わず１を①のように装飾する事は可能ですか？
完全な円でなくても、円に近い状態ならOKです。
- 920 ：Name_Not_Found：2015/01/01(木) 19:30:56.72 ID:???.net
- テーブルの枠線の幅を１ピクセルにすることは可能でしょうか
- 921 ：Name_Not_Found：2015/01/01(木) 20:38:03.24 ID:???.net
- アフィサイトで画像閲覧するとスクロール大変なんですが
昔のタブブラウザって自分で書いたCSSでウェブサイトを表示させたりできませんでしたっけ？
- 922 ：Name_Not_Found：2015/01/01(木) 22:58:07.83 ID:???.net
- 今のブラウザでもユーザースタイルシートには対応している
ブラウザによって設定の仕方は違うので詳しくはぐぐれ
- 923 ：Name_Not_Found：2015/01/02(金) 01:27:11.81 ID:???.net
- >>919
はっはっは、無茶言うなｗ
<span style="letter-spacing: -0.7em;">○1</span>
<span style="letter-spacing: -0.7em;">⊂1⊃</span>
CSS3ならborder-radiusがあるが流石にレガシーブラウザじゃ無理
- 924 ：Name_Not_Found：2015/01/02(金) 09:47:48.72 ID:???.net
- sassの質問もここでいい？
- 925 ：Name_Not_Found：2015/01/02(金) 10:00:18.98 ID:???.net
- コーディングに関することならいいんでないの
- 926 ：Name_Not_Found：2015/01/03(土) 22:14:16.59 ID:cU7JtsQc.net
- ページ内リンクが飛ばず困ってます。使用しているのはフリーのテンプレートです。 現象としては以下になります。
index.htmlのリンクから別タブpic1.htmlへ → ×飛ばない
pic.htmlのリンクからindex.htmlへ → ○飛ぶ
・URLを直接打ち込む → ○飛ぶ
index.htmlのリンクから別タブpic1.htmlへリンクした時のアドレスは
index.htmlを開いたとき→C:\Users\pc-t\Desktop\05\index.html
pic1.htmlを開いたとき→C:\Users\pc-t\Desktop\05\pic1.html
で、カーソル重ねたらマウスカーソルがリンクに変わります。
カーソルを重ねたときfile:///c:/User/pc-t/Desktop/05/pic1.htmlって左下に出ます。
外部スタイルシート外してリンク先に飛ぶか確認したら同様でした。
確認している環境はIE8 cssが書き間違えているのか。indexに不備があるのか。
何かご存知の方、ご教授頂けないでしょうか？よろしくお願いします。
- 927 ：Name_Not_Found：2015/01/03(土) 22:40:28.60 ID:???.net
- 言葉で長々と語られても情報足りなすぎて何も分からんよ
HTMLとCSSのソースを一切略さず全部UPしてちょーだい
- 928 ：Name_Not_Found：2015/01/03(土) 22:51:17.35 ID:???.net
- >>926
javascriptにもマルポしてた人か
まだわかんないの？
どうせどこかタイポしてるんだからブラウザが解釈した結果をF12開発ツールで見れば一発じゃん
- 929 ：Name_Not_Found：2015/01/03(土) 22:55:41.92 ID:???.net
- いや、初心者スレだった
- 930 ：Name_Not_Found：2015/01/03(土) 23:18:36.05 ID:cU7JtsQc.net
- f12使ったけどやり方悪いのかエラー出てこないしわけわからん。css↓
@charset "Shift_JIS";
*{margin:0;padding:0;}
body{background-color:#fff;color:#000;font-family:"メイリオ","メイリオ",sans-serif;}
a:link{color:#999;}
a:visited{color:#999;}
a:hover{color:#000;}
a:active{color:#000;}
a{text-decoration:none;}
a img{border:none;}
div#page{width:650px;padding:20px 0 20px 350px;}
div#header{background-image:url(image/bnr.bmp);background-position:center;
border:0px #000 solid;width: 200px;height:40px;padding:0 0px;}
div#headerh1{font-size:150%;font-family:Verdana;text-align:right;
letter-spacing:0.3em;padding:10px 10px 0 0;}
div#main{margin:0 110px 0 0;padding:10px 20px 0 20px;}
div#main h2{font-size:100%;font-family:Verdana;padding:11px 0;}
div#main p{font-size:72%;line-height:140%;padding:2px 0 7px 0px;}
- 931 ：Name_Not_Found：2015/01/03(土) 23:26:23.66 ID:cU7JtsQc.net
- Html index-page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>----- </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="page">
<div id="header"><h1>×</h1></div>
<div id="main">
<a href="pic1.html">リンク</a>
</div></div>
</body></html>
Html-pic1page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>×</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="image/sample00.gif" width="500" height="300" alt="pic1"></a>
</div></div>
</body></html>
- 932 ：Name_Not_Found：2015/01/03(土) 23:42:44.71 ID:???.net
- >>926
>index.htmlのリンクから別タブpic1.htmlへ → ×飛ばない
>pic.htmlのリンクからindex.htmlへ → ○飛ぶ
この逆の現象が出るのならわかる
pic1.htmlの<a>タグが記述されてない
- 933 ：Name_Not_Found：2015/01/03(土) 23:55:08.72 ID:cU7JtsQc.net
- ごめんそれここで書くときに間違えただけだ。
実際はpic1.htmlって書いてある。
- 934 ：Name_Not_Found：2015/01/03(土) 23:55:54.14 ID:???.net
- だから最初に言ったろ？ ぐだぐだやってないで
最小限のコードにしてからコピペさせろって。
>>926にやらせないからいつまでも解決できないんだ。
- 935 ：Name_Not_Found：2015/01/03(土) 23:57:34.51 ID:???.net
- >>930-931
うざい。さっさと余計なものを削れ
- 936 ：Name_Not_Found：2015/01/04(日) 00:28:14.43 ID:IJ2bLpBR.net
- はいはいうざいですよねすみません。全く分からない馬鹿なんで。
どこ削ればいいかわからないから聞いてるんですよ。
もっかい勉強しなおすから参考書教えてくださいな。
- 937 ：Name_Not_Found：2015/01/04(日) 00:38:16.37 ID:???.net
- >>936
どこでもいいから削れ。
それもできないのか？
どこでもいいって言ってんだよ。
- 938 ：Name_Not_Found：2015/01/04(日) 00:50:00.94 ID:???.net
- マルウェアやウィルスにでも感染してるんじゃね？
フリーウェアインストールした時よく読まないまま[次へ]をポンポン押してるとかｗ
何で他のブラウザでも確認しない？
- 939 ：Name_Not_Found：2015/01/04(日) 06:23:28.70 ID:???.net
- あれ、ここcssスレだよね？
- 940 ：Name_Not_Found：2015/01/04(日) 18:32:20.18 ID:???.net
- 削って試しました。
カーソルは変化するけどジャンプしません。
他のブラウザ持ってません。
インストール時にウイルスチェックするのですが、怖くなってウイルスチェックしたけど脅威は見つからず。
ブラウザぶっ壊れてる?
- 941 ：Name_Not_Found：2015/01/04(日) 18:44:38.01 ID:???.net
- http://blog-imgs-33-origin.fc2.com/s/u/i/suiseisekisuisui/sukima041572.jpg
- 942 ：Name_Not_Found：2015/01/04(日) 18:49:46.75 ID:???.net
- 持ってないってchromeもfirefoxもタダじゃん
ウェブ開発しようってのになんで入れてないのかが不思議
マイクロソフトはそろそろIE捨てたがってるし
- 943 ：Name_Not_Found：2015/01/04(日) 19:31:19.91 ID:???.net
- >>940
削ったものをここに貼り付けてください。
なお、最小限まで削ってください。
余計なものがついていたら
やり直しさせます
- 944 ：Name_Not_Found：2015/01/04(日) 19:45:23.51 ID:???.net
- キャッシュを全消去し拡張機能（アドオン、プラグイン）全部外せ
やり方はググれ
- 945 ：Name_Not_Found：2015/01/04(日) 21:49:28.62 ID:???.net
- レベル低いなー
- 946 ：Name_Not_Found：2015/01/04(日) 23:05:28.02 ID:???.net
- 初心者スレで何言ってるの？
- 947 ：Name_Not_Found：2015/01/05(月) 12:14:40.06 ID:???.net
- >>945
レベル高いとどうなるの？
- 948 ：Name_Not_Found：2015/01/05(月) 19:18:16.36 ID:???.net
- 結局結果の報告も無いもんな
また別のスレにマルポするんだろうか？
- 949 ：Name_Not_Found：2015/01/05(月) 21:02:43.42 ID:???.net
- するだろうね
こういう奴は何度でも同じ事を繰り返すから
自分のせいじゃなく「他人のせい」にしてるだろうし
- 950 ：Name_Not_Found：2015/01/05(月) 21:07:34.22 ID:???.net
- どこのスレに行っても見てる人は同じなのにな
- 951 ：Name_Not_Found：2015/01/08(木) 09:48:46.96 ID:???.net
- windows8.1から搭載された「游フォント」についてどう思う？
細すぎてよく使用するフォントサイズでのディスプレイ表示が見にくい気がする
- 952 ：Name_Not_Found：2015/01/08(木) 18:35:14.88 ID:???.net
- 見にくけりゃ各自変えればいい話
- 953 ：Name_Not_Found：2015/01/15(木) 16:19:33.23 ID:???.net
- 五・七・五か
- 954 ：Name_Not_Found：2015/01/19(月) 16:39:03.59 ID:n26tJk6L.net
- よろしくお願いします。親要素に変化を出したい、というできなさそうな質問です。
<label for=****>のforはできれば使いたくなく、
<label><input type="radio" name="abc" value="...">テキスト</label>
のような書き方をしています。
このラジオボタンにチェックが入れば、labelのCSSを変更する、ということをしたいのです。
jQueryで言えば、
--(インデントを全角にしています)
$(function(){
$("label input").change(function(){
var inp = $(this);
var name = inp.attr("name");
var lbl = $($(this).parent().get(0));
$("label input[type=radio][name="+name+"]").each(function(){
$($(this).parent().get(0)).removeClass("activeRadio");
});
lbl.addClass("activeRadio");
});
});
----
のようなことを、CSSでできればいいなと思っております。
CSSでは、どのようなトリックを使っても親要素を参照するということは難しそうでしょうか。
可能であれば方法をご提示いただければ幸いです。
よろしくお願いします。
- 955 ：Name_Not_Found：2015/01/19(月) 17:50:59.56 ID:???.net
- とりあえず、できない。
<label ...><input type="radio" ...><span class="label text" ...>...</span></label>
みたいにマークアップを変えられるなら、
[type="radio"]:checked ~ .label.text
で大概のブラウザ相手にいけるんじゃないの？
:checked 擬似クラスを使う場合、
<select ...><option ...>...</option>...</select>
みたいな変更だって選択肢に入るけど、HTTP リクエストを処理する言語やフレームワークなどの環境によっては、処理を少なからず変えなきゃならなくなる。
しかし、SPAN 要素にするだけの案なら、出力する文字列(マークアップ)だけ変えれば済む、つまり、そのリクエスト処理自体は変更不要だから、サーバーサイドの人は楽だろうな。
- 956 ：Name_Not_Found：2015/01/19(月) 22:42:12.53 ID:???.net
- >>954
CSS4で出来るようになる予定だよ。
対応ブラウザはまだなかったはずだけどね。
forはできれば使いたくなくと言っているから
わかっていると思うけど、そういうことをやりたければ
今は以下のようにして、input:checked + label とかするしか無いだろうね。
<input type="radio" name="abc" value="..." id="id"><label for="id">テキスト</label>
俺はこうやった。CSSが多少複雑になるのは、SASSで対処した。
あとjqueryのsizzleもまだCSS4には対応していない。
こっちはライブラリで実装だからブラウザの対応とは関係なく使えるようになるだろうけど。
話それるけど、世の中にはjQueryプラグインにする意味が無いのにしてしまっている
クソなプラグインが多いけど、こういうものこそプラグインにするべきなんだよね。
つまり要素に紐付いたlabel要素を返すlabelメソッドを生やすプラグインを作れば、たったこれだけで実装可能になる。
$("input").change(function(){
$(this).label().toggleClass('active-radio', $(this).prop('checked'));
});
ああ、そうそう、removeClassとaddClass使ってるけど、こういう時は
toggleClassを使うといいよ。toggleClassは単に反転するだけじゃなくて
第二引数でaddするかremoveするか決められるから。
- 957 ：Name_Not_Found：2015/01/20(火) 10:00:43.90 ID:???.net
- >>955
ありがとうございます。
確かに親で変化を見せるということに執着しすぎていたかもしれません。
今回はアドバイス通り子要素に変えていこうと思います。
>>956
ありがとうございます。
toggleClass覚えた方が楽そうですね。
あとSass(Scss)を知らず調べてみましたがかなり便利そうで。
こちらも今後使ってみようと思います。
ありがとうございました。
- 958 ：Name_Not_Found：2015/01/20(火) 17:17:00.14 ID:85Z+2mBt.net
- すみませんが中国版ホームページを作りたいのですが
あまりお金がないので格安で作ってくれる方いませんか？
- 959 ：Name_Not_Found：2015/01/20(火) 17:33:22.82 ID:???.net
- >>958
ttp://www.lancers.jp/work/search/translation/chinese?completed=1
- 960 ：田中：2015/01/20(火) 17:56:13.16 ID:85Z+2mBt.net
- ９５８＞ありがとうございます。
初心者なので自分でわできません。
最初から色々連絡しながら作ってもらいたいです。
- 961 ：Name_Not_Found：2015/01/20(火) 18:03:45.32 ID:???.net
- You need to learn Japanese first.
- 962 ：Name_Not_Found：2015/01/27(火) 23:19:08.55 ID:???.net
- z-indexが1030というサイトをたまに見かけるのですが、
この1030という数値にはなにか意味がありますか？
「zindex 1030」
で検索しても、10万件ほど引っかかります
- 963 ：Name_Not_Found：2015/01/28(水) 00:02:25.63 ID:???.net
- >>962
その数値に特別な意味はない
その数値が複数のサイトに共通して現れるならば
CSS を生成するなんらかのツールが
何かの規則に従って自動的にはじき出したものと考えられる
- 964 ：Name_Not_Found：2015/01/28(水) 08:59:49.16 ID:???.net
- >>963
ありがとうございます、スッキリしました
- 965 ：Name_Not_Found：2015/01/28(水) 13:07:39.36 ID:???.net
- 一番上に表示したい
↓
1000ぐらいなら間違いないだろう
↓
・・・と考える奴が多くて全部1000
↓
じゃあ+30で
- 966 ：Name_Not_Found：2015/01/28(水) 23:12:50.75 ID:???.net
- 以下のようなCSSを書くと、top:80px, left:100pxのところに要素が表示されます。
挙動からabsoluteとzoomを併用すると、topやleftにも倍率がかかってしまうと推測できますが、
これはどこかに書かれているのでしょうか
element.style {
position: absolute;
top: 40px;
left: 50px;
zoom: 2;
}
- 967 ：Name_Not_Found：2015/01/30(金) 01:49:11.52 ID:???.net
- style.css と言うＣＳＳが書かれたファイルと、index.htmlと言うＨＴＭＬが書かれた２つのファイルがあります。
分け合って、index.htmlは書き換えられず、style.cssを操作して、2番目の<li>タグである、<li>fugafuga</li>の行をを表示させないようにしたいです。
行内にhogehogeを含む場合は表示しない もしくは、 2番目の<li>を表示させない と言うような記述をstyle.css内に書けばよいのかと思いますが、
どのように書いたらよいのか教えてください。
style.css
index.html
<div id="list">
<ul>
<li>hogehoge</li>
<li>fugafuga</li>
<li>saitama</li>
</ul>
</div>
- 968 ：Name_Not_Found：2015/01/30(金) 02:19:48.37 ID:???.net
- >>967
ul li:nth-child(2)
- 969 ：Name_Not_Found：2015/01/30(金) 10:16:12.75 ID:???.net
- >>968
いけました
ありがとうございます
- 970 ：Name_Not_Found：2015/02/02(月) 00:25:54.15 ID:???.net
- >>966は難しいでしょうか
- 971 ：Name_Not_Found：2015/02/02(月) 02:54:20.09 ID:???.net
- >>970
何をどうしたいのかがわからないので非常に難しいですね。
- 972 ：Name_Not_Found：2015/02/02(月) 14:21:09.63 ID:???.net
- エスパー検定１級レベルだな
- 973 ：Name_Not_Found：2015/02/11(水) 19:07:42.10 ID:VpbvwY1o.net
- CSSで下のようなデザインを組みたいのですが、どうしたらいいですか？
┌── タイトル文字 ───────────┐
｜ ｜
｜ テテキストテキストテキストテキストキスト ｜
｜ テテキストテキストテキストテキストキスト ｜
｜ ｜
└───────────────────┘
長くなりそうなので
http://jsfiddle.net/ か http://jsbin.com/ にコードを書いて下さっても大丈夫です
よろしくお願いします
- 974 ：Name_Not_Found：2015/02/11(水) 19:27:02.06 ID:???.net
- がんばればいい
- 975 ：Name_Not_Found：2015/02/11(水) 19:29:07.08 ID:VpbvwY1o.net
- >>974
できませんか？
- 976 ：Name_Not_Found：2015/02/11(水) 21:04:26.39 ID:???.net
- はっきり言うとドラクエ風ウィンドウだよね
まったく同じこと過去にやったけどね
そのまま真似されたくないから言わないけどね
- 977 ：Name_Not_Found：2015/02/11(水) 21:12:33.63 ID:VpbvwY1o.net
- >>976
本当はできないんですよね？
- 978 ：Name_Not_Found：2015/02/11(水) 21:40:15.37 ID:???.net
- そうかも
- 979 ：Name_Not_Found：2015/02/11(水) 21:41:10.69 ID:VpbvwY1o.net
- どたなかわかる人いませんか？
- 980 ：Name_Not_Found：2015/02/11(水) 21:42:20.65 ID:???.net
- >>973
できましたよ
http://jsfiddle.net/L1y136bv/
- 981 ：Name_Not_Found：2015/02/11(水) 21:44:15.40 ID:???.net
- >>980
すみません。間違えていたので修正しました！
http://jsfiddle.net/L1y136bv/1/
- 982 ：Name_Not_Found：2015/02/11(水) 22:20:00.42 ID:VpbvwY1o.net
- どたなか出来る方教えてください
- 983 ：Name_Not_Found：2015/02/11(水) 22:22:48.53 ID:???.net
- ど田中出来る人いませんか？
- 984 ：Name_Not_Found：2015/02/11(水) 22:27:01.37 ID:???.net
- >>982
こんな感じ。absoluteで調整
まぁbakkugroundで見出しの背景を調節してもいいけどめんどくさい
<style>div{border:1px solid #555;width:50px;} p.p{position: absolute;
top: -15px;left: 15px;background: rgb(255, 255, 255);}
</style>
<div><p class="p"> bb </p><p>あああああああああ</p></div>
- 985 ：Name_Not_Found：2015/02/11(水) 22:41:03.87 ID:VpbvwY1o.net
- >>984
ありがとうございます！！
わかる人が居てくれて本当に良かったです
- 986 ：Name_Not_Found：2015/02/12(木) 01:28:02.79 ID:???.net
- え？
ホントにこれで望み叶ってんの？
- 987 ：Name_Not_Found：2015/02/12(木) 01:49:05.93 ID:???.net
- absoluteじゃ一緒にスクロールしてまうがな。せめてfixed。
- 988 ：Name_Not_Found：2015/02/12(木) 08:36:07.22 ID:???.net
- やっぱり>>981が一番正確に
要望を実現しているな。
- 989 ：Name_Not_Found：2015/02/12(木) 08:50:02.97 ID:???.net
- 動くかどうかはともかく、>>984はマークアップがダサいよね。
- 990 ：Name_Not_Found：2015/02/12(木) 08:54:13.70 ID:???.net
- マークアップがダサい（）
- 991 ：Name_Not_Found：2015/02/12(木) 14:41:08.99 ID:???.net
- 解答できなかった奴の嫉妬ｗ
- 992 ：Name_Not_Found：2015/02/12(木) 14:51:32.37 ID:???.net
- >>991
次スレよろ。
- 993 ：Name_Not_Found：2015/02/12(木) 21:55:54.94 ID:???.net
- ワラタｗ
- 994 ：Name_Not_Found：2015/02/13(金) 18:57:36.52 ID:???.net
- -─フ -─┐ -─フ -─┐ ヽ / ＿ ───┐. |
＿＿∠＿ ／ ＿＿∠＿ ／ ／￣| / / ｜
／ ／⌒ヽ ／ ／⌒ヽ /l ／ |
（ | （ | ／ / l ／＼ | /
＼__ ＿ノ ＼__ ＿ノ ／ ＼ ／ ＼ |＿／
＿＿|＿＿ ＿＿ l ＿＿|＿＿ l ヽヽ
| | ￣￣ ／ -┼─ | | _ l
| | / | ─- ├─┐ ￣|￣ ヽ |
| | | | / | | │
─┴ｰ┴─ ヽ_ | ヽ＿_ ／ ヽ/ | ヽl
l l | ┌─┬─┐ ─--
| ヽ | ヽ | ＿. ├─┼─┤ ＿_
| ｌ | ｌ ／￣ └─┴─┘ ￣ ヽ
| | | | （ , l ヽ |
し し ヽ＿＿ / ヽ＿__,ヽ _ノ
- 995 ：Name_Not_Found：2015/02/13(金) 20:25:04.32 ID:???.net
- >>994
てめぇがたてろよ、カス
- 996 ：Name_Not_Found：2015/02/14(土) 10:39:17.71 ID:???.net
- (⌒-=+=⌒)
// ’ ▼’ヽ
彡 V~~Vﾐ
i （ ＾ω＾） > えっ おれ ?
|=（ﾉ |）
l== !
人= ,,ﾉ
U" U
- 997 ：Name_Not_Found：2015/02/15(日) 09:24:01.69 ID:???.net
- ほれ
http://peace.2ch.net/test/read.cgi/hp/1423959729/
- 998 ：Name_Not_Found：2015/02/15(日) 20:05:41.24 ID:???.net
- おつ
うめ
- 999 ：Name_Not_Found：2015/02/15(日) 21:32:51.42 ID:???.net
- >>997 はワシが育てた。
乙梅三郎
- 1000 ：Name_Not_Found：2015/02/16(月) 08:53:07.06 ID:???.net
- 2年半ぶりの新スレか
- 1001 ：Name_Not_Found：2015/02/16(月) 10:04:28.62 ID:???.net
- 1000なら億万長者になる＼(^o^)／
- 1002 ：2ch.net投稿限界：Over 1000 Thread
- 2ch.netからのレス数が1000に到達しました。
総レス数 1002
276 KB
掲示板に戻る
全部
前100
次100
最新50
read.cgi ver 2014.07.20.01.SC 2014/07/20 D ★