技術

初心者向けReact入門!【おすすめチュートリアルと本を紹介します】

React

こんにちは!現役フロントエンドエンジニアのワタです。

今日は、僕自身も実務の開発現場で4年間ぐらい使用しているReactの入門向けチュートリアル、おすすめの書籍等を紹介します。

Reactを身につければ、当面仕事に困ることはないと思うので、これからフロントエンド、フルスタックエンジニアを目指す方にも大変おすすめなフレームワークです。

続きを読む

Chrome v76よりnative lazy loadingサポート開始!

native-lazy-loading

こんにちは、フロントエンドエンジニアのワタです。

ついに、Chrome v76よりnative lazy loadingのサポートが開始しました!!!そこで、Native lazy loadingの実装方法、おすすめwordpressプラグイン、ブラウザ対応方法をまとめます。

続きを読む

jpg, png, svg の違いを整理する

jpg, png, svg の違い

こんにちは、シドニー在住エンジニアのワタです。

今日は、エンジニア一年目の方々、もしくはプログラミング独学中だと必ずぶち当たる画像のファイル形式について解説します。

WEB上で使用する画像ファイルの形式は、jpg, png, svgがメインです。状況により最適なファイル形式を選択できるようにしておきましょう。

続きを読む

CSS Gridで実装する爆速レスポンシブギャラリー

今日は、これぞcss grid layout を使うべきケースであるレスポンシブなギャラリーのレイアウトを紹介します。おそらく、これまでは flexbox で実装していたレイアウトでしょう。css grid layout を使用することで、  とても簡単に実装できます。そして、モバイル、タブレットなどのレスポンシブ対応に、メディアクエリーすら使う必要がなくなり、コードもだいぶスッキリするはずです。

それでは、初心者向けに詳しく解説していきます。

続きを読む

CSS grid layout の配置と間隔の調整方法【初心者向け】

今日は、css grid layoutの配置(アライメント)と間隔(ギャップ)の調整方法について整理します。

間隔の方は簡単ですが、配置は少し複雑です。毎回ググるのではなく、ここで一度 grid layout の配置をしっかりと理解しておくで、grid layout の実装をスムーズに進めることができるはずです。

初心者向けに詳しく解説していきます。

続きを読む

【初心者向け】CSS Gridの使い方

grid layout の図

今日は、初心者向けにcss gridの導入編を紹介します。ページのレイアウトを作るときにすごく便利な、フロントエンドをやる方は絶対に知っておくべき CSS のプロパティです。最近はブラウザの対応も進んできているので、マスターしておきましょう。

CSS Grid にはたくさんの機能があります。とはいえ、一度に全てマスターするのは不可能なので、今日は基本的な部分のみを紹介して、初心者が CSS Grid を使い始めることができる状態を目標に解説していきます。

続きを読む