dotenvとcross-envで環境変数を設定して開発環境の処理を切り替える
開発用と公開用で読み込むデータを変更したい、Gitで同じ開発環境を共有しながら一部のデータは作業者のPCで設定できるようにしたい。 要件が複雑な案件では、開発環境もより柔軟性のある設定にしておきたいことがあります。 たと…
TAM のテクニカルチームがお届けする WEB技術ブログ！
開発用と公開用で読み込むデータを変更したい、Gitで同じ開発環境を共有しながら一部のデータは作業者のPCで設定できるようにしたい。 要件が複雑な案件では、開発環境もより柔軟性のある設定にしておきたいことがあります。 たと…
文章の校正（誤字脱字や文法の誤りを正すこと）というと、ライターや編集者がするものと考えがちですが、エンジニアやデザイナー、ディレクターなどのウェブサイト製作にかかわるすべての人にも有益なスキルではないでしょうか。 エンジ…
以前、Sassの変数（Map）とmixinでメディアクエリを管理する記事を書きました。 Sassの変数とmixinで変更に強いメディアクエリをつくる 単純なmixinで導入はしやすいですが、min-widthとmax-w…
今ではなくてはならないものになったGitですが、コミットメッセージの書き方に悩んだことがあります。 案件によってルールが違うこともあります。GitHubで有名なリポジトリを見ていても、そのリポジトリの対象範囲や目的などに…
フォーカスインジケータ（フォーカスリング、outlineプロパティ）を消したことはありませんか？ フォーム要素やアコーディオンなどの動きのあるモジュールをコーディングするときに、Tabキーなどで操作したときはフォーカスイ…
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコ…
Bootstrapのようなグリッドシステムは便利ですが、コンテンツ内で使おうとすると困ってしまう場面があります。 例えばスマホでは1カラムでPCでは2カラムにしたい場合です。 PCの時は横並びになったカラムの間に余白（ガ…
スマホでは縦長の画像を表示したいけれど、PCでは横長の画像を表示したいということがよくあります。 そんな時にはJavaScriptで横幅を判定して切り替えるという方法がよくとられると思います。例えば、以下のような方法です…
チェックボックスやラジオボタンは、「閲覧環境によってデザインが変わってしまう」「サイトのデザインと合わない」といった理由からCSSでカスタマイズすることが多いと思います。 ただ、検索でよく見るカスタマイズ方法だと、inp…
以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あり…