ホームページ制作会社エスエムティのスタッフブログ

Staff blog

エスエムティの愉快な仲間たち

記事担当
ばさっち

:not()が結構便利だった


こんばんはばさっちです。

CSSでスタイルを適用したいけど、ここだけには適応させたくないって時ありませんか?
私の場合は.noなどのclassを別途用意してスタイルをリセットしたり、別なスタイルで上書きしたりしていたのですが、:notで簡単に除外することができます。

たとえばこんな感じで
#Co:not(.title) {
}

この書き方だと#Coの.titleにはスタイルが適応されません。

リストなどを作成した際の一番最後のpadingの値を変えたりするのが、簡単にできます。
:nth-child()などほかにもの擬似クラスもありますが、:not()の使い方を覚えれば、作業効率もあがるかもしれませんね!!
記事担当
ばさっち

熱暴走対策

こんばんはばさっちです。

今年の夏は本当に暑いですね…
会社のパソコンも家のパソコンもファンがすごい勢いで回ってます…

デスクトップだとあまり気にならないですが、ノートだとすぐ気になりますよね…
私の場合は別途ファンを準備して冷やした、スタンドで隙間を開けて少しでも熱を逃したりしていたのですが、最近見つけたのが「Mac Fan Control」これめちゃくちゃ便利なんですよ!

温度によってファンの回転数を制御できるのでデフォルト設定よりきめ細かい設定ができるので、なるべく熱くなる前に冷やすことが可能です!!

このアプリとスタンドを使って最近はあまり気にならなくなりました。
結構細く設定できるので、熱に悩まされている場合は是非!!
記事担当
ばさっち

フォントサイズの基準

こんばんはばさっちです。
先日制作部でミーティングを行い余白の関しての簡単に話し合いました。
人それぞれの考えがあってとても参考になりました(みなさんありがとうございました。)

そんな時についでにフォントサイズのことも調べて見たのですが、
私の場合はフォントサイズをだいたい14px~16px作成してh1~h6は大体感覚で行ってた部分がすごく多いんですよ。

h1~h6の基準もあったらいいなぁと思っていた時に見つけたのがこちら

使い方は基準となるフォントサイズを指定したらh1~h6の最適なサイズを教えてくれます。
またプレビュー機能もあるのでどのくらいの大きさが最適化自分の目で確認することも可能。

指定方法も各種(px、em、rem)と指定できますので昔からのサイトの修正や今作成中のサイトまで対応できます。
余白もそうですが、主観で行うよりも基準があったほうが迷わずに済みますね!
記事担当
ばさっち

WindowsからMacにお引越し

こんばんはばさっちです。

プライベートな話になるんですが、古いWindowsからMacに写真を移動しようとしたらものすごい大変だったんですよ!!

WindowsからMacに移動する場合は「移行アシスタント」を使うのが一般的らしいのですが、設定してみようと思ったらものすごい時間がかかる…(てかWindowsが全然認識してくれない…)

昔のパソコンなのでまあしょうがないと思い、次に「Dropbox」で移動しようとしたらこれまた時間かかる…(写真の枚数多いからしょうがないな…)

結局Windows→Dropbox→Macの移動で丸一日くらいかかりました…

Windows同士、Mac同士ならそんなに時間がかかることはないですが、WindowsとMacの移動は本当に時間かかる…

ちょっとしたデータならメールなどで済みますが、大量のデータ移動は時間がかかるので、それなりに覚悟したほうが良いと思いました。
これからはこまめに移動しておこうっと
記事担当
ばさっち

IE11で游ゴシック、flexboxを使った際の対処法

こんばんはばさっちです。
IE11でブラウザチェックして本当に嫌になるのが、游ゴシックとflexboxバグです。

コーディングしてるとつい忘れて使ってしまうんですが、今後忘れないためにも
対処法を書いておきいたいと思います。

■游ゴシック問題(IE11で游ゴシックを使うと上下の予約が若干上づまりになる。)

boxなどで囲んである場合などは非常に目立つので対処が必要になるのですが、いつも私はIEのみ別途でCSSを書いています。

結構手間かかるんですけどね…
游ゴシック使いたいからしょうがないです。
書き方はこんな感じです。

——————————————-
@media all and (-ms-high-contrast:none){

}
——————————————

■flexbox(min-heightとの組み合わせで使うとバグる)

これも忘れてしまってよくやってしまうのですが、メイン画像などでflexboxとmin-heightを組み合わせて配置しようとすると、IE11だけ上手くいかない…

調べてみると、flexboxとmin-heightの相性が悪いみたいなので、ハックでtable-cellを使うとか、divを1つ追加するなど対処法はいくらでもあるようですが、
僕の場合はたぶん一番簡単なmin-heightを指定しない方法を選んでいます。

その他大小いろいろなバグがありますが、どうしても許せないのがこの2つ!!!
どうにか対応してほしいと思っています。

クリックしていただけると幸いです

http://www.smt-net.co.jp/


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ

キャンペーン

pay-per-click