[mixi]スタイルシートの体験と質問 - CSSテクニック

[12] mixiユーザー 04月08日 22:12

[14] mixiユーザー 04月09日 00:20

夜分遅くすみません。いつもご指導ありがとうございます。
修正しましたら何も表示されなくなりました
いつでも良いのでお暇なときお願いします。

[16] mixiユーザー 04月09日 09:20

ヨクネムルさんおはようございます。
プロバティは一個という意味がよくわかりました
一晩よく眠って考えました。
おかげさまで解決しました。これで次に進みます。
ありがとうございました。

[17] mixiユーザー 04月09日 09:27

background:
url("001.jpg") no-repeat 0 0,
url("002.jpg") no-repeat 30px 30px,
url("003.jpg") no-repeat bottom right;

上が〇----------------------------------下は×
background: url("001.jpg") no-repeat 0 0,
background: url("002.jpg") no-repeat 30px 30px,
background: url("003.jpg") no-repeat bottom right;

[18] mixiユーザー 04月10日 22:00

またまた失礼します。
どこがまちがっているのか表示なしです。
http://n-h.x0.to/test4/test7.html
--------------------
<!DOCTYPE HTML>
<html lang=Js>
<head>
<meta charest=Shift_Jis>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>

</body>
</html>

[20] mixiユーザー 04月11日 00:36

>>[18]

「charest=Shift_Jis」×　
「charset="Shift_JIS">」○　
とかいろいろ気になるところはありますが
とりあえずどちらのボックスにも　widthとheightを設定してみて下さい。
width:100px;
height:100px;
とか。
一応、表示はされると思います。
というか、そうでないとなにも表示されなくて当然にも思えるのですが
元にしているソースはどうなっているのでしょう。

[21] mixiユーザー 04月12日 07:55

十六夜様ありがとうございます。ご指摘のとおり訂正しました・私のスキル不足から元のソースを見逃したものと思います。

[22] mixiユーザー 04月12日 08:48

元ソースを確認しましたら、前半に次のように設定されているのが欠落していました。
div{width:100px;
height:100px;
margin-bottom:20px;
position:absolute;
top:100px;left:100px;}
　　　　　　　　すみません。(^^)/

[23] mixiユーザー 04月12日 17:05

>>[22]

いえいえ。解決したなら良かったです。あと CSS3の記述はなるべく多様なブラウザで表示を確認してみて下さいね。

宇宙えびさんの投稿で再確認できることもいろいろあります。
時間があるときはなるべくこちらも見にくるようにしますので、またなにかあれば上げておいて下さい。

[24] mixiユーザー 04月12日 22:19

アニメーションが動きません。
ベンタープレフィックスとは何でしょうか。

<!DOCTYPE HTML>
<html lang=Js>
<head>
<meta charest=Shift_JIS>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<div>
</div>
</body>
</html>

[25] mixiユーザー 04月12日 23:01

>>[24]

ぱっと見ただけですが「animation-neme」×
「animation-name」○ですよね。
タイプミスはなるべくご自身で発見できるようになるとよいのですが。
エディタはなにをお使いですか？
プロパティは色が変わってくれるようなエディタだと発見しやすいと思います。

というわけで上記で解決しないとは思いますがとりあえず。

ベンダープレフィックスというのはざっくりいうと、まだ仕様が確定してないけど
こんな感じで使えるよ～という草案レベルのプロパティなどをブラウザの製造元（ベンダー）が
先行して実装した場合、ブラウザごとで書式が変わる可能性があります。
そこを吸収するためにプロパティのまえに-ms-など各ベンダーを表す接頭辞（プレフィックス）をつけておきます。今回の「webkit-」は Chrome用です。
プレフィックスがないものも記述する必要がありますので今回の書き方はおかしいです。

一応ご説明いたしましたが、検索でわかる程度のことは調べてからの質問をお願いします。
http://www.htmq.com/csskihon/603.shtml

「@-webkit-keyframes slidein 」以下の記述もだいぶ怪しいので、参考にしているサイトなど元のソースががあるようなら、そうした情報も御提示ください。

[26] mixiユーザー 04月13日 09:54

おはようございます。まずタイプミスを直して、スタイルの部分を
ご指導の通りに修正しましたら背景色が少し動くようになりました。
しかし、移動が全く効いていないようです。
http://n-h.x0.to/test4/test9.html

テキストエデイタはsakura.exeを使っています。
ブラウザはIE11、エッジ、クロームです。
教材元は
http://dotinstall.com/lessons
css3⑲の最後の方です。

