レスポンシブ対応のホームページを作る際に、よくある文章の改行位置問題。パソコンで見たときはいい感じに改行されているのに、 スマートフォンで見たときには、おかしな位置で改行されている。。。どちらで見た場…
3@TECH BLOG
日々の業務で得た知見やノウハウ、技術情報などを発信します。
フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。ページの余白が大きいからと…
サイトの基本情報をSCSSのスニペットとしてまとめました。Source//////////////// サイズ //////////////// //サイト幅 $site_width: 960…
ボタンの基本スタイルです。 各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。View基本 button xsでブロックボタン基本 button s…
sun@flexを使用した遷移ボタンのスニペット デモSourcebuttonBox 基本並び（float:left） 戻る進む buttonBox 逆並び（float:right） 進む戻…
ブレークポイントで表示する内容を切り替える方法のサンプルです。 画面サイズ768pxを基準に表示を切り替えます。使用するclass名.sp：画面サイズがxsより小さい時に適用（表示）します。 .pc：…
新着情報のリストを表示するスニペットです。使用するclass名.dateInline：日付の位置が記事の横.dateBlock：日付の位置が記事の上.topBorder：ブロックの上端に罫線を追加.b…
bootstrap のグリッドシステムをflexで組み替えました。ブレイクポイントで切り替える要素を追加しています。 xs：0 ～ 767px sm：768px ～ 991px md：992px ～ …
ブラウザ間の表示差異をなくすリセットCSSです。 独自の要素も含んでいます。html { box-sizing: border-box; -webkit-text-size-adj…
レスポンシブ対応するようになった今でも、tableでの表組はよく使われます。 そこで、コーディングする際に簡単にアレンジできるコードのサンプルを作りました。 各ブレイクポイントでブロック表示に切り替わ…
