ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

コーディング

Web制作に便利なサービスやツール12選

一緒にWeb制作をしている仲間から、便利なツールを募りました。 たくさん出てきたので共有しておきます。 ジャンルレスで順不同ですが、どなたかの参考になれば幸いです。 ビジュアルコミュニケーションツール - AUN[あうん] https://aun.tools/ ウェブサイ…

emmetを使いはじめました

いまさらですがemmetを使いはじめました。 慣れないemmetを使うより自分で打ち込んだほうが速いと思っていました かつて、すごく便利な書き方があるよと話題になり、私も導入をしてみたことがあります。 当時はZen codingなどという呼ばれ方をしていました。…

Gitを使い始めました。

Gitを使い始めました。 もうずいぶん前から、まわりから「Git使わないの? めっちゃ便利やで」などという声を聞いていたのですが、なぜか使わずにいました。異様に億劫に感じていました。 いざ使い始めてみると、とても便利で何故いままで使わずにいたのだろ…

レスポンシブについて学んでみた。

レスポンシブデザインとは あらゆるデバイスに最適化したWebサイトを、ひとつのHTMLで制作する方法です。 基本的にページはひとつなので、目的のデバイス用にページをつくらなくてもいいから、コスト面でのメリットがあります。 実際に制作してみると、慣れ…

スマートフォン コーディング

スマートフォンのコーディングのお仕事が立て続けにきてしまいました~。 ありがたいことなんですが、久しぶりなのでドキドキです。 PCだと古いブラウザなどに対応しないといけないので、新しい仕様はなかなか使いづらいんですが、スマートフォンだとそうい…

これが決定版じゃね?とってもお手軽Webページ高速化の方法とツール

サイトの表示は速ければ速いほうがいいですよね。 Googleは表示速度が0.5秒遅くなっただけで、検索数が20%減少、 Amazonは表示速度が0.1秒遅れただけで、売上が1%下がるといいます。 GoogleがSEOの条件に表示速度を採用したという話も聞きます。 『速い = …

スマホサイト縦画面と横画面でCSS分けてみた!

こんにちは~! 今回は私のまわりではあんまり声が上がらなかったのですが、スマホサイト作ってたら縦画面のときと横画面のときの表示のされ方ってなんだか嫌になんないですか? 一般的にviewportで指定すると思うのですが…。 文字とかでっかくなっちゃった…

作業が捗る!覚えておきたい3つの正規表現

・全部の先頭に「■」を付ける ・全部の行の最後に「!」を付ける ・●●と●●の間をぜんぶ変更する 数行であれば、ひとつひとつやっていっても良いのですが、数十行、数百行といったテキストになると大変です。 今回はそんな作業を楽にする、「正規表現」を紹介…

クライアントがめっちゃ喜ぶ!コーディングで気をつけていること

私がコーディングで気をつけていることを紹介します。 どれもむっちゃ簡単です。それもたった3つです。 実際にクライアントにめっさ感動していただいたことのある、コーディング方法です。 改行の入れ方 要素ごとであったり、区切りのいいところで改行をしま…