[B! デザイン] oniipoooonのブックマーク

現場で使えるFlexboxレイアウト12選 | BUILD Journal

現場で使えるFlexboxレイアウト12選Update2023.05.12Release2021.06.24Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する現場で使えるFlexboxレイアウトを12パターン紹介します。flexboxを紹介する記事はたくさんありますが、知識のみで実例付きで紹介されているページはあまり見かけなかったので、本記事にて詳しく紹介していきます。 flexboxに慣れていない方だけではなくコードを短縮化させたい方も対象の内容となっております。ぜひご一読ください。 flexboxを使った横並び1行レイアウトflexboxを使った横並び1行レイアウトカードUIでよくある横並び1行レイアウトのFlexbox実装。同じ横幅のカードを等間隔で配置するもので、間の余白ももちろん等間隔。これを使う機会は多いので確実

oniipoooon 2021/06/25

リンク

サイエンスフロンティア高校のポスターに学ぶ！グラフィックデザイン基本の「き」｜いなにわうどん

メロスは激怒した。必ず、かの邪智暴虐のクソポスターを除かなければならぬと決意した。メロスにはデザインがわからぬ―― はじめまして、いなにわうどんと申します。はてなブログ民である私が note などという意識高いサービスを利用する日が来るとは思いもしませんでしたが、この度、街頭で見掛けたデザインに強い憤りを感じたため、初 note に挑戦した次第です。フロンティアとはさて先日、友人と母校の中学を訪れた際、ある高等学校のポスターの鮮烈なデザインに衝撃を受けました。その名も「横浜市立横浜サイエンスフロンティア高等学校｣。開校時に 96 億円もの巨額資金が投入されたこともあり、NHK ニュースでも特集が組まれたほどの特色豊かな学校です。日本で初めて「サイエンス」の校名を冠した、いかにも 21 世紀っぽい高校のポスター。一体どのようなデザインに仕上がっているのでしょうか。「――――1周回ってフロ

oniipoooon 2019/06/04

デザイン

リンク

Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UX エンジニア。機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。