» これからコーダー・マークアップエンジニアを目指す人達へ ~ツール編~|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

これからコーダー・マークアップエンジニアを目指す人達へ ~ツール編~

スタッフブログ

  • 2019.05.20

    これからコーダー・マークアップエンジニアを目指す人達へ ~ツール編~

    顔アイコン

    朝寝ぼけてて、歯を磨く際にハンドソープを誤用しまった男、はかせことはだです、こんばんは。

     

    早く、正確にコーディングするには欠かせないものだと、私は思っております。

    そこで、初心者の方~バリバリの現役コーダーの方にもおすすめできるのではないか?といった、ツールについてご紹介できたらと思います。

     

    OneClickCSS

     

    https://css.miugle.info/

    まずはこのツール

    htmlに打ったコードからcssを抽出してくれるこちらのツールはよく使わせて頂いてます。

    左にhtmlコードを入力し、真ん中にあるボタンで、使いたい子孫セレクタを選択し、右に結果がでるものになります。

    タグ要素無しにチェックを入れると、タグが消え、指定したIDやクラス名のみが抽出されます。

    正直、これがあるないでだいぶ速度が変わるといっても過言ではありません。

    Sassにも対応しているので、使い勝手はだいぶいいと思います。

     

    Stripe Generator 2.0

    http://www.stripegenerator.com/

    ストライプの背景を使ってるデザインの際には重宝します。

    ストライプの柄2種類を設定し、ストライプの幅を設定し、シャドウの設定をするだけで、繰り返し要素にも対応したストライプ画像を生成できます。

    ストライプの傾き、方向なども何種類かあり、大変便利なツールです。

     

    16進数カラーコード・RGB・RGBA変換ツール

    http://j-press.info/16torgba/

    こちらのツールはタイトルの通り、16進数のカラーコード(#000000 など)をいれるとRGB・RGBA形式で吐出しくれます。

    背景要素に透過をさせたい時にRGBA形式でbackgroundと一緒に使うのが使いやすいと思います。

    例を黒と考えると

    #000 → rgba(0,0,0,1); が変換されますので、最後の1が透過の数値になりますので、0.8などにすることで、簡単に透過を行えます。

     

    TinyPNG

    https://tinypng.com/

    1サイト作る際に一番重くなりがちになるものが画像です。

    その画像に圧縮をかけることで、画像容量を小さくし、データ転送量を減らせるもになります。

    それにより、サイトの動作を軽く、早く表示できるようになります。

    一度に選択するファイル数が20枚までしか圧縮かけることができないのですが、圧縮率が高く、画像データによっては半分以下のサイズになることもあります。

    重いサイトだなぁと感じた際には、是非お試し頂けたらと思います。

     

    CSS 2 SASS/SCSS CONVERTER

    http://css2sass.herokuapp.com/

    こちらは SASS・SCSS を使っていることが前提になりますが、cssをSASS・SCSSの形式に変換してくるものになります。

    修正・変更のあった個所に対して大変使いやすいものだと思われます。

    痒い所に手が届く感じのものになります。

     

    KeySwap

    キーの入れ替えやキーを無効にしたりするソフトです。

    普段使わないキーを無効にしたりして、少しでも打ち間違いのないように設定できる為、私は使っております。

    右手はマウスを操作することが多い為、左手でエンターキー欲しいなと感じてた私は入れております。

    私の使ってる設定で言えば、

    insert・・・deleteキーと同じ

    caps lock・・・左手用エンターキー

    無変換・・・左手用backspaceキー

     

    といった具合に設定できるので、大変便利です。

    設定したら、必ず再起動が必要になりますので、ご注意を。

    使わないキーはあるだけで邪魔になってしまうので、無効にしてしまうのも手かもしれません。

     

     

    今回はこのような少しでもコーディング速度が上がるツールについてご紹介させて頂きました。

    もちろんある程度の基礎が必要な情報もありますが、調べていくとなかなか面白いと思います。

    他にももっといいものが出てくるかもしれませんので、その際にはご紹介させて頂ければと思います。

     

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年6月
« 5月    
 12
3456789
10111213141516
17181920212223
24252627282930

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス