2021/03/03

以前は、jQuery や JavaScript でスムーズスクロールをいろいろ実装していましたが、CSS3 で1行書くだけで対応可能です。


html{
    scroll-behavior: smooth;
}

ただ 2021/02 時点で IE はもとより Safari に対応していないので、実際には JavaScript での記述も必要になります。

  2015/03/17
最近のOSXならruby、gemがインストールされていると思うので、Sassをすぐインストールできる。

Sassインストール

$sudo gem update --system $sudo gem install sass $sass -v

Compassインストール

$sudo gem install compass $compass -v

  2014/05/21
Bootstrap(2.3.2)を利用していると、印刷時にaリンクのURLが表示される。 content属性を空にすることで、URLを非表示にできる。 [css] @media print { a[href]:after { content: "" !important; } abbr[title]:after { content: "" !important; } } [/css] ちなみに、bootstrap.cssには以下の設定がされている。 [css] a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } [/css]

css

  2013/07/23
http://codepen.io/picks/

  2013/05/28
背景の透過はブラウザ種類によって書き方が様々。

opacity

opacityで透過してしまうと対象タグ内の要素まで透過してしまうので、背景だけ透過するのは現実的でない気がします。

背景に透過画像

background で背景を透過画像にするのがブラウザ依存が少ないのがメリットだけど、デザインがfixしない場合は非効率であるのと、コンテンツが重くなりがちです。

rgba()

今のところrgba()を使うのがいいような気がしますが、IE8以前では利用できないので、IEでは filter で代用してやります。 ということで、現状自分なりにメンテしやすいのが以下の書き方かと。 jQueryでも指定できますし。

[css] background-color: #f1d46f; filter:progid:DXImageTransform.Microsoft.Alpha(Style=2,Opacity=90,FinishOpacity=90); background-color: rgba(241, 212, 111, 0.7); [/css]
<< Top < Prev Next > Last >>