タグ: HTML
Hexoのカテゴリーリストにcurrentクラスを付けて現在地をハイライト表示する
HexoではHelperという機能が備わっており、よく使う機能は簡単に出力できるようになっています。その機能を利用すると下のように記述することで、簡単にカテゴリー一覧を出力できます。
Hexoで画像にloading="lazy"を自動で追加して画像を遅延読み込みする
Chromeでいよいよ画像の遅延読み込みがネイティブでサポートされました。
クリックで画像を拡大するプラグイン(Lightbox)をjQueryなしで自作してみる
Lightboxという単語は死語感が漂っており、今どき需要もなさそうですが…。
contenteditable属性で入力したCSSがページにリアルタイムで反映されるフォームをつくる
HTML5で追加された属性にcontenteditableというものがあります。これを付けることで、あらゆる要素のテキストノードの編集が可能になります。ブラウザ版Twitterのツイート入力フォームもこの属性が使われています。
CSSだけで文章を折りたたむ（続きを読む）その1
今回はHTMLとCSSのみでコンテンツの開閉、いわゆる「続きを読む」を再現してみます。
Hexoでheadに挿入される<meta name="generator">タグを消す
Hexoではデフォルトで、<head>間に下のようなmetaタグが自動で挿入されます。
CSSとChrome拡張機能でGoogle Adsenseの自クリックを防止する【全サイト対応】
Google Adsenseは自分で運営しているサイトに貼り付けた広告をクリックすることは規約で禁止しており、クリックするとペナルティを受けてしまいます。
CSSのみでクリックで画像を拡大する（Lightboxもどき）
画像をクリックするとポップアップで拡大表示するプラグインを、HTMLとCSSのみで再現してみます。いわゆるLightboxやfancyboxのようなものです。
HTMLだけでコンテンツを開閉できるdetailsタグを試してみる
<details>タグはHTML5.1で追加されたタグで、コンテンツを開閉できるウィジェットを生成します。
【Swiper.js】縦横比を保ったまま横幅いっぱいのスライダーをつくる
Swiper.jsという、jQueryなしで動く高機能なライブラリがあります。 このライブラリで縦横比を保ったままウインドウ幅いっぱい + レシスポンシブ対応のスライドをつくる方法のメモ。