Web技術 【HTML】pictureタグを使ってPCとSPで画像を切り替える方法
今回はpictureタグを使ってPCとSPで画像を切り替える方法を紹介する。今回はブレイクポイントをPCが768px以上、SPが767px以下とした場合としている。<picture> <source srcset="./img/img_pc...
takec23com
Web技術 Web技術 【Swiper.js】スライドの高さを揃える方法
swiper.jsはとても便利だ。しかし、高さが違う画像などをスライダーにせってした時に高さがバラバラになってしまう。それをCSSのみで解決できるので、今回はその方法を紹介する。.swiper-slideにheight: auto;を設定し...
Web技術 【CSS】display flexを使った際に子要素を固定化する方法
子要素を固定化する方法は簡単でcssで子要素に対してflex: none;を指定するだけだ。 See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
Web技術 【HTML】HTMLのみでアコーディオンを実装する方法
今回はHTMLのみでアコーディオンを実装する方法を紹介する See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.上記のままだと三角のアイコンが邪魔なので以下以下のcssを当てることで三角のア...
Web技術 【css】画像を縦横比を変えずに大きさを変更する方法
See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術 【CSS】背景を斜線にする方法
CSSのみで背景を斜線にする方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
未分類 【CSS】scroll-padding-topを使ってアンカーリンクの固定分ずれる不具合を解消
scroll-padding-topを使う機会があったのでメモ。以下のコードを追加するだけで解消されるのでぜひためしてみよう。html { scroll-padding-top: 100px;//ヘッダーの高さを指定}
未分類 【JS】最初からコンテンツが非表示のタブ切り替えの実装方法
html<!--ここがタブ--> <ul class="tab"> <li><a href="#tab1"><img src=" alt="tab1"></a></li> <li><a href="#tab2"><img src=" alt...
Web技術 【jQuery】クラスで色指定、メニューの作り方
メニューでクリックしたらクラスが付与され色が変わったりするメニューの作成方法をメモしておく。codepenで実装したサンプルを見て参考にしてほしい。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on Co...
未分類 【jQuery】クリックした要素にクラスを追加し他の要素をクリックしたらクラスが外れるようにする方法について
jQuery$(function(){ $('.tab_item').click(function(){ $('.tab_item').removeClass('on'); $(this).addClass('on'); }) })