タグ

WEB制作に関するmanbennakuのブックマーク (31)

  • 【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net

    Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に

    【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
  • Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選

    Webサービス使えるツール10選 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Fire

    Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選
  • 時間の節約になるWeb制作関連ツール 12+1

    2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう!今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ!」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト! Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな

    時間の節約になるWeb制作関連ツール 12+1
  • Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳

    web制作で使えるWebサービスや、Webツールなどをご紹介。 小分けして紹介していた分もあわせてまとめています。定番の物からマニアックなものまでお楽しみください。 グラフィック・創作 10,000s Cool FREE Seamless Patterns-パターンファイルジェネレータ Web制作でもよく背景で利用するパターンファイルを作成する素晴らしいジェネレータ。様々な模様があり、色は決めれますので、組み合わせはほぼ無限です。 Pixlr Photo Editor-オンラインフォトエディタ 世界で最も人気とされるオンラインフォトエディタ。OSを選ばない。 photoshopに近いインターフェイスと、ブラウザさえあれば動くという使用が人気。ユーザー登録しなくても利用できる(したほうが便利)。 Vintage Effect-レトロ、ヴィンテージエフェクト 上のPixlr.comが運営するも

    Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳
  • http://designaholic.cc/2011/03/webweb21.html

    http://designaholic.cc/2011/03/webweb21.html
  • Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

    レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ

    Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
  • Beyond IE Six: 未来のWebサイト制作のためのブースターキット

    古いブラウザを利用することのデメリットや、便利で美しい Web へ飛び出すために必要な開発ツールやメリットを紹介。99% 第三者機関 NSS Labs のセキュリティ調査によると、IE9 は、ソーシャルエンジニアリングによるマルウェア(不正リンクなど)を 99% ブロックすると言われています (参考記事)。 他ベンダーのブラウザとの比較に疑問を投げかけている意見は出ているものの、IE8 以前よりはるかに安全なブラウザであることを示しています。 −4hours 現在、多くの Web アプリケーションは JavaScript で動作しています。高機能ですが、Web アプリケーションの表示速度や操作が遅くなる場合があります。 IE9 は、IE6 に比べるとおよそ 40 倍近く早い処理を行います(参考記事)。新しいブラウザを使うことで、作業をいちはやく終わらせることが可能になります。1日に100

  • HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup

    Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。

  • コンテンツ制作に役立つ!登録不要でSEなど音素材取り放題のサイト『hark』 | 秒刊SUNDAY

    映像制作・Flash制作アプリの制作でSEを使う事は良くあることだ。そんな際、素材集からかき集めるのも良いが、CDの中を一つ一つ探していくのは一苦労。そんな時harkを探せば案外簡単に素材が揃うのかもしれない。膨大なボリュームの音素材を聞いたり、ダウンロードできたりするので便利だ。 (画像) サイトにアクセスしたら、目的の素材を検索もしくはジャンルで選ぶとリストアップされるので、それらを選択。上の写真のような画面に遷移する。ここでは音を視聴可能だが、左のDOWNLOADを押すと楽曲やSEをMP3形式でダウンロードできるので便利だ。 ちなみにこれは、なぜかスティーブジョブズ氏の音声を聞いているところだ。こんな面白いデータもあるから重宝したい。 楽曲やSEはダウンロードできるものと出来ないものがある。ゲームなどの楽曲は残念ながらダウンロードすることが出来ないが、その他のSEなどの効果音はフリー

    コンテンツ制作に役立つ!登録不要でSEなど音素材取り放題のサイト『hark』 | 秒刊SUNDAY
  • 人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome Life

    みなさんは、サイトをスクラッチで作る時にどうされていますか? HTMLCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか? それは、 パーツが完璧に揃いすぎている! のが原因です。 Twitter Bootstrapがバージ

    人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ! | Chrome Life
  • ColorJack: Sphere (Color Theory Visualizer)

    Harmonize colors. Create color schemes. Find HEX codes. Simulate color-blindness. Export into Illustrator, Photoshop and ColRD.com

  • ウェブ配色ツール Ver2.0

    的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています(ただしフォントは変更出来ません)。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ

    ウェブ配色ツール Ver2.0
  • WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ |https://wp.yat-net.com/name

    最近僕の周りでWEBデザインの勉強やコーディングの勉強を始める人が多く、そんな方々向けに読んで欲しい、見て欲しいサイトをまとめる機会があったのでブログにポストします。 ブログに置いておけばこれから先また誰かに伝える機会があってもURL一つで教えれるので便利ですよね。 Index 1.WEBデザイン全般 2.色彩・配色 3.レイアウト 4.ユーザビリティ 5.文字・文章 6.フォント 7.コーディング 8.著作権 9.グラフィックツール関係 10.チュートリアル等 1.WEBデザイン全般 [連載]Webデザイン入門(1日目):Stocker.jp [連載]Webデザイン入門(2:スケッチしよう):Stocker.jp [連載]Webデザイン入門(3:光とボタン):Stocker.jp サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。:MAKA-VELI.COM W

    WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ |https://wp.yat-net.com/name
  • ホームページ制作の0円のweb素材屋さん|ホームページ制作ツール

    ホームページ制作に役立つwebデザインを無料配布している0円の無料素材屋さんは、プロのwebデザイナーによって作られています!ホームページ制作だけではなくブログ制作にも役立ちます。アイコン、ボタン、背景、バナーなど、web素材が無料!ネットショップから企業サイトまで、ビジネス向けの商用にも使えます。素材利用の使用報告など、面倒なことは必要なっし!皆さんが楽しいwebライフをすごせますように♪ ← これも無料素材のひと~つ!無料だよ! あ、この素材いいなぁ♪と思ってくれたら、どんどんリンクしてくれると嬉しいです!!下記のバナーをどうぞご活用ください!また学校教育関連の資料や素材としても、どうぞご利用ください、お役立ちできると嬉しいです。

  • 忙しい人のための「初めてのPHP」

    この記事は7年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。説明は適度に、駆け足でお届けします。 言っておきますが、これを覚えたからと言って「PHP出来ます!(キリッ」とか言ったら鼻で笑われるレベルだということは認識しておいてくださいね。 <追記あり:2012/02/16> 大前提 HTML/CSSの基的なところはわかってるものとします。FTPでアップロードするって意味さえわからない人はこのへんで勉強してください。つまり、出直してください。 あと、もっとちゃんと勉強したい人はこんな駄文を読まないほうがいいです。アシアルさんのコンテンツを読んでください。この文章の100倍素晴らしいコンテンツが満載です。 エディタ Windowsユーザなら、標準で付いてるメモ帳を使うのはやめましょう。 PHPに限らず、プログラムを触るなら、あんなもん使わないでください。文字コードも変更でき

    忙しい人のための「初めてのPHP」
  • スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ

    こんにちは、ブロググループの飯田 (@iishun) です。 2011 年はさらにスマートフォン市場の拡大が加速すると云われています。弊社でも 2010 年 10 月にライブドア全体のスマートフォン関連事業を推進していくスマートフォングループが設立されました。 が、各コンテンツのスマートフォンサイト・アプリは各グループのコンテンツ担当が運用するのでスマートフォン関連の知識は必須になります。 そこで今回は僕がここ最近実践しているスマートフォンに関する勉強法を、実際に使用した参考書籍と共に紹介してみます。これから「スマートフォンの事を勉強しなきゃ!」と思った人に役に立ってもらえればなと思います。 1. HTML5/CSS3 の特徴を知る HTML5/CSS3 がスマートフォン用のマークアップ言語というわけじゃありませんが、スマートフォンのウェブサイト (Webkit 系) は HTML5/CS

    スマートフォン関連の基礎勉強法 : LINE Corporation ディレクターブログ
  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • CSSでマルチカラムレイアウト

    はじめに 連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、連載の総まとめとして、CSSでマルチカラムレイアウト(段組レイアウト)を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLCSSの基を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 (X)HTMLCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は

    CSSでマルチカラムレイアウト
  • Bos138 | Agen Juragan Bos 138 Slot Login Link Alternatif

    🎰 Game Online, 🎲 Angka Jitu, 🏆 Pertandingan Bola, 💸 Permainan Kartu Game Bos138 menawarkan berbagai jenis permainan slot yang tidak hanya menarik dari segi visual namun juga menjamin keamanan dan keadilan bagi para pemainnya. Di era digital ini, kepercayaan menjadi aspek penting dalam pemilihan situs judi online, dan Game Jackpot berupaya keras untuk memenuhi ekspektasi tersebut dengan menyedi

  • css-lecture.com