ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

ホーム > コミュニティ > PC、インターネット > CSSテクニック > トピック一覧 > スタイルシートの体験と質問

CSSテクニックコミュのスタイルシートの体験と質問

  • mixiチェック
  • このエントリーをはてなブックマークに追加

コミュ内全体

新しいトピックが見当たりませんが、平成29年(2017)になって
スタイルシートの勉強している人が居られましたら、コメント下さい。
色々の疑問質問についてご教授ください。

コメント(51)

<style type="text/css">
<!--
header{width:100%; height:100px;
background: url("001.jpg")no-repeat; 0 0,
background: url("002.jpg")no-repeat; 30 30,
background: url("003.jpg")no-repeat; bottom right;}
-->
</style>

CSS3のテストをしています。
複数画像が表示されません。
http://n-h.x0.to/test4/
よろしくお願いします。
夜分遅くすみません。いつもご指導ありがとうございます。
修正しましたら何も表示されなくなりました
いつでも良いのでお暇なときお願いします。
ヨクネムルさんおはようございます。
プロバティは一個という意味がよくわかりました
一晩よく眠って考えました。
おかげさまで解決しました。これで次に進みます。
ありがとうございました。
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;
またまた失礼します。
どこがまちがっているのか表示なしです。
http://n-h.x0.to/test4/test7.html
--------------------
<!DOCTYPE HTML>
<html lang=Js>
<head>
<meta charest=Shift_Jis>
<title></title>
<style type="text/css">
<!--
#box1{
background:skyblue;
opacity:.5;}/*半透明*/
#box2{
background:orange;
opacity:.5;
transform:translate(20px,40px);
}
/*横に20縦に40*/
/*transform:rotate(30deg);30度に傾斜させる*/
/*transform:translatex(20px);横だけ20*/
/*transform:scale(0.5,1.5);スケールサイズの倍率*/
/*transform:skew(10deg,20deg);回転に角度を付ける*/
/*transform-origin 0 0;起点を左上、中心は50%50%*/
-->
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>

</body>
</html>
>>[18]

「charest=Shift_Jis」× 
「charset="Shift_JIS">」○ 
とかいろいろ気になるところはありますが
とりあえずどちらのボックスにも widthとheightを設定してみて下さい。
width:100px;
height:100px;
とか。
一応、表示はされると思います。
というか、そうでないとなにも表示されなくて当然にも思えるのですが
元にしているソースはどうなっているのでしょう。
十六夜様ありがとうございます。ご指摘のとおり訂正しました・私のスキル不足から元のソースを見逃したものと思います。
元ソースを確認しましたら、前半に次のように設定されているのが欠落していました。
div{width:100px;
height:100px;
margin-bottom:20px;
position:absolute;
top:100px;left:100px;}
        すみません。(^^)/
>>[22]

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

宇宙えびさんの投稿で再確認できることもいろいろあります。
時間があるときはなるべくこちらも見にくるようにしますので、またなにかあれば上げておいて下さい。
アニメーションが動きません。
ベンタープレフィックスとは何でしょうか。

<!DOCTYPE HTML>
<html lang=Js>
<head>
<meta charest=Shift_JIS>
<title></title>
<style type="text/css">
<!--
div{width:50px;
height:50px;
background:skyblue;
-webkit-animation-neme:slidein; /*アニメーションの名前*/
-webkit-animation-duration:1s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:.1s;
}
@-webkit-keyframes slidein
{
0%{
magin-left:100%;/*右側*/
background:white;
}
70%{
magin-left:50%;/*中央*/
background:blue;
}
100%{
magin-left:0%;/*左側*/
}
}

-->
</style>
</head>
<body>
<div>
</div>
</body>
</html>
>>[24]

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

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

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

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

「@-webkit-keyframes slidein 」以下の記述もだいぶ怪しいので、参考にしているサイトなど元のソースががあるようなら、そうした情報も御提示ください。
おはようございます。まずタイプミスを直して、スタイルの部分を
ご指導の通りに修正しましたら背景色が少し動くようになりました。
しかし、移動が全く効いていないようです。
http://n-h.x0.to/test4/test9.html

テキストエデイタはsakura.exeを使っています。
ブラウザはIE11、エッジ、クロームです。
教材元は
http://dotinstall.com/lessons
css3海虜埜紊諒です。
ヨクネムルさん、十六夜さんこんばんわ。
我乍らタイプミスにあきれています。
何せ私1932生まれ、英語の教育を受けていませんので
確かに苦手です。ご指摘のようにmarginを訂正したら動きました。
-ms-を省いても動くようです。
エデイタの件ありがとうございます。
Sublime Text3を方をダウンして試していますが
この文字を大きくする方法がありますでしょうか、
文字が小さくて分かりづらいです。
>>[26]

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

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

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

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

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

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

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

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

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

すみません自己レスです。さっきの サクラエディタ用のCSSハイライターですが2011年で最終版(開発終了)になってしまっているようなので、CSS3含む新しいプロパティには対応してくれてなさそうです。失礼しました。
ヨクネムル様 十六夜様ご丁寧な説明ありがとうございます。
Sublime Text3は文字サイズはご指摘の通り18ポイントに変更できましたが
ツールが英語表示で日本語に替える方法を試みましたが私には難しいようです。
数年前ミクシーのエクセルコミュニで良く勉強したことを思い出して
このスレットが盛り上がって沢山の仲間が増えたら良いなと思っています。
どうぞよろしくお願いします。
至らないところは厳しくご指摘ください。
http://n-h.x0.to/test4/test10.html
またまたboxが表示されません。
タイプミスも良く調べましたが原因がわかりません。
よろしくお願いします。
---------------------------------------
<!DOCTYLE HTML>
<head>
<meta charset="Shift_JIS">
<title>Lesson19</title>
<style type="text/css">
<!--
body{
margin:0;
padding:0;}
.container{
width:320px;
height:100px;
background:skyblue;}
.box{
box-sizing:border-box;
width:100px;
height:100px;
/*width:80px; height:70px;*/
background:#eee;
float:left;
padding:10px;
border-bottom:10px solid #ccc;}
.box+.box{margin-left:10px;}
-->
</style>

</head>
<body>
<div class="container">
<div class="box">Box</div>
<div class="box">Box</div>
<div class="box">Box</div>
</div>
</body>
</html>
>>[33] 「.box{」の前の行、「〜:skyblue;}」の「}」の直後に余計な文字が1文字入ってますね。
わーーーー
はぎりんさん、初めまして
二日がかりで探したのですが、ありがとうございます。
早速直しました。Sublime Text3を使いかけたのですが文字化けが出て
元の桜に戻したのです。余計な文字は半角スペースでもダメでしょうか。
ありがとうございました。
>>[35]
半角スペースなら問題ないんですが、文字化けのせいか、エディタ上では表示されないだけで、何か違う文字になっちゃってたようです。
>>[33]

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

ちなみにこのCSSは、,boxに.boxが隣接する場合のみ左マージンを取る練習ですね。
内容的なところも簡単に記載しておいて頂くと、コミュ参加の方にも有意義ですし
場合によってはレスもつきやすいかと思います。
>>[33] 「body{ 」の前の行にも同様に余計な文字が1文字入ってますね。
はぎりんさん、
前回も[4]で同じこと教えていただいたのにすみません。

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

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

 ヨクネムルさん
いつも詳しい解説おそれいります、
}の後は次の要素とみなされること知りませんでした。
謎の文字は文字化けした残骸と思って居ました。
}の後から次の{まで、;から:までは要注意で
半角スペースでも気を付けなければいけない
ということですね。
ありがとうございました良く勉強になりました。
http://n-h.x0.to/test4/6.html
main領域にleftとright2個のIDを作りましたが
原典のように横に並ばず縦に表示されます。
又、エッジやクロームでは良いのですが
IE11で見るとスカイブルーの背景色が出ずに白色になります。
どこが間違っているのか分かりません。よろしくお願いします。

※原典 http://dotinstall.com/lessons/basic_css_layout/35706
>>[41]
#left {〜width:200pt;}
#right {〜width:300pt}
のところが、
#left {〜width:200px;}
#right {〜width:300px;}
ですね。
はぎりんさん、早速のご指摘ありがとうございます。
良く見つけますね。さすがです。
私にはとても真似できません。
何故間違ったかわかりません。
訂正したら正常になりました。
単位はポイントでは駄目だったのですね。
ファイルは明日でも直します。
IE11で見るmainの背景がスカイブルーにならず
白紙になります、ブラウザのせいでやむを得ないのでしょうか。

訂正した部分は最後の単位です。
#left{background:limegreen;float:left;width:200px;}
#right{background:lightgreen;float:left;width:300px;}
>>[43]
私は例えばCSSを手入力した場合、以下のサイトなどでエラーがないかチェックしてます。
http://jigsaw.w3.org/css-validator/validator

予想と結果が違う場合、こういうサービスを利用してみるのも一つの手ではないでしょうか。
Meatianさん、ありがとうございます。上のサイトnot fileになっています。
このようなサイトは英語表記が多くて私には難しいです。

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

>>[47]
先にご紹介したCSS自動チェックには、日本語版もございました。
https://jigsaw.w3.org/css-validator/validator.html.ja
日本語版とはいえプロパティ名等はアルファベット表記のままですし、省略語など見慣れない言葉が多く戸惑われると思いますが、「多少はマシ」くらいに考えて使われてみてはいかがでしょうか。
Meatianさんありがとうございます。
初心者の悲しさ、表示されているエラー内容が分かりません( ;∀;)↓
http://n-h.x0.to/S/w

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

↑要するにfooter(リンク)部分を画面の右下にポジション指定したいのですが、
スタイルが効いてないようです。
レエル・ヨク・ネムルさん他十六夜さん、Meatianさん、はぎりんさん
いつも分かりやすいご説明ありがとうございます。
おかげさまで以下のようなページが出来上がりました。
http://n-h.x0.to/T
以上報告して、これからもよろしくお願いします。

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

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング

mixiチケット決済