コーディング | corto – デザイン制作事務所
Production Note
コンテンツの幅に合わせたサイズを指定できるfit-content。無駄なタグを省くことができて、便利に使えるこのコードを私は見出しデザインで使用しています。今回はfit-contentについて実例つきで紹介していきます。 fit-contentで背景色 中央位置に配置した見出しに背景色をつけるスタイル。<h2>や<h3>などの見出しタグを親要素の中央の位置に配置しつつ、背景…
円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 中心から放射状にグラデーションするconic-gradientを利用して円グラフを表現していきます。 円グラフ内の割合は％で指定。例では、円グラフの起点0%から60％を赤#d5525f 0% 60%、60％から100％…
ページローディングのプログレスバーをCSSアニメーションで実装する方法です。少しのコードで表現できるので実装の手間はかからず予算少なめの案件でも提案しやすいのでおすすめです。 See the Pen Loading animation by MxGRAIN (@mxgrain) on CodePen. 疑似要素.opening::beforeでローディング時の背景（デモの場合黒背景）を表示します。…
ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。 See the Pen Untitled by MxGRAIN (@mxgrain) on CodePen. ※右下の『Rerun』をクリックすると遷移アニメーションを確認できます。 animationアニメーションの設定は、3秒3s…
画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。 カルーセルの実際の動きを確認 デモを用意したのでご確認ください。 See the Pen CSS Carousel Slider by MxGRAIN (@mxgrain) on CodePen. コンテンツ…
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン 蛍光ペンのような線をひいたCSS見出しデザイン ラインを使ったCSS見出し HTML CSS 蛍光ペンで線を引いたような見出しデザインです。d…
Webサイト上にデザインとして動画を活用する例は多くなってきました。クライアントからメインビジュアルや主要セクションに動画の設置を希望されることが増えてきて、需要があることは実感しています。 ただ、動画はファイルサイズが大きくなりがちで、扱いには注意が必要な要素でもあります。今回は、Webサイト上にデザインとして動画を設置するときに気をつけたいポイントについて7つ紹介します。 動画を設置する際に気…
<head>内で最低限設定しておきたいHTMLタグを紹介します。 ほぼすべてのサイトで使用するページメタデータから、SNS用のOGP設定、コーポレートサイトやブログ記事、パンくずリストの構造化データ（JSON-LD）のをメモ。 他に実務で使用したものが出てきたら、ここに追記していきます。 サイト全般 manifest.webmanifest内の記述 Android用pngアイコンマニフ…
Web制作の現場でよく使ってきたCSSのみで実装するボタンデザインを紹介します。hover時のスタイルも合わせて公開しているので、そのまま利用することができます。主に自分用のデザインストックとして投稿しますが皆さんも使えるボタンデザインがあるかもしれません。ぜひあなたの現場でもご活用ください。 背景色と矢印のボタン ボタンデザイン シンプルな矢印と背景色の組み合わせのボタンです。 justify-…
現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウト カードUIでよくある横…
