シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 - ICS MEDIA
ブラウザ上で共同編集ができるデザインツールのFigma。今回は、Figmaのワークスペース（チーム、プロジェクト、ファイル、ページ等）の関係性を説明します。 Figmaのワークスペースは、課金の仕組みにも大きく関わっているため、しっかりと理解しておきましょう。デザイナーだけでなく、マネージャーなど決裁権を持つような役職の方にとっても役に立つ内容です。 全体のワークスペースイメージ Figmaのワークスペースは、チーム（Team）を中心に構成されています。チームは、複数のプロジェクト（Project）を持ち、プロジェクトは複数のファイル（File）を持ちます。さらに、ファイルの中には複数のページ（Page）を持ちます。 無料のスタータープランを利用している場合、プロジェクトは1つしか作れず、ファイルやページは3つまでしか作れません。 有料のプロフェッショナルプランを利用している場合、このよう
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
文章の品質向上に役立つ！ Figmaのプラグイン「テキスト校正くん」を公開 - ICS MEDIA
ウェブ制作の現場で一般的に使われるようになってきたデザインツール「Figma」。そのFigma上で動作する文章校正支援プラグイン「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん for Figma 本プラグインを利用することで、画面内の文章を手軽に校正でき、テキストの品質を高めることができます。 「テキスト校正くん」はテキストエディターの「VS Code」（参考）や、デザインツールの「Adobe XD」向けの拡張機能（参考）として以前から公開しており、多くの方に利用いただいています。とくにVS Code版の「テキスト校正くん」は約4万インストールも利用されており、今も利用者が増えています。「テキスト校正くん」の校正機能をさまざまなツールで利用できるよう、今回はFigma向けのプラグインとして新たに開発し公開しました。 「テキスト校正くん」でできること
ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA
画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法は、画面サイズだけでなくユーザー設定に対して挙動やスタイルを変更させることができ、ユーザービリティーやアクセシビリティーの向上に役立ちます。 本記事では事例とあわせて最近のレスポンシブ手法を紹介します。 この記事で紹介すること ダークモード対応 モーションの無効化設定 iOSのフォントサイズ変更 ダークモード対応 OSには外観モードの設定項目があります。Windows 10やmacOS、iOS、Androidのいずれもライトモードとダークモードの切り替え機能が提供されています。ライトモード・ダー
CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA
CSSのグラデーションconic-gradient()関数は、conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装できます。 ▼ conic-gradient()関数で実装したグラデーション例 ▼ conic-gradient()関数で実装した演出例 サンプルを別ウインドウで開く 本記事ではconic-gradient()関数の基本的な使い方を解説しつつ、応用的な表現やクロスブラウザ対応の方法を紹介します。 conic-gradient()関数の基礎 linear-gradient()関数・radial-gradient()関数との比較 CSSでグラデーションを実現する手段は次の3種類があります。 linear-gradient()関数： 直線状
SVGコンテンツ制作に役立つ！ 流行りのSVGライブラリまとめ - ICS MEDIA
SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し
AKB4800 | Verbatim
世界No.1記録メディア「Verbatim」の日本上陸を記念して、AKB48の未公開画像4800枚、期間限定公開中！
【ホームズ】賃貸[賃貸マンション・アパート]のお部屋探し・賃貸住宅情報
賃貸[賃貸マンション・アパート]・賃貸住宅の情報・部屋探しなら【LIFULL HOME'S/ライフルホームズ】掲載中の賃貸マンション・アパート・賃貸一戸建て[貸家]などの賃貸住宅を、住みたい沿線・駅・地域から探して、ワンルームや1LDKなどの間取り・予算に合わせた家賃・最寄り駅からの徒歩時間などの希望条件で絞込み！テーマ検索でこだわりや条件から探したり、家賃相場で家賃の安い駅や地域を探すなど、日本最大級の物件数から様々な方法でご希望の部屋を簡単に探せる賃貸情報サイトです。気になる賃貸を見つけたら、メールか電話でお問合せが可能です（無料）。賃貸の検索・部屋探しなら、賃貸情報が満載の不動産・住宅情報サイト【LIFULL HOME'S/ライフルホームズ】 物件情報管理責任者：山田 貴士（株式会社LIFULL 取締役執行役員）
キッチン・システムキッチン | TOYO KITCHEN STYLE | トーヨーキッチンスタイル
ABOUT US 「住む」をエンターテインメント キッチンは調理をするだけのものではなく、 生活を豊かにする場所であってほしい。 私たちはキッチンを中心に 住宅すべてのインテリアまでご提案します。
ブランド高価買取のジュエルカフェ
「買取を身近なものに、 気軽に足を運べる場所に」 全国250店舗のジュエルカフェで 女性スタッフがお待ちしています。 買取接客満足度 No1 「買取を身近なものに、 気軽に足を運べる場所に」 をコンセプトに全国に250店舗、 女性スタッフがお待ちしています！ ジュエルカフェは名前の由来でもあるカフェのように気軽に立ち寄っていただきたい、ゆっくりくつろいでいただきたいという想いでスタートしました。 女性のお客様でも気軽にご来店いただけるように、店内は女性スタッフ中心で明るい接客・丁寧な査定を日々努めています。 これまでに延べ300万人以上のお客様にご利用いただき、さらに多くの方がリピーターとしてもお越しくださっています。 壊れたもの、古いものでも、1点からお気軽に無料査定をご利用下さい。
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
launch
launch inc. is a brand & design consultancy based in Tokyo, JAPAN. Our site will be launched soon …
丸の内を楽しむ、今を届けるポータルサイト
令和6年能登半島地震に際して この度の「令和6年能登半島地震」でお亡くなりになられた方々に謹んでお悔やみ申し上げますとともに、被災された方々に、心よりお見舞い申し上げます。被災地の一日も早い復興を心よりお祈り申し上げます。 丸ビル・新丸ビルでは被災者支援のために館内インフォメーションカウンターにて募金活動を行っております。 お寄せいただいたご厚意は、日本赤十字社を通じて被災された皆さまにお届けいたします。 温かいご支援を賜りますよう、お願い申しあげます。
BIGI online shop
BIGIの各ブランド商品が購入できる直営オンラインショップ。BIGIグループの商品がオンラインで購入できる、BIGI直営のオンラインショップです。 ご利用にあたって ご使用のブラウザ環境では、本サイトが正しく表示できない可能性があります。 以下の注意点を確認し、必要な設定を行った上で再度表示してください。 ブラウザの JavaScript 設定を有効化してください。 最新の Adobe Flash Player をインストールしてください。 Sorry... Can't display contents correctly. This page cannot be displayed due to an internal error. To view this content, please try the following: Enable JavaScript in yo
TOKYO GIRLS PARADE | 東京ガールズパレード by TGC × Bascule
東京ガールズコレクションとBasculeがプロデュースする史上最大級のオンラインパレード、それがTOKYO GIRLS PARADE！世界をリードするのは、前向きに行動を起こすパワフルな女のコたち。女のコパワーでWEBの世界も元気にしちゃおう！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designlinkdatabase.net/datas/3045.aspx
http://www.designlinkdatabase.net/datas/2997.aspx?from=rss
Marketing Agency Blog – News & Insights – AMP Agency
HA-PY ISLAND
