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
functions.phpを使ってbody最下部にJavaScriptコードを入れる方法 | q-Az
せっかく WordPress を使っているので、ギミック的な JavaScript コードの紹介をするときは WordPress ですぐに使える形がしたいなと思い body の最下部、つまり、 ・・・ <script> //ここに挿入 </script> </body> </html>と functions.php から インラインの JavaScript コードを挿入できる方法を考えました。直接メインのテーマを編集することなく、functions.php の編集だけで入れられる事で利便性が増すのではないかと思います。 なぜ head ではなく body 最下部なのかhead ではなく body の最下部に JavaScript コードを挿入することの利点は、Web ページの描画を高速化することです。昔は head 要素に script タグを使って書いてあげることが主流でしたが、最近の流
WordPressでもPageSpeed Insightsで100点満点を取る方法 | q-Az
PageSpeed Insights とは Google が提供している Web ページの表示スピードを測定して点数をつけてくれるツールです。点数が高いほど Google 検索において有利だと言われているので、高いに越したことはありません。今回はその点数を満点である100点にする方法を紹介します。 「WordPress は遅い」「PHP は遅い」という話を聞いたりもしますし、WordPress だから高得点は無理だと思い込んでいる人もいるのでそんなことは無いよ、というお話です。これを真似すれば基本的には誰でも、WordPress であっても PageSpeed Insights で100点を取れるはずです。 Google アナリティクスを外すPageSpeed Insights では、JavaScript ファイルのブラウザキャッシュ時間を長め（10日程度）に設定しないと点数が下がります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
