誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
PowerPointやExcelの図形を別の図形に変更する方法
PowerPointやExcelの図形を別の図形に変更する方法を紹介します。 １．問題点 PowerPointやExcelで図形オブジェクトを置き、その中にテキストを書くことがあります。 が、途中でこの図形を変更したいこともあると思います。 図形を変更するには下記のような手順で変更しています。 図形の中のテキストをコピー。 図形を削除。 新しい図形を配置。 図形にテキストをペースト。 実際にはこれだけではなく、テキストの配置位置やフォントサイズも修正する必要があります。 図形の形を直接変更できれば手間が省ける気がするのですが、方法が分かりません。 ということで、PowerPointやExcelで図形を変更する方法を紹介します。 ここではExcelを利用していますが、PowerPointでも同じ操作で行えます。 ２．図形を変更する 図形を変更するには、まずオブジェクトを選択。 「描画ツール」
PowerPointで複数の図形の位置を揃える方法
PowerPointで複数の図形の位置を揃える方法を紹介します。 １．問題点 次のような3つの図形があります。 （クリックで拡大：以下同様） この3つの図形を中央で揃えたいのですが、方法が分かりません。 ２．図形の位置を揃える（その1） まずひとつめの方法です。 3つの図形をすべて選択します。 「ホーム」タブをクリック。 「配置」をクリック。 「オブジェクトの位置」→「配置」→「左右中央揃え」をクリック。 これで中央揃えができました。 ２．図形の位置を揃える（その2） もうひとつの方法はオブジェクトをひとつずつドラッグしながら揃える方法です。 PowerPoint2007以降であれば、図形をドラッグすると他の図形との位置関係を点線で表示してくれるようになりました。 スクリーンショットに表示されている点線は青いオブジェクトの中央を指すので、これに黄色のオブジェクトの中心を合わせます。 同じよ
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
CSS3 Simple Shapes - Cheat Sheet - Land-of-Web
Recently, I`ve decided to make cheat sheet dedicated to simple shapes that can be made only by means of CSS3. I`ve used only instant description. Since I`ve included majority of simple shapes like squares, circles, triangles, ovals etc, you can easile combine some of these in order to make complicated shape using :before or :after content-related pseudo “elements”. If you have some questions or su
[CSS]正方形・ダイアモンド・台形・三角形・円・ハートなどを作り出すスタイルシートのまとめ
HTML <div id="square"></div> CSS #square { width: 100px; height: 100px; background: blue; } Diamond: ダイアモンド HTML <div id="diamond"></div> CSS #diamond { width: 80px; height: 80px; background: blue; margin: 3px 0 0 30px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Excel】表を図として貼り付けると修正が大変……エクセルでもとになった表を更新すると自動更新される図を簡単に貼り付けるテク（Impress Watch） - Yahoo!ニュース
http://www.css3shapes.com/
[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
IDEA * IDEA
IDEA * IDEA