human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
Sketchにインストールしておくと便利なプラグインのまとめ
Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にもあり、要素間のスペースを保持する、複数の要素のツラを左・中央・右・上・中央・下で揃えるなど、要素を配置するための便利な機能が備わっています。 ガイドラインの作成が簡単になるSketchのプラグイン -Measure Measure デザインのガイドラインを作成する時に面倒なのが、サイズやスタイルを調べてそれを記述することです。Measureは指定した要素のサイズやカラーなど、要素のスペックが記述で
エンジニアのための「Sketch入門！」 1時間コース - Qiita
※「Sketch」はMac専用アプリです。Windows版はありません。 「演習ファイル＋動画＋演習付き」で記事を書いてます。 エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。 Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。 ただ、学びやすいか？といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。 ハンズオン用などにご利用ください。 Sketchとは Sketchについて一応さらっと書いておきます。 ・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーション IllustratorやFireworksのようなツールです。 ・$99 買いきり(2016/02 現在） 有料です。 ちなみにApp Storeでは買えなくなりました。ショバ代かかるか
2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ - PhotoshopVIP
Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 コンテンツ目次 1. ブログコンテンツ用レイアウト 2. 名刺型レイアウト 3. グリ
縦書きでレスポンシブなブログを作った - yuhei blog
趣味で会社の人のサイトを作った。縦書きでレスポンシブなブログ。prismic.ioとNext.jsで作った。 ウェブデザインに縦書きを活かすことは難しい。部分的に取り入れることはできても、縦書きの文章を主要な要素として扱うのはかなり難がある。というのも、ウェブサイトは縦にスクロールするのが当たり前だけど、普通に縦書きで実装すると横スクロールになるからだ。 横書きでは文章は上から下に流れ、ページは縦スクロールになる。対して縦書きの場合、文章は右から左に流れるため、横スクロールになる。スクロール操作が不自然だと目に見えてユーザービリティが低下するので、どうしても当たり前のスクロールができるようにしたい。 幸い、縦書きにしながら縦スクロールにする方法はひとつある。新聞や雑誌のように段組にすることだ。 それはcolumnsを利用すれば、一見簡単にできそうな感じはする。けど、僕が望む仕様を実現しよう
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSS3を使ったちょっと便利なテクニックシリーズ - Qiita
CSS3プロパティを使った、便利な実装テクニックを随時追加していきます。 1. 並んでいる要素の最後だけスタイルを適用しない ★対応ブラウザ → 確認 リストなどでマージンを調整する際、通常は:last-childで最後の要素のスタイルを上書きすると思いますが、:not()を使うことでもっとスマートに記述できます。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
あまり知られていないBootstrapスタイルテクニック、小技16個まとめ
[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」の著者Nicholas Cerminaraより許可をもらい、ポイントをまとめて抄訳しています。Thanks again, @nickforthought!![/fancy_box] Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWeb
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド
レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
webフォントファン｜日本語webフォントwordpressプラグイン
日本語ウェブフォントでワードプレス 簡単に使えるウェブフォントプラグインの特徴 愛されるウェブページに劇的チェンジ この上のフォントはフロップデザインWEBフォントを使用 ウェブサイトのデザインは実は文字が主役です。ページのほとんどを文字が占めています。 日本語webフォントを変えるだけでサイトイメージはガラリと大きく変わります。 カンタンにワードプレスにインストール この上のフォントはうつくし明朝フォントを使用 通常のワードプレスのプラグインのようにインストールするだけの簡単設定。 上級者はCSSページで詳細にカスタマイズ設定を行うことも可能です。 ブログやウェブ制作の効率、SEOのアップ この上のフォントはスマートフォントWEBを使用 日本語webフォントなので変更の際は文字を書き換えるだけで大丈夫。 またテキストなので検索エンジンに対するSEOの向上も期待できます。 超軽い日本語ウェ
これだけでデザイン力アップ間違いなし!CSS3で作るBox Shadowエフェクト徹底解説
最近はフラットデザインに押されて急速に使われなくなった感があるCSS3エフェクトなんですが、こうも使わないと忘れちゃいそうなので、今回はCSS3で作るエフェクトの再勉強を兼ねて記事を書いていきたいと思います。 初めに引用元を紹介します Paulund 例のボックスシャドウなんですが2012年このサイトのエフェクトは日本に居るweb系の人ならば一度は見ているくらい有名になったんじゃないでしょうか? 敬意を込めて引用させて頂きます。 目次に戻る CSS ボックスシャドウエフェクト - デモ & 解説 8種類のエフェクトがどう記述されていて、それがどう表示されているのかを解説していきます。 まず初めに、そのエフェクトをかけるボックスのCSSを見て下さい。 .box { background: none repeat scroll 0 0 #F3F3F3; border-radius: 2px 2
Emmetのカスタマイズ - Atom講座 - [SMART]
スニペットの拡張 Emmetに用意された多数のスニペットは変更や削除、追加が可能でです。 スニペットの設定ファイルを直接変更することもできますが、この方法だとバージョンアップで設定が上書きされてしまったり、設定の共有がしにくいという欠点があります。 Emmetには別途拡張ファイルを用意して、拡張したい項目のみ記述することができますので、今回はこちらを紹介します。 拡張用のファイルを作成する前に、そのディレクトリの場所を指定する必要があります。 変更方法は以下の通りです。 [Ctrl] + [,] で設定画面を開き、左メニューの「パッケージ」をクリックして「インストール済みのパッケージ」画面を開きます。 テキストボックスに emmet と入力します。 検索結果に表示された emmet の枠内にある[設定]ボタンを押します。 Settingsの[Extensions Path]に任意の拡張用デ
![Emmetのカスタマイズ - Atom講座 - [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)
グラフィックツール「Sketch 3」試用版をレビュー | 毎日考
最近ワイヤーフレームばかり作っているWeb屋です。 デザインの前段階、なんの要素をどういうふうに置くかという設計書を作るときには、いつもAdobe Illustratorを使っています。 なのですが諸処の事情でAdobe CCを購入する時期を迷っておりまして、仮にイラレがないとしたらワイヤーフレームは何で作るかなー と。（Prototyper もなかなか使えるのですが、少々もたつくのが…） そうしたら数日前にばんくーばーのうぇぶ屋さんで見かけた（とりあえずひと通り知っておこう！2014年の気になる物を色々試してリニューアルしてみた制作の流れ！）「Sketch」というキーワード。イラレの代替にもなり得るアプリケーションらしい。購入するならMac App Storeだけれど、公式サイトから14日間の試用版がダウンロードできるので使ってみたのよ。 Sketch 3 価格: ￥7,800, 開発:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
