CSS – 3@TECH BLOG

slickカスタマイズ

2018-01-18 CSS / JavaScript / スニペット / プログラム0 Comments

オプションが多く汎用性の高いslidk-Sliderですが、自社の制作時に使いやすいよう、もう少し踏み込んで調整してみました。

スマホ用スライドメニュー（meanMenu）

2018-01-18 CSS / JavaScript / スニペット / プログラム0 Comments

スマホサイトのハンバーガーメニューを、meanMenuをベースに、カスタマイズしやすいよう調整しました。

アコーディオンコンテンツ

2018-01-18 Blog / CSS / スニペット0 Comments

レスポンシブ対応のサイト作成において、PCは通常のタイトル＋段落、スマホではアコーディオンメニューのように開閉するパターンがあります。 JSの設定値でブレイクポイントを変更できます。デフォルトでは768を境にしています…

画像のマウスオーバー

2018-01-18 CSS / スニペット / 写真0 Comments

画像にマウスオーバーした際の動きをちょっとし凝ってみました。

スクロールすると一定の位置でメニューを固定する方法

2016-12-09 ナビゲーション0 Comments

画面をスクロールしてある一定の位置まで行き、メニューが隠れそうになったときに、画面の上部に固定する方法です。

フォーム｜入力欄の長さを最適化

2016-09-09 フォーム0 Comments

フォームをコーディングするとき、各項目の長さをどれくらいにするかを考えることがあります。毎回考えなくても済むように、コピペで使えるフォームのフォーマットサンプルを考えました。

基本設定

2016-09-09 スニペット / 基本設定0 Comments

サイトの基本情報をSCSSのスニペットとしてまとめました。

フォームテーブル

2016-09-09 テーブル / フォーム0 Comments

テーブルのスタイル、ブレイクポイント等は、テーブルの項目を参照してください。 View 必須項目名 ○○は入力必須です。…などのエラー表示項目名入力例、補足など Source [crayon-670aeebdb364…

ボタン基本スタイル

2016-09-09 ボタン0 Comments

ボタンの基本スタイルです。各ブレイクポイントでインラインボタンからブロックボタンに切り替わります。 View 基本 button xsでブロックボタン基本 button smでブロックボタン基本 button md…

遷移ボタン

2016-09-09 ボタン0 Comments

View buttonBox 基本並び（float:left）戻る進む buttonBox 逆並び（float:right）進む戻る buttonBox center配置（ボタンx2） ※.row の max-w…

ブレークポイントCSS切り替え

2016-09-09 表示0 Comments

ブレークポイントで表示する内容を切り替える方法のサンプルです。画面サイズ768pxを基準に表示を切り替えます。使用するclass名 .sp：画面サイズがxsより小さい時に適用（表示）します。 .pc：画面サイズがms…

bootstrap グリッドシステム（改）

2016-09-09 基本設定0 Comments

bootstrap のグリッドシステムを元に、ブレイクポイントで切り替える要素を追加しています。 xs：0 ～ 767px sm：768px ～ 991px md：992px ～ 1199px lg：1200px ～ S…

reset.css ＋ base.css

2016-09-09 基本設定0 Comments

ブラウザ間の表示差異をなくすリセットCSSです。独自の要素も含んでいます。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav { display: block }
body { line-height: 1.25 }
p { line-height: 1.75 }
nav ul { list-style: none }
blockquote, q { quotes: none }
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
del { text-decoration: line-through }
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
input, select { vertical-align: middle }
*, *:before, *:after {
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}
body { -webkit-text-size-adjust: 100% }
html { overflow-y: scroll }
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0
}
a {
    cursor: pointer;
    overflow: hidden
}
abbr, acronym {
    border-bottom: 1px dotted;
    cursor: help
}
blockquote { margin: 1em }
em, strong { font-weight: bold }
li { list-style: none }
input {
    padding: 0.1em;
    vertical-align: middle
}
input[type="text"], input[type="password"] {
    height: 1.2em;
    line-height: 1.2
}
input[type="checkbox"], input[type="radio"] {
    padding: 0;
    vertical-align: baseline
}
input[type="submit"], input[type="reset"] {
    line-height: 1;
    padding: 0.3em
}
legend {
    background: #fff;
    padding: 0.3em
}
select {
    padding: 0;
    vertical-align: baseline
}
textarea {
    padding: 0.1em;
    line-height: 1.4;
    vertical-align: middle
}
header, footer, .contents, .wrap, .contentsBox, .entryBox { clear: both }
header:after, footer:after, .contents:after, .wrap:after, .contentsBox:after, .entryBox:after {
    content: "";
    display: block;
    clear: both
}
nav:after, .mainColumn:after, .subColumn:after, .extraColumn:after {
    content: "";
    display: block;
    clear: both
}
.nav_menu li { list-style: none }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav { display: block }

body { line-height: 1.25 }

p { line-height: 1.75 }

nav ul { list-style: none }

blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {

content: '';

content: none

}

a {

margin: 0;

padding: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent

}

del { text-decoration: line-through }

abbr[title], dfn[title] {

border-bottom: 1px dotted;

cursor: help

}

table {

border-collapse: collapse;

border-spacing: 0

}

input, select { vertical-align: middle }

*, *:before, *:after {

box-sizing: border-box;

-o-box-sizing: border-box;

-ms-box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box

}

body { -webkit-text-size-adjust: 100% }

html { overflow-y: scroll }

ins {

background-color: #ff9;

color: #000;

text-decoration: none

}

mark {

background-color: #ff9;

color: #000;

font-style: italic;

font-weight: bold

}

hr {

display: block;

height: 1px;

border: 0;

border-top: 1px solid #cccccc;

margin: 1em 0;

padding: 0

}

a {

cursor: pointer;

overflow: hidden

}

abbr, acronym {

border-bottom: 1px dotted;

cursor: help

}

blockquote { margin: 1em }

em, strong { font-weight: bold }

li { list-style: none }

input {

padding: 0.1em;

vertical-align: middle

}

input[type="text"], input[type="password"] {

height: 1.2em;

line-height: 1.2

}

input[type="checkbox"], input[type="radio"] {

padding: 0;

vertical-align: baseline

}

input[type="submit"], input[type="reset"] {

line-height: 1;

padding: 0.3em

}

legend {

background: #fff;

padding: 0.3em

}

select {

padding: 0;

vertical-align: baseline

}

textarea {

padding: 0.1em;

line-height: 1.4;

vertical-align: middle

}

header, footer, .contents, .wrap, .contentsBox, .entryBox { clear: both }

header:after, footer:after, .contents:after, .wrap:after, .contentsBox:after, .entryBox:after {

content: "";

display: block;

clear: both

}

nav:after, .mainColumn:after, .subColumn:after, .extraColumn:after {

content: "";

display: block;

clear: both

}

.nav_menu li { list-style: none }

カテゴリー: CSS

slickカスタマイズ

スマホ用スライドメニュー（meanMenu）

アコーディオンコンテンツ

画像のマウスオーバー

スクロールすると一定の位置でメニューを固定する方法

フォーム｜入力欄の長さを最適化

基本設定

コピーライト

フォームテーブル

ボタン基本スタイル

遷移ボタン

ブレークポイントCSS切り替え

新着情報リスト

bootstrap グリッドシステム（改）

reset.css ＋ base.css

簡単にアレンジできるtableのHTMLとCSS

ページトップ

画像の内側にCSSでボーダーを引きたい！

画像を使わずにCSSで蛍光ペン風マーカー線を引く

レスポンシブwebデザインでの改行位置