コーディング

カンタン!CSSでフォームをレスポンシブにしよう
投稿日:2019年11月19日

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回 ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
投稿日:2019年10月4日

タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix ...

デザイン通りに近づけたい!文字に関するCSSプロパティ総まとめ
投稿日:2019年8月22日

これひとつで印象がガラリと変わる、デザインの要(と言っても過言ではないかも?)。 それが文字ではないでしょうか。 特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。 今回は、コーディ ...

脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
投稿日:2019年8月16日

突然ですが、あなたはコーダーですか?それともWebデザイナー? そして、あなたはどのくらいコーディングに自信があるでしょうか? え?「自分デザイナーなんでコーディングとか関係ないし!」という人、ちょっと待って! まだ「戻る」ボタンを押さないでください!! コーディングとデ ...

【すぐに使える】ユーザビリティ&コンバージョン向上!WebサイトのためのUI・UX改善ポイント26こ
投稿日:2019年8月5日

せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか? サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しなが ...

SVGで画像を切り抜く [クリッピングマスク] [IE含め全モダンブラウザに対応]
投稿日:2018年7月20日

更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。 ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめ ...