開発環境
テキストエディタ
WEBサイトのコーディング開発に必要なテキストエディタの紹介。
様々なテキストエディタがある中でおすすめのエディタやより便利にするための使い方プラグインなどを紹介しています。
より楽に高速にコーディングしよう。
・サイトコーディングにオススメのテキストエディタ『Sublime Text3』
制作
WEBサイトを作る方法やより効率よく作る方法を紹介。
これから自分のWEBサイトを作りたい方・サイトをカスタマイズしたい方、HTMLコーダーやフロントエンドエンジニアを目指している方のために記事を公開しています。
HTML
WEBサイトの基本の「HTML」について。
WEBサイトのベースであるHTMLの書き方や勉強方法などを公開しています。
基本が分かれば次にどうすれば早くなるのか製作速度を早くするための方法を紹介しています。
・【サイトの作り方】HTML5でサイトを作ろう！【準備編】
・【サイトの作り方】HTML5でサイトを作ろう！【HTML基礎編】
・【サイトの作り方】HTML5でサイトを作ろう！【HTML基礎編２】
・高速コーディング「Emmet」を覚えよう！【HTMLコーダー・WEBデザイナー】
CSS
CSSについて。
WEBサイトのデザイン・レイアウトの調整で使われるCSSの書き方などを紹介しています。
今ではデザインを整える以外にアニメーションの作成などできることが増えています。
HTMLと合わせてよりこったWEBサイトを作ったり、カスタマイズする方法を紹介しています。
・CSSを書く際に気をつけていること
アニメーション・ホバー（hover）
今までjQueryやjavascriptを使わないといけなかったものがCSSのみでできるようになってきています。
CSSを使いアニメーションを付ける方法を紹介しています。
・ホバー（hover）時に動きのある下線を入れる方法【CSSのみ】
・CSSのみでリンクのボタンにアニメーション付きホバーエフェクトを付けてみた
レイアウト
CSSを使ってWEBサイトのレイアウトを整えるためのテクニックを紹介。
CSSでのデザインの変更の方法やCSSだけでできるレイアウトテクニックを紹介しています。
上下・左右・中央に要素を配置するCSSテクニック
セレクトボックスの矢印を消す方法【Chrome・IE・Firefox】
テキスト系
WEBサイトのテキストの装飾などのテクニックを紹介。
CSSでできる装飾を紹介します。
テキストをCSSで両端揃えにする方法
画像系
WEB上でできる画像加工を紹介。
CSSだけでできる画像加工やトリミング方法を紹介しています。
CSSで画像トリミング！IE11での実装方法【object-fit】
チェック
WEBサイトを作ったあとに行う動作チェックや各項目のチェックを楽にするためのツールや方法を紹介。
より品質の高いWEBサイトにするためにチェックしておきたいポイントを抑えよう。
・Altチェックを簡単にできるChrome拡張機能「Alt & Meta viewer」