clearfixとfloatプロパティは、かつてレイアウトを作るのに活用されていた。10年ほど前まで、ブラウザが用意しているstyle設定をリセットする「reset.css」や、その後に普及した「normalize.css」などには、必ずといいほど「clearfix」というものが設定されていた。 例えば、次のように。 .clearFloat{ clear: both; ...

検索キーワードでのハイライト表示はとても簡単。 WordPressの検索結果をハイライト表示で。 見た目でもわかりやすく。 WordPressの検索機能は比較的簡単に設置できる。ただ、デフォルトの状態だと少々検索結果が分かりにくい。 そこで何か良い方法はないものかと探していたところ、functions.phpに下記の記述を追加するだけで、検索キーワードのハイライト表...

srcsetとsizesが効かない？ の原因。 以前、srcsetとsizesが効かなかったことがあった。 そのときは、原因はわからなかったが対処方法はわかったので、とりあえず解決用として以下のHTMLコードを記載した。 解決した記述コード。 <picture> <source media="(max-width: 799p...

パスにもファイルにも問題ないのに404エラー？ デベロッパーツールのコンソールに不明なパスによるエラー。 前々から気にはなっていたが、作業時間を取られてしまうので無視していた、Chromeのデベロッパーツールのコンソールに出ていたエラー。 ありえない404、かつSEOにも表示にも関係のない画像ファイルに対するものなので放っておいた。一応パスを確認したが問題はな...

メディアライブラリが空に！？ WordPressサイトのリニューアル中に。 消えたメディアファイル。 管理画面からのxmlファイル。 WordPressで制作したサイトのリニューアルのため、旧サイトのサーバーの画像類をWP管理画面からxmlファイルでエクスポートし、リニューアル中のテストサーバーのWP管理画面からインポートした。 FTPからのファイルア...

classセレクタと子孫セレクタ。 職業訓練校の場合。 2014年頃までは、子孫セレクタの使用は普通だった。Webの標準化団体のW3Cがそう策定しているので、自分が講師をしていた職業訓練校でもそのように教えていた。 検定試験用の教科書の場合。 idセレクタや子孫セレクタは検定試験用の教科書に記載されており、実際の試験でも出題されている。おそらく今でもそうだろ...

imgタグのsrcsetとsizesが効かない？ スマホとパソコンで画像が切り替わらない。 なぜだろう。。 MDNで確認。 MDNのサイトに記載されていた、レスポンシブデザイン用の画像指定のサンプルソースコード。 <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w...

Atom いまさらながら、Atomの使い方を勉強している。ネットで調べていると、使い方について教えてくれるサイトが出てくる。とにかく、とっかかりが欲しい。 Howponさんサイト（https://howpon.com/6391）では、 「AtomがGitHubと連動できるようになると、エディタで編集したものをクリックのみでGitHubに同期まで行えるようになって非常に便利です...