オプションが多く汎用性の高いslidk-Sliderですが、自社の制作時に使いやすいよう、もう少し踏み込んで調整してみました。 まずは【デモ】 ベースとなる「slick」はここからダウンロードできます…
3@TECH BLOG
日々の業務で得た知見やノウハウ、技術情報などを発信します。
スマホサイトのハンバーガーメニューを、meanMenuをベースに、カスタマイズしやすいよう調整しました。まずは【デモ】。ベースとなる「meanMenu」はここからダウンロードできます。リセットCSS「…
レスポンシブ対応のサイト作成において、PCは通常のタイトル＋段落、スマホではアコーディオンメニューのように開閉するパターンがあります。JSの設定値でブレイクポイントを変更できます。デフォルトでは768…
画像にマウスオーバーした際の動きをちょっとし凝ってみました。まずは【デモ】 Sourceふわっと 色付け 通常 → モノトーン モノトーン → 通常 sa…
スクロールしてグローバルナビが隠れそうになったときに画面の上部に固定する方法です。グローバルナビの位置までスクロールしたら、JavaScriptで位置を固定するクラスを追加しますデモSourceメイン…
レスポンシブ対応のホームページを作る際に、よくある文章の改行位置問題。パソコンで見たときはいい感じに改行されているのに、 スマートフォンで見たときには、おかしな位置で改行されている。。。どちらで見た場…
フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。ページの余白が大きいからと…
サイトの基本情報をSCSSのスニペットとしてまとめました。Source//////////////// サイズ //////////////// //サイト幅 $site_width: 960…
ボタンの基本スタイルです。 各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。View基本 button xsでブロックボタン基本 button s…
sun@flexを使用した遷移ボタンのスニペット デモSourcebuttonBox 基本並び（float:left） 戻る進む buttonBox 逆並び（float:right） 進む戻…
