Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 本当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多
ダッシュボード構築用UIライブラリ·Dashing MOONGIFT
Dashingはダッシュボード用ライブラリで、グラフを表示したり並び替えが自由にできます。 システムには必ず管理インタフェースがあります。表向き華やかでも、裏のシステムは中の人用とあって粗雑なUIであるケースが多いようです。そこで使ってみたいのがDashingです。 なんと奇麗なダッシュボード。 ドラッグアンドドロップによる配置換えも可能です。 自分の見やすいように配置を変更できます。 Dashingは数値やデータのリストを確認するのにぴったりなモダンなUIとなっています。細かなデータ管理ができる訳ではありませんが、ステータスをチェックしたりするのにぴったりです。APIが公開されているので、それにあわせてデータを配信すればDashingが華麗なUIにしてくれるはずです。 DashingはRuby製のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webサイトの表のUIが整っ
その場で編集。Webベースのガントチャートエディター·jQuery Gantt editor MOONGIFT
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
[JS]IE6/7/8でアクセスしたユーザーに新しいブラウザのインストールを促すスクリプト -IE Alert js
ユーザーがIE6/7/8でアクセスした際、IE9へのバージョンアップや他のモダンブラウザのインストールを促すjQueryのプラグインを紹介します。 IE Alert js [ad#ad-2] IE Alert jsのデモ IE Alert jsの使い方 IE Alert jsのデモ デモはIE6/7/8でご覧ください。 IE9、Firefox, Chrome, Safari, Operaでは、下記のように通常通りに表示されるだけです。 デモページ：IE7で表示 [ad#ad-2] IE Alert jsの使い方 使い方は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 iealertフォルダ内にスタイルシート、および必要な画像が入っています。 <link rel="stylesheet" type=
UIデザインが素晴らしい35のウェブスタートアップ ｜SEO Japan by アイオイクスSEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
最近かつて以上にウェブサービスにとってデザインが重要だ、ということがいわれることが多くなってきた気もします。PinterestやFlipboard等、いわゆる次世代ウェブデザインを代表するようなサービスも大人気ですが、もちろんそれだけはありません。今回から新たに登場する米国の人気デザインブログspyrestudiosから、最近のスタートアップでデザインが素晴らしいサイトを35まとめた記事を紹介します。 — SEO Japan 何年か前までは誰もがWeb2.0の流行について話していた。インターネットではMySpace、Friendster、Facebook、Twitter、そして最近ではFoursquareやPinterestに続く新しいスタートアップが次々に登場している。テクスタートアップの世界では、新しいアイデアにこと切れることはない。 ウェブデザインに関しても同じことがいえる。今回、最
グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 − Publickey
グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル（Model）の部分とユーザーインターフェイスの部分（View）、そしてビューとモデルのあいだで制御する部分（Controller）に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
UXデザイナー(User Experience Designer)は本当に必要なのか？ / Maka-Veli .com
※超今更です。今更UXかよと言われそうで恥ずかしいんですが、まだまだUIとUXが混同されがちだなーというのと、じゃあUXって必要なのかよ？というモヤモヤを整理したいなと思い書きました。 UXデザインとは まず前提ですが、UX(User Experience)デザインとは、 ユーザーエクスペリエンス（UXと略記されることが多い）とは、ユーザーがある製品やシステムを使ったときに得られる経験や満足など全体を指す用語である。ウェブ上での商品販売などソフトウェアやビジネスに関連して使われることが多いが、インタラクションデザイン全般に適用される概念である。例えば自動音声応答装置は貧しいユーザーエクスペリエンスをもたらすデザインとしてよく引き合いに出される。VIA:Wikipedia と、あります。 ユーザーエクスペリエンス＝直訳するとユーザーの経験・体験と翻訳されますが、ユーザーが満足するかしな
シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>本体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
Webサイト高速化？Google PageSpeed Insightsを使ってみた｜イラスト屋さんのWeb製作ブログ
「Web製作のお供にこのツール」となりうるか？ ツイート Google Pagespeed Insightsとは？ サイトの表示速度を教えてくれるGoogleの新ツールです。 今の時代、何でもかんでも時間との勝負というか、もう「遅い！」というだけで不利になることがあります。身近な例でいえば宅配便なんかもそうでしょうし、ファストフード店なんて総称からして遅いのは許されない雰囲気です。じゃあサイトやブログはどうなのかというと、やはり速く表示されるほうがいいです。 ということで、今回はこのツールの使い方をご紹介します。 Google PageSpeed Insights Googleのサービスは何でもわかりやすいですね。 検索窓に調べたいページのアドレスを検索窓に入力するだけなのですが、念のためにお伝えしておくと、サイト名の通りページのスピードを測定するものなので、トップページである必要はありま
お試しを！クールなUIの掲示板·esoTalk MOONGIFT
esoTalkは格好いいUIの掲示板ソフトウェアです。 Webコミュニティの基本と言えば掲示板です。２ちゃんねるからphpBBをはじめ、多数の掲示板ソフトウェアが存在しますが今回紹介するのは最近のスタイルを活かしたesoTalkです。 スレッド一覧です。 スレッド詳細です。 新規登録します。 登録すると既読管理ができるようになります。 タグで絞り込んだりできます。 返信用ボックスです。 esoTalkはスタイリッシュな見栄えに加えて、JavaScriptを使った各種アニメーションが特徴となっています。実際使ってみると、その使い勝手の良さが分かるはずです。 esoTalkはPHP製のオープンソース・ソフトウェア（GPL v2）です。 MOONGIFTはこう見る インターネット上のサービスは流行り廃りがありますが、それでも２ちゃんねるは根強く生き残っています。コミュニティサイトは一度形成される
海外と日本｜僕らのWeb制作戦争のお話
オーストラリアに行っていた中学時代の友人が、現地のWeb制作会社で働いて、この度現地の差別的な扱いに嫌気がさして帰って参りました。 同時に、「じゃぁ一緒に語り明かそうぜ会」を開いたところ、8人のむさくるしい男と3名の天使が集い、決して合コンではない同窓会を開いたわけです。そこでは製造業をする人もいれば銀行の受付をする人など、様々な業種の人が集まったわけですけど、まぁ私としてはオーストラリアのWeb制作が気になったものでその辺を熱く語り合ったお話をまとめさせて頂きました。 当たり前ですが日本は大きく違う メンバーのなかでWebに関わる仕事をしているのは天使2名と男2名（私含む）という状況で、そのへんの話がどうしても盛り上がってしまったのです。 オーストラリアと言えばコアラですが、そんなことよりBOSSがすごいという彼（以下；銀メガネ）。 彼は私におみやげを用意してくれていたようで、変な人形の
今月のダウンロードしておきたいフリーのデザインフォントのまとめ -2012年4月
最近リリースされたものを中心に、高品質なフリーのデザインフォント・タイプフェイスを紹介します。 Subtle Sans 個人・商用利用無料。 Valentina 個人・商用利用無料。 Sports W
Android 2.x系でCanvasタグのtoDataURLメソッドをサポート·todataurl-png-js MOONGIFT
todataurl-png-jsはAndroid 2.x系でCanvasタグのtoDataURLをサポートするJavaScriptライブラリです。Canvasタグの内容をPNG画像として出力できます。 todataurl-png-jsはAndroid 2.x系においてCanvasタグに描いた内容をdataURIとして画像で取り出した上で再利用できるようにするJavaScriptライブラリです。 例です。自分で描いた模様をバックグラウンドに設定しています。 こちらはCanvasタグに生成した画像を背景に使っています。 実際のコードです。CanvasのデータをtoDataURL()で取り出してバックグラウンドイメージに適用しています。 toDataURLメソッドはHTML5対応のWebブラウザであれば使えるかと思っていましたが、Android 2.x系のWebブラウザでは使えないそうです。そこ
高品質なコンポーネントを使って格好いいサイトを作ろう·Chico UI MOONGIFT
Chico UIはWebサイト向けのコンポーネント群、デザインを提供しています。 最近はTwitterのBootstrapを使ってWebサイトを構築しているところが増えてきましたが、何となく似通ったデザインになってしまうのが難点です。人とはちょっと違う、でも簡単に格好いいデザインを実現したいという人にお勧めなのがChico UIです。 オートコンプリートです。 ボタンを押してハイライトします。 カレンダーです。 スライドです。 文字数カウンターです。 タイポグラフィです。 日付ピッカーです。アイコンをクリックでカレンダーが表示されます。 ドロップダウンです。 クリックで下のコンテンツが表示されるデモです。 フォームも多数デザインが揃っています。 レイヤーです。マウスオーバーで吹き出しが出ます。 モーダルウィンドウです。 メニューです。階層に対応しています。 タブです。 ツールチップです。
960 Grid System — Demo
960 Grid System 12 Column Grid 940 60 860 140 780 220 700 300 620 380 540 460 460 60 60 60 60 60 60 60 60 60 60 60 60 60 380 220 220 220 220 60 380 16 Column Grid 940 40 880 100 820 160 760 220 700 280 640 340 580 400 520 460 460 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 400 220 220 220 220 40 400
無料で商用利用可な1100枚ものロイヤリティフリー画像をMediafire上で配布中
いろいろなソフトウェアを作って配布しているRizonesoftの管理人がパートタイムでグラフィックデザインの仕事をしたときにネット上にある無料で使えるストックフォトの品質が低いことに非常に悩まされた経験を生かし、個人利用でも商用利用でもOKなロイヤリティフリーで永続的なライセンスに基づいて使用できるストックフォトを1100枚もMediafireを使って配布しています。 1100 Free Royalty-Free Images | Rizonesoft http://www.rizonesoft.com/2012/freestock/ ページの中ほどにリンクがあります。各リンクごとに画像が100枚ずつあるという感じ。 クリックすると以下のようなサイトが開きます。 ページ右上の「Image View」タブをクリックすると各画像を見ることが可能です。 ダウンロードしたい画像がある場合、サムネイ
HTML5の中でも使える、使わない方が良い機能を学ぶ·HTML5 Please MOONGIFT
HTML5 PleaseはHTML5の利用推奨度を機能ごとに検索できるソフトウェアです。 HTML5が登場してしばし経ちましたが、それでも積極的に使っていくのを躊躇している人も多いのではないでしょうか。そこでHTML5の中でもどの機能を使っていくべきか、または避けるべきかを教えてくれるのがHTML5 Pleaseです。 トップページです。HTML5対応Webブラウザで見てみましょう。 インクリメンタルなフィルタリングもできます。 使えるか使えないかは色分けして表示されます。 やはり全ての機能が使えるという訳ではありません。 各機能からWebブラウザのバージョンごとのサポート具合が一覧できます。 APIに関連したものだけを抽出して対応状況が見られます。同様にCSS、HTML、JavaScriptといった具合に指定できます。 IEのバージョンごとの指定もできます。 HTML5 Pleaseでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPress › Error
https://design-spice.com/2012/06/13/responsive-web-design-image/