Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

CSS

寿司で学ぶCSSアニメーション

あけましておめでとうございます。新年一発目の記事です。書き初め・・・というのでしょうか? 挨拶はこれくらいにして記事に入ります。みんな🍣大好きですよね?僕も大スシです。そんなみんな大好き🍣でCSSアニメーションを学んでみましょう。

アナログ時計の影をCSSでいい感じに表現する

物理的に計算するのは光源の設定などがめんどうだったのでしませんでした。

CSS入門

CSS

HTML入門書いたのでせっかくですし、CSS入門も書くことにしました。

もう分からないとは言わせない! 体系的に学ぶCSS transform 3D入門

(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください) まえがき: 記事中の画像について transform関数とは 座標軸の注意点 座標軸の正の方向 座標軸の回転方向 座標軸に関する注意点 複雑なtransform関数…

よくあるバブルをつくってみました

泡がいくつもあって消えていくっていうあれをやりたくてやってみました(作成時間5分)。 4月28日追記:jQueryを使わずにネイティブのみで動くように改善しました。ただ、カクつくようになってしまいました。ある意味改悪です。改善後 5月14日追記:速度などを調…

文字カットをhtml+css+Javascriptでやってみました

映画のCMでよくみる(?)文字を切るやつがかっこよかったのでつくってみようとしました。

簡単! すてき! inuit.css!

inuit.cssとは楽して すてきデザインのサイトをつくれるcssです。このcssを読み込んでいれば、htmlファイルにクラスを追加するだけでデザインできます。cssを全くいじる必要がないです。

いかにSnowballがすごいのか語りたいです

Snowballが全然検索ででてこないのでSnowballの魅力を語りたいと思います。といっても魅力がわかりづらいので対比形式でやりたいと思います。

Snowballを大幅に更新しました。

どうもおひさしぶりです。 といっても1週間ぶりですがw 今回はSnowballを大幅に更新しました。というかぜんぜんかいていなかったから、たまってただけです。

CSSを書く速度が爆速になる!SCSSをつかってみた

SCSSが便利です。もう作業のはかどり具合がやばいです。 何が便利って、(わたしが)CSSで不便と思ったことをすべて解消しているところです。 やった事ない人はやってみてください。 もう便利すぎて一度ドはまりすると抜けなくなります。

ブログを始めたい人たちへ! Seesaa blogがおすすめです。

ブログをいまから始めたいという人は、Seesaaがおすすめです。 Seesaaってとても便利なんです。 ほかを知らないというのもありますがそれをさしひいてもなかなかのものです。 2016/12/29 追記: Seesaa Blogよりもはてなブログの方がMarkdownが使えるなどの理…

iPhoneとmacとの連携が便利…かも!

前にGoogle ChromeでiPhone版のデザインを確認する方法という記事を書きました。 しかし、それに匹敵するかもしれない(個人的にはChromeのほうがよかったですが)ものがありました。 その名も「webインスペクタ」です。

Snowballにドラッグアンドドロップで圧縮する機能をつけました

Snowballにファイルをドラッグアンドドロップするだけで圧縮する機能を付けました。 これで、いままでよりも利便性があがりました。

Blackboxを公開しました

Blackboxを作りました。 Snowballと逆に、CSSをよみやすくします。

今日から!CSS圧縮!

こんにちは! 今回はサイト高速化をしてみたいというそんなかたへむけて、CSS圧縮のやり方を書きたいと思います。 用意するもの、必要な知識もなにもいりません!

Snowballアップデートしました

Snowball更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。

Snowballアップデートしました

[Snowball](http://pandanoir.web.fc2.com/snowball/snowball.html)更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。

Snowballアップデートしました

Snowball更新しました。 今回は「paddingを最短にする」「marginを最短にする」を更新しました。

Snowballを少しだけ軽くしました。

Snowballのコードを見直して少しだけ軽くしました。

「CSS圧縮したけどバックアップしていなかった」という人へ

CSS圧縮したけど編集用ファイルをとってなかった! そんなかたへむけて

CSS圧縮の限界点

CSS圧縮には限界があります。 私がSnowballに実装しない機能のうち一つはそういう理由です。 それは共通部分をまとめるという機能です。

gzip圧縮のやり方 2/2

では、2回目の今回こそ本題のgzip圧縮に入ります。 ※だからといって前回のを飛ばしていいというわけではありません。前回のものも読んでください。

gzip圧縮のやり方 1/2

gzip圧縮のやり方が意外と分かりそうで分からなかった(検索しても分かりづらかった)ので、やり方まとめました(Mac などターミナルを使えるOS必須)。

サイト高速化のための4つの方法

サイト高速化というのは、その名の通りサイトの表示速度やスクリプト実行速度を上げることです。 やる前とやった後では本当にまったく違います。 もう数値ではなく、体感できます。

よりコードの無駄を省けるようになった「CSS Compressor」

CSS Compressorを更新しました。 追記:CSS CompressorはSnowballになりました。

seesaaブログのデザイン変更方法 1/2

seesaaのデザイン変更してみて分かった方法まとめてみました。

difff

difffというサイトがとてもコードを書くときに便利だから紹介したいとおもいます。 まずdifffとはなにかについて。 difff(デュフフ)とは、文章比較ツールです。 よくわからない人は一度いってみてください。 例文がのっているのでそれを比較してみると分かると…

スマートフォンのCSSを書く時に注意した方がいいこと

スマートフォン用CSSをかいていて気がついた注意した方がいいことがいくつかあるのでそれについて書こうと思います。割とやってると思います。(そんなことないのだろうか?私だけ?) プレフィクスに気をつけ、余分なものをつけない。 意外とつけていたりしま…

CSS Compressorアップデートしました

CSS Compressorアップデートしました。 今回はカラーネームをカラーコードにする機能を搭載しました。 例えばblackを#000にするような感じです。 今回はこれだけです(笑)アップデートってほどでもなかったです。 ちなみにきちんとwhite-spaceはwhite-spaceで…

DLタグのテーブル問題

DLタグを使うとテーブルタグなしでテーブルを作れます。 (作り方は今回の本題ではないので気になる方は調べてください) しかし、このDLテーブル、問題があるのです。