[28] mixiユーザー 04月13日 22:20

ヨクネムルさん、十六夜さんこんばんわ。
我乍らタイプミスにあきれています。
何せ私1932生まれ、英語の教育を受けていませんので
確かに苦手です。ご指摘のようにmarginを訂正したら動きました。
-ms-を省いても動くようです。
エデイタの件ありがとうございます。
Sublime Text3を方をダウンして試していますが
この文字を大きくする方法がありますでしょうか、
文字が小さくて分かりづらいです。

[30] mixiユーザー 04月14日 20:13

>>[26]

なるほど動画レッスンが基本でソースコードのダウンロードが無いのですね。
コピー＆ペーストが使えない環境での学習とは存じませんでしたので年長者に対してやや厳しい物言いをしてしまいましたことお詫び申し上げます。

ベンダープレフィックスとエディタについては、レエル・ヨク・ネムルさんから詳細かつ丁寧なコメントを頂けているようですので解決済みかとは思いますが、ベンダープレフィックスに関してはブラウザのバージョンが上がる（ CSS3の仕様が確定する）たび「不要」になっていきますので
3年前の教材なら「必要」と書かれていた box-shadowなども、いまではベンダープレフィックス無しでほとんどのメジャーなブラウザでは表示されるはずです。

というわけで、せっかく学習されているなら

・ベンダープレフィックス無しで記述してみる
→各ブラウザで動作確認
→動かないブラウザ動くブラウザがある（すなわち動かない方ではベンダープレフィックスが必要）
→動かないブラウザ用のベンダープレフィックスを追加してみる（上書きではなく上に1行追加です）
→動かなかったブラウザにて動作確認

こんなやりかたも理解を深めるのに役立つと思います。

エディタに関してはSublime Text3で良いかと思われますが、サクラエディタで使い慣れているなら
サクラエディタ用の追加機能で CSSに色をつけるものもあるようでした。
http://freebsd.sing.ne.jp/tool/03/04/08.html

私自身は Dreamweaverを使用していますので、いまひとつフリーウェアには詳しくないですが
これもいろいろ試してみてご自身にあったものを見つけて頂ければと思います。

せっかく盛り上がってきましたし、私もこの機会に便乗して CSSでいろいろ遊んでみたいと思います。（仕事じゃ怒られるとか使えないようなものとか含み）

今後とも宜しくお願い申し上げます。

[31] mixiユーザー 04月14日 20:19

すみません自己レスです。さっきのサクラエディタ用のCSSハイライターですが2011年で最終版（開発終了）になってしまっているようなので、CSS3含む新しいプロパティには対応してくれてなさそうです。失礼しました。

[32] mixiユーザー 04月15日 22:33

ヨクネムル様　十六夜様ご丁寧な説明ありがとうございます。
Sublime Text3は文字サイズはご指摘の通り18ポイントに変更できましたが
ツールが英語表示で日本語に替える方法を試みましたが私には難しいようです。
数年前ミクシーのエクセルコミュニで良く勉強したことを思い出して
このスレットが盛り上がって沢山の仲間が増えたら良いなと思っています。
どうぞよろしくお願いします。
至らないところは厳しくご指摘ください。

[33] mixiユーザー 04月17日 22:26

http://n-h.x0.to/test4/test10.html
またまたboxが表示されません。
タイプミスも良く調べましたが原因がわかりません。
よろしくお願いします。
---------------------------------------
<!DOCTYLE HTML>
<head>
<meta charset="Shift_JIS">
<title>Lesson19</title>
<style type="text/css">

</style>

</head>
<body>
<div class="container">
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
</div>
</body>
</html>

[34] mixiユーザー 04月17日 22:46

>>[33] 「.box{」の前の行、「～:skyblue;}」の「}」の直後に余計な文字が1文字入ってますね。

[35] mixiユーザー 04月17日 23:10

わーーーー
はぎりんさん、初めまして
二日がかりで探したのですが、ありがとうございます。
早速直しました。Sublime Text3を使いかけたのですが文字化けが出て
元の桜に戻したのです。余計な文字は半角スペースでもダメでしょうか。
ありがとうございました。

[36] mixiユーザー 04月18日 09:21

>>[35]
半角スペースなら問題ないんですが、文字化けのせいか、エディタ上では表示されないだけで、何か違う文字になっちゃってたようです。

[37] mixiユーザー 04月18日 11:01

>>[33]

解決されたようで良かったです。
この手のミスで時間を取られてしまうのはもったいないので
なにか使いやすいエディタが見つかると良いのですが。

