『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
Webページを見る時、ブラウザはどのくらいのサイズにしていますか? フルスクリーン? 小さいサイズ? 縦長or横長? ページを制作する際、レイアウトで重要なポイントはその幅ですが、高さを見落としてしまうと表示されないコンテンツに気がつかなかったなどクリティカルな問題になることもあります。 そんなブラウザの高さをみんながどのくらいにしているか統計をとっているサイトを紹介します。 I am The Fold I am The Foldでは、ページが表示された際のビューポートの高さを記録し、その統計を表示しています。 現時点でビューポートの高さで集中しているポイントは、504px, 568px, 667px, 775px, 798px, 1392px, 1522px、という感じです。 800px, 1000pxあたりが特に集中してますね。
こんにちは! LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか? EJSっていうのはですね、なんかもう、こう、すんごいツールでして! とにかく、使うとコーディングがめっちゃ早くなるんですよ!! 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは? EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
2014年11月14日にWordPress4.1のBeta1が公開されたので、同梱の新デフォルトテーマ『Twenty Fifteen』の中身をざーっとチェックしました。ユーザ目線というよりは、Webデザイナーやマークアップエンジニア視点で見ています。WordPressのデフォルトテーマは、WordPress使いではない人にとっても、ちょっと勉強になったり興味深い点があるかもしれません。なお、まだBeta版ですので正式リリース版とは異なる場合があります。ご了承ください。 デザイン デザインについては、WordPress.comにてTwenty Fifteenのデモを見ることができます。レスポンシブでモバイルファーストでコンテンツファーストで、ミニマルなデザインですね。個人的には好きですが、用途としてはちょっと限られそうな気もします。文章を読むことに集中させたいサイトに向いていますね。 フォン
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
デザイナーがチームで取り入れるべき、効果的なスキルアップ方法をご紹介した記事社内にデザイナーが複数人在籍する場合、チーム内でのデザインクオリティの担保やスキルアップはどのように行われていますでしょうか?VASILYでは、デザインレビューや、インプット、セミナー参加など、チームでも個人レベルでも常に積極的に行いながら制作しています。 デザインレビューやインプットの仕方などは、デザイナー間でもよくあがる話題の一つだと思いますが、今回は弊社デザイナーチームがスキルアップのために実際に行っている効果的な方法を3つご紹介したいと思います。 1. デザイナー全員でのデザインレビュー ■チームとしての課題 スタートアップでは、制作と開発を速いサイクルで回していきながらも、デザインの質と量はどちらも担保していかないといけません。 これまでは、エンジニアへ依頼までの細かい確認と、実装後の確認をデザ
ペロっとかぶさっているようなかわいいデザインのラベルを画像無し、CSSで実装したテクニックを紹介します。 カード状のコンテンツにも画像に使っても面白そうです。 Label Overlay 実装は、こんな感じ。 HTML ラベルは画像無し、spanを2つ使用して実装しています。 <div class="product"> <div class="product-image"> <span class="onsale-section"><span class="onsale">ラベル</span></span> </div> </div> CSS spanの:before, :afterを使用して、かわいいラベルをスタイルします。 .product { width: 300px; font-family: sans-serif; margin: 2%; } .product-image { b
Photoshopでデザインカンプを作成して、いざコーディング!となると面倒くさいのが画像のスライス作業。 その画像のスライスを超絶楽にしてくれるツール「Slicy」を今さらながら導入しましたので使い方をご紹介。 レイヤー・グループに名前を付けて保存 アプリはMac App StoreでDLでも良し、公式サイトから体験版をダウンロードするも良し。 試しにこんなカンプを作成してみました。世界中のイケメンを紹介する、IKEMEN.comです。第一回目のモデルから頓挫しております。 データができましたら、切り出したいパーツのレイヤーorグループに名前(○○.jpgや○○.png)を付けて保存します。 あとはその保存したPSDデータをSlicyにぶち込むだけ。 見事、名前を付けた通りに画像がスライスされました:) あとはドラッグアンドドロップか、画像を選択して上のSaveボタンをクリックして任意の
We use cookies, including cookies from third parties, to enhance your user experience and the effectiveness of our marketing activities. These cookies are performance, analytics and advertising cookies, please see our Privacy and Cookie policy for further information. If you agree to all of our cookies select “Accept all” or select “Cookie Settings” to see which cookies we use and choose which one
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く