はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。
［速報］Google、Geminiベースの新WebIDE「Project IDX」をオープンベータで公開 Googleは同社の最新生成AIであるGeminiをベースとした新しいWeb IDE「Project IDX」をオープンベータとして公開しました。 Project IDXは、モバイルやデスクトップなどのマルチプラットフォームに対応したフルスタックのWebアプリケーションを、さまざまなフレームワークや生成的AIの支援などを活用して効率的に開発するための、Webブラウザから利用可能な統合開発環境です。 これまでその存在は発表されていましたが、招待されたユーザーのみが利用可能でした。 We want to make generative AI accessible to every developer on the planet. That’s why we’re making Gemini
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
意味わからんからやめてほしい こういうやつ ・りんご ・バナナ ・マンゴー ・みかん ・グレープ パット見でみかんが選択されてるように見えるか？？ ＿＿＿＿ え、知らんの？ちょいちょい見かけるけど 最近見たのだと、Candy Appleの看板 これは選択として使ってないけど 「CUT TAKE or TAKE OUT」となってる https://www.google.com/maps/place/%E4%BB%A3%E5%AE%98%E5%B1%B1Candy+apple+%E6%9C%AC%E5%BA%97/@35.6520479,139.7046341,3a,75y,90t/data=!3m8!1e2!3m6!1sAF1QipPjZgtXp99lwBvTPZzpF3Jm3vJt2INLCw4M-JRO!2e10!3e12!6shttps:%2F%2Flh5.googleusercont
Home » VTuber向けツール「Webcam Motion Capture」がWebカメラによるフルトラッキングに対応 実際に試してみた VTuber向けツール「Webcam Motion Capture」がWebカメラによるフルトラッキングに対応 実際に試してみた 3Dモデル向けモーションキャプチャーツール「Webcam Motion Capture」に、Webカメラを使ったフルトラッキング機能（β版）が実装されました。これにより、自分の全身の動きをアバターと同期し、VTuber活動などに利用できます。 現在体験版が無料公開中（正式版は月額199円で使用可能）。本格的な3DモデルをWebカメラでどれだけ動かせるのか。実際に試してみました。 お手軽にフルトラッキングを体験 「Webcam Motion Capture」は2021年にリリースされた、AIを搭載したトラッキングツール。3
inline-block を使う理由、それは 入れ子構造を作れることにより、改行位置の優先順位をつけられるから！ 詳しくは以降で説明します。 （前提）そもそも改行調整ってなんの話？ このタイトルを見て記事を開いた方であれば知っていると思いますが、一応説明です。 スペースで単語が区切られる欧文とは違い、日本語は単語の区切りがないので、改行すべき位置を機械的に判断できず、不自然な位置で改行されてしまうことがあります。そこで、見た目を整えるため、改行すべき位置を指定するための手法が必要になります。 他に詳しい記事がいくつもありますので、詳細はそちらを参照してください。 代表的な改行調整の手法 <wbr> 要素 <wbr>要素は、改行してよい位置を表す要素です。 親要素に対して word-break: keep-all; を指定して基本的には改行されないようにすることで、<wbr>要素がある位置で
このページでは、好きな２色から成るグラデーション画像を、指定したサイズで作成することができます。 ちょっとしたデザインの背景画像にしたり、PCやスマホの壁紙作成などの用途にご利用ください。 透明や半透明を指定することもでき、不透明色から次第に透明色になっていくようなグラデーションも作成可能です。 線形（縦方向に色１→色２）、円筒形（縦方向に色１→色２→色１）、円形（中心から外側）のグラデーションに対応しており、回転させることもできます。 色を選ぶ際は、「塗りつぶす色」の欄にある色付きのセルをクリックして、カラーピッカーを開いて好きな色を指定してください。 カラーピッカーの中にパステルカラーが数種類セットされており、隣同士のパステルカラーを選ぶと綺麗に仕上がりやすいです。 細かい色合いを自由に指定することもできます。 色相（赤い、黄色いなど）を選ぶ際はカラーピッカーの右端から２番目にあるスラ
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
インターネット上ではさまざまなフォントが配布されていますが、何となく使用したいフォントのイメージはあるものの正式名称がわからなかったり、フワッとしたイメージしかなくてどうやって検索すればいいかわからなかったりといったケースはよくあるもの。そんなフォント選びに困った場合に役立つ、書体やイメージワードから300個の日本語フリーフォントを絞り込み検索できるサイトが「モジザイ」です。 モジザイ https://www.mojizai.com/ モジザイを開くとこんな感じ。 モジザイでは「書体から検索」と「イメージワードから検索」があり、それぞれ表示されているタグを選択することでフォントの検索ができます。試しに「明朝体」をクリック。 スクロールすると、明朝体のフォントが絞り込まれて表示されました。記事作成時点では、モジザイでは362種類のフォントへのリンクが含まれており、そのうち明朝体は31件ヒット
【更新情報】 2024年5月31日（金）：「お問い合わせについて」を追記しました。 2024年3月7日（木）：「一部のApple ID支払いのプレミアム会員」における料金改定日の変更に関する対応について追記しました。 2024年2月19日（月）：「一部のApple ID支払いのプレミアム会員」における料金改定日について追記しました。 2024年2月8日（木）：「プレミアム年額払い えらべる特典キャンペーン」の終了時間に変更があります。詳しくはキャンペーンページをご確認ください。 2024年1月24日（水）：「OCNニコニコ動画プレミアム」サービスの提供終了について追記しました。 2024年1月15日（月）：料金改定にともなうニコニコチャンネル同時入会に関するメンテナンス開始時間の変更について追記しました。 【2024/3/7 15:00追記】 いつもニコニコをご利用いただき、ありがとうござ
「どうすればAIをWebデザインに活用できるだろう」 人工知能AIがこれだけ話題になったいま、Webやグラフィックデザイン、イラストやゲームなどクリエイティブな業務をこなす人なら、一度は考えたことがあるかもしれません。 答えのひとつはずばり、Midjourneyなどの画像生成AIでイメージを具現化すること。 しかし、そうは言っても入力できるプロンプトは無限にあり、実際にどのように入力すれば最高の結果を得ることができるのか、すべて調べるのはあまりにも大変です。 そこでこの記事では、Midjourneyを１年間使い続けて見つけた、Webデザインに使えるMidjourneyプロンプト、小技テクニックをまとめてご紹介します。 具体的なサンプル例とプロンプトを一緒に記載しており、コピペでそのまま利用できます。 「Midjourneyって何？」というひとは、基本の使い方をまとめた以下のガイドを参考にど
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
雑誌記事の切り抜き、インターネットへの書き込み、個人へのインタビュー。 パラパラと語られる個別の怪談が、川の支流のようにいくつかの流れに沿って紐づけられて行き、やがてぼんやりとした輪郭が浮かび上がってくる。 個々の話の怖さやリアリティも素晴らしい上に、全体の構成や、ネット小説という媒体をフル活用したストーリー展開に完全に引き込まれました。 続きが気になり一気読みしたい衝動に駆られながらも、一話進むごとにこれ以上先へ行っては行けないのでは？という不安に襲われるという、滅多にない体験でした。 大変面白かったです。書いてくださってありがとうございます。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか？今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ？最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ！」官公庁のサイトですよ？官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン
7z, zipx, rar, tar, exe, dmg, iso, zip, msi, nrg, gz, cab, bz2, wim, ace, adf, alz, ar, arc, arj, bin, cdi, chm, cpt, cpio, cramfs, crunch, deb, dd, dms, ext, fat, format, gpt, hfs, ihex, lbr, lzh, lzma, lzm, mbr, mdf, nsa, nds, nsis, ntfs, pit, pak, pdf, pp, qcow2, rpm, sar, squashfs, squeeze, sit, sitx, swf, udf, uefi, vdi, vhd, vmdk, warc, xar, xz, z, zoo, zi, jar and more
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