ちなみにこのCSSは、,boxに.boxが隣接する場合のみ左マージンを取る練習ですね。
内容的なところも簡単に記載しておいて頂くと、コミュ参加の方にも有意義ですし
場合によってはレスもつきやすいかと思います。

[38] mixiユーザー 04月18日 11:18

>>[33] 「body{ 」の前の行にも同様に余計な文字が1文字入ってますね。

[40] mixiユーザー 04月19日 19:38

はぎりんさん、
前回も［4］で同じこと教えていただいたのにすみません。

　十六夜さん
エデイタですがヨクネムルさんからご紹介いただいたsublime Text3は
ツールバーを日本語表示にしましたところなぜか文字化けしまして、
さくらエデイタも削除した後だったのでメモ帳に戻していました。
内容的なことを説明するまでとても私のスキルでは無理ですよ。

　Meatianさん
ばじめまして。<!--の前と、skyblue;}の後ですね、全角でもないし何でしょうか。
コピーしたらなくなります。

　ヨクネムルさん
いつも詳しい解説おそれいります、
}の後は次の要素とみなされること知りませんでした。
謎の文字は文字化けした残骸と思って居ました。
}の後から次の{まで、;から:までは要注意で
半角スペースでも気を付けなければいけない
ということですね。
ありがとうございました良く勉強になりました。

[41] mixiユーザー 04月19日 21:11

http://n-h.x0.to/test4/6.html
main領域にleftとright2個のIDを作りましたが
原典のように横に並ばず縦に表示されます。
又、エッジやクロームでは良いのですが
IE11で見るとスカイブルーの背景色が出ずに白色になります。
どこが間違っているのか分かりません。よろしくお願いします。

※原典　http://dotinstall.com/lessons/basic_css_layout/35706

[42] mixiユーザー 04月19日 22:37

>>[41]
#left {～width:200pt;}
#right {～width:300pt}
のところが、
#left {～width:200px;}
#right {～width:300px;}
ですね。

[43] mixiユーザー 04月19日 23:54

はぎりんさん、早速のご指摘ありがとうございます。
良く見つけますね。さすがです。
私にはとても真似できません。
何故間違ったかわかりません。
訂正したら正常になりました。
単位はポイントでは駄目だったのですね。
ファイルは明日でも直します。
IE11で見るmainの背景がスカイブルーにならず
白紙になります、ブラウザのせいでやむを得ないのでしょうか。

訂正した部分は最後の単位です。
#left{background:limegreen;float:left;width:200px;}
#right{background:lightgreen;float:left;width:300px;}

[45] mixiユーザー 04月20日 10:15

>>[43]
私は例えばCSSを手入力した場合、以下のサイトなどでエラーがないかチェックしてます。
http://jigsaw.w3.org/css-validator/validator

予想と結果が違う場合、こういうサービスを利用してみるのも一つの手ではないでしょうか。

[47] mixiユーザー 04月24日 09:43

Meatianさん、ありがとうございます。上のサイトnot fileになっています。
このようなサイトは英語表記が多くて私には難しいです。

レエル・ヨク・ネムルさん、いつも詳しいご教授ありがとうございます。
なにしろ頭が古いのでゼネリック、インラインなど
難しい用語に四苦八苦検索して少しづつ理解しています。
なんとかドットインストールのcss3を一通り終わりました、
一応習ったことを整理しています。

[48] mixiユーザー 04月24日 11:24

>>[47]
先にご紹介したCSS自動チェックには、日本語版もございました。
https://jigsaw.w3.org/css-validator/validator.html.ja
日本語版とはいえプロパティ名等はアルファベット表記のままですし、省略語など見慣れない言葉が多く戸惑われると思いますが、「多少はマシ」くらいに考えて使われてみてはいかがでしょうか。

[49] mixiユーザー 04月25日 00:08

Meatianさんありがとうございます。
初心者の悲しさ、表示されているエラー内容が分かりません( ;∀;)↓
http://n-h.x0.to/S/w

http://n-h.x0.to/T/04.html

↑要するにfooter(リンク)部分を画面の右下にポジション指定したいのですが、
スタイルが効いてないようです。

[51] mixiユーザー 04月27日 09:44

レエル・ヨク・ネムルさん他十六夜さん、Meatianさん、はぎりんさん
いつも分かりやすいご説明ありがとうございます。
おかげさまで以下のようなページが出来上がりました。
http://n-h.x0.to/T
以上報告して、これからもよろしくお願いします。

ログインすると、残り20件のコメントが見れるよ