Web技術 【css】使えるcss10選
テキストの途中で改行する/* Anywhere */white-space: pre-line;/* または */word-break: break-all;画像をアスペクト比を維持したままリサイズするimg { max-width: 10...
Web技術 Webデザイン 【webデザイン】最近見つけた素晴らしいデザインのサイト3選
MUJI 365豆福神戸大学
未分類 コンテンツをコンパクトに! プラスアイコン付きアコーディオンの作り方
ウェブサイトでは、文字情報やリンク、画像などのコンテンツを効率的に表示する必要があります。そこで活躍するのが「アコーディオン」と呼ばれるUIデザインパターンです。アコーディオンではコンテンツを折りたたんで見せることができ、ユーザーが必要な情...
未分類 簡単コーディング! スクロールに合わせて表示されるTOPへ戻るボタンの作り方
長いウェブページを閲覧する際、ページの最下部までスクロールしてしまうと再びページトップに戻るのが面倒です。このような課題を解決するために、スクロールに合わせてTOPへ戻るボタンを表示させる機能を実装することをおすすめします。シンプルな機能で...
Web技術 Tailwind CSSでデザインの限界を超えろ！Bootstrapを超えるカスタマイズ性
Tailwind CSSは、直感的なユーティリティクラスを駆使して、あなたのウェブサイトを次のレベルへと引き上げることができます。Bootstrapと比較して、Tailwind CSSは以下のようなメリットを提供します。無限のカスタマイズ性...
Web技術 googleフォントでNoto Sans JPをwebサイトで使う方法
webサイトでgoogleフォントを使う方法は簡単以下2ステップステップ１htmlファイルのheadに以下のソースを追加する<link rel="preconnect" href="<link rel="preconnect" href="...
未分類 【HTML】detailsのname属性が便利！
<details>要素にname属性を与えます。同じname属性を持つ複数の<details>要素はセマンティックなグループを形成し、排他的アコーディオンとして振る舞います。つまり、<details>要素の1つを展開すると、他の展開していた...
Web技術 【CSS】:has()擬似クラスが全てのブラウザでサポートされた
/* figcaptionがあるfigure要素を選択 */figure:has(> figcaption) {}/* svgの直接の子孫がないa要素を選択 */a:not(:has(> svg)) {}/* inputの直接の兄弟があるl...
Web技術 【css】背景画像を右から左に動かす方法（ループ）
.bg { width: 100%; height:256px; background: url("../img/bg_slides.png") repeat-x; background-position: 0 0; background-...
Web技術 【swiper.js】最新バージョンのswiper.jsでページを外に出す方法
最新バージョンのswiper.jsでページネーションを外に出す方法は簡単。以下のcssを追加するだけでOK.swiper-pagination { position: relative !important; margin-top: 2...