タグ

CSSに関するkaeru-kanaのブックマーク (44)

  • 要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編

    要素の検証(デベロッパーツール)は初心者がカスタマイズするのに最高のツールで、変更をリアルタイムで見ながら装飾できて便利!CSSを書いてたら文字をサジェストするからツヅリを間違えないのも良いところです。 管理画面から直接スタイルシートをいじってブログで何度も確認してるとブラウザに古いスタイル(キャッシュ)が残って反映してないように見えたり、何度もシークレットモードを開いたりして、効率が悪かったり。 Chrome拡張機能「Incognito This!」を使うのも便利だけど、もっと便利なのが要素の検証でカスタマイズすること。「HTML」「CSS」『要素の検証』の基を知って試行錯誤を繰り返してたら、最後に自分で装飾できるようになります! 超初心者さんは初心者向け、HTMLの入門編!HTMLタグとCSSの関係&要素だけチェックしたら、このページで「要素の検証」の使い方・CSSの書き方・基

    要素の検証(デベロッパーツール)の使い方!初心者がカスタマイズできる方法!HTMLとCSS入門編
  • CSSの::afterと:after コロンの数の違いは? 疑似要素とクラスとは | 初代編集長ブログ―安田英久

    今日は、Webの現場寄りに、CSSの話を。セレクタで「:after」と「::after」がありますが、どちらが正しいのでしょうか。そもそも、「疑似クラス」や「疑似要素」とはどういうものなのでしょうか。 CSSセレクタにはいろいろありますが、「::after」「::before」という書き方と、「:after」「:before」という書き方があります。 昔からCSSに触っている人は、「え? コロンが2つって何?」となると思います。使い慣れた「:after」と今の「::after」は何が違うのでしょうか。 疑似クラスは「:」、疑似要素は「::」CSS3では、次のようにされています。 「疑似クラス」は「:hover」のようにコロン1つで書く「疑似要素」は「::after」のようにコロン2つで書く昔はどちらもコロン1つで書いていたのですが、CSS3でこの2つが区別できるように分けられました。古い人

    CSSの::afterと:after コロンの数の違いは? 疑似要素とクラスとは | 初代編集長ブログ―安田英久
    kaeru-kana
    kaeru-kana 2016/02/05
    んっ!? チェックしぃとこっと。。
  • 【第2弾】少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です!(スパンながっ)簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! 目次 画像を丸く表示 1線のテーブル 1線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTMLCSSの全

    【第2弾】少しのコードで実装可能な20のCSS小技集
    kaeru-kana
    kaeru-kana 2016/02/03
    使うっ♪チェック!
  • pen#PwLXXP

    About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

    pen#PwLXXP
    kaeru-kana
    kaeru-kana 2015/12/11
    これは(・∀・)モエッ