https://geechs-magazine.com/tag/lifehack/20161115_3
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選
今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。 ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi
CSSのみで実装するキャプションエフェクト 20 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。 画像ホバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。 キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML・CSS 一部をのぞき、今回はサンプルとして基本的に下記のようなHTMLを使用しています。 <figure> <img src="image.jpg" /> <figcaption> <h3>Caption Title</h3> <p>caption text here ...</p> </figcaption> </figure> CSSに関してはそれぞれ動きに関係する部分のみ記述しており、figcaption内にあるh3とpの見栄えに関するフォント
CSSシグネチャとは？メリットと実用TIPS – LIQUID BLOG
CSSシグネチャとは、ページのbodyなどにidやclassを設定し、 CSSでページごとのスタイルの切り替えを行う手法です。 シグネチャ（signature）は直訳すると署名、サインの意味です。 最近あまりこの言葉を目にすることがなくなりました（Twitterでは1件もヒットしませんでした・・）が、 便利な手法なので紹介します。 なお、ユーザーがブラウザの「ユーザースタイルシート」を 設定できるようにする手法という意味もあるようですが、 今回は前者について紹介します。 CSSシグネチャの解説 CSSシグネチャを利用すると、トップページとカテゴリページで 一部デザインを変える、ナビゲーションデザインで閲覧中ページが分かるようする、 といったことが、ひとつのCSSで簡単にできます。 ページごとのデザインをひとつのCSSで指定できる ページごとにデザインが変わる要素が、ページ内に複数あっても、
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
CSSでサイドとメインの高さを揃える方法 - ウェブ屋 Junonet
2カラムでサイトを作っていると、ブログでもそうですが、メインの部分が長くなると、サイドバーの部分が上の方で切れてしまい、下の方に行くとサイトイメージが変わってしまうことがありますよね。 サイドの背景色に高さを長めに設定しても、ページによって変わるメインと同じ高さに合わすことはできません。 背景画像を設定しrepeat-yで対応できなくもないんですが、コリスさんがCSSでサイドバーと本文部分の高さを揃えるいい方法を紹介してくれてました。 [CSS]高さの異なるカラムを揃えるスタイルシート | コリス どうするかといえば、サイドの「padding-bottom」と「margin-bottom」に、同じ数値をプラスとマイナスで指定して、サイドとメインのdiv要素を包んだdivに「overflow:hidden;」を指定するという方法です。 で、設定する数値っていうのは「32768px」というお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About![CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/0c51030920b507801688bfa84a4daf9902525c76/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F6%2F3%2F0%2F8%2F201609291729%2Ftopimg_original.png)
よく忘れるCSSの小技 - Qiita