Home
CSS／フォントサイズ「px、em、rem」の違いと変換表
px 絶対指定 1pxは1ドット em 相対指定 親要素のfont-sizeを基準 html { font-size: 16x; } /** 基準となるfont-size **/ .p { font-size: 2em; /* 32px */ } .s…
HP・LP制作でいつか使うかもしれないCSSネタ
CSSのみで作れるドロワーメニュー CSSのみで作れるってとこが良いですね。 See the Pen drawer menu by himeka223 (@himeka223) on CodePen. スクロールすると見出しを固定 用語集…
CSSで作る押したった感のあるボタン風リンク
GIRL リンクをテキストリンクではなくボタン風にしたい！ GIRL それだけでなくボタンを押したような動きが欲しい！ ME そんな時はCSS使えば、押した時（クリックした時）にポチって沈むような動きを…
横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』
最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。 方法は色々あるが、最近よく使っているのが『Drawer』。 理由は簡単！設置とカスタマイズが簡単だからだ。あと動きもスマ…
CSS 特定の画像だけを操作する
ME CSSで特定の画像を消すか、サイズ調整したいと思った時に詰まったもんでメモ。 ようはCSSの属性セレクタを利用することで、以下のようなことがピンポイントでイジることができた。 【例】こんなことできます ('ω')b 特定のGIF画像…
CSSだけで結構使えるシンプルアイコンが書けるサイト
https://www.youtube.com/watch?v=ZOiRwXOIsx4&feature=youtu.be https://twitter.com/webcreatorbox/status/788175303835262976 ▼CSS ICON -- …
CSSのfont-familyで割と綺麗な明朝体を指定することがでけた！
これまで明朝体を使う時は画像を使っていたけど以下のように、CSSのfont-family指定で割と綺麗なカンジで使えたので、今後は画像を使わなくても良いかも。 と、いうことでメモメモ ((φ(-ω-)ｶｷｶｷ font-family: "游明朝", YuM…
CSS テーブルの列幅を均等にする
CSSでテーブルのセルの幅を均等にする方法。 table-layout:fixed; を利用する。 table { width: 100%; table-layout: fixed; }…
CSSでレスポンシブ対応！PCではテーブル表示、スマホではリスト表示させる方法
横幅480px以下になるとリスト表示となるます。 <style> .respo-table{ width:100%; border-left:1px solid #ddd; border-top:1px solid #ddd; } .respo-ta…
CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法
省略可能なテキストを省略して「・・・」を表示させます。 デザイン的に整列して表示させたい時なんかに便利 ▼基本 p { white-space: nowrap; width: 100%; overflow: hidden; -o-text-overflo…
CSSのみでモーダルウィンドウを作ってみた！
このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。 スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。 あと、今どきっぽくてカッコ良いかと思ったので。 ▼モーダルウィンドウを…
CSS テキストシャドウで文字を縁取る
text-shadow: black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px; 影の色、横のずれ、下のずれ、ぼかし具合
