Home > スポンサー広告 > HTMLでモックを組み立てるときに便利なウェブサービス+α

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/125-f5452fc4
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > HTMLでモックを組み立てるときに便利なウェブサービス+α

Home > ユーティリティ > HTMLでモックを組み立てるときに便利なウェブサービス+α

HTMLでモックを組み立てるときに便利なウェブサービス+α

top.jpg

HTMLでモックを立てたり、仮の情報が多くてもとりあえず組まないといけない状況のときによく使うのだけど、なんだか分類分けがうまくできなくて、いつも検索しちゃう。そんなウェブサービスをまとめました。ちょっと地味目だけど、すごく役に立ってます。

プレースホルダ作成サービス


ざっくりとコーディングを先にやっちゃいたいときにすごく便利なプレースホルダサービス。ダミー画像を作成してくれます。

http://placehold.jp/{幅}x{高さ}.png

にて、画像を呼び出せます。

Placehold.jp
http://placehold.jp

HTML特殊文字変換ツール


ブログでソースコードを掲載したいときに便利な特殊文字変換ツール。

<HTML> →&lt;HTML&gt;

にサクッと変換してくれます。

HTML特殊文字変換ツール
http://tech-unlimited.com/escape.html

ウェブフォントでアイコンを使う(font awesome)


該当CSSファイルを読み込んでから、

<i class="fa fa-angellist"></i>

でアイコンを呼び出します。

font awesome
http://fontawesome.io

フリー写真素材(日本風)

海外風のおしゃれな乾いた光の感じでなくて、日本独特の色合いや空気感を持つ写真がたくさんあるので、使いやすいフリー写真素材を提供してくれるサイトです。

写真素材 足成
http://www.ashinari.com

カルーセルなスライドを作りたい(レスポンシブ対応)

レスポンシブ対応だけど、表示幅固定もちゃんとできて、そこそこ軽量?なカルーセルスライドプラグイン。

Owl Carousel(ver 2.0.0 beta)
http://www.owlcarousel.owlgraphic.com

Owl Carousel(ver 1.3.2)
http://www.owlgraphic.com/owlcarousel/

ダミーテキスト(日本語)

日本語版 Lorem ipsum です。いろいろ設定できるので、便利。

すぐ使えるダミーテキスト
http://lipsum.sugutsukaeru.jp


モックといっても、既存デザインがあっての、CSSデザインする前のHTMLなどにも使えます。いつもお世話になっています。ありがとうございます。

お話ちょっとずれますが、HTMLファーストでデザインすると、自由に画像を調整できるphotoshopが恋しくなります。photoshopカンプファーストでやると、繰り返し要素などで「これ、CSSなら一発なのに」って思ったりします。そのあたり、もっと近くなるような技術やソフトがでてきたらいいなぁと思ったりします。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/125-f5452fc4
Listed below are links to weblogs that reference
HTMLでモックを組み立てるときに便利なウェブサービス+α from バニデザノート

Home > ユーティリティ > HTMLでモックを組み立てるときに便利なウェブサービス+α

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。