HTML&CSS

Visual Studio CodeでEmmetのlang属性を変更する方法〜なぜか変更できなかったら試して!

Visual Studio CodeでEmmetを使って一発でHTML基本構文を書き出せますが、初期状態ではlang属性が「en」になっています。 この初期状態を「ja」にする方法はネットに多く出回っていますが、なぜか自分はうまくいかないと諦めていませんか? 実はうまくいっているのですが、落とし穴に  >>続きを読む

CSSグリッドを可変レイアウトにする方法

CSSグリッドでレイアウトしたのはいいが、固定サイズはできたけれどもリキッドレイアウトにならないと頭を抱え込んでいませんか。 CSSグリッドは慣れると紙のデザインをやっていた人には馴染みやすいかもしれませんが、あまり細かくグリッドを作ってしまうとリキッドレイアウトにするのが大変です。 何よりも困るの  >>続きを読む

CSSのbackground-clipでテキストをグラデーションに

CSSのbackground-clipでテキストをグラデーション加工することができます。 本来は「background-clip」プロパティは、要素の背景がcolor又はimageの時、境界の下まで拡張するかどうかを指定するものです。 ところが、この値には「text」があり、この値を設定するとテキス  >>続きを読む

CSS グリッドレイアウトでコーディングするならFirefoxを使おう〜display:grid

display:gridでレイアウトするのが標準になる日も近いと思います。 さて、開発する際の検証はChromeを使う場合が多いと思いますが、グリッドレイアウトに限ってはFirefoxが強力です。 一度試してみると良いでしょう。 Firefoxの検証画面を開いて、レイアウト項目を選択します。ライン番  >>続きを読む

簡単にローカルなSASS環境構築

SASSを毎日使用するような人は自分にあった環境を作り込んでいると思います。けれども時々使いたい場合、Gulpで環境作るのは面倒だし、エディタに設定していたはずのものがなぜかうまく動かないなどと困った場合に、手軽にローカルな環境構築をする方法です。 ローカルですから対象のフォルダ内だけ有効になります  >>続きを読む

デザインカンプからコーディングで重宝するツール

デザインカンプと1pxも違わないコーディングを行うには細かな確認が必要になります。 そんな時に役立つツールの紹介です。ただし、MAC専用です。 LayerX psd形式を含めた画像ファイルを透明化してコーディングしたページと重ね合わせるとその違いが一目で確認できます。 そんな時に便利なツールが「La  >>続きを読む

Twitterユーザータイムラインを自分のホームページに表示

ここで紹介した方法は現在中止されています。 Twitterのタイムラインをホームページに埋め込む方法〜2018年更新版を参考にしてください。 Twitterのユーザータイムラインを自分のホームページに表示する方法は他のSNSに比較して簡単です。 Twitterのユーザータイムラインとは自分がツイート  >>続きを読む