タグ: CSS3
同じ要素の表示数を制限できるCSS
同じHTML要素をたくさん並べると，画面から外れてしまうので，表示するのは何個まで！と制限したくなりませんか．そんな時，CSSたった1行で済み... Read More
5GによるWeb開発の変化を予想する
2020年から商用化が始まる5G．対応端末が普及する2022年以降，Web開発の技術は変化を経験する．今までボトルネックになっていた困難が取り払われ... Read More
CSSカウンタで項番を降順に自動採番する
連続するリストを作るとき，先頭にIDを振りたくなります．上から1，2…と振るならCSSカウンタで充分です． body { counter-reset: h3count; /* 'h3count' と... Read More
aタグへのページ内リンクが不安定な原因
アンカータグはidやnameという属性を持っている．wbdv.htmlに<a id="web" name="dev">と書くと，wbdv.html#webやwbdv.html#devというURIでアンカータ...... Read More
ふくろうセレクタを用いた垂直配置
フロー要素による「フローシステム」とは，垂直方向に閲覧するとき，ストレスなく見られるレイアウトをいいます．フローシステムの垂直配置... Read More
WordPressで自動改行を除去するCSS
WordPressで改行が自動で入ってしまうことがあります．それをCSSで取り除く方法です．mainタグやarticleタグやsectionタグの中に自動改行があれば， main... Read More
ロード時に「loading…」を表示しフェードアウト
サイトを読み込むときに簡単なメッセージを表示し，それをフェードインする方法．jQueryは必要． <html lang="ja" data-loading=""> ... htmlタグにカ... Read More
マウスをウィンドウから外すと開閉するドロワー
マウスカーソルをブラウザウィンドウの外側に外すと，開いたり閉じたりするドロワーです． <!DOCTYPE html> <html> <head> <meta charset="...... Read More
スマホのスクロールが固い原因
スマホですいすいスクロールできるのがふつうですが，固くなることがあります． 原因はPCでみるとはっきりします．スクロールバーが二重に... Read More
スマホ表示で横揺れをなくす
スマホで操作していると，まるで画面がサイズより大きいかのように，枠の外の余白がみえるまでコンテンツが揺れてしまうことがあります． ... Read More
FOUCを即効で直す方法
FOUCとは，読み込み時に画面がちらつく現象．CSSのスタイルが効いていない要素がCSSファイルより先に読み込まれてしまうことにより起こる．FOUCを... Read More
buttonの中央寄せについて考えた
ウェブページに欠かせないボタン．なにかとあればボタンで考えがちなきょうこの頃． HTMLには2種類のボタンがある．buttonタグとinput type=”bu... Read More
ページ上/下端に要素を表示し続ける
ナビゲーションバーやヘッダー/フッターなど，スクロールしても上下端に表示し続けたいことがある．実はいまとても簡単に実装できるのだ． hea... Read More
CSSで変数を使う方法
CSSを使わずSassやSCSSを使いたがる理由のひとつに，変数を使いたいことがある．文字色や値を繰り返さずに記述したほうが管理しやすいし，変数に... Read More