Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。 そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコンポーネント集です。 Wired Elementsの使い方 こちらがデモです。枠などがラフですね。 デモです。スライダーなどを使ってスタイルを変えられます。 色を変えたりもできます。 リストボックスの例。 プログレスバー。 ラジオボタン。 テキストエリア。 カード。 Wired Elementsは <wired- ではじまるカスタムタグを定義しています。あらかじめ用意されているコンポーネントを組み合わせてデザインを作っていきます。元々良い感じに乱れたデザインになっているので、
モトローラ製。HTML5 Webアプリケーションを作るためのオーサリングツール·Ninja MOONGIFT
NinjaはHTML5 Webアプリケーションを開発するためのオーサリングツールです。 Webのオーサリングツールの代表格と言えばDreamweaver。しかしHTML5、さらに各種フレームワークの登場以降、徐々に状況が変わってきています。そんな中登場したのがNinja、Google Chrome上で動作するHTML5オーサリングツールです。 インストールします。Chromeウェブストアでインストールできます。 インストールしました。 起動するとクラウドサーバのURLが求められます。 サーバになるアプリもダウンロードできます。 ローカルで立てるサーバを使います。 色々な拡張子のファイルが作成できるようです。 こんな感じにドローを描いていきます。 Google Chrome上でのプレビューです。 3Dも作成できます。 タイムラインのデモ CSSを使ったデザイン 3DモデリングNinjaはHT
RetinaサポートWebへの第一歩 – Taiyo Fujii, writer
iPhone 4、iPad 3でスクリーンを改革したAppleが平然とデスクトップにも切り込んできた。 MacBook Pro Retina のことだが、一度触るともう戻りたくなくなるほど美しい（個人的には MacBook Air を買ってしまったんだけど）。そんな美しいスクリーンの価値を落とすのがWebサイトだ。画像の解像度を間違ってしまったかのような見栄えになってしまう。 まず、一番簡単なあたりから。WordPressを使っているなら、Retina for WPを使えばエントリーにアップロードするメディアに限っては簡単に Retina 対応できる。昨日アップロードしたエントリーで使っているが、 window.devicePixelRatio をJavascriptで判定して cookie を喰わせ、読み込む画像を判定している。 [retina normal=”http://blog.t
もっとHTMLを知ろう。Mozilla製のWebサイトクリエイター·Mozilla Thimble App MOONGIFT
Mozilla Thimble AppはMozillaの開発したWebサイト作成ツールです。 インターネットはみんなにとって身近なものになっていますが、Webサイトを作るという行為はまだまだ敷居が高いように見えます。しかし、それはとっても簡単なことなんだよ、と教えてくれるのがMozilla Thimble Appです。 左側がソースコード、右側にプレビューが表示されます。 入力中はリアルタイムにコードチェックが行われて、エラー通知が出ます。 問題がすぐに分かります。 HTMLページを公開できます。 タグを選択するとこうやってフローティングで説明が表示されます。 サンプルです。動物紹介ページです。 公開用URLです。 実際に作成されたページです。 こんな感じのテストページもあります。 Mozilla Thimble Appはあえてオーサリングツールを使わずコードを直に書いてコンテンツを作成し
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
WordPress初心者がハマリやすいエラーや問題とその解決方法
WordPressでブログやサイトを作成・運営する際に役立つ、ハマリやすいエラーや問題とその解決方法を紹介します。 WordPress Tips and Tricks for Beginners [ad#ad-2] 下記は各ポイントを意訳したものです。 テーマとテンプレートの違いは？ 画像が表示されない URLを全部書くのが面倒 パンくずを設置したい ページごとに異なるスタイルシートを適用したい 新しい記事を表示したい テーマとテンプレートの違いは？ 問題 WordPressのテーマファイルとテンプレートの違いが分かりません。 答え テーマファイルはあなたが必要とするファイルをすべて含むフォルダです。 例えば、WordPressのデフォルトのテーマファイル「Twenty Eleven」がそうです。 WordPressをはじめる多くの人がテーマファイルからはじめ、それを元にブログやサイトを作
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
これがあればWebアプリケーションのデザインがすいすいできる·Bootstrap MOONGIFT
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。 BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 グリッド それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。 BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTML
フォントワークス/イワタ/モトヤが使えるWebフォントサービス「フォントプラス」
筑紫オールド明朝・筑紫A丸ゴシック・筑紫ゴシック・ユトリロ・マティス・ロダン・スーラなどの有名フォントをウェブフォントとして利用できるのが本日から開始されたウェブフォントサービス「フォントプラス」です。 フォントプラス http://webfont.fontplus.jp/ 現時点ではフォントワークスのフォント268種類が用意されており、以下から確認することができます。近日中にイワタとモトヤにも対応するそうです。 対応フォント一覧 | サービス紹介 | フォントプラス http://webfont.fontplus.jp/service/fontlist 筑紫オールド明朝 筑紫A丸ゴシック 筑紫ゴシック ユトリロ マティス ロダン スーラ 欧文フォントはファイルサイズが軽く数百キロバイトしかないのがほとんどなのでウェブフォントは割と使われているのですが、日本語フォントはやたらと文字数が多く
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
ダウンロードしておきたい高品質な無料アイコン素材30個まとめ 2011年6月度
毎月世界中で公開されている無料アイコン素材をまとめて紹介していますが、今回は2011年6月分まとめエントリーとなります。 海外デザインブログUnderworld Magainesで比較的新しく公開された無料アイコン素材を30個まとめたエントリー「30 Really Cool Free Icons to Download」が公開されていたので、今回はこちらとして個人的にブックマークしておきたいアイコン素材をまとめています。 細かい部分までていねいにデザインされた素材ばかりとなっており、アイコンを使ったナビゲーションメニューやWebデザインのアクセントとして利用してみてはいかがでしょう。 詳細は以下から。 最近公開されたばかりの無料アイコン素材まとめ 2011年6月度 Google Plus One Icons 最近公開された新しいソーシャルメディアGoogle +1をモチーフにしたアイコン素
カスタム投稿タイプに独自の権限を与えてみた - SUSH-i LOG
少し特殊な利用方法となりますが、カスタム投稿タイプで追加した項目の追加・編集・削除権限を持つ独自の権限グループを作る方法について、残しておきます。 実装内容 カスタム投稿タイプの追加については「register_post_type」、権限グループの追加については「add_role」、また、そのグループに対して独自のルールを持たせるのが「add_cap」となります。 最終的に以下の内容をfunctions.phpに入力することで、「ptname」というidのカスタム投稿タイプの追加・編集・削除の権限を持つ「authid」というidの権限グループを追加できます。 <?php function my_custom_post_type() { register_post_type( 'ptname', array( 'label' => 'カスタム投稿タイプ名', 'public' => true
サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ
ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向
JavaScriptを活用した奇麗なWebアルバム·PhotoFloat MOONGIFT
PhotoFloatはJavaScriptを活用したWebアルバム。パーマネントURL対応。 PhotoFloatはJavaScript/PHP製のオープンソース・ソフトウェア。写真で重要なのは見せ方だ。ただ撮りためていても面白くはない。それを誰かに見せたり、公開しなければいけない。そしてその見せ方にもこだわらなければならない。 一覧 写真を全てZipで圧縮してメールで送られても何も面白くはない。FlickrやPicasa、Facebookを使う手もあるが、自分の写真は手元にあるのが良いと考える人はPhotoFloatを使ってみよう。 PhotoFloatの特徴としては、最低限のPHPファイルを除けばほとんどはJavaScriptで実装されているということだ。写真の一覧、アルバム表示、写真の詳細などが全てJavaScriptで作られている。写真の詳細画面では同じアルバムにある写真がサムネイ
Dream.Build.Play 2012 Challenge
All Microsoft Global Microsoft Security Azure Dynamics 365 Microsoft 365 Microsoft Teams Windows 365 Tech & innovation Microsoft Cloud AI Azure Space Mixed reality Microsoft HoloLens Microsoft Viva Quantum computing Sustainability Industries Education Automotive Financial services Government Healthcare Manufacturing Retail All industries Partners Find a partner Become a partner Partner Network Azu
ベイテック、Googleサイトで作るポータル用テンプレートを無償提供 | 経営 | マイコミジャーナル
ベイテックシステムズは11月17日、Google Appsを使った社内情報システムの導入支援サービス(サテライトオフィス・プロジェクト)において、GoogleApps Premier Editionを利用した企業向けに、Googleサイトを利用した企業ポータル/社内ポータルを無償でセットアップするサービスを開始すると発表した。 同サービスでは、Googleサイトを利用して企業ポータル/社内ポータルを作成する際に必要となるテンプレートを無償でセットアップする。 今回提供されるテンプレートは「企業ポータル/部門ポータルテンプレート」、「メンバースケジュールポータルテンプレート」、「会議室空き状況ポータルテンプレート」。企業ポータル/部門ポータルテンプレートを用いることで、社員へのお知らせ、よく使う申請書などのドキュメント雛形などを配置したページが簡単に作成できる。 社内ポータルのイメージ画面
Webブラウザ上で楽譜を描く·Vexflow MOONGIFT
VexflowはJavaScript製のオープンソース・ソフトウェア。Web上には無数のコンテンツが存在するが、それは主にテキストが主体になっている。数式のようなものでさえ画像で表現されることが多い。これは非常に勿体ないことだ。 テキストを使って表現できればシステムとの連携も容易になったり、Webクローラーに拾われてインデックス化することも考えられる。同様に表現しづらい情報である楽譜をJavaScriptで表示するのがVexflowだ。 Vexflowは一定のフォーマットに従って書かれたテキストをJavaScriptを使ってCanvas/SVGで表現したものだ。その表現力は非常に高く、音符を描くのはもちろん、数字やアルファベットを表示することもできる。ピアノのみならず様々な楽器に対応できるだろう。 他にも音符を線でつないだり、ト音記号を描いたりと高機能だ。JavaScriptなので、変更と
小規模な組織向けのパブリッシングシステム·HotInk MOONGIFT
HotInkはRuby on Rails製のオープンソース・ソフトウェア。インターネットが隆盛になっている中で、その求心力を大きく失っているのが新聞をはじめとするオールドメディアだ。個人はもちろん、複数人が集ったミニマムな組織がシェアを伸ばしている。 ページ作成画面 ミニマムな組織ではシステム費用に大きな投資はできないため、自ずとオープンソースの利用を模索するようになる。地域情報を発信したり、特定分野に関する情報を発信するサイトなどを構築する時に使えるのがHotInkだ。 HotInkはCanadian University PressやCampus Plusといったサイトを構築する際に使われているシステムで、オンラインメディアを立ち上げるのに必要な機能が詰まっている。記事やブログを書いたり、画像をアップロードしたり、音声ファイルのアップロードもできる。 ダッシュボード コメントを管理した
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ちょっと珍しいアイコン素材のまとめ、日本の伝統文化、エコ、キッチン用品、矢印、雪の結晶などレアアイテムたくさん
IDEA * IDEA
