縦横比を無視したリサイズをしても違和感のない画像に仕上げることができる画像リサイズ用ライブラリ「Caire」
画像ファイルのリサイズはすべてのピクセルに対して均等に伸縮させるものです。このため、人物や建物が写っている画像に縦横比を無視したリサイズを行うと、被写体のバランスも崩れてしまい、違和感のある画像になってしまいます。画像リサイズ用ライブラリ「Caire」は画像内にある人物や建物などの比率を維持したままリサイズでき、違和感のない画像を作り出せます。 GitHub - esimov/caire: Content aware image resize library https://github.com/esimov/caire 「Caire」はSeam carvingアルゴリズムを使った画像リサイズ用ライブラリです。Seam carvingアルゴリズムはレスポンシブウェブデザインを採用したウェブページのように、画面サイズに応じて画像のリサイズを行うようなコンテンツにおいて、縦横比を無視したリサイ
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 - NxWorld
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
サイトに手軽に目次機能を付加できるjQueryプラグイン「TOC」
ページに目次があると内容がある程度わかって分かりやすいこともあります。 WordPressとかだと、目次を付加するには、Table of Contents Plusとかが定番です。 先日、そういった目次機能を自由度も高く設定できる「TOC」というjQueryプラグインを使ってみたところ、自前で実装するのに結構使い勝手が良さそうだったので紹介です。 TOCとは TOC（jQuery Table of Contents Plugin）は、WEBページ上に目次を自動生成するjQueryプラグインです。 ちなみに、サンプルとして、このページの左側でも利用しています。（※モバイルでは非表示になっています） このTOCプラグインの特徴は以下です。 カスタマイズの自由度が高い 目次をクリックするとスムーズにスクロール移動する 現在見ているセクションをハイライト表示 スクリプトが軽量 スムーズなスクロール
写真を水彩風にするPhotoshopアクションを作りました（CS6／CC／CC 2014） - saucer
ちょっと思い立ったので、写真を水彩風に加工するPhotoshopアクションを作ってみました。あくまでも水彩「風」なので、完全に水彩タッチが再現されるわけではないですが、デザインでのちょっとしたアクセント程度になら使えるかもしれません。興味のある方は一度試してみてください。（2015.02.14更新） 【2015.02.14追記】CS5で使えるバージョンを追加しました。ただし、元のアクションはCS5で再現できない機能を使っていたため、CS6以降用と完全に同じにはなりません。 アクション実行サンプル写真に対してアクションを実行すると、下のような感じに加工します。あくまで全自動で一律的に処理を行いますので、かなり写真を選びます。いい感じになるかどうかは、運次第です。うまくいかない方が多いかも。その場合は、ハズレだったと思って我慢してください。ごめんなさい。 ダウンロード以下からどうぞ。zip圧縮
CSVファイルからユーザーを一括登録できるWordPressプラグイン「Import Users from CSV」 | TechMemo
Import Users from CSVは、CSVファイルをインポートすることで、ユーザーを一括登録することができるWordPressプラグインです。 大量のユーザーをまとめて登録したい時に便利です。 Import Users from CSVのインストール インストール手順は以下の通りです。 Import Users from CSVをダウンロードします。 ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。 管理画面の[プラグイン]ページで、Import Users from CSVプラグインを有効化します。 CSVファイルのフォーマット CSVファイルは以下のようにカンマ区切りで作成します。 user_login,user_email,user_pass,first_name,last_name,display_name,role test
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld
画像は使用せずにCSSだけでスタイリングしたタイトル（見出し）のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。 全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。 また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。 以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。 ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度です。
[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
最速で、人気Webデザインを独学できる至高のWebアプリ8選がヤバイ！ - 夕刊アメーバニュース
どうも、まさとらん（@0310lan）です！ Webデザインのセンスを、「手っ取り早く磨きたい！」という人に…どうも、まさとらん（@0310lan）です！ Webデザインのセンスを、「手っ取り早く磨きたい！」という人に朗報です。 素人っぽく見られないように、世界中の人気Webデザインを参考にしながら、効率的にスキルアップできるWebアプリが徐々に増えています。 そこで今回は、Webデザインの独学に最適なサービスを厳選してご紹介しようと思います！ Web最新トレンドの仕組みまで解説してくれるサービス！ 【 CodyHouse 】 最近、よく見るWebデザインやUIパーツなどを、丁寧にまとめてくれているサービス。 3DアニメーションするWebサイトや、エフェクト効果を使ったナビゲーション、画像を効果的に見せるテクニックまで一通り揃っています。 特徴的なのは、そのまま実際のデモ画
壁を傷つけずにホッチキスで本棚・収納ラック・テレビなどが壁に設置できる「壁美人」を使ってみました
壁に棚・シェルフ・テレビなどを設置するのは、壁を傷つけてしまう恐れがあるのと、大がかりな道具が必要になるのとで、実行が難しいと思われがち。しかし、どこにでもあるようなホチキスを使うだけで、重いものでも壁を傷つけずに簡単に設置できてしまうようにしたのが「壁美人」です。 壁美人.net ホッチキスで壁収納を実現する『壁美人』専門店 http://kabebijin.net/ 壁面収納金具・壁面収納家具「壁美人」/TOPページ http://kabebijin.jp/ これが「壁美人」。石膏ボード専用の固定金具で、用途に合わせていろいろ種類があるのですが、今回は1枚あたりの静止荷重が6kg用のものを購入しました。価格は2枚セットで税込940円。 中には金具2枚と専用針1個、フィルム4枚、取扱説明書が入っていました。 これがフィルム。金具の穴の上にフィルムを載せて、その上からホチキスで固定していく
フォントの基本的な選び方
フォントの基本的な選び方を、備忘録的にまとめてみました。 フォントをどう選んだら良いのかわからない、もしくは選ぶのに時間がかかるという初心者さん向けです。 フォントには、それぞれ書体によって特徴があり、ユーザーに与えたい印象によって書体を選ぶ必要があります。 （それに縛られすぎてもいけませんが…（あえてインパクトを出すために違う印象のフォントを組み合わせたりする）、基本的な選び方として知っておくと良いと思います。） 私は以下の順番でフォントを選んでいます。 恐らく他のデザイナーさんも、この順番だと思います。 1. フォントの系統選び 2. 選んだ系統から、さらに書体を選ぶ 3. 書体のウェイトを決める 4. 字間の調整 さらに具体的な手順を1つずつ説明していきます。 1. フォントの系統選び 日本では、和文フォントと欧文フォントの2つを使います。 また、和文フォントは、以下の4つに大きく分
画像検索で著作権フリーの画像を見つける。Google検索の意外な機能
【保存必須】見とれてしまうほど高画質！デザイナー必見のフリー画像素材サイト10選 オススメのフォトストックサービス10選まとめてご紹介します。 本記事で使用している「著作権フリー」の定義について 本記事で使用している「著作権フリー」の定義について この記事で表記しています著作権フリーとは、商用利用や改変利用が可能なライセンスのことを指しています。再配布や再譲渡などの全ての行為がフリーというわけではありませんのでご注意ください。わかりやすさを重視し本記事ではこのように表記させていただきました。 また、Google画像検索の結果として表示される画像についても、必ずしも上記に当てはまるものではなく、Googleがそうみなした、というものですので、画像を使用される際は必ず掲載サイトのライセンス条件をご確認下さい。 なお、今回紹介する クリエイティブ・コモンズ・ライセンスについては、こちらで詳しく説
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」
モバイルWeb開発に役立つ！Chrome DevToolsの新機能「デバイスモード」 Tomomi Imura（Slack） 今回のGoogle I/OはAndroidに特化していた傾向が強く、WebテクノロジーやChromeの扱いが比較的小さかったせいもあり、多くのWebフロントエンドディベロッパーは不満を感じた部分もありました。 そこでその中の数少ないChromeのセッションの中から、私が興味深く感じたクロスデバイス開発にはこの先欠かせなくなると思われる Chrome DevToolsの新機能についてレポートします。 このセッションを行ったPaul Bakaus氏（以下、ポール氏）は、かつてjQuery UIやAvesゲームエンジンを開発したことでも知られています。一時期日本に在住していたこともあるので、この記事を読んでいる皆さんには既になじみのある方かもしれません。現在はGoogle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Driveで画像を開いたと思ったら文字が全て書き起こされているという事態に衝撃の人々「マジかよ!」「あ!ホントだ」
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
https://www.nytimes.com/interactive/projects/well/workouts/
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
