Browse: Home » CSS

CSS

【Markdown, CSS】マークダウンエディタ用CSS。

なかなかかっこいいのが見当たらなかったけどようやくいいの見つけた。

http://blog.gamuratwist.jp/css/entry-57.html

bootstrapベースでなかなかかっこいい。

あとは自分用にfont-familyに下記を追加。

CSS
1
"Hiragino Kaku Gothic Pro", meiryo, "Open Sans",
2014/11/20 _onichannn , , ,

【Markdown】自分用MarkdownPad2用CSS。

メモ。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
body {
  padding: 10px 15px;
  font-family: "Hiragino Kaku Gothic Pro", meiryo, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #666;
  background: #ddd;
}
 
a, a:visited {
  color: #0088cc;
  text-decoration: none;
}
 
a:hover {
  color: #005580;
  text-decoration: underline;
}
 
p { margin: 0 0 20px; }
small { font-size: 85%; }
strong { font-weight: bold; }
em { font-style: italic; }
 
h1,h2,h3,h4,h5,h6 {
  margin: 10px 0;
  font-family: "Hiragino Kaku Gothic Pro", meiryo, "Open Sans", inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
 
h1,h2,h3 { line-height: 40px; }
h1 { font-size: 38px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 14px; }
 
h1,h2,h3,h4 { border-bottom: 1px solid #eee; }
h4 { line-height: 30px }
 
ul,ol {
  padding: 0;
  margin: 0 0 10px 25px;
}
 
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
 
li {
  line-height: 30px;
  list-style-type: disc;
}
 
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
 
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #eeeeee;
}
 
code,
pre {
  padding: 0 3px 2px;
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: #333333;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
 
code {
  padding: 2px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}
 
pre {
  display: block;
  padding: 9.5px;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
 
pre code {
  padding: 0;
  color: inherit;
  white-space: pre;
  white-space: pre-wrap;
  background-color: transparent;
  border: 0;
}
 
table {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  border-left: 0;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
 
table th,
table td {
  padding: 8px;
  line-height: 20px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
 
table th { font-weight: bold; }
table thead th { vertical-align: bottom; }
 
table thead:first-child tr:first-child th,
table thead:first-child tr:first-child td {
  border-top: 0;
}
2014/11/20 _onichannn , ,

【CSS】すでに指定されているスタイルのプロパティに対して初期値を適用する。

かなり便利な引数をみつけたのでメモ。

公式引用

CSS の initial キーワードは、要素のプロパティの初期値を適用するものです。CSS のどのプロパティにも使うことができ、要素はそのプロパティの初期値を使います。

こんな感じ。

h2 { border: initial }
.alert { color: initial }

これは便利こと知りましたわ。

 

2014/10/05 _onichannn , ,

【CSS】fontプロパティ引数まとめ。

http://phpjavascriptroom.com/?t=css&p=font

 

2014/09/04 _onichannn , ,

【CSS】各種ブラウザでTransparencyとgradientを用いる際の記述方法。

メモ。

background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

 

2014/08/18 _onichannn , ,

【CSS】Media Queries、自分用まとめ。

メモ。

■Max Width:
ビューエリアの最大幅。このサイズより小さい場合に適用

■Min Width:
ビューエリアの最小幅。このサイズより大きい場合に適用

■Max Device Width:
デバイスサイズの最大幅。このサイズより小さい場合に適用

■Min Device Width:
デバイスサイズの最小幅。このサイズより大きい場合に適用

■Device Pixel Ratio:
デバイスの解像度（webkit）

■Orientation:デバイスの向き

 

2014/08/18 _onichannn , ,

【CSS】ラジオボタンにオリジナルのデザインを適用する。

方法を調べたのでメモ。

input[type="radio"]{
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 2px solid #aaa;
  border-radius: 15px;
  background: transparent;
  opacity: 0.5;
  width: 15px;
}

input[type="radio"]:checked{
  background: #bbb;
  opacity:1;
}

こんな感じにするとデザインを変更できる。

 

2014/08/12 _onichannn , ,

【CSS】かっこいいReadMoreの実装方法。

テキストがだんだんとフェードアウトしていくような感じのデザイン。

http://css-tricks.com/text-fade-read-more/

これを参考に自分は白フェードアウトで実装してみた。

<div class="sidebar-box">
	<p>長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文長文</p>
	<p class="read-more"><a href="#" class="button">もっと読む</a></p>
</div>

.sidebar-box {
    height: 120px;
    position: relative;
    overflow: hidden;
    transition: height 0.8s ease;
    -o-transition: height 0.8s ease; 
    -moz-transition: height 0.8s ease;
    -webkit-transition: height 0.8s ease;
}
.sidebar-box .read-more { 
    position: absolute; 
    bottom: 0;
    left: 0;
    width: 100%; 
    text-align: center; 
    margin: 0;
    padding: 30px 0;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

 

2014/08/12 _onichannn , ,