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

こんばんはばさっちです。
calc関数って便利ですよね!!

いちいち面倒な計算とかしなくてもいいし記述方法も簡単だし、
いままではこういったサイトweb計。を利用しながら計算していましたが、
最近はずっとcalc関数を使用しています。

ただやっっぱり注意しなきゃいけないのがIE※Edgeもなんですよね!!
簡単にカラム崩れを回避できる方法をご紹介いたします!!

通常の使用方法はこう!!簡単に3分割になりますね!!

ul li {
width: calc(100%/3);
}

ただしこのままだとIE※Edgeがうまく機能しないので下記を追加します。

_:-ms-input-placeholder, :root .selector,
ul li {
width: 33.33%; /* IE用 */
}

これできれいに3分割することができました！！
ひと手間ですがIEハックを使ってcalc関数を上手に使いこなしましょう!!

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

Sublime Textのプラグインの「AutoFileName」が私の環境だとうまく動作しなかったんですが、対処法があったのでご紹介したいと思います。

※『AutoFileName』とはimgのタグを入力するとwidth、heightを自動で補完してくるれるプラグインです。

導入当初から気づいていたのですが、面倒だったので放置していましたがせっかく導入したので使用してみたいと思い、やっと重い腰を上げて調べることにしました。

①初期症状はこのようにimgを指定してもwidth、heightともに出てきません…


②そんな時はpackage Settings→Auto FileNameのSettings-のUserの2行目に”afn_template_languages”: true,を追加すると…


③自動で補完されました!!


私の場合は設定をいじるだけで簡単に解決することができましたが、
その他プラグインがバッティングしているなどの様々な原因があるみたいです。

imgのwidthを入力するのは結構手間ですし、自動補完なので結構時短になるのでおすすめのプラグインです。

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

最近コーディングにやたら時間がかかるなぁ～なんて一人で思いながら、コーディングをしているのですが、アイコン等の画像書き出しって結構時間かかるんで嫌いなんですよ…

それなので結構アイコンフォント使うことが多いのですが、最近良く使っているアイコンフォントをご紹介します。

■ icomoon

まず好きなアイコンを選んで、Generate SVG & Moreをクリック!!



その後は選んだアイコンをもう一度クリックするとコードが出てくるのでそれをコピーして貼り付けるだけ!


CSSのコードも出るので後からのサイズ、カラーの変更も可能です。
あまり種類はありませんが、汎用性が高いものが多いので、重宝しています。

こうゆうサイトがもっと増えてくれればコーディングちょっとは早くなるんだけどなぁ～

こんばんはばさっちです。
レスポンシブの際のテーブルってどのように組んでますか？

th、tdの幅を100%にして表示したり、スクロールを出して横にスクロールするのが一般的だと思うのですが、スクロール可能かって結構分かりづらくないですか？
注意文を表示したりスクロールバーの色を変更して分かりやすくしてみたり、色々工夫してると思うんですが、もっとスマートに分かりやすくしてみたいと思いませんか？

そんな時に見つけたのがこちら　scroll-hint

画像を見てもらえばわかると思うのですが、アイコンの動きでスクロールが可能と簡単に認識できます。


次のコーディングの際に使用しようと思っていたのですが、これだったらスマートにスクロールが認識可能ですね!誰か使ったら感想教えて下さい!!

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

前から何回も話題に出ている話なんですが、やっと解決したので、ブログに載せようかと思います。
そうDreamweaverなんです。昔ほど使っていないのですが、ライブラリーなど更新する時に開くとやっぱり遅い…

ダメ元で色々調べて試してみたら劇的に軽くなったのでご紹介します。

Dreamweaver CC が重かった原因がやっとわかった件

今どきMSゴシックって…なんて思っていたんですが、試してみたらめちゃくちゃ軽いです。
ただ行間が詰まって見えるし視認性は悪いですね…

ただ動作のストレスは解消されたのでこれで良しとしましょう!!

ちょっとした作業するならこれで問題ないはずですが、長時間のコーディングとなると目が疲れるかな~