2021/05/31

PCとスマホでレイアウトが違う場合のCSSをじっくりコーディング2021

最近実際のお仕事の現場で実装した、PCとスマホで、要素のレイアウトが異なる場合のCSSコーディングについて解説します。

2021/04/30

Photoshopと実装で見た目が同じにならない話

画像と文字を横並びにしたときPhotoshopと実装で見た目が同じにならないケースをご紹介します。

2021/03/31

多言語サイト案件が多いコーダーがいつも気をつけている点

HTMLコーダーとして、これまで多言語サイト制作に多数関わってきました。この記事では、多言語サイト制作でHTMLコーダーとして必ず意識している点を紹介します。

2021/02/28

サイト名とメニューが横並びのシンプルなグローバルナビをじっくりコーディング

サイト名とメニューが横並びになったシンプルなグローバルナビを先日作りました。そのコーディングの流れをじっくり解説します。

2021/01/19

ケース別に見る 目標設定で重要なチェックポイントと改善案

目標には、結果につながる良い目標と、そうでない目標があります。この記事では、目標設定に重要なチェックポイントをもとに、良い目標を立てるコツについて書いていきます。

2020/12/31

コロナの影響を大きく受けた2020年を振り返る

インバウンドのウェブ制作を中心にフリーランスウェブ制作者として活動していた私は、今年コロナウイルスの影響を大きく受けました。今年の振り返りとして、感じたことや、今年やった仕事を記載します。

2020/11/30

stylelintを使ってCSSプロパティのソートと整形を自動化する

CSSプロパティの並び順や細かい記述ルールを手動で整える時代は終わりました。stylelintを使って並び順やフォーマットを自動で調整する方法を、黒い画面が苦手な方にもなるべくわかりやすく解説します。

2020/10/31

SONY α7C購入!カメラ以外に買ったものと金額をご紹介

2020年10月23日発売の小型軽量ミラーレス一眼 SONY α7Cを購入しました。動画中心の使い方を想定しているので、合わせて買った周辺機器を紹介します。

2020/09/30

申込者180名超のZoomウェビナーを円滑に開催できたのでタスク一覧を共有します

申込者が180名を超えるZoomウェビナーの運営サポートを担当しました。これからZoomウェビナーを検討されている方の参考になればと思い、この仕事で得た知見やタスク一覧を共有します。

2020/08/31

会社員のままフリーランスで副業を始めたい方に伝えたいメリットとデメリット

会社員とフリーランスの兼業を始めて1年8ヶ月が経ちました。このスタイルのたくさんのメリットや、気をつけておくべき点についてまとめました。

2020/07/30

BEMとSassの「&__Element」記法を使わない派に転向した理由

数年間、BEMとSassの「&__Element」記法を使ってコーディングしていました。しかしあるきっかけでその記法を使わない派に転向したところ、想像していたのとは違うメリットを感じました。その理由などをご紹介します。

2020/06/30

瞑想・マインドフルネスのための脳活動計測デバイス Muse2に大満足

マインドフルネス中の脳のリラックス状態の客観的なデータが取りたくて、脳波測定デバイスのMuse2を購入しました。この記事では、私が購入前に知りたかった点や、購入して実際に使用してからわかった点を中心にレビューします。

2020/05/31

npm はじめの一歩

「環境構築」や「例の黒い画面」が苦手な方でも、MacユーザーもWindowsユーザーも、誰でもnpmを使い始められるための手順をご紹介します

2020/04/30

Philipsのウルトラワイド曲面ディスプレイ 439P9H1/11に大満足

リモートワークの環境を充実させるために、Philipsのウルトラワイド曲面ディスプレイ 439P9H1/11を購入しました。Macbook ProユーザーかつWeb開発者の観点から、良い点やいまいちだと思った点をご紹介します。

2020/03/24

PCとスマホでレイアウトが違う場合のCSSをじっくりコーディング

PCとスマホで、見出し・文章・画像のレイアウトが異なるデザインデータが支給された場合のCSSコーディングについて解説します。もう「組めない」とは言わせない!

2020/02/29

実践BEM 〜開発環境の構築〜

前回の記事で、フロントエンド設計手法であるBEMを導入するメリットや考え方についてご紹介しました。今回の記事では、BEMを適切に運用していくための開発環境について具体的なコードを使用してご紹介します。

2020/01/23

実践BEM 〜BEM導入の目的と現役で使い続ける運用ルール〜

CSS設計、フロントエンド設計手法としてBEMが広く知られるようになりました。この記事では、BEM歴6年の筆者が、これまでに現場で使ってきて感じたBEM導入のメリットや、現役で使い続けている運用ルールについて解説します。

2019/12/31

フリーランス開業初年度で案件獲得がうまくいった理由を振り返る

今年の1月に開業届を出し副業フリーランス始めてほぼ1年が経過しました。この1年間で、案件獲得につながったと考える行動やスキルを振り返ります。

2019/12/29

スマホサイトでよくみるハンバーガーメニューの開閉ボタンのCSSをじっくりコーディング

メニューが開いているときはバツ印、メニューが閉じている時は3本線のハンバーガーになるボタンのCSSコーディングをじっくり解説します。ボタンの大きさが変わってもきれいなレイアウトを保つためにはひと工夫必要でした。

2019/11/19

CSSの「font-size: 20px;」という指定について調べたら奥が深かった

