Web系のお仕事全般やってます！Webシステム構築、ホームページ制作 etc.
ブログ
- CSS
iPhoneのフォームのボタンにCSSをあてる方法
2017.04.04
iPhoneでは通常、フォーム上のボタンはCSSが効かない状態になっている。
下記のCSSを記述すれば、iPhoneのフォーム上のボタンでもCSSを反映できるようになる。
input[type=”submit”]{
-webkit-appearance: none;
}
-webkit-appearance: none;
}
- CSS
absolute(position)で縦横中央寄せにする方法
2017.03.28
【CSS】
.boxCatStyle{
position: relative;
overflow: hidden;
display: block;
width: 100%;
min-height: 200px;
border: 1px #a30528 solid;
}
.txtCatStyle{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
display: inline-block;
font-size: 1.5rem;
font-weight: bold;
color: #a30528;
}
position: relative;
overflow: hidden;
display: block;
width: 100%;
min-height: 200px;
border: 1px #a30528 solid;
}
.txtCatStyle{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
display: inline-block;
font-size: 1.5rem;
font-weight: bold;
color: #a30528;
}
【HTML】
<div class=”boxCatStyle”>
<span class=”txtCatStyle”>CatStyle!</span>
</div><!–/.boxCatStyle–>
<span class=”txtCatStyle”>CatStyle!</span>
</div><!–/.boxCatStyle–>
【Result】
CatStyle!
- CSS アニメーション
- CSS
文字を左から順番に表示させる
2017.02.16
アニメーション設定はCSS、表示コントロールはjQueryで行っている。
※ CSSだけでも実装可能
CatStyle
Replay
PAGE TOP