Web技術 【zendesk】カテゴリのタブ切り替え実装方法
zendeskをカスタマイズする案件に携わっているのでメモとして保存しておく。基本cssはお好みで大丈夫です。HTML<section class="section"> <h1>タイトル</h1> <!-- タブ切り替え --> <div ...
Web技術
Web技術 Web技術 【zendesk】記事の設定で記事を推奨をつけた記事のみを表示する方法
<ul class="article-list"> {{#each promoted_articles}} <li class="article-list_item"><a href="{{url}}">{{title}}</a></li>...
Web技術 【zendesk】inputフィールドにplaceholderを追加する方法
閉じ「｝」の前に「placeholder='表示したいテキスト'」を追加するだけでOKだ。{{search submit=false instant=settings.instant_search class='search search-...
Web技術 【CSS】CSSを書く時に意識したいこと
transition を指定する時はプロパティも指定する/* Bad... */a { transition: .2s;}/* Good!! */a { transition: opacity .2s;}PC/SPの画像の切替えは disp...
Web技術 【CSS】CSSの記述する際におさせておきたいポイント
構造と見た目のCSSを分ける構造と見た目を分けることによって、見た目がスッキリするのと、HTMLの構造が変わってもすぐに修正することができるので、メンテナンス性が高くなります。<button class="button button-01"...
Web技術 【CSS】スクロールバーをカスタマイズする方法
今回はスクロールバーをカスタマイズする方法を紹介する::-webkit-scrollbar{ width: 10px;}::-webkit-scrollbar-track{ background-color: #ccc;}::-webkit...
Web技術 【CSS】実務で利用できる見出しデザインを紹介
今回は実務で利用できる見出しデザインをいくつか紹介する See the Pen Untitled by 山崎毅 (@lvfthhbg-the-flexboxer) on CodePen.
Web技術 【HTML】pictureタグを使ってPCとSPで画像を切り替える方法
今回はpictureタグを使ってPCとSPで画像を切り替える方法を紹介する。今回はブレイクポイントをPCが768px以上、SPが767px以下とした場合としている。<picture> <source srcset="./img/img_pc...
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.