CSSで普段なんの気無しに使っている「font-size: 20px;」といった指定の挙動を細かく調べてみたら、想像を遥かに超える複雑さでした。調べたことや実験結果を記録します。

2019/11/01

サムネイルが右側に並んだ画像リストのCSSとJSをじっくりコーディング(JS編)

大きな画像の横に、クリックして画像を切り替えるサムネイルが並んだレイアウトのCSS・JSコーディングの流れをじっくり解説していきます。前編のCSS編に続き、本記事ではクリックして画像を変更するJS部分について解説します。

2019/10/31

サムネイルが右側に並んだ画像リストのCSSとJSをじっくりコーディング(CSS編)

大きな画像の横に、クリックして画像を切り替えるサムネイルが並んだレイアウトのCSS・JSコーディングの流れをじっくり解説していきます。前後編に分け、前編の本記事ではCSSについて解説します。

2019/09/24

よくあるグローバルナビのCSSをじっくりコーディング

WEBサイト制作でよくある見た目のグローバルナビのHTMLとCSSをコーディングした際、考えることが予想よりも多くありました。コーディングの流れをじっくり解説します。

2019/08/13

スプレッドシートでプロジェクトの工数管理表を作る

Googleスプレッドシートを使って、プロジェクトの担当者ごとの日々の予定や実績を記入する工数管理表を作ります。サンプルも掲載しています。

2019/08/102020/07/31

育休を1年2ヵ月とったエンジニア課長の記録

男性の育休取得者ゼロの企業で、マネジメント職の私が3度、述べ14ヵ月の育休を取りました。育休を取るまでの経緯や取得中の過ごし方などについて書いていきます

2019/07/23

スプレッドシートの条件付き書式で行全体に色付けをする(2019年版)

Google スプレッドシートで、セルの値によって行全体、または列全体の色を変える「条件付き書式」の使い方を解説します。サンプルへのリンクも掲載しています。

2018/04/032018/04/04

gulp-sassのマイナーバージョンが上がったらsassファイルがコンパイルできなくなった

プロジェクトのメンバーから、gulpタスクで行なっているsassのコンパイルができなくなったとの相談を受けた。 起きていたエラーは以下。 SassのControl Directives(@if、@each、@for、@while)や他のmixinの中ではmixin…

2016/02/12

2016年の日本語フォントファミリー指定はこれで行く【比較画像付】

CSSで指定するフォントファミリーを、めっちゃ悩んで決めました。

2016/02/10

Macでファイルを圧縮するときに.DS_Storeを含めないようにする

手順 圧縮したいファイルをひとつのディレクトリにまとめる。 ターミナルを起動する 解説 zip圧縮する ディレクトリを再帰的(解凍時にデータが欠けない)に圧縮する。 files.zipという名前のzipファイルを作成する。 zip…

2016/01/29

sshのconfigを編集して普段のssh接続を楽にする

※この記事はmacを前提としています VPSにssh接続するとき と毎回打つのが面倒なら、~/.ssh/configを編集して、 のように、簡単に接続できます。 手順 macのターミナルを起動する # vi ~/.ssh/config 以下のような内容を記載 「esc…

2015/04/30

Evernoteプレミアムが月間容量無制限、ノートの上限もアップ

2015年4月30日、Evernoteのプレミアムプランがものすごいことになりました!! 月間のアップロード容量が無制限!(これまでは4GB) ノートの上限サイズ200MB!(これまでは100MB) なんということでしょう。。 これで、過去の記事 Evernote…

2015/03/10

Todoist活用!買い物リストを家族と共有する

買い物中の奥さんから来る「何か買うものある?」に、タスク管理ツールTodoistで効率良く回答できます。 やり方はとても簡単。まずはプロジェクト「買い物」を作成し、 オプションをシェアするをクリック 相手がTodoistを使っていなければ、メールアドレスを追加。Todoist…

2015/02/272019/07/23

Googleスプレッドシートで行全体に自動で色付けをする方法

Googleアカウント(~~~@gmail.comなど)さえ持っていれば無料で利用できる、Excelと同等か、それ以上の機能を持つGoogle…

2015/02/23

ラベル機能を使ったTodoistからのメッセージ

タスク管理アプリとしてTodoistを愛用しているのですが、ラベル機能の使い方としてこういうのもありかなーと思いました。 職場の冷蔵庫に入れてあるコーヒーの存在を忘れないための「@message」ラベル。 Todoist…

2015/01/28

サイトのパフォーマンスの課題を発見し定期的に計測する

先日、HTML5Conferenceに参加してきました。 「2015年これからの日本のWeb…

2015/01/09

たった1,000円でできるVR体験【ハコスコ】が想像以上にすごかった

VR元年(Virtual Reality)とも言われた2014年。FacebookのOculus VR買収を始め、MicrosoftやSamsung…

2014/12/18

macOS Yosemiteでアプリを最大化表示する2種類の方法

macOS Yosemite…

2014/12/15

Evernoteプレミアムの月間アップロード上限4GBの使い道を考えた

今年(2014年)の秋頃、私のEvernoteプレミアムユーザの月間アップロード上限が4GBになりました。 ※正式なアナウンスはまだ無く、まだ適用されていない方もいらっしゃるかもしれません。 これまでの上限が1GB…

タグ一覧