subtechild

Playful Technology & Design.

未使用のCSSを削除するUnCSS

 UnCSS

uncss-online.com

 未使用のCSSを手間を掛けず判別して削除したい

使われてないcssがいつまでも残っているのは、パッと見て読みにくいし、解読性を落とします。

使わないものは毎回消して、必要なコードだけを残す、理想ですが、例えば他人の書いたコードなど、 消しても良いのかよくわからなかったりして、結局残ってしまうことは多いです。

そこでUnCSSを使います。

uncss-online.com

使用法

使い方としては、HTMLとCSSをコピペして、ボタン押すだけです。 不必要なCSSを削除したものが出てきます。 コメントアウトされているものは現在使用していなくても残してくれるようです。賢いですね。)

 まとめ

あくまで、複数ファイルを跨いでの使用は出来ないので、他ページで使用しているスタイルがないかは注意してください。 似たようなページのソースを流用してコーディングして後に、いらないものを消す時なんかも便利ですね。

 参照

GitHub - uncss/uncss: Remove unused styles from CSS

もうググらない、サイトの引っ越し、転送のためのリダイレクトいろいろまとめ

ここリダイレクトさせてくれる?

はじめに

たまにリダイレクトするページ作ってとか言われると、いちいちソース覚えてないし、 サーバーとか意味わからんし、 毎回ググるのも面倒なのでまとめときます :smirk:

書いてみよう

■ リダイレクトタグ

meta、1行書くだけです。 例えば、外部に飛ぶアンカーに計測タグかましたいときとか、 これ書いてタグだけ入れたページを作って読ませたりします。

<meta http-equiv="refresh" content="0; URL=http://XXXXXXX">

ただgoogleではあまり推奨されていない書き方のようです。下記の301か302でのリダイレクトを推奨しています。 なお、yahooでは、content="0;を指定した場合は301と同じ扱いになると回答しているようです。

参考:301リダイレクトが使えないときの転送方法 | 海外SEO情報ブログ

■ 301リダイレクト https

google推奨はこちらです、サーバーのお引越しのときとかは基本こっちでいいと思います。 放り込んだら、移送先が同じディレクトリ構造だったら同じページに飛ばしてくれますね。

素敵!

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ http://XXXXXXX/$1 [R=301,L]

しかし便利な.htaccessにもデメリットがあります。 サーバー自体がリダイレクトに対応してないことがあります。 この場合は正直どうにもならないので、別の手段をとるしかないです。

※他にもPHPとかJSでリダイレクトする方法もあるようですが、そもそもそのやり方を選ぶ必要性を感じないので省略します。

301リダイレクトってなんですか?

301リダイレクトは、URLが恒久的に変更された場合に用いられる転送処理のステータスコードです。転送のステータスコードとして他に302リダ>イレクトがありますが、302リダイレクトは「一時的な転送」を表すものであり、その意味が異なります。 引用:301リダイレクトとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS]

恒久とか一時的とかよくわかりません!日本語でお願いします!!!! となりそうですが、こういうとこはどうして難しく書くのかわかりませんが、 サーバーお引越しは恒久的で大丈夫だと思います。

基本301で大丈夫だと思います:wink:

もっと.htacessを知る

ここが一番わかりやすかったです。 コピペで色々使えるのでここブクマ推奨。

参考 :よく使う.htaccessの書き方まとめ 301リダイレクト - Minimal Green

他、参考にしたサイト

.htaccessなど、サーバー側でリダイレクトが利用できない場合どのように対処すれば良いですか? | SEO対策Q&A [SEO HACKS] 

position:absoluteした要素に可変の高さを与える

書きました。

qiita.com

positionは便利だけど、リキッドデザインで使う場合囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。

これは高さを指定しないから起こるのだが、 高さ固定したらそもそもdivの中の画像が伸縮しなくなるじゃん!!

こんな場面に出会った人は少なくないはず、多分。

どうにかなります

<div class="box ratio-1_1">
    <div class="inner">
        <p>1 : 1</p>
    </div>
</div>
.box {
    position: relative;
    width: 50%;
    height: auto;
    background: #444;
}
.ratio-1_1:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
.inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

ブラウザの幅を変えてみてください。

See the Pen position:abosoluteしたdivに可変の高さをつける by kenta kanno (@nknkt) on CodePen.

divに:beforeでpaddingを与えることで 擬似的に高さを与えます。

padding-topの値を変えることで比率を変えることももちろんできます。

.innerwidthheightは100%に指定することでratio-1_1の高さを拾いますね。