Pure CSS でこんなんできたよ。とか、CSS プロパティのこんなん便利。とか、CSS楽しいねーって人向け
はてなブログを持っていれば、誰でも参加できます。
2015年に公開した以下の記事： codelife.cafe では、当時主流だったfloatベースのレイアウトを、登場間もないFlexboxで置き換える方法を紹介しました。 あれから10年。CSSはさらに進化し、レイアウト手法の選択肢も広がりました。 この記事では、過去の方法を振り返りつつ、2025年現在におけるベストなCSSレイアウト手法を紹介します。
Windowsが勝手に再起動する症状に悩まされること3日・・ようやく解決したのでそのメモです。 ソフトが原因ではないしハード異常もなさそう…という状態で、なかなか原因がわからなかったのですが、ようやく解決しました。 勝手に再起動というキーワードで調べると、Windowsアップデートやウイルスなど引っかかるのですが、どれも今回のケースとは違う状態です。 発生しても大体が深夜近くに再起動されているので…
:isは()内のセレクタの詳細度が適用されるが、:whereは()内セレクタの詳細度が0となる。 <div id="sample"> <div class="test">sample(:is使用、上書きされない)</div> </div> <div id="sample2"> <div class="test">sample2(:where使用、後に上書きされる)</div> </div> <di…
この記事は5分で読めます。 [はじめに] 「アマゾン、楽天での評価は？」 「商品が届くまでの日数は？」 「気になるスペックは？」 「開封開始ぃ〜ん！」 「さっそく使ってみよ～う！」 「限界に挑戦してみよう！その①」 「限界に挑戦してみよう！その②」 「充電中も本体が使えます！」 「まとめ」 [はじめに] こんにちは！暮らしに役立つブログ、ユッチーの趣味部屋の管理人 「ユッチー」です！今日は最近流行…
CSS でテーブルの線を引くのは簡単です。下のようにすれば問題なく引けます。 table { border-collapse: collapse; } td, th { padding: 10px; border: 1px solid #000; } でも角を丸くしようとしてもできません。論理的にこれだ！という引き方になっていないからです。そこで僕なりの解法です。下のようにすれば問題ありません。 …
CSSのシャープ（#)idとドット(.)クラスの全て 今回はCSSのシャープ(#)とドット(.)について詳しく説明していきます。 レベル1 #について #はCSSではクラスではなくてidの時に使います。 次の例で見て下さい。 HTML CSS <div id="testid1">テスト</div> #testid1{ font-size:20px; } 実際は次のように表示されます。 テスト とに…
Firestoreセキュリティルール向けのファイル結合ツールを作ってみたので、簡単に使い方などを紹介したいと思います。 作成したCLIツールは以下 Firestoreセキュリティルールに限らず、テキストファイルであれば何でも使えるので、ツール名はincludeとしています。 本記事ではFirestoreセキュリティルールとMarkdownの結合を例に、使い方を紹介したいと思います。 目次 インスト…
ご無沙汰しています。 ちょっとブログなど色々とお休みしていたのですが、 テレビ東京「主治医が見つかる診療所」の番組内にて、 制作したアプリ「超精密AI！顔年齢測定カメラ」が紹介されるそうなので、 告知をさせてくださいませ。 mamooru.com 放送日2019年９月５日（木）１８：５５〜２０：４９テレビ東京系列にて放送予定 ぜひ、番組をご覧いただけたら嬉しいです。 またせっかくの機会なので、アプ…
こんにちは、Twirusです。 前回、疑似要素で外部アイコンが使えるようになりました。 ですが投稿日時の要素だけじゃなく他の要素にもアイコン使いたい！さらにはブログをカスタマイズしたい！オリジナルテーマを作りたい！となると「要素」と「クラス」を知る必要があります。そんな時はChromeの検証ツールを使うとすぐ分かります！ htmlに触れよう！ 検証ツールでhtmlを見る！ CSSで指定する時の注意…
この記事でははてなブログで、ページの一番上にあるグローバルヘッダーを変更する方法を紹介します。 紹介しているコードは自分のブログで使用してもらって構いません。 なお、このバーは globalheader-container という名前（id）で存在していますので、これをカスタマイズすればよいです。 メニューバーの文字色、背景色を変更する 見出しで使用しているhタグのようなカスタマイズが可能 見出し…
次のページ
