戦闘画面を劇的カスタマイズ：MOG Battle Hud Templates 日本語化パック - RPGツクールMZ・MV初心者的備忘録 - FGMG (Fun Game Make Group)
mogplugins.wordpress.com/rpg-maker-mv/ で配布されているサンプルプロジェクト内の「BattleHud_Templates」は戦闘画面をカスタマイズする MOG Battle Hud プラグインの使用例としてのテンプレートです。 基本的にはフロントビュー戦闘を前提としているようです。 （サイドビューでも問題なく動作します） 「BattleHud_Templates」への日本語化パッチとして、下記処理をしたものを再パックしました。 日本語化プラグイン 日本語化最新版MOG_BattleCommands.js （本家でダウンロードしたテンプレートに含まれているプラグインのバージョンは古いです） 顔画像に著作権に問題があるものの差し替え用の画像 サンプル画面の画像 テンプレートを入れただけだと、「BattleHud_Templates」に入っているPrevie
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
雑誌のようにめくって閲覧できるアニメーションテンプレート「Page Flip Layout」
コンテンツをクリエイティブにデザインするために、アニメーションを用いたレイアウトを取り入れることはとても効果的です。今回は雑誌を読むようにページをめくって閲覧できるアニメーションテンプレート「Page Flip Layout」をご紹介します。 ファッション雑誌のように美しく写真をレイアウトすることができ、アニメーション効果でデザインをリッチにすることができます。 詳しくは以下 ページレイアウトは見開きで作成され、ページ数の計算やインデックスも自動作成されます。画像のページ右にある青いラインからインデックスを閲覧でき、見たいページにジャンプすることや、すべてのページをCSSグリッドベースでカスタムすることもできます。ただし、旧ブラウザでは最新のCSSを利用できない場合があるので注意が必要です。 アニメーションテンプレートを使うことで、デザインを簡単に見やすく、美しくグレードアップすることがで
margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス
Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの変数を使用して、スペースのシステムを設定する方法 すべてのコンポーネントにデフォルトのpaddingを設定する方法 marginのユーティリティ スペース値を追加する場合 固定のスペース値が必要な場合 スペースを定義したSCSSファイル はじめに 元々は、近日公開予定の「Web Comp
CSS Gridでレイアウトする時はこのプロパティが重要！「grid-template-*」と「grid-auto-*」の使い方を解説
CSS Gridはブラウザのシェアも87.85%に達し、そろそろ、そして既に採用している人も多いと思います。そんなCSS Gridのレイアウトで混乱させる2つのプロパティについて、その明確な違いと使い方を紹介します。 Understanding the difference between grid-template and grid-auto 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridのレイアウトで混乱させる2つのプロパティ 明示的および暗黙的なグリッドシステムとは 「grid-template-*」と「grid-auto-*」の違い 明示的および暗黙的なグリッドの仕組み 要約 CSS Gridのレイアウトで混乱させる2つのプロパティ CSS Gridのレイアウトで私を混乱させるプロパティは「grid-t
レイアウトを司る新しい風「CSS Grid Layout Module」を触ってみる（第一回） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。脳みその間取りはワンルーム、フロントエンド担当のザワです。 今回、シリーズで取り上げるのは「CSS Grid Layout Module」。その名を初めて聞いてからしばらく時が経った気がします。名前が出始めた当初は、対応ブラウザがまだ不十分に思えたので、案件に取り入れるのはまだ先の話かと聞き流していました。 しかし、最近になっても私のRSSリーダーを賑やかしていたので、そろそろ何者なのかくらいは知っておいても損はないかなと思った次第です。 ネットでいろいろなドキュメントをざっくり見ましたが、私の脳みそでは難しいという所感でしたので、概念的なところをざっくり把握し、簡単なレイアウトをさっそく組んでみたいと思います。 CSS Grid Layout Moduleとは CSSのdisplayプロパティの新しい値です。レイアウトを作る際に使用します。 display: grid; 何が
★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス
高さが分かってるフッタ、高さが不明なフッタをコンテンツ量が少ない時は最下部に表示、コンテンツ量が多い時は成り行きで表示させるスタイルシートのテクニックを紹介します。 ちょっと前のテクニックから、calc()やflexboxなど最新のテクニックまで、5つの方法を紹介します。 Sticky Footer, Five Ways 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づき、翻訳しています。 1. ネガティブマージンを使ってフッタを最下部に実装 その1 2. ネガティブマージンを使ってフッタを最下部に実装 その2 3. そのままのHTMLにcalc()を使ってフッタを最下部に実装 4. 高さが不明なフッタを最下部に実装(flexbox) 5. 高さが不明なフッタを最下部に実装(CSS Grid Layout) 1. ネガティブマージンを使ってフッタを最下部に実装 その1
![★★[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7aa23551455018127a28922baa59c9101c06511/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061701.png)
[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス
子要素を親要素の左右の中央寄せに配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置 単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置 「position
![[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d75cae53539751ed241ff7fd5eff2888b39e2ecd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022501.png)
CSS Grid Layoutをガッツリ使った所感 - Qiita
この記事は、加筆して「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に引っ越しました。 引越し先の記事では CSS Grid Layoutを使ってよかったこと 逆に苦労したこと、解決できなかったこと IE 11対応には工夫が必要 Autoprefixerの最新版を使えば、IE 11向けのコードに変換してくれる という内容をまとめています。 ※Google検索で辿り着いた方がリンク切れだと申し訳ないので、投稿は残しておきます。 Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat yo
CSS Gridはレスポンシブ対応のよく使うレイアウトにも便利！効果的に使用するポイントのまとめ
CSS Gridは今までに出来なかったレイアウトを実装するだけでなく、既存レイアウトをより簡単に実装する能力も備えています。サポートブラウザも十分になり、そろそろ既存レイアウトの実装方法を見直すタイミングかもしれません。 CSS Gridを使用して、3カラムや画像ギャラリーやカード型など、レスポンシブ対応のレイアウトを実装するテクニックを紹介します。 Common Responsive Layouts with CSS Grid by @samsunginternet 下記は元記事のデモをピックアップしたものです。 ※作者様にライセンスを得て掲載しています。 CSS Gridで実装するヒーローイメージを備えた、3カラムのレイアウト CSS Gridで実装する画像ギャラリーのレイアウト CSS Columnで実装するカード型レイアウト CSS Gridで実装するヘッダ・フッタ付きの3カラムの
WebPとLazyLoadを使って表示速度を向上させる 東京新宿のホームページ制作会社イッティ
売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください
CSS グリッドレイアウト - CSS: カスケーディングスタイルシート | MDN
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
CSS Grid Layout を極める！（場面別編） - Qiita
0. はじめに この記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。 この記事は4部構成の中の 場面別編 です。 CSS Grid Layout を極める！（基礎編） CSS Grid Layout を極める！（場面別編） ←これ 作成中：CSS Grid Layout を極める！（アルゴリズム編） 作成中：CSS Grid Layout を極める！（番外編） トラックの大きさを柔軟に指定したい (grid-template-rows / grid-template-columns) トラックの幅・高さの指定は grid-template-rows / grid-template-columns で行いました。 基礎編では px を主に使いましたが、他にも様々なものが使えます。そして、以下で挙げる値は自
Flexboxのプロパティ紹介 - HTML・CSSテックラボ - [SMART]
例 .flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; } stretch flex-start flex-end center space-between space-around Flexアイテム flex-grow -Flexアイテムの伸長率 flex-growプロパティは、Flexアイテムの伸長係数（伸びる倍率）を設定します。 Flexコンテナに空いた空間がある場合、Flexアイテム毎のflex-growプロパティの値を元に、余白をうめるように自動的に広さが調整されます。 値に指定できるのは単位を含めた数値で、マイナスの値は無効です。 デフォルト値は0になります。 div{ -webkit-flex-grow: 0; flex-grow: 0; } div:fi
![Flexboxのプロパティ紹介 - HTML・CSSテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
意外と知らない!?高さを揃えるコーディング方法 | サイドスリーブログ
webデザイナーのむーみんです。 横並びしているボックスの文字数で高さが揃わないのは嫌だなあ・・・jsでやろうかなっと思ったりする方も多いと思いますが、HTMLとCSSでできちゃう簡単な方法を2つご紹介したいと思います。 HTML <ul> <li>文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> <li>文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。文字数ばらばらのテキストが入ります。</li> </ul>
5分で完璧に分かる！CSS Gridの基本的な使い方を解説
CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
若者はリンクもスクロールも嫌――記事の体裁が新鮮すぎる「BuzzFeed Kawaii」に聞く、ミレニアル世代のネットメディアへの接し方
CSS GridとFlexboxで役立つチートシート、各プロパティの役割がぱっと見てすぐ分かる簡単便利
1カラムレイアウトはもはや王道! Webサイトデザインの基本を解説 | Webデザイン、これからどうなるの？（全10回）
Should I try to use the IE implementation of CSS Grid Layout? – Rachel Andrew
