【CSS】疑似要素でtheadとtbodyの間に隙間を空ける
デザイナーさんから以下の様なテーブルデザインが上がってきた時に、 theadはborder-bottomの白で5px tbodyはborder-topの黒で1px なんてやると tbodyの「border 1px」は、t … 続きを読む
CSS
【CSS】装飾の斜め帯をCSS3で実装
新規記事を追加した時に「NEW」の情報を斜め帯で表示する時に使用したtransform: rotate(315deg);周りの実装話です。 HTML <div class=”img”> <time da … 続きを読む
【jQuery】select風タブ切り替えボタン
横幅640px以下の幅のブラウザで、select風ボタンに見せ方を切り替えます。 【Movable Type】横並びカテゴリリンクをウィンドウサイズに％で横幅均等 【jQuery】タブ切り替えの際に、上下連動タブ など、 … 続きを読む
【CSS】レスポンシブ対策！画面幅によって<br>の位置を変える
PCとスマホをワンソースで作成するときに、文章の改行位置を変えたがるデザイナーやクライアントから要望があった際に 要望を叶えられるよう共有CSSに用意しておいているのが以下です。 CSS /* hidden —— … 続きを読む
【Photoshop】デザイン情報からCSS3を出力するプラグイン「CSS3Ps」
Photoshopプラグイン「CSS3Ps」の紹介です。 このプラグインを使用すると、角丸デザイン・グラデーション・影などのデザインをPhotoshop通りに出力できます。 「CSS3Ps」Downloads（2015/ … 続きを読む
【CSS】三角形（吹き出し）の表示位置・形・大きさのコツ
CSSの擬似要素（:before、:after）を使用して三角形で吹き出しを作るコツです。 CSSで作成する三角形で当初難しかったのは ・サイズの調整 ・表示位置の調整 でした。 今回は、上記がわかったので記事にしてみま … 続きを読む
【CSS】画像の角を丸めたり円形で表示したい
正方形の画像を角丸で表示したい時の指定です。 <!DOCTYPE HTML> <html> <head> <style type=”text/css”> .shadow i … 続きを読む