未使用のCSSを削除するUnCSS
UnCSS
未使用のCSSを手間を掛けず判別して削除したい
使われてないcssがいつまでも残っているのは、パッと見て読みにくいし、解読性を落とします。
使わないものは毎回消して、必要なコードだけを残す、理想ですが、例えば他人の書いたコードなど、 消しても良いのかよくわからなかったりして、結局残ってしまうことは多いです。
そこでUnCSSを使います。
使用法
使い方としては、HTMLとCSSをコピペして、ボタン押すだけです。 不必要な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した要素に可変の高さを与える
書きました。
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
の値を変えることで比率を変えることももちろんできます。
.inner
のwidth
、height
は100%に指定することでratio-1_1
の高さを拾いますね。