カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
Illustratorでふっくらした描き文字をつくる | 鈴木メモ
パンのようにふっくらした線で作る漫画風の描き文字。 ベースは１本のパスなので、曲げたり伸ばしたりの調整が楽です。 ふんわり、ゆるい感じのものに。 9/26 もくもくした文字にアレンジする方法も追記しました。 ふっくらさせる仕組み 今回のふくらみの仕組み↓。パスは一本でOK。 イメージ的には皮（先端を丸くした直線）の中にあん（ブラシ）を入れてあんパンにした感じ。 ブラシとグループアピアランスを使います。 ポイントは（たとえ1個のオブジェクトでも）グループ化を挟むことで、後で付け足した線がブラシを取り囲むようにかかること。これで自然な感じにふっくらします。 ブラシを使うメリットは ・パスの長さがまちまちだったりパスを自由にカーブさせたりさせても大丈夫。 ・中身のブラシのふっくら加減・外の取り囲み分の線幅、どちらも数値で後から調整できます。 ふっくらした描き文字を作る ●ペンツールで文字を書きま
デザイナー長期保存版！Webデザイン、グラフィック、DTP…製作に役立つ「色彩心理学」｜ツーブロッカ
すみません、目次が超絶長いです。 Webデザインのネクストステップは心理学だと思います。 広義で言う「Webデザイナー」はだいたいコーディングができて、ソフトウェアで画像をいじれてWebサイトのレイアウトができて…といったところかと思いますが、コーディングなんてできなくてもWebサイトは作れますし、専門的に勉強している僕らの何が長けているかって、 「ここをこうすることにより、こんな効果が見込める」 「これをこうするのにはこんな意図があって、それはこれを表現してる”」 というノウハウ的な部分だと思います。 なのでメモのために色彩心理学、色が成し得る効果についてメモします。 Webデザインのネクストステップは「色彩心理学」。その理由物言わぬ「商品」やWebサイトが何かを伝えることができる唯一の手段である「外観」 実はかなり影響を与えています。 調査対象のうち85%が、物を購入する時に「色」を第
おしゃれ！明朝体フリーフォントのおすすめ16選【商用利用可】
明朝体フォントは手書きの雰囲気を残した日本語の情緒を感じさせてくれるフォントで、和文によく合います。また種類も豊富で、非常に個性が豊かなのも魅力です。 そこで本記事では、明朝体フリーフォントから、商用利用可能なものを16個をご紹介します。気に入ったフォントがあればデザインに取り入れてみてはいかがでしょうか。 ※フォントを利用する際は、各サイトの利用規約をご確認ください。 目次 明朝体フォントの魅力 はれのそら明朝 Oradano明朝GSRRフォント さわらび明朝 はんなり明朝 こころ明朝体 やさしさアンチック 刻明朝フォント 刻丸明朝かな ほのか明朝 あおぞら明朝フォント うつくし明朝体 ふぉんとうは怖い明朝体 戸越明朝 XANO明朝 梅明朝 イマジン・ヨコハマフォント 明朝体フォントの魅力 明朝体は横線に対して縦線が太いのが特徴。ウエイトが重くなっても、横線の太さはそれほど変わりません。
【CSSテク】ブロック要素の比率を維持しながら可変させる方法 | 株式会社リースエンタープライズ
皆さんこんにちは、リースブログ編集部です。 本日は、レスポンシブ対応でかなり使えるCSSテクニックをご紹介します。 高さ不明のブロック要素の比率を維持させる方法 レスポンシブで組んでいると、どうしてもブロック要素をそのままの比率を維持しながら可変させたいという要望が生まれます。 画像の可変は、width=”100%”を指定すれば画像の比率を維持しながら勝手にウィンドウサイズに合わせてサイズが変更されるので楽ですが、ブロック要素では高さ方向でつまづきがちですね。 【NG例】通常のレスポンシブ対応方法例 通常であれば、heightを指定しない限り、親ブロック要素は子ブロック要素のコンテンツによって高さが依存します。 具体的な例がこちら。 ブラウザのウィンドウサイズをグイングイン動かしてみてください。 サンプルへ 一応コードはこちらから確認頂けます。 <div class="adjust-box
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)
ヒューマンピクトグラム2.0は、非常口のあの人のピクトグラムをTopeconHeroesダーヤマの好みで拡張、ストックしていくページです。 このサイトにストックしたピクトグラムは、WEB制作や会議の資料、企画書などのデザイン素材として無料で利用可能です。 ただし素材そのものの再配布、販売はNGっす。なお2.0だからって拡張元のピクトグラムに比べ優れている訳ではありません。 犬の散歩のピクトグラムその３ 飛び膝蹴り 社長、部長 ショートカット 手荷物検査 略奪婚 結婚式のピクトグラム 神父、牧師 ちゃぶ台返し 2 水球 ピクトグラム シンデレラ サムライ 3 サンタクロース 2 サンタクロース バーテンダーのピクトグラム2 バーテンダー 銅鑼 銅鑼をドーン 虫取り少年 少年時代 やり投げ 食事をするピクトさん 演説するピクトさん エスカレーター 下校する子供
固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。 公式ページはこちら： https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ デモ まずは、下記リンクからデモをご覧ください。 https://211.125.65.24/demo/2013/10/effect/ ※現在はサービスを終了しています。 実装手順 使用するのは「jQquery」と「waypoints.js」の2つです。 まずはHTMLとCSSを用意します。 CSSの読み込み <link rel="styles
On-Scroll Animated Header | Codrops
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition. An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes. The H
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
スマートフォンサイトには、よくPCの表示とスマートフォンの表示を切り替えるボタンがついています。 通常はPC用のURLとスマートフォン用のURLにリンクさせているのですが、レスポンシブWebデザインはそもそもワンソースなので、そのままでは切り替えることはできません。 そこでレスポンシブWebデザインでも使える切り替えボタンをjQueryを使って実装してみました。 仕様 今回実装してみたのはこんな感じのやつです。 このボタンを以下のような仕様で実装します。 「PC」ボタンを押すとPCの表示、「SP」ボタンを押すとスマートフォンの表示に切り替える 最後に表示した状態をCookieに保存し、次のアクセス時も同じ状態で表示させる 実装方法 基本的には、viewportにデバイスの表示幅を指定することで切り替えることができます。 PC用のviewportの記述 <meta name="viewpor
freshreaderユーザに朗報。coreserverでioncube_loaderを利用する方法。
チョー快適なＲＳＳリーダ、Freshreaderですが、サーバ移転したところ、動作しなくなっちゃいました。 まあ、coreserverではphpがセーフモードで稼動してるんで、ioncubeでエンコードかましてると、うまく動作しないんですわーとのこと。 Freshreaderでのioncube利用状況の解説http://manual.freshreader.com/archives/2006/01/ioncube_php_enc.html で、CoreServerでは回避手段として.htaccessやphp.iniの設置でcgiとして動作させるちゅうのがあるんすが、 参考：http://www.coreserver.jp/help/index.php/phpcgi/ なんやらどうやらうまく動きませんでした。 と、いろいろためすとこのセッティングでいけましたわ。 php.iniに zend_
a-blog cmsをXAMPP1.7.7にインストールしてみる
この前ニュークリアスをXAMPPにインストールしました 今回は… 名古屋市のWeb制作会社applepleさんがリリースしているCMS 「a-blog cms(エーブログ・シーエムエス)」をXAMPPで使ってみようと思います パッケージのダウンロード XAMPPへのインストール 管理画面へログイン まで作業してみたいと思います 初心者向けのオンラインセミナーもやっていたり 勉強会も開催されていたりと サポートも充実しているようなので困ったときでも頼りになりそうな予感です 「a-blog cms」最新パッケージのダウンロード a-blog cms公式サイトから 最新版のパッケージをダウンロードします(2012年4月11日現在 1.5.0が最新バージョンです) パッケージ内のファイルを確認 「新規インストールマニュアル.pdf」を見てみると インストール手順が詳しく書いてあります ご親切にあり
X SERVER X10 に a-blog cms をインストールしてみた | kazumich.log
エックスサーバーでa-blog cms をインストールする時のPHPのバージョン | ブロックスＣＭＳ開発者が、movabletypeやWordPress、FacebookやTwitterなどのソーシャルメディアについて語るブログ で 水野さん（ healing_s ）がインストールに悩んでいたので、10日間のお試し利用を登録して、a-blog cms のインストールを試してみる事にしました。 1. データベースの設定を行う X SERVER パネルの MySQL5設定 からデータベースの作成を行います。 1-1. MySQLの追加 まずはデータベースを作成します。文字コードは UTF-8 にしましょう。 1-2. MySQLユーザーの追加 ユーザーの名前とパスワードを設定します。ホスト名は気にしないでも大丈夫です。 1-3. MySQL一覧 一覧ページから所有権の設定を行います。最初はア
サーバーを構築してa-blog cmsをインストールした ③
上から順に確認していきましょう。ターミナルにphp -vを打ち込みEnterを押します。 # php -v PHP 5.1.6 (cli) (built: Dec 10 2013 22:08:48) Copyright (c) 1997-2006 The PHP Group Zend Engine v2.1.0, Copyright (c) 1998-2006 Zend Technologies 5.1.6ですので大丈夫です。次はMySQLです。 # mysql --version mysql Ver 14.12 Distrib 5.0.95, for redhat-linux-gnu (x86_64) using readline 5.1 5.0.95ですのでMySQLもOKです。Webサーバーは、 # httpd -v Server version: Apache/2.2.3 Serv
Free vectors icons
No notifications to show yet You’ll see useful information here soon. Stay tuned!
【白銀比・計算ツール・2カラム対応】 - 白銀比計算ツール
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 自然界でもっとも美しいのが「黄金比」なら、人工物や建造物で安定した美しさを持ち、日本人にも古来から浸透しているのが「白銀比」。 白銀比は、用紙サイズ（A3やA4など）や建物などに採用されている比「1:√2」のことで、近似値は1:1.4142、約5:7です。日本建築には古くから白銀比が用いられ、法隆寺の五重塔を上から見た投影平面図における辺（短辺と長辺）の関係も白銀比になっています。白銀比は別名「大和比」と呼ばれるくらい日本に浸透しています。「絞り値、シャッター速度、被写界深度の関係を覚えよう！」に登場した「絞り」も、ルート2が大きなポイントでした。 Webデザインに白銀比を取り入れようとした場合、全体の横幅と横幅の比からそれぞれの幅を求める必
【黄金比・計算ツール・2カラム対応】 - 黄金比計算ツール
重要なお知らせ：このページのツールは、Flashの技術を用いて表示させていたため、現在は動かすことができません。申し訳ございませんが、ご了承下さい。 Webデザインに黄金比を取り入れよう - Re:Creator’s Kansaiに、黄金比をWebデザインに活用する海外の記事の翻訳が載っていました。 黄金比とは、最も美しいとされる比「1:(1+√5)/2」のことで、近似値は1:1.618、約5:8です。「その美しさをWebデザインでも」というのがエントリの趣旨です。 Webデザインの場合、横幅を固定し、縦幅は固定しないデザインが一般的です（ディスプレイサイズを考え、文字数の増加は横方向のスクロールなしに、縦方向へのスクロールで対応している）。Flashで作られたサイトなどは、縦幅も横幅も固定している場合があります。 Webデザインに黄金比を取り入れようとした場合、全体の横幅と横幅の比からそ
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
coreserverでionCube_loaderを動かすには - 福井のホームページ制作・携帯サイト制作・SNS/ビジネスブログ構築 からくり屋のブログ