新着記事

css

否定擬似クラス、:not()の詳細度

まれに疑似クラス:not()が予想とちがう振る舞い(効いてほしくないところに効く)をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...
HTML

font awesomeの使い方

無料で多種多様のアイコンフォントを利用することのできるfont awesome 新しく作っているサイトで使おうと思ったら、以前とバージョンが変わり若干...
JavaScript

Swiperで複数のスライドを連動する方法

Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。 // 3つのスライドをすべて連動させあうサンプル ...
css

画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
css

input[type=number]の矢印を消したい時のCSS

input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...
css

要素サイズの決め方を指定するbox-sizing

横一列に並べたつもりの要素が一列に収まりきらず段落ちしてしまった。ほとんどの場合borderかpaddingの値を見落としていることが原因ですが、この辺のトラ...
スポンサーリンク

css

css

否定擬似クラス、:not()の詳細度

まれに疑似クラス:not()が予想とちがう振る舞い(効いてほしくないところに効く)をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...
css

画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
css

input[type=number]の矢印を消したい時のCSS

input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...
css

要素サイズの決め方を指定するbox-sizing

横一列に並べたつもりの要素が一列に収まりきらず段落ちしてしまった。ほとんどの場合borderかpaddingの値を見落としていることが原因ですが、この辺のトラ...
css

兄弟要素をもたない要素を指定する疑似クラス、:only-child

タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト(ul, o...
css

Firefoxブラウザで:hasセレクタを試す方法

「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その...
css

画期的な発明、:hasセレクタ

これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようにな...
css

checkboxとflexを使った可変ボックス

カラーミーテンプレートを作るにあたり、極力jsを使わずにhtmlとcssだけで作ってしまおうと決めていたのでドロワーメニューやアイコンの変形など、ch...
css

cssセレクタ「+」「>」「~」の意味と使い分け

div > imgやdiv + pのように、+ > ~ で接続したcssセレクタを見かけることがあります。これらはcssの適用範囲を限定するセレクタの使い方です。それぞれの違いと使い方を解説します。
css

z-indexが効くとき、効かないとき

簡単そうに見えて実は難しいz-index。基本原理が分かっていないと思わぬところでつまずきます。z-indexがどのよように重なり合っているのか解説します。
css

text-alignが効かない・text-alignとmargin :autoの違い

要素の中央寄せに使われる"text-align:center"と"margin:0 auto;"。同じように見えますが対象が違います。使い方を誤らないように理解を深めておきましょう。
css

transformの基準点を分かりやすく図解します

変形や回転に使えるtransformプロパティですが、基準点を理解していないと思わぬ挙動をすることがあります。基準点の指定についてわかりやすく図解します。

HTML

HTML

font awesomeの使い方

無料で多種多様のアイコンフォントを利用することのできるfont awesome 新しく作っているサイトで使おうと思ったら、以前とバージョンが変わり若干...
HTML

アウトラインを意識したページ作成

この記事を書くきっかけになったのは某サービスのテンプレートがなかなかとっ散らかったアウトラインになっていたことなのですが、ネットショップだけでなくホームページ...
HTML

FontAwesomeの必要なアイコンだけを使いたい

FontAwesomeは汎用性の高いアイコンが豊富で非常に使い勝手も良いのですが、そのままダウンロードして使うとやりとりするデータ量が大きくなるのが難...
HTML

疑似要素のFont Awesomeが表示されない原因

つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。 疑似要素に指定したf...
HTML

h1タグの扱いについて

当ブログの検索キーワードにしばしば「h1タグ」が入っています。おそらく、ネットショップを運営していたり、ブログサイトを運営していたりする人でしょう。h1...
HTML

SVGアイコンのアクセシビリティ

最近以前作ったサイトの見直しをしていて、svgアイコンのアクセシビリティはこれで大丈夫なのか?と気になりました。 アクセシビリティとは何?という...
HTML

SVGで基本の図形描写 – 1 

拡大/縮小しても描写が崩れないSVG。アイコンや背景素材としてもすっかりポピュラーになりました。 今回はpathなどを使う複雑なものではなく、丸...
HTML

schemaに関する備忘録

随時追加 itemtype="〜WebPage"をより具体的に指定する場合。 以下の値を使用できる。 ItemPageContact...
HTML

Google Font利用時の表示速度が遅い対策

使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsigh...
HTML

レスポンシブ画像のまとめ

ブラウザサイズや解像度(retinaディスプレイ / デバイスピクセル比)に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
HTML

option名が長すぎて表示できない問題にはoptgroup

optionの名前が長すぎると、画面幅からはみ出た部分が表示されない問題が起こりますが、optgroupタグで入れ子にすると自動的に改行、または文字サイズが縮小され途中で省略されずに表示できるようになります。
HTML

abbrタグとrubyタグ

自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。...

JavaScript

JavaScript

Swiperで複数のスライドを連動する方法

Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。 // 3つのスライドをすべて連動させあうサンプル ...
JavaScript

配列内の要素すべてが条件に一致しているかチェックするArray.every()

ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。 e...
JavaScript

JavaScriptのレスポンシブ

CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。 ...
JavaScript

select要素のoptionを操作するときのJavaScript

たまに使うと忘れているので自分用メモ。 選択されているoption要素のvalueではなく要素自体(テキスト)を取得 手順 直接op...
JavaScript

Objectをkey,valueで呼び出す

ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。 Object.entries(object)を使う Object.en...
JavaScript

【非同期通信】fetchの完了を待って続きの処理を行う

これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。 今後どなた...
JavaScript

トップページスライド(slick.js)のカスタマイズ

軽量スライダー系jQuery、slick.jsの解説記事です。slickにはあらかじめ豊富なオプションが用意されているため、スライダーの動作制御やレスポンシブ設定もオプションだけで簡単に行えます。よく使用するものを中心に、カスタマイズ方法をまとめています。
JavaScript

slick.jsのオプション設定をPC / モバイルで切り替える

slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
JavaScript

初心者向け Swiper jsの使い方 覚書

Twitterに勝手に表示されるおすすめ投稿で「Swiperの使い方がわからない!」という叫びと、それに共感する声をたくさん見たので、ざっくりとした基本の使い...
JavaScript

最近使ったIE対応まとめ

個人的にはIE対応なんて最低限で良い(多少の違いが出るのは仕方ない。だってIEだもの)派なのですが、”他のモダンブラウザ同様の動きでないといけない”とする案件...
JavaScript

slickスライドをドットの代わりにサムネイル連動にする

slick sample まれに質問があるので、スライダー系JQuery「slick」をサムネイルスライダーと連動させる方法について書いておきます。 ...
JavaScript

ページ内リンクのスクロールを簡単に実装できるscrollIntoView

同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Script...
タイトルとURLをコピーしました