GUI環境でWeb の UIを構築する開発ツールを作りたい - mizchi's blog
qiita.com という記事を書いた。 要約としては、「今こそGUIでWebのUIを生成できるような開発環境を目指すべき」みたいな話。 概念 Web の GUIの概念を分解すると JS はViewとしての実装を持つプレゼンテーションレイヤー、ロジック注入のコンテナーレイヤーに分割して考える HTML/CSS は、レイアウト定義のレイヤー、そのレイアウト領域を占めるエレメントのレイヤーに分割して考える この考え方に基づくと、GUI開発環境で作るべきものは、 テンプレートへのJSロジックのつなぎ込み レイアウトエディタ 個別のエレメントの装飾 となる。 JSロジックのつなぎこみはヘヴィにJSだからまだコードで書く方がいい。作るならノードベースのエディタになりそう。 エレメントの装飾は自力で頑張るより Sketch から生成できないか試したい。後回し。 レイアウトエディタは今でも作れそう。作っ
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編) 2011-01-02 いつも通りデザイン系のサイトを見てると、 "Fresh Examples of Web Design and Interfaces" という記事を見つけました。 綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。 そしてtwitterでこんなことをつぶやいてみました。 そしたら、"ぜひ"いう声があったので、ノリでやってみました。 実際にやってみるにあたり。 先ほどのサイトからデザインを選ぶことになったのですが、著作権的に問題があったので、先ほどのサイトからインスパイヤーしたデザインを自分で作ることにしました。 こんなんにした。 コーディングする前に コーディングの方法は様々あります。 自分の中で以下のようなルールを設けました。 ブラウザの対応はIE6-8, 最新モダ
美しくてわかりやすいシングルページウェブデザインの例30
ウェブサイトが生まれてから現在までの20年間で、あまたのウェブデザイナーたちが試行錯誤を重ねながらより美しく、より見やすいウェブデザインを生み出してきました。 ここでは、見た目が美しくて内容がわかりやすい最新のシングルページウェブデザインの例を30種類集めています。どれも新鮮なアイデアが詰まったページばかりなので、これからウェブデザインを始めるという人や、何かデザインのヒントが欲しいという人などの参考になるのではないでしょうか。 シングルページウェブデザイン30種類は以下から。30 Beautiful Single Page Website Designs | SpyreStudios 01：Skysoclear 02：FeelWire 03：Marius Roosendaal 04：Silverback App 05：Scribble And Tweak 06：Visual Box 07
新著「Webデザイン・フォーラム」が発売されました
新著「Webデザイン・フォーラム」が発売されました 執筆に参加させてもらった書籍「Webデザイン・フォーラム 10人のプロが教える原則と経験則」が3月11日に発売されました。 Web制作に必要な知識が次のような感じでFAQ形式解説されています。 CHAPTER 1 Web制作の基礎知識とワークフロー Q1 制作をはじめる前に心がけることはありますか？ Q2 Web制作の基本ワークフローを教えて！ Q3 ペルソナやユーザーシナリオって何？ Q4 デザイン作業をはじめる前にやっておくべきことは？ Q5 サイトマップとは何を指しますか？ Q6 デザインの方向性が決まらない！手がかりが欲しい！ Q7 ラフはクライアントが描くの？自分で描くの？ Q8 ラフを描くツール。現場では何を使ってる？ Q9 標準的な画面サイズと適正な表示サイズを教えて！ Q10 iPhoneやAndroid、ケータイ向けサイ
WordPress カスタムメニューの使い方（その2：wp_nav_menuとregister_nav_menuによるカスタマイズ）
WordPressのカスタムメニューのカスタマイズ方法について解説します。 カスタムメニューを利用すれば、サイドメニューだけでなく、ナビゲーションを任意の場所に設置することもできるようになります。本エントリーでは、フッタに次のようなナビゲーションを追加してみます。 WordPressのバージョンは3.3.1を使っています。カスタマイズにはTwentyElevenテーマを使います。また、フッタナビゲーションはヘッダナビゲーションのスタイルをそのまま流用しているので、id属性値が重複しています。予めご了承ください。 管理画面上でカスタムメニューを利用する方法は割愛していますので、「WordPress カスタムメニューの使い方（その1：基本）」を参照してください。 １．wp_nav_menuを使ってカスタムメニューを表示する フッタにナビゲーションを表示するための準備として、footer.php
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。
WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）
とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね！今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。 今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。 今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプやカスタムタクソノミー（カスタム分類）を使って作っています。 ページを表示する為に使っているテンプレート
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
ビューティホーなHTML5＆CSS3テンプレート５０:phpspot開発日誌
50 Beautiful Yet Free HTML5 And CSS3 Templates | Free and Useful Online Resources for Designers and Developers ビューティホーなHTML5＆CSS3テンプレート５０ HTML5、CSS3のテクニックを学べる上に無料で使えるということでなかなか有用なまとめになってます。 学習がてら自分でも無料で公開しちゃうなんてのもよい学習メソッドかもしれませんね 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcanvasを使ったアニメーションするタグクラウド実装スクリプト「TagCanvas」 Flash使ってなくてもHTML5でここまでクールにできるというプロフェッショナルサイト集
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime
結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えているだけでなく、class名1つで実装出来るようになっているので、綺麗なソースを保持する事が出来るようになっています。 いろいろ
Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syze
シンプルで良さそうだったので一応備忘録。 Media Queriesライクにブレークポイントに 応じてスタイルを変更できるライブラリです。 非依存型で1KBと、超軽量スクリプトなので 簡単なキャンペーンサイトとかならこれでも いいかもしれないですね。 Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴です。 サイズに応じてスタイルが変わっています。何してるかというと、非常にシンプルで指定したブレークポイントに合わせて<html>にclassを付加させてるんですね。 サンプルどうぞ。 Sample ※動作確認はresponsivepxが便利です iPhoneだってOK。実機でも確認済みです。 コード<script src="syze.min.js"></script> <script>syze.
ど素人のCSSのみで行うブログデザイン構築編 ① 〜 Live CSS Editor を使おう！〜 | なまら春友流
CSSど素人の春友です、こんにちは。 先日こんな記事を書きました。 ブログテーマをWordPressフレームワーク「Thematic」に変更しました | なまら春友流 このテーマにしてからCSSにものすごく興味を持ち始めています。 ってことで自分の備忘録としてデザインを変更してゆく様をブログに書いていこうと思いました。 あくまでも自分で実践してみたことを記載してゆくつもりです。 ど素人なので間違っていたり、美しくないCSSの書き方をしていることも多々あると思いますので、その際はご指導ご指摘いただけると幸いです。 自分ルールとしてphpファイルを直接弄ることはせず、CSSのみでのサイトデザイン変更を目的としています。 理由は上の記事でも述べていますが、子テーマのCSSを編集することでシンプルなブログ管理をするためです。 今回はこの不定期連載の第1回目、どのような方法でCSSを弄っていくか、と
FoundationをベースとしたHTML5製のレスポンシブ対応WordPressテーマフレームワーク・Reverie
以前ご紹介したレスポンシブWeb デザイン対応のFoundationをベース としたHTML5製のWordPressテーマ フレームワーク・Reverieのご紹介 です。どんどん出てきますね。 Foundationってのは以前ご紹介したように、zurbっていう、jsライブラリ等を一杯配布してくれてるサイトのプロダクトで、WPテーマ化も済んでるんですが、またFoundationベースでリリースされたようです。 Foundationベースで、テーマ構造はRootsを参考にしたそうです。レスポンシブ対応には例によってMediaQueriesが使われています。bbPressとの互換性もあり、ウィジェットや画像のキャプションにもしっかりHTML5タグが出力されるようになっているみたいです。 スクリーンショット スクリーンショットです。iPadとiPhoneのスクショはシミュレーターのElectric
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
レスポンシブなWebサイト構築向けのフレームワーク・FoundationのWordPressテーマ版
以前ご紹介した、zurb提供の レスポンシブWebデザイン対応 サイト向けのフレームワーク、 FoundationにWordPressテーマ 版が追加されていましたので ちょっとメモです。 休日ですし、少し軽めの話題・・・以前ご紹介しつつ、まださほど使ってないうちにテーマ化されてしまったので少し触れてみました。 Foundation for WordPress 詳細は以前の記事を見ていただくとして・・・あれ？もう話すこと無い。まぁWPのテーマ化しましたよ、って話でした。 以前もチラッと書きましたけど、Foundationはほぼまっさらな状態なので既存サイトに組み込みにくいMediaQueriesを使ったレスポンシブWebデザイン対応にはそこそこ向いてるんじゃないかなと思ってはいます。とは言いつつも、昨日は問題点のディスカッションもしていました。レスポンシブWebデザインはまだまだテストとエ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
デザインの参考になる、海外のWordPressテーマ集
HTML5ベースのWordPressのテーマファイルのまとめ
HTML5&CSS3を利用した美しい４０のフリーテンプレート集:phpspot開発日誌