CSS

実験カテゴリー

カラムの実験（display: flex）

flexでカラムを分けて、レスポンシブ対応するよ。Gutenbergのデフォルトブロックを使うよ。
2024.10.23 SunShine! SunShine!
実験カテゴリー
インターネット

CSSで要素を消す方法（display: none; と visibility: hidden; の違い）

なくすか見えなくするかの違い。どっちがどっちかを比べるよ。
2024.05.01 SunShine! SunShine!
インターネット
インターネット

「display: grid」 は「grid-template-columns」とともに

「display: grid」を使って、テーブルのようなレイアウトを作ってみました。
2024.03.01 Blog Admin Blog Admin
インターネット
ブログ関連

tableを横線だけのスタイルにする（HTMLとCSSの記述案）

表はさ。罫線を減らした方が見栄えがよさそうな感じがするんだ。
2024.01.05 SunShine! SunShine!
ブログ関連
ブログ関連

画面スクロールしても常駐してくれるstickyが楽しかったので

スクロールしても常駐してくれるボタンを設置したい！（CTAとしては強力な気がしています。）
2023.10.12 Blog Admin Blog Admin
ブログ関連
ブログ関連

マウスオーバー時の画像切替えをCSSで実装

マウスオーバーで画像を切替える動きをCSSだけで実装します。JavaScriptなしです。
2023.06.20 2023.06.23 Blog Admin Blog Admin
ブログ関連
ブログ関連

HTMLだけで折り畳み構成（summary と details） + ちょっと装飾

HTMLタグだけで、いわゆるアコーディオンメニューを構成できます。
2023.03.28 Blog Admin Blog Admin
ブログ関連
ブログ関連

リスト（ul、li）のマークはCSSで変更（HTMLソースの話）

CSSの疑似クラス（:before）を利用して、リストの先頭マークを調整します。
2022.12.11 Blog Admin Blog Admin
ブログ関連
ブログ関連

全角と半角は使い分けたい（SEOのアピールになる？）

SunShine!英単語は半角で書いてね。記号は全角で書いてね。機械に読んでもらうってこと誰か細かいな。SunShine!ちゃんと意味あんのよ。主にSEOみたいな話なのかな。テキスト読み上げでも一緒でしょ？機械的に文字列を読んでもらうために...
2022.05.31 SunShine! SunShine!
ブログ関連
ブログ記事

CSSで兄弟要素の幅に合わせる（WordPressで画像の真下に中央揃えでキャプションを入れたい！）

画像は左揃えにして、そのブロック内でキャプションを中央揃えにするレイアウトになっているはずです。
2021.09.13 Blog Admin Blog Admin
ブログ記事
ブログ関連

一部の表示がダメみたいでして（#Gutenbergが悪い！）

最近発見したんだけど、GutenbergのCSSがやべー。
2021.03.25 SunShine! SunShine!
ブログ関連
ブログ関連

SNSアイコン画像をCSSでいい感じに表示させたい

ボタン用に準備した画像をマウスオーバーで色反転させたいのです。
2020.07.13 2020.07.25 Blog Admin Blog Admin
ブログ関連
ブログ関連

HTMLのリスト要素（li）の行頭記号をCSSで変更する話

HTMLでリストを書く場合、「ol」か「ul」を使います。リストの冒頭に設定される数字や記号（マーク）は、HTML解釈による自動設定です。これは、CSSで調整が可能なのです。
2018.12.26 2018.12.28 Blog Admin Blog Admin
ブログ関連
ブログ関連

WordPressテーマ『Freesia Empire』でホームページを改修

当ブログでは、WordPressを使っています。そして、利用しているテーマは『Freesia Empire』というものです。このテーマに実装されている、ホームページのカスタマイズ機能を適用しました。当ブログのホームページや、デモ画面にあるような見た目にできます。思っていた以上にいろいろなところに調整が必要だったので、記録を残します。
2018.11.26 2020.08.18 Blog Admin Blog Admin
ブログ関連
ブログ関連

「WordPress Popular Posts」で自分好みに順位を表示できるようにCSSを設定

当ブログでもお世話になっているプラグイン『WordPress Popular Posts』。アクセスランキングを簡単に表示できて、重宝しております。ところで、順位の数字を1、2、3・・・と付けたいのです。CSSできれいに装飾もしたいのです。
2018.07.23 2020.07.04 SunShine! SunShine!
ブログ関連
ブログ関連

HTMLタグの見出し（Headline: h）の構成を変更した記録（h3をh2に変更）

当ブログの見出し（Headline）構成を最適化しました。h3をh2に、h4をh3に、と、ナンバー構成の変更です。WordPressのプラグインを利用して一括置換して、関係するcssの記述も変えておきました。すべてステージング環境で実施後、本番環境にコピーしました。
2018.06.02 Blog Admin Blog Admin
ブログ関連
ブログ関連

【CSS】アルファベットを大文字化する設定（解除しました）

現在利用中のWordPressテーマ『Freesia Empire』（無料版）では、「text-transform」がCSSファイルで指定されている項目が多いのです。アルファベットが強制的に大文字になるのには困っていたので、noneを優先指定しました。
2018.04.14 Blog Admin Blog Admin
ブログ関連
ブログ関連

【CSS】タグに「style」で書式を指定しているのに反映されずに苦労した件

CSSで書式が調整されているブログに記事を投稿した際、対象部分だけどうしても見た目を変更したいことがあります。CSSでは、優先順位が最も高い「style」オプションによるタグ内指定でよいという認識でしたが、理解が中途半端だったために苦労したという話です。
2018.03.21 2018.04.04 Blog Admin Blog Admin
ブログ関連
ブログ関連

直近のカスタマイズ（固定ページの抜粋表示、ラインマーカー風文字装飾の追加）

ブログの見た目を調整しました。直近で2つです。1つは、固定ページで「抜粋」を表示、編集できるようにしました。もう1つは、ラインマーカー風の文字装飾ができるようにCSSを追加しました。
2017.05.14 2018.04.06 Blog Admin Blog Admin
ブログ関連
ブログ関連

【WordPress】ビジュアルエディターのフォントをゴシック体に変更

WordPressの投稿をビジュアルエディターで編集する際に、明朝体フォントでの表示だと違和感があったので、ゴシック体に変更しました。
2017.03.01 2018.04.06 Blog Admin Blog Admin
ブログ関連
次のページ