MxGRAIN Journal – MxGrain – デザイン制作

CSS見出しデザイン21選

CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML CSS 蛍光ペンで線を引いたような見出しデザインです。d…

CSS見出しデザイン21選のサムネイル画像

Web制作の現場で使える無料のWebサービス13選

CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radiu…

Web制作の現場で使える無料のWebサービス13選のサムネイル画像

配色ツール8選。簡単に使える配色ジェネレーターをあつめてみた

デザイン作成時に悩みがちな色選びを助けてくれる配色ツールを8つ紹介します。Web上で生成するジェネレーターだけではなく、Chrome拡張機能やiOSアプリもありますのでぜひチェックしてみてください。 配色ジェネレーター – Colormind 『Generate』ボタンをクリックするたびに色パターンを作成してくれる配色ジェネレーターのColormind。写真、映画、アートからカラースタ…

配色ツール8選。簡単に使える配色ジェネレーターをあつめてみたのサムネイル画像

見出しに使えるfit-contentを解説してみる

コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。 fit-contentで背景色 中央位置に配置した見出しに背景色をつけるスタイル。<h2>や<h3>などの見出しタグを親要素の中央の位置に配置しつつ、背景…

見出しに使えるfit-contentを解説してみるのサムネイル画像

ページローディングのプログレスバーをCSSアニメーションで実装する

ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。 See the Pen Loading animation by MxGRAIN (@mxgrain) on CodePen. 疑似要素.opening::beforeでローディング時の背景(デモの場合黒背景)を表示します。…

ページローディングのプログレスバーをCSSアニメーションで実装するのサムネイル画像

ページ遷移時のフェードインアニメーションをCSSのみで実装する

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。 See the Pen Untitled by MxGRAIN (@mxgrain) on CodePen. ※右下の『Rerun』をクリックすると遷移アニメーションを確認できます。 animationアニメーションの設定は、3秒3s…

ページ遷移時のフェードインアニメーションをCSSのみで実装するのサムネイル画像

円グラフをCSSのみで表現する

円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 中心から放射状にグラデーションするconic-gradientを利用して円グラフを表現していきます。 円グラフ内の割合は%で指定。例では、円グラフの起点0%から60%を赤#d5525f 0% 60%、60%から100%…

円グラフをCSSのみで表現するのサムネイル画像

CSSのみでカルーセルスライダーを実装する

画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。 カルーセルの実際の動きを確認 デモを用意したのでご確認ください。 See the Pen CSS Carousel Slider by MxGRAIN (@mxgrain) on CodePen. コンテンツ…

CSSのみでカルーセルスライダーを実装するのサムネイル画像
お問い合わせ