コンテンツへスキップ

CSS note

ワードプレステーマとCSS

Shrunk Expand

メインナビゲーション

  • CSS イベント
  • テキスト
    • 縦書き
  • WordPress
    • gutenberg PHP
    • gutenberg CSS
  • 投稿一覧
←過去の投稿
  • カテゴリー別アーカイブ イベント
  • イベントカテゴリーでは、input要素や、tabindex属性、target属性 を使ったCSSイベントをまとめています。

    従来は、javascriptを利用するのが常識でしたが、工夫をすることでCSSだけでクリックイベントに似た動作を行う事もできます。

    タブインターフェース、CSS3のdatail要素と、summary要素等これからブラウザで実装されていくようなトグルメニューといったものと同じような機能を現在のCSSサポートでも実現できます。

  • CSSだけで、背景色の変更

    暗い場所で、ページを開くと、白いブログの背景色が目に刺さるなんてことがあります。グーグルマップなんかは、トンネルに入ると黒背景で表示されますね。背景色の切り替えは、javascriptでやるケースが多いのかもしれませんが、ちょっと工夫するとCSSでも簡単にできます。

    続きを読む→ 投稿 ID 9570


    投稿日: 2019 年 4 月 tenman
    投稿グループ イベント
  • focus-within を使ったtable要素の省略表示

    Can I use... focus-within

    続きを読む→ 投稿 ID 9570


    投稿日: 2017 年 12 月 tenman
    投稿グループ イベント
  • focus-within プロパティを使った長い説明付きフォーム

    :fucus-withinは、フォーカスした子要素の親要素にスタイルを指定することが出来ます。CSSでは、これまで不可能だったスタイル設定を実現できます。


    投稿日: 2017 年 12 月 tenman
    投稿グループ イベント
  • マウスホバーやクリック時にサブブロックを表示する CSS Dropdown Menu

    CSSだけで、hoverした時やクリックしたときに、サブブロックやリストを表示するための基本について、わかりやすく解説します

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 8 月 tenman
    投稿グループ イベント
  • ブロックをブラウザ全体に敷き詰める Drawers CSS

    ハンバーガーアイコンをクリックすると、サブブロックを画面全体に表示し、閉じるボタンを表示します。

    CSSだけで動いています。

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 8 月 tenman
    投稿グループ イベント
  • グーグルマップの表示 非表示コントロール CSS

    CSSだけで行う、グーグルマップの表示コントロール

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 8 月 tenman
    投稿グループ イベント
  • CSSのイベントトリガー用のCheckbox CSS

    チェックボックスをCSSイベントのトリガーとして、表示コントロールをする場合 以下のように兄弟要素になっている必要があります 

    <input type="checkbox"...>
    <div id="target-box">
    ...
    </div>

    一般的なチェックボックスのスタイルは、以下のような構造でスタイルを当てることが多く

    <div>
     <input type="checkbox"...>
    </div>

    トリガーとして使う場合は、使い勝手が悪くなります

    以下のスタイル ...


    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント ボタン
  • レイアウトの切り替え CSS

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit

      ABCCDE

    • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      ABCCDE

    • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

      ABCCDE

    • ...

    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント リスト
  • CSS Sort

    降順

    • list 1
    • list 2
    • list 3
    • list 4
    • list 5
    • list 6

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント リスト
  • CSS 3D Folding Animation + 一括hover

    ぜんぶ hover!!!

    Hello world

    Hello world

    CSS 3D Folding Animation

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント
  • 文字サイズの変更 CSS

    小中大特大特々大反転

    Change font size

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ...


    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント テキスト
  • Youtube シアターモード CSS

    youtubeのシアターモードっぽいスタイルの実装です。

    個別投稿ページでご覧ください。

    続きを読む→ 投稿 ID 9570


    投稿日: 2016 年 7 月 tenman
    投稿グループ イベント

投稿のページ送り

1 2 次へ


©2025 cssTheme URI: http://www.tenman.info/wp3/bootsDescription: Raindrops theme of child theme boots, which is the theme for a simple blog, but changing the settings of the customizer, and is scalable themes that can be used as a portal site. I Won’t Let You Down. Supported languages Japanese - JAPAN (ja) French - FRANCE (fr_FR) Polish - POLAND (PL) (pl_PL) Portuguese - BRAZIL (pt_BR)Author: TenmanAuthor URI: http://www.tenman.info/wp3/Version: 1.400Tags:black, blue, gray, brown, green, orange, pink, purple, red, silver, tan, white, yellow,dark,light,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar, custom-colors, custom-header, custom-background, custom-menu, editor-style, theme-options, threaded-comments, sticky-post, translation-ready, post-formats, featured-images, full-width-template, fixed-layout, fluid-layout, responsive-layoutLicense: GNU General Public License v2.0License URI: http://www.gnu.org/licenses/gpl-2.0.htmlText Domain: bootsTemplate: raindrops 投稿フィード かつ コメントフィード Child theme CssTheme URI: Http://www.tenman.info/wp3/bootsDescription: Raindrops Theme Of Child Theme Boots, Which Is The Theme For A Simple Blog, But Changing The Settings Of The Customizer, And Is Scalable Themes That Can Be Used As A Portal Site. I Won’t Let You Down. Supported Languages Japanese - JAPAN (ja) French - FRANCE (fr_FR) Polish - POLAND (PL) (pl_PL) Portuguese - BRAZIL (pt_BR)Author: TenmanAuthor URI: Http://www.tenman.info/wp3/Version: 1.400Tags:black, Blue, Gray, Brown, Green, Orange, Pink, Purple, Red, Silver, Tan, White, Yellow,dark,light,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar, Custom-colors, Custom-header, Custom-background, Custom-menu, Editor-style, Theme-options, Threaded-comments, Sticky-post, Translation-ready, Post-formats, Featured-images, Full-width-template, Fixed-layout, Fluid-layout, Responsive-layoutLicense: GNU General Public License V2.0License URI: Http://www.gnu.org/licenses/gpl-2.0.htmlText Domain: BootsTemplate: Raindrops of レインドロップス テーマ
Lock Icon