CSSだけでウネウネ動く円を作る | q-Az
CSS だけでウネウネと動く円を作ってみます。SVG や canvas を使って作ったりするのが主流だと思うのですが、CSSだけでもそれなりにウネウネと動かせます。CSS の animation を使ってやってみます。 ウネウネ動くサンプル 円がウネウネと動いています。 ウネウネ動く CSSHTML<div class="uneCircle"></div>div に class を付けてるだけです。この div をウネウネ動かします。 .uneCircle { border: 5px solid #87CCA1; animation: uneune 5s linear infinite; /* 5秒アニメーションをループ */ width: 280px; height: 280px; margin: 50px auto; } @keyframes uneune { 0% { border-
CSSのposition:stickyがすごく便利 | q-Az
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考：position - CSS｜MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
なるべくCSSだけでアナログ時計を作る | q-Az
CSS だけでアナログ時計を作ってみます。ただ CSS だけではどうしてもできないことがあるので、その部分は JavaScript にやってもらい、なるべく CSS だけでアナログ時計を作ります。 まずは CSS だけでできる範囲で最終的には JavaScript に頼りますが、まずは CSS だけでどこまで出来るのか作ってみます。 HTML<div id="clock"> <div id="hour-hand"></div> <div id="minute-hand"></div> <div id="second-hand"></div> </div>上から、時針、分針、秒針です。 /* 時計本体 */ #clock { height: 700px; /* 高さは固定 */ margin: 40px auto; max-width: 700px; /* 幅のレスポンシブ対応 */ pos
スクロールバーの出現によるガタつきを防ぐCSS | q-Az
通常の web ページは縦に長く、縦のスクロールバーが作られスクロールが出来るようになります。 スクロールが発生しないような一枚絵の web ページを作っているならともかく、大抵は出来てしまう縦スクロールバー。web ページが表示された瞬間をよく見てみるとスクロールバーが作られるときに全体がガタッと動いています。 なぜ表示がガタつくのか理由は簡単で以下の画像のようになります。 web ページの描画が始まると上から順に要素を構成していきます。図の状態ではブラウザはウィンドウから要素がはみ出していないのでスクロールバーを作りません。赤い線がスクロールバーがない時の中心線です。 ブラウザは要素全体がウィンドウの高さより初めて高くなった時にスクロールバーを表示します。青い線がスクロールバーば出現した結果の中心線です。元の赤い中心線より左にずれます。 ブラウザの幅は固定なのでスクロールバーがあること
Pocket数をJavaScriptとYQLを使って取得する方法 | q-Az
「後で読む」の 代表サービス Pocket。書いた記事がどれだけ Pocket に登録されているかを JavaScript だけで取得したいのですが、公式には Pocket 数取得のための API がないということで JavaScript の力だけでは無理です。ですので米 Yahoo! が提供している YQL というサービスと併用して Pocket 数を取得したいと思います。 YQL は特に登録せずとも使えるサービスなのでこちら側がすることは JavaScript コードを書くだけです。パッと見「Pocket 数を JavaScript だけで取得する方法」に見えるかと思います。 追記：Pocket 公式ボタンの仕様変更があったため色々変更しています。2016/12/4 YQL とは 参考：YQL YQL はものすごく簡単に、雑に言うと「指定した URL の内容を JSON 化して送ってく
CSSだけでブルブル震わせる | q-Az
CSS だけで文字や画像をブルブル震わせてみます。 複雑な感じにブルブル震わせることも CSS を細かく記述すれば出来るのですが、なるべく短いシンプルな記述でブルブル震えるよう見える感じにしてみました。 CSS だけでブルブルCSS の animation を使って永久アニメーションをさせます。 HTML<span class="buruburu">ブルブル</span>class 名が「buruburu」の要素を作ります。 .buruburu { display: inline-block; animation: hurueru .1s infinite; } @keyframes hurueru { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(2px, 2px) rotateZ(
CSS だけでスライドショー | q-Az
jQuery、JavaScript を使ってスライドショーを作るのが昔は一般的でしたが今なら CSS だけでも十分スライドショーに見える仕組みを作ることが出来ます。 この記事ではシンプルにフェイドイン・フェイドアウトで画像が切り替わるスライドショー作ってみます。下の方にデモも作りましたので参考にしてみてください。 作り方制限を緩めて作ることも当然可能なのですが説明をシンプルにするために、画像の形は正方形限定です。サイズに関しては制限はないですが width、height 属性はあった方がいいのでそろえた方が楽に HTML をかけると思います。画像の枚数も制限を付けて8枚です。 HTML<div class="photo-show"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <img src="画像のURL"> <im
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
