2010年10月1日金曜日

CSS文法チェッカー

長いCSSファイルを編集している時、途中どこかで文法を間違えてしまったようで、CSSが機能しなくなってしまいました。

おそらくカギ括弧の閉じ忘れとか、セミコロンを普通のコロンにしてしまったなどのミスで、正直上から一行ずつチェックしていくのは面倒。

そういえばCSSの文法チェッカーってないのかな？と思ってググったら、ありました。

CSS検証サービス

これでチェックしたら一発でした。原因はやはりカギ括弧の閉じ忘れ。

かなり便利なので、これからちょくちょくお世話になりそうです。
投稿者 時刻:
ラベル: ,

1 件のコメント:

  1. ああ2018年6月12日 20:25

    *{
    padding: 0;
    margin: 0 auto;
    }


    #space{
    margin-right: 20px;
    margin-left: 20px;
    }

    #page{
    width: 1000px;
    }

    #header{
    margin-bottom: 40px;
    }

    #header h1{
    text-align: center;
    margin: 30px 0;
    }

    #header ul{
    overflow: hidden;
    width: 1000px;
    }

    #header ul li:nth-child(-n+3){
    float: left;
    list-style: none;
    color: #ffffff;
    width: 249px;
    text-align: center;
    padding: 10px 0;
    background-color: #1d4000;
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;
    }

    #header ul li:nth-child(4){
    float: left;
    list-style: none;
    color: white;
    width: 248px;
    text-align: center;
    padding: 10px 0;
    background-color: #1D4000;
    border: solid 1px black;
    }

    #contents{
    overflow: hidden;
    }

    #main{
    width: 620px;
    float: left;
    }

    #main h2{
    font-weight: lighter;
    border-left: solid 2px #000000;
    padding-left: 20px;
    margin-bottom: 10px;
    }

    #main img{
    margin-bottom: 15px;
    }

    #main p{
    margin-bottom: 20px;
    }

    #side{
    float: right;
    width: 300px;
    }

    #side h3{
    font-weight: lighter;
    margin-bottom: 5px;
    }

    #side img{
    margin-bottom: 10px;
    }

    #side p{
    margin-bottom: 20px;
    }

    #footer{
    clear: both;
    color: #ffffff;
    font-size: 0.8em;
    text-align: center;
    background-color: #000000;
    padding: 20px 0;
    }




    @media screen and (max-width: 420px){

    *{
    padding: 0;
    margin: 0 auto;
    }

    all{　/*追加*/
    max-width: 100%;
    }

    #space{
    margin-right: 10px;　/*変更*/
    margin-left: 10px;　/*変更*/
    }

    #page{
    width: 400px;　/*変更*/
    }

    #header{
    margin-bottom: 40px;
    }

    img{
    max-width: 100%;　/*変更*/
    }

    #header h1{
    text-align: center;
    margin: 30px 0;
    }

    #header ul{
    overflow: hidden;
    width: 400px;　/*変更*/
    }

    #header ul li:nth-child(1){　/*追加*/
    float: left;
    list-style: none;
    color: #ffffff;
    width: 198px;
    text-align: center;
    padding: 10px 0;
    background-color: #1d4000;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;
    }

    #header ul li:nth-child(2){　/*追加*/
    float: left;
    list-style: none;
    color: white;
    width: 199px;
    text-align: center;
    padding: 10px 0;
    background-color: #1d4000;
    border-top: solid 1px black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 0 black;
    }

    #header ul li:nth-child(3){　/*追加*/
    float: left;
    list-style: none;
    color: white;
    width: 198px;
    text-align: center;
    padding: 10px 0;
    background-color: #1d4000;
    border-top: solid 0 black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 1px black;
    }

    #header ul li:nth-child(4){　/*追加*/
    float: left;
    list-style: none;
    color: white;
    width: 199px;
    text-align: center;
    padding: 10px 0;
    background-color: #1d4000;
    border-top: solid 0 black;
    border-right: solid 1px black;
    border-bottom: solid 1px black;
    border-left: solid 0 black;
    }

    #contents{
    overflow: hidden;
    }

    #main{
    width: 400px;　/*変更*/
    float: none;　/*変更*/
    }

    #main h2{
    font-weight: lighter;
    border-left: solid 2px #000000;
    padding-left: 20px;
    margin-bottom: 10px;
    }

    #main img{
    width: 100%;　/*追加*/
    margin-bottom: 15px;
    }

    #main p{
    margin-bottom: 20px;
    }

    #side{
    float: left;　/*変更*/
    width: 300px;
    }

    #side h3{
    font-weight: lighter;
    margin-bottom: 5px;
    }

    #side img{
    margin-bottom: 10px;
    }

    #side p{
    width: 400px;　/*追加*/
    margin-bottom: 20px;
    }

    #footer{
    clear: both;
    color: #ffffff;
    font-size: 0.8em;
    text-align: center;
    background-color: #000000;
    padding: 20px 0;
    }

    }

    返信削除

登録: コメントの投稿 (Atom)