CSS
最近のYouTube君がよく使うこのUIパターン、名前ついてるのか気になってる(フロート型で下スワイプで消せて上部にバーがついてるやつ) pic.twitter.com/EJeLQ8wSoS— クロパンダ (@le_panda_noir) 2022年8月12日 ↑これを CSS + JS で作りました。フロートカー…
z-indexを「なんとなく」で扱っていませんか？その結果 すべてのCSSを読まないと重なりについて理解できない 最大値を探し出さないとつぎの要素を設定できない z-index:100と設定する といったことになったこと、ありませんか？z-indexという"""災厄"""とう…
こんな感じのものを作ります。
あけましておめでとうございます。新年一発目の記事です。書き初め・・・というのでしょうか？ 挨拶はこれくらいにして記事に入ります。みんな🍣大好きですよね？僕も大スシです。そんなみんな大好き🍣でCSSアニメーションを学んでみましょう。
いよいよWebComponentsが主要ブラウザでサポートされたそうなので、ライブラリ抜きで実装してみました。
物理的に計算するのは光源の設定などがめんどうだったのでしませんでした。
HTML入門書いたのでせっかくですし、CSS入門も書くことにしました。
(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください) まえがき: 記事中の画像について 記事中の画像は、青が変形前、赤、緑が青を変形した後の要素となっています。参考にしてください。 基本編 transfo…
泡がいくつもあって消えていくっていうあれをやりたくてやってみました(作成時間5分)。 4月28日追記:jQueryを使わずにネイティブのみで動くように改善しました。ただ、カクつくようになってしまいました。ある意味改悪です。改善後 5月14日追記:速度などを調…
映画のCMでよくみる(?)文字を切るやつがかっこよかったのでつくってみようとしました。
inuit.cssとは楽して すてきデザインのサイトをつくれるcssです。このcssを読み込んでいれば、htmlファイルにクラスを追加するだけでデザインできます。cssを全くいじる必要がないです。
Snowballが全然検索ででてこないのでSnowballの魅力を語りたいと思います。といっても魅力がわかりづらいので対比形式でやりたいと思います。
どうもおひさしぶりです。 といっても1週間ぶりですがw 今回はSnowballを大幅に更新しました。というかぜんぜんかいていなかったから、たまってただけです。
SCSSが便利です。もう作業のはかどり具合がやばいです。 何が便利って、(わたしが)CSSで不便と思ったことをすべて解消しているところです。 やった事ない人はやってみてください。 もう便利すぎて一度ドはまりすると抜けなくなります。
ブログをいまから始めたいという人は、Seesaaがおすすめです。 Seesaaってとても便利なんです。 ほかを知らないというのもありますがそれをさしひいてもなかなかのものです。 2016/12/29 追記: Seesaa Blogよりもはてなブログの方がMarkdownが使えるなどの理…
前にGoogle ChromeでiPhone版のデザインを確認する方法という記事を書きました。 しかし、それに匹敵するかもしれない(個人的にはChromeのほうがよかったですが)ものがありました。 その名も「webインスペクタ」です。
Snowballにファイルをドラッグアンドドロップするだけで圧縮する機能を付けました。 これで、いままでよりも利便性があがりました。
Blackboxを作りました。 Snowballと逆に、CSSをよみやすくします。
こんにちは! 今回はサイト高速化をしてみたいというそんなかたへむけて、CSS圧縮のやり方を書きたいと思います。 用意するもの、必要な知識もなにもいりません!
Snowball更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。
[Snowball](http://pandanoir.web.fc2.com/snowball/snowball.html)更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。
Snowball更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。
Snowballのコードを見直して少しだけ軽くしました。
CSS圧縮したけど編集用ファイルをとってなかった! そんなかたへむけて
CSS圧縮には限界があります。 私がSnowballに実装しない機能のうち一つはそういう理由です。 それは共通部分をまとめるという機能です。
では、2回目の今回こそ本題のgzip圧縮に入ります。 ※だからといって前回のを飛ばしていいというわけではありません。前回のものも読んでください。
gzip圧縮のやり方が意外と分かりそうで分からなかった(検索しても分かりづらかった)ので、やり方まとめました(Mac などターミナルを使えるOS必須)。
サイト高速化というのは、その名の通りサイトの表示速度やスクリプト実行速度を上げることです。 やる前とやった後では本当にまったく違います。 もう数値ではなく、体感できます。
CSS Compressorを更新しました。 追記：CSS CompressorはSnowballになりました。
seesaaのデザイン変更してみて分かった方法まとめてみました。
