Google Adsenseが読み込まれる前にローディングアニメーションを表示する
Google Adsenseは広告が表示されるまでに時間がかかります。空白の部分にいきなり広告が現れるとなんかびっくりするというか...
タグ 23件
CSS
-
-
CSS変数とJavaScriptでページを開く度に色をランダムに変える
サイトを開くたびに色が変わったらなんか面白いのでは？と、ふと思いついたので、JavaScriptでランダムに生成したカラーコードを、CSS変数に代入して遊んでみます。
-
クリックで開閉するドロップダウンメニューをCSSとJavaScriptで作ってみよう
目に見えるところに貼るほど重要ではないけど、開閉メニューでリンクを格納しておきたいというケースがあるかと思います。
-
aタグにclassを1つ追加するだけでリンクをブログカード風に変身させる
最近はブログにリンクを貼る手段として、テキストリンク以外にも、カード型のリンクを埋め込むことが増えてきました。
-
OSでもWebサイト側でも切り替えられるダークモードを実装する
昨年(2019年)あたりからダークモードが流行しているということで、様々なデバイスやアプリでダークモードが実装されています。というわけで、少し前にこのブログもダークモードに対応させました。そのときのメモ。
-
出来るだけメディアクエリを書かずにレスポンシブに対応させるためのTips
サイトをレスポンシブデザインに対応する際には、メディアクエリを使って書き分けたり、上書きしたりする必要があります。
-
Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する
HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。
-
クリックで画像を拡大するプラグイン(Lightbox)をjQueryなしで自作してみる
Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが...。
-
contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる
HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォームもこの属性が使われています。
-
CSSだけで文章を折りたたむ（続きを読む）その1
今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。