個人的なウェブサイト作成や仕事としてウェブサイトを作成している人だけでなく、何かのサイトを発注して作ってもらう際などにこういうのを知っておくと、かなりはっきりと具体的なイメージを相手に伝えやすくなるので、スムーズにコミュニケーションできるはずです。あるいはクライアントにこれらのリソースの存在を認知してもらうことで、話が進めやすくなるかもしれません。 というわけで、魅力的なウェブサイトを作成するために知っておくと便利な無料の各種スクリプトは以下から。 Woork: Useful resources and tutorials for developing stunning web sites 1. ModalBox http://www.wildbit.com/labs/modalbox/ Web2.0スタイルのダイアログボックスなどを表示させることができます。Mac OS Xのダイアログボ
今見るべきは公立小学校のホームページ | オモコロ
進化が止まったインターネット ネット人口の増加に伴い新たに無数のインターネットコンテンツが生まれ、淘汰・洗練を繰り返し、今では質の高いコンテンツしか生き残れなくなっています。 しかしそんなインターネット上の読み物でありながら、一切の進化を遂げず唯一その淘汰の渦から外れている存在をみなさんはご存知でしょうか。 そう、公立小学校のホームページです。 新たな顧客を獲得する必要がなく、誰からも批評の対象に見られていないインターネット唯一のオアシスと言っていいかもしれません。 そこで本日は、そんなオアシスだからこそ生まれた各所に見られる「洗練されてなさ」を紹介します。 「洗練されてなさ」とは 先ほどお見せした1枚だけでも「洗練されてなさ」の宝庫です。 まずはこちら お分かりでしょうか。 公立小学校ホームページあるある「何かと重なる文字と画像」です。 多少の重なりなど気にしない心意気。 これが商業化さ
Photoshop光のブラシ web制作を進める上で、光を直接使うのではなく、なにかの背景に潜らせたり、メニューなどの後ろにうっすらと構えているラインとしてよく使われるのが、光のラインシリーズだ。 こうしたブラシは非常に人気が高く、私も良くブクマしているのですが、いかんせん、画像が無いとなんとも情報として使えない。 そこで今回はリンクとイメージを直結してただの羅列エントリとして仕上る事にしました。 あとブラシの設定方法がわからないという人がいたら記事の下のほうを参考にしてみてください。 １(+11) ２(+7) ３(+10) ４(+12) ５(+3) ６(+8) ７(+12) ８(+4) ９(+7) １０(+20) １１(+4) １２(+24) １３(+22) １４(+8) １５(+8) １６(+9) １７(+18) １８(+6) １９(+6) ２０(+8) ２１(+6) ２２(+8) ２
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。2014.10.13 WEBデザイナーは技術はもちろん、手持ちのリソース（情報など）が多いほど有益なデザインを完成させることができます。 しかし海外の素材サイトは、ウイルスリスクの懸念や利用規約も英語で理解できなかったり曖昧だったりでちょっと怖いイメージがあります。特に商用で利用したい場合にはしっかりと利用規約を確認することができる日本で運営しているサイトのが安心ですね。 ここでは本当に使えるWEBデザイナーご用達の商用フリーの素材サイトをまとめました、デザイナーに限らず趣味でサイトを運用している方にも保存版の8サイトをご紹介します。 PAKUTASO5000枚近く（2015/10時点）の写真素材を保有するパクタソは管理者の方が手間を惜しまず写真を1枚1枚選別し、さらにノイズ処理や補正、トリミングなどを行
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
Av-jyo.com
The domain av-jyo.com maybe for sale. Click here for more information. Av-jyo.com Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Web Designing Courses AVI DVD Player Online Data Protection MatchMaking Services Related Searches: Cloud Service Providers Secure Internet Browser Computer Internet Security Privacy Policy
Photo by slavik_V こんにちは。谷口がお送りします。 Webの仕事を目指している人やプログラミング初心者、さらにはブログをやっている人など、HTMLとCSSを習得したい人は多いと思います。特に最初は「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」など、さまざまな悩みがあるのではないでしょうか。 HTMLとは、Webページを作成する時に使用されるマークアップ言語の一つです。 マークアップ言語とは、プログラミング言語と違い「タグ」を使って、「ここからここまでが見出しです」「ここからここまでが一つの段落です」等といった印をつける言語です。基本的にプログラミング言語のような「入力値を取得し計算処理をする」「条件を満たすまで処理を繰り返す」といった処理や計算はできません。 CSSは、Webペ
WEBデザイナー向け☆iPhoneアプリのUIデザイン
どーもキンモクセイぷんぷん香る自由が丘からaoizmです。 秋満開！スマートフォンまっさかり！(強引) KAYACでもiphoneアプリ制作のお仕事が増えてきております。 WEBデザイナーがiphoneアプリのデザインをする際に、やっぱり気になるのがWEBとの違い。 画面サイズが小さく持ち歩けるデバイスiphoneは、デスクトップ上のアプリやWEBサイトとは 使用環境もその操作方法も異なるため、WEBとは違ったインターフェイスが求められます。 その違いを認識した上で、違いを活かしたデザインをするためには？ iPhoneアプリのUIデザインまとめてみました。 WEBサイトとiphoneアプリの違い 状況 持ち歩けるがゆえそのシチュエーションもさまざま 「会議で」「合コンで」「移動時」「就寝時」... 状態 そのときユーザーはなにをしている？ 「歩きながら」「話しながら」「運動しながら」...
2017年6月30日 インスピレーション, 名刺 その人、その会社の第一印象でもある名刺デザイン。海外では多くの名刺デザインが紹介されていますが、日本国内だとなかなか見つかりませんよね。という事で、オフ会で直接頂いた名刺の中から素敵なデザインのものを一挙紹介します！シンプル・ポップ・エレガントなど、様々なデザインがあるので、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ オフ会に参加しました ホームページを作る人のネタ帳のYamada氏が東京に遊びに行くという情報をキャッチしたので、それにあわせて私もオーストラリアから帰国！1月29日に「ネタ帳とWebクリエイターボックスの上京を歓迎してくださいの会」と題し、オフ会を開催しました！総勢約80人とあって、めまぐるしく挨拶まわりを…。もしお話できなかった人がいたら本当にごめんなさいです…。 素敵な名刺頂きました そのオフ
【完全版】Facebookページのタイムライン化で本当に検討すべき11項目のチェックリスト « 株式会社ガイアックス
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
新MacBook AirはWeb制作のメインマシンになり得るのか
この記事は、2011年版の MacBook Air について書いています。2012年版の MacBook Air については以下の記事をご覧ください。 MacBook Air 2012のレビューとWeb制作者のための設定など 先日、新しい MacBook Air（13インチ・SSD 128GB）を購入しました。 私は Web制作 のメインマシンにするために購入したのですが、購入するまでは正直「こんな薄いマシンをメインにして大丈夫かな…」と不安でいっぱいでした。 結論から言うと、私の使い方（Web閲覧・Web制作・PhotoshopによるWebデザイン・動画閲覧等）であれば全く問題なく、今まで使っていた MacBook Pro 13インチ（2010年モデル・2.4GHz・メモリ8GBに増設）や、昨年使っていた DELL のデスクトップPC（Core 2 Duo・メモリ4GB）よりも明らかに動
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
70,000個以上の商用・非商用で無料で利用できるフォントをまとめたサイトを紹介します。 FontPark 登録されているフォントは82のカテゴリに分けられており、日本語（Japanese）のカテゴリもあります。 [...]
最近、ウェブデザイン周りの優良ツールがたくさん出てきていて、しかもちゃっかりみんな買っちゃうしアドオン系のソフトウェア界隈にも良い流れを感じるこのごろ。今回は、ぼくが買ったツールのうちこれは手放せないなとおもったものをピックアップしてアフィリンク付きでゲス顔で紹介したいと思います。主にMacです。 マークアップ系 Slicy PSDファイルから画像素材が出力できるアプリ。PSDファイルを読み込ませるだけでほとんど自由自在に画像素材を書き出せます。使い方はPhotoshopのレイヤーやフォルダに.pngなどの拡張子をつけておくだけ。 マークアップするときの画像書き出し作業が全然億劫じゃなくなったのが一番嬉しい。一度読み込ませると、あとはPSDが更新されたら自動で書きだす機能なんかもあります。スマホのRetina用に半分の画像も一緒に書き出せたり、MacのRetina用に二倍の画像も一緒に書き
WordPress オリジナルテーマの作り方
2013年12月25日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。前回に引き続き、Nick La氏によるWeb Designer Wallを参照しています。 ↑私が10年以上利用している会計ソフト！ ※これはWordpress旧バージョンのオリジナルテーマの作り方です。最新版Wordpressを使用してのオリジナルテーマの作り方は「WordPress オリジナルテーマの作り方 3.0+
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
GPLやMITやCCなど主要ライセンスの内容と意味のまとめ
ＷＥＢ制作者にとっての強力な手助けとなる「無料素材」や、ＰＣの作業効率を格段に向上させる「フリーソフト」。ＷＥＢの世界では、もはやタダで手に入らないものは無いんじゃないかとさえ思えるほど、さまざまなものが無料で配布・提供されています。 しかしそれらは「使用料金が無料なだけ」であって、「完全に自由に使用する事が可能ではない」のです。 世の中に無料で出回っている画像やプログラムソースやアプリケーションなども、そのほぼ全てが、なんらかのライセンス（使用許諾条件）に添った形で配布・提供されているのです。 著作権を有する制作者本人が示す使用許諾条件を守る事は、制作者への敬意であると同時に、意図しない「著作権の侵害」を未然に防ぐ手段でもあります。 しかし、このライセンスというのが、なかなかに分かり難い。コムズカシイ文言の洪水だったり、そもそも英文だったり、GPLとかLGPLとかCCとか略語まみれだった
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
英語が無料で学べる、フォローしたいTwitterのアカウント集
英会話や英単語を学べる、日本語から英語、英語から日本語のツイートをしているTwitterのアカウントを紹介します。 追記： 2アカウント追加（@Yuko_Gstyle, @John_Monjirou）
Google
世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
Acest website foloseste cookies. Continuarea navigarii reprezinta acordul dvs. Politica Cookies
来年も作りたい！ふきのとう料理を満喫した 2024年春の記録 春は自炊が楽しい季節 1年の中で最も自炊が楽しい季節は春だと思う。スーパーの棚にやわらかな色合いの野菜が並ぶと自然とこころが弾む。 中でもときめくのは山菜だ。早いと2月下旬ごろから並び始めるそれは、タラの芽、ふきのとうと続き、桜の頃にはうるい、ウド、こ…
スゴイ。ヤバい。 Adobe Shadowは、Adobeのラボがリリースした、スマホコンテンツの開発支援ツール。 何ができるかというと、PCのブラウザで表示したURLのコンテンツを、iPhoneやiPadで同時に表示してくれる。 PCでサイトをリロードするだけで、iPhoneやiPadでも自動でブラウザがリロードされて、表示を検証できる！！ iPhoneやiPadはURLの入力が面倒だし、PCで作業する度にデバイスを移動するのが大変だった。 Adobe Shadowを使うと、PCでリロードするだけで、全環境で表示の確認がすぐできる。これは作業がはかどる。 使い方 Mac / PC に Adobe Shadowをインストール ブラウザ（Chrome)にAdobe Shadowの拡張をインストール iPhone, iPad, android, kindleに Adobe Shadowアプリをイ
cssやプログラミングcss × クロスブラウザ cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなドロップダウンメニューです。マルチレベルのメニューも可能。 demo 縦並びのフライアウトメニュー 横に出るフライアウトタイプ。画像を使用しています。 demo クロスブラウザ対応のグラデーション
商用でも使っていいよと言ってくれて いるアイコンセットのまとめです。商用 でもOKだけど、要リンクタイプのクリエ イティブコモンズライセンスや、リンク シェア等の「リンク必須」な商用可アイ コンと、あまり使う機会の無い、ソーシ ャルメディアのアイコンセット、RSSア イコンのみのセットなどは割愛しています。 個人的に実用できる、リンク不要のアイコンに絞っています。一応商用OKを確認してはいますが、さらっとしか見ていないので間違ってたら教えていただければ幸いです。また、ご利用の際はご自身でライセンスを確認してからご利用下さい。 200+ Exclusive Free Icons: “Reflection” リフレクションを与えたモノクロアイコンのセット。 ※リンクウェアでした・・・大変失礼致しました 200+ Exclusive Free Icons: “Reflection” Simpli
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
As Button Generatorはいわゆるボタンジェネレーターです。アイコンの形状等を確認しながらリアルタイムに編集する事ができるので、今までのボタンジェネレーターのUIとは一線を画すサービスです。 また、手持ちの画像や、任意のテキストも自在に配置する事ができるので自由度抜群です。ホームページの作成等にご利用ください
ランディングページデザインリンク集
ランディングページの厳選デザイン・リンク集／ランディングページ最適化・作成に関する情報掲載サイトです。
WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visually distorted - when symmetrical UI looks all wrong by Gil Bouhnick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ボタンと同じ色だとテキストは明るく見える 02. 同じフォントでも小さいサイズだと細く見える 03. 背景画像の上のテキストは読みにくい 04. 行間が間違っているテキスト 形の扱い方 05. 整列されたのに揃っているように見えない
オンラインで無料で聴ける、心と体を癒すサウンド集 | コリス
波音、雨音、風音、砂音の自然環境をはじめ、動物や鳥の鳴き声、ノイズなど、緊張感やストレスを和らげるサウンドをオンラインで無料で聴けるサイトを紹介します。
Windowsショートカットキー一覧を壁紙にしたら色々と捗った(｀･ω･´) : ライフハックちゃんねる弐式
2010年06月15日 Windowsショートカットキー一覧を壁紙にしたら色々と捗った(｀･ω･´) Tweet 1コメント ｜2010年06月15日 12:00｜Tips｜単発レス｜Editタグ ：捗るショートカットWindows壁紙 http://tsushima.2ch.net/test/read.cgi/news/1276478750/ 「パソコンの裏ワザ ウェブページを他人に教える「Alt」+「P」が便利だとｹﾞﾝﾀﾞｲ」 86 ： クロマグロ(富山県)：2010/06/14(月) 11:03:39.52 ID:2ZgDgocK ショートカット一覧を壁紙にしてくれ 89 ： ヨシノボリ(兵庫県)：2010/06/14(月) 11:06:39.71 ID:ito8TyvP >>86 http://dreamnoah.com/download.html 99 ： アブラボテ(三重県)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト - GIGAZINE
光を表現するPhotoshopのブラシ416個*ホームページを作る人のネタ帳
http://www.designwalker.com/2009/11/html5.html
【※保存版】WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
https://www.ituore.com/entry/html-css-basic
初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza times
国内Web業界で活躍する方の素敵な名刺デザインいろいろ | Webクリエイターボックス
http://soufflecode.net/website/
http://www.designwalker.com/2009/01/table.html
ファーストビューは何pxまで？ ブラウザの表示領域サイズ5年間の変化を大公開 | 初代編集長ブログ―安田英久
CSSでのフォント指定について考える（2014年）｜DTP Transit
登録数は70,000以上、商用でも無料のフォントをまとめたサイト -FontPark | コリス
最近流行りのウェブ開発系ツールまとめ（主にデザイン） | keisuke.tsukayoshi
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
色見本大辞典 伝統色や366日の誕生色占いのWEB色見本サイト
Initializr - HTML5 project - template
料金表のデザインいろいろ - DesignWalker
ブログのアクセスアップ、初心者でも1回7000人に見てもらう方法 - はてなこわい＞＜
スマホのWeb開発に、Adobe Shadowが神ツールな件 | fladdict
CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集
リンク不要で商用サイトにも利用可能なフリーのアイコンセットいろいろ
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
As Button Generator
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