タグ

CSSとHTMLに関するrikochanhayatokunのブックマーク (3)

  • CSS Gridを使ったレスポンシブ対応の基本レイアウト

    2024年8月23日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか?前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します! ↑私が10年以上利用している会計ソフト! CSSグリッドの基の書き方は動画で確認! 基的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう! 2カラム まずは基の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう! 可変幅 2カラム カラムを画面の幅に合わせて伸

    CSS Gridを使ったレスポンシブ対応の基本レイアウト
    rikochanhayatokun
    rikochanhayatokun 2018/04/05
    これは便利になりますね
  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
    rikochanhayatokun
    rikochanhayatokun 2017/07/08
    これは便利ですね
  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

    HTMLCSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
    rikochanhayatokun
    rikochanhayatokun 2016/12/19
    抑えておきたいことですね
  • 1