この本を読んだら、Stable Diffusionで画像生成を思い通りにできるようになった！ かなりお勧めの解説書です -Stable Diffusion画像生成［本格］活用ガイド
※本ページは、アフィリエイト広告を利用しています。 「はじめてでもここまでできる」の本書タイトル通り、読んで3時間ほどでStable Diffusionの画像生成を思い通りにできるようになりました！ Stable Diffusionでどんなことができるのかは知っていましたが、実際に自分のPCにセットアップし、プロンプトによる画像生成をはじめ、色塗り指定や画風指定、キャラをAIに学習させての画像生成までできました。Stable Diffusion初心者の人にお勧めの解説書を紹介します。 また、少しやってみたけどTextual InversionやControlNetやLoRAなどがうまく使えない、そんな人にもかなりお勧めです。 本書は「はじめてでもここまでできる」というタイトル通り、初心者向けの解説書です。そして「本格活用」とあるように、ただ使えるようになるだけでなく、塗りの書き込み感、色塗
CSSの新しい単位（lvh, svh, dvh)がすべてのブラウザでサポート、100vhがビューポートの高さいっぱいにならない問題を解決
Safari, FirefoxでサポートされていたCSSの新しいビューポート単位「lvh」「svh」「dvh」などが、ついにChromeでもサポートされました！ CSSの新機能で、Chromeが一番最後というのは珍しいですね。 最も活躍するのがiOSのSafariだからでしょうか。とはいえ、主要ブラウザすべてにサポートされるようになるのは、嬉しいニュースです。 画像: @bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新しいビューポート単位「lvh」「svh」「dvh」とは ブラウザのサポート状況 はじめに W3CのCSS Values and Units Module Level 4で、ビューポート単位についていくつか仕様が変更されました。Large、Small、Dynamicといったビューポートサイズ
CSSの変数（カスタムプロパティ）が期待通りに動作しないときの解決方法
CSSの変数（カスタムプロパティ）は、IEを除くすべてのブラウザでサポートされており、実際のプロジェクトで使用している人も増えてきたと思います。 CSSの変数は非常に便利で使いやすいのですが、期待通りに動作しないときの解決方法を紹介します。 The Big Gotcha With Custom Properties by Chris Coyier CSSの変数（カスタムプロパティ）の基礎知識、便利な使い方は以前の記事をご覧ください。 CSSの変数（カスタムプロパティ）便利な使い方を詳しく解説 CSS変数の優れた使い方、コンポーネントのバリエーションを実装するのに役立つ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの変数（カスタムプロパティ）が期待通りに動作しない！ 解決方法 1: 変数を使用する場所にスコープを設定する
Chromeに実装される新機能『loading属性』について解説、ついにブラウザがネイティブで遅延ロードをサポート
Google ChromeのEngineering ManagerであるAddy Osmani氏による、Chrome 75でリリース予定のloading属性についての解説を紹介します。 loading属性とはブラウザがネイティブで遅延ロードをサポートするもので、img要素やiframe要素を簡単に遅延ロードさせることができます。以前は、lazyload属性として開発されていましたが、loading属性という名前に変わる、とのことです。 Native image lazy-loading for the web! by Addy Osmani 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Chrome 75でリリース予定のloading属性 ブラウザがネイティブで遅延ロードをサポート loading属性とは loading属性の
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
Vue.jsとNuxt.jsを使用して、Webページのページ遷移に気持ちいいアニメーションを与えるチュートリアル
Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方
こんなにも違う！同じ被写体なのに、アマチュアとプロのカメラマンでどのように違って写真が撮影されるのか
何気ない日常の中でも、別の視点から見ることで、印象が変わります。 同じ被写体をアマチュアとプロのカメラマンで、どのように違って見えて、写真が撮影されるのか、印象的な写真を撮る秘訣を紹介します。 Phillip Haumesser Photography Amateur Vs. Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、作者様にライセンスを得て翻訳しています。 約2年前、私は周りの美しさに気づかずに、多くの人と同じように日常の生活を過ごしていました。そんなある日、カメラを手に取り、子ども達の写真を撮り始めると、まったく新しい世界が見え始めたのです。それが見えた途端に、見逃すことができなくなりました。 被写体に光がどのように影響を与えるのかが分かり、同じ被写体でも別の視点から見ることで、全体の印象が変わることに気がつきました。 世界は美しさにあふれ、色鮮やかに伝え
ひと昔前といろいろ違う、Webサイトを公開した時に確認しておきたい項目のまとめ -Web Launch Checklist
Webサイトを公開した時に、サイトのパフォーマンス、SEO、セキュリティ、アクセシビリティ、コンテンツ、機能性の面から確認しておきたい項目がまとめられたチェックリストを紹介します。 2017年、最近のWebのテクノロジーや制作事情をふまえたものとなっており、ひと昔前とはいろいろ変化しています。 イラスト: Girls Design Materials 「Web Launch Checklist」は2017年最近のWeb制作事情をふまえて、サイト公開時の確認事項をまとめたものです。 確認項目は6つにカテゴリ分けされており、それぞれ最新の動向が取り入れられたものとなっています。 Web Launch Checklist Web Launch Checklist -GitHub そのまま利用してもよし、また編集して自分用のリストを作成することもできます。 パフォーマンスで確認したい項目 SEOで
WordPressでページごとに自由なレイアウトを作成できる便利なプラグイン「Elementor」 -レスポンシブ対応で高性能、しかも無料！
WordPressのどんなテーマファイルでも、どんなページでも、どんなデザインでも、ページごとに自由なレイアウトを作成できる便利なプラグインを紹介します。 これ系のプラグインは有料が多いですが、レスポンシブ対応で高性能、そして無料というのはありがたいですね。 Elementor Elementor -wordpress.org Elementorの特徴 Elementorのインストール・使い方 Elementorの特徴 Elementorは、どんなテーマファイルを使っていても、どんなページでも、どんなデザインにでも適用できます。 大きな特徴はコードの知識は不要、ドラッグ&ドロップで要素やコンポーネントを配置し、簡単に調整できます。 自身のブログやポートフォリオに使ってもよし、クライアントが自由にレイアウトをしたい時にもいいですね。
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
全36種、紙やノートの端が少しめくれたPhotoshop用のPSD素材
商用でも無料で利用できる、端が少しめくれてカール状になっている紙やノートのPhotoshop用のPSD素材を紹介します。
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
リリースされたばかりのjQuery 1.7.1に対応したチートシート
先月、リリースされたばかりのjQuery 1.7.1に対応したチートシートを紹介します。 即ダウンロード、即保存ものですね。 jQuery 1.7 Visual Cheat Sheet [ad#ad-2] jQuery 1.7.1は1.7のバグフィックス版で、リリース情報は下記をご覧ください。 jQuery 1.7.1 Released jQuery 1.7 Released jQuery 1.7のAPIで大きく変わったのは、.on(), .off()が追加されたことです。これは既存の.bind(), .unbind()に代わるもので、他にも.on()は.delegate(), .live()、.off()は.undelegate(), .die()に代わります。 これらは1.7.1でも利用できますが、これからは.on(), .off()を使用することが推奨されています。 チートシートでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCodeを使う人におすすめの解説書！ Web制作の効率アップにつながる操作方法を詳しく解説 -Visual Studio Code完全入門
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
純利益をあげているEコマースTOP100サイトに見る、購入フローの全ステップをキャプチャでおさめたまとめ
Bootstrapをもっと活用するためのカスタマイズツールやリソースのまとめ