サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
designsupply-web.com
CSSでposition: sticky;を指定した要素の状態をJavaScriptのIntersection Observer APIで検知する CSSでposition: sticky;を指定することで、要素をスクロールに合わせて固定表示を自由に設定することができます。ただ、これだけですと固定表示にできるものの、固定表示になっているかの状態を検知することはできません。そこで今回はJavaScriptのIntersection Observer APIを使ってスティッキー要素の固定表示の状態を検知する処理を作成してみたいと思います。 position: sticky;とJavaScriptのIntersection Observer APIについては当サイトの過去記事でそれぞれ詳しくまとめていますので、こちらもご参考にどうぞ。 (過去の参考記事) JavaScriptのIntersect
以前の記事「Gulpで使…
全世界で圧倒的なシェアを誇るCMSであるWordPressですが、常々いろんな驚異の対象となっています。当サイトでも過去記事
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってifr…
前回記事「Vueインスタ…
特定の要素以外をクリックした時に何らかの機能を実行するのは、モーダルやポップアップのウィンドウを閉じたりする時に便利です。jQueryを使うことで簡単に実装できるので備忘録としてのメモです。 クリックイベント…
前回記事「Laravel…
最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きをSass(とjavascript)で作成してみたいと思います。アニメーションの動きや速さを調整したりすることで、い…
Vue.jsではjQueryのように、直接DOMを参照してそのDOMに対して何らかの操作をするというケースはあまりありません。コンポーネントとして取り扱ったり、コンポーネントにあるテンプレート内で直接的に要素に対して操作するためです。 …
ウェブサイトのデバッグ時に拡張子が「.map」という見覚えのないファイルが404エラーになっていたことはありませんか?今回はこのケースについて備忘録を残しておきます。 ソースマップファイル(.map)とは
先日クライアントワークで、CSVで管理しているデータをサイト上に表示させたいというような要件があり、いろいろ調べてみるとJavaScriptで出来そうという情報が見つかったので試してみました。CSVとは半角コンマで区切られた値のことで、詳…
少し前にウェブデザインのトレンドとしてよく見られた、全画面表示の動画背景ですが、クライアントワークでも採用する機会があり、今更感はありますが備忘録として残しておきたいと思います。 今回は動画を背景にするのに加えて…
2019年一発目の記事投稿です。今年も当サイトのオウンドメディアをよろしくお願いいたします。ありがたいことに新年早々、コーディング作業に追われているところで、その時に使えそうなものをメモしておきたいと思います。今回はタイトルの通りなのです…
コーディング時にはいろんなルールや規約を設けることが多いかと思いますが、中でも重要なのが命名規則だと思います。細かいようですが、この命名規則についてルールを設けておくことで、複数人での開発をスムーズにしたり、改修時の工数短縮にも効果的です…
クライアントワークでこのようなケースがあったので備忘録としての記事です。WordPressでは親カテゴリー、子カテゴリーとカテゴリーに階層構造を持たせることができます。しかし子カテゴリーが多くなってくると機能的に複雑になってきたり管理が大…
HTMLのフォーム要素ですが、ウェブサイトなどではよくデザインが変更されているものを見かけます。基本的にはこれらフォーム要素を直接デザインするのもあれば、要素自体は非表示にして対応するlabel要素に対してデザインするという場合もあります…
前回記事「ベーシック認証を使用して簡易ログイン機能を作成する」でサイト内にログイン機能を実装する方法…
今回はHTMLのdata属性(カスタムデータ属性)を使ってシンプルなツールチップを実装してみます。このdata属性はdata-*****の表記で自由な属性名を定義できるカスタムデータ属性というHTML5で定義されている仕様になります。ちな…
ajaxはjavascriptを使った非同期通信という技術で、様々なウェブサイトで使用されています。jQueryを使うことでこのajaxも手軽に実装できるのですが、今回はajaxで他ページからのコンテンツを呼び出して表示させる便利なサンプ…
WordPressでサイトをカスタマイズする際に必須となるfunctions.phpファイルですが、今回はこのfunctions.phpファイルに記述するコードをまとめてみました。あんなことやこんなことも実装できてしまう便利機能ばかりです…
普段のデザイン制作にはSketchを使っていて、制作自体はかなり効率化ができてきたのですが、デザインデータの共有時にはいろんなロスが発生してもう少しスムーズにできないかと考えていました。そんな時にはとても便利なZeplinというツールを使…
まとめサイトなどでよく見かけるコンテンツの見出し項目に合わせたナビゲーションを実装していきます。ナビゲーションからコンテンツ位置までの移動はもちろん、スクロールした現在地に合わせてナビゲーションで確認できるようにします。 …
タイトルの通りですが実装にあたり結構行き詰まったので残しておきたいと思います。本来ページャーはアーカイブページ内であったり、メインループではそのまま使用できますが、固定ページやサブループではページャーがうまく機能しないなどの問題が発生しま…
過去記事「jQueryで…
最近は常時SSLの重要性が高まってきますが、さくらインターネットのレンタルサーバーでWordPressサイトを使用している場合には、常時SSL対応時に少し注意が必要です。SSL非対応からの変更になると常時SSL対応後に外部ファイルパスが変…
WordPressはコンテンツが投稿されるごとにページが生成される動的サイトですが、合わせてページURL(パーマリンク)も合わせて生成されます。ですので下層コンテンツページなどはURLの形が決まっており、WordPressとは別にディレクトリを用意した静的HTMLページと重なりアクセスできない場面があります。今回はそんなケースに使える小技です。 静的サイトのディレクトリにアクセスすると「page not found」の表示が… WordPressの場合、一般的には下層ページのURLは以下のような構成になっています。末尾のファイル名は省略された形になっています。 http://example.com/content-01/ この時、WordPressサイト内にある該当の固定ページやアーカイブページを参照し表示されることになりますが、以下の構成のようにディレクトリ名が同じ静的HTMLサイトを設
WordPressではデフォルトで用意されている投稿の他にもユーザー側で独自に設定できるカスタム投稿があります。このカスタム投稿における、カテゴリーなどの分類にあたるものがカスタム分類(タクソノミー)になります。カスタム分類内では分類項目…
リッチなコンテンツを求められるウェブサイトの場合はクライアント側で動きのある機能が効果的です。その中でも比較的よく見かけるのがページローディング機能です。ページの読み込み次第ではどうしても表示順序がバラバラになってしまうのでちょっと不恰好…
パララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。 …
次のページ
このページを最初にブックマークしてみませんか?
『大阪市天王寺区ホームページ制作|合同会社デザインサプライ-DesignSupply.LLC-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く