cmmntr.comThis domain may be for sale!
[復刻版]WordPressテーマ：作成とカスタマイズのガイド | Waviaei
2007年の5月に書いた「WordPressテーマ：作成&カスタマイズ」と言う記事を復活させる事にしました。正確には、当ブログの記事ではなく、サブドメインで公開してた別サイトです。それを数回に分けて記事にする事にしました。 今回この古～いガイドを記事として投稿する事にした理由は： 古くても、未完成でも、何かWPコミュニティにcontributeできる物は公開しておきたい waviaei.comが存在した期間の中でも、index.phpに次ぐ第2位のページビューを獲得しているページを、お蔵入りにするのは（需要はともかく）個人的にもったいないと感じる この2点です。そして注意してほしいのは： WordPress2.0～2.2頃に作成したので、それらバージョンに基づいて書かれている そして今回復活させるにあたり、最新バージョンに合わせて内容を編集したりはしていない の2点です。 このガイドの概要
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | Topics | DB - KAYAC Designer's Blog（カヤック デザイナーブログ）
こんにちは。意匠部ME課のtacamyです。 CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した iPhone Webアプリのテンプレートセットを配布します。 イベントの内容はこちらのエントリーをご覧ください。 ダウンロード iphone-tmpl.zip セット内容 index.html HTML5+iPhone用HTML css/iphone.css HTMLの新要素＋iPhone専用CSS js/iphone.js URL&検索バーを消す指定 js/lib/jquery.js jquery apple-touch-icon.png Webクリップアイコン cache.manifest マニフェストファイル .htaccess < dd style="margin-bottom:0.5em;">.manifestのMIMEタイプ設定 viewportにつ
iPhone用のサイトを作成する時に便利なライブラリ・テンプレート集 - 仮想化する僕たち
いろいろと新しいライブラリとかも出てきているようなのでまとめてみました。 アプリを作るのも良いですが、webサービスとしてさくっと世の中に出してしまうのも手ですね。 アプリと言いつつwebサービスで十分といった類のものも多い状態ですし・・・。 iui.jsはsafari上でiphoneアプリっぽいデザインのサイトを実現するためのライブラリです。 cssとJavaScriptを駆使して簡単なhtmlを組むことでおしゃれなサイトに変換してくれます。 アニメーションする左右移動によるページ遷移はiphoneのipodと同じです。 User Interface (UI) Library for Safari development on iPhone iWebKitもiuiと同様のコンセプトで開発されている変換用ライブラリ。 後発ということもあって完成度は高くアプリと見紛う程です。 iWebKit
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。 Less Framework 2 ベースとなるカラムは下記のようになります。 iPhoneなどのモバイルデバイス 320px、2カラム iPadやネットブック 768px、5カラム デスクトップなどのブラウザ 1280px、8カラム 三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。 異なる点はカラムとマージンの量です。 レイアウトの変更にはCSS3のMedia Queriesが使用されています。 body {width: 696px;} @media only screen and (max-width: 767px) { body
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
WebサイトをiPhoneで見やすくする5つの方法
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
KenG Weblog - WebサイトをiPhoneに最適化する方法
「WebサイトをiPod touchに最適化する方法の説明会」があったので、行ってきました。iPhone用Webページを作るとっかかり的な内容で終わりましたけど、これを足がかりにし、jQueryなんかと合わせて色々作ってみようと思ってます。以下、ひたすら箇条書き。なお、Apple Developer Connection関連のコンテンツを見るにはADC登録が必要のよう。 ◎iPhone上でのブラウザ設定項目 JavaScriptのON／OFF ポップアップブロックのON／OFF Cookie受け入れ ◎iPhone用ページ制作時の注意点 HTML / JavaScript / CSSはそれぞれ分割したファイルとする CSSファイルは、PC用とiPhone用を別々に用意する ◎iPhoneのSafariは「Web標準」ベース HTML4.01/XHTML1.0をサポート。WML（Wirele
CSS3やHTML5などのコードを書く様子を再現し、徐々に 出来上がっていく様を見ながら学べる チュートリアルサイト・TheCodePlayer - かちびと.net
一つの形として面白かったのでシェア。 実際にコードを書いていきながら徐々に 出来上がっていくさまを見ながら学べる チュートリアルサイト。動画のチュート リアルより見やすく頭に入りやすい気も しないでもないです。 こういう形で学べるのは面白いですねー。はじめてみるタイプのチュートリアルサイトです。よく、書いたコードがインタラクティブに反映されるサービスがありますが、そのチュートリアル版という感じ。 ブログ形式でチュートリアルを公開しています。 説明するより見た方が早いですね。以下のようなチュートリアルです。Play Walkthroughをクリックするとコードを打っているのが分かります。右はビューエリア。 Make a simple cloud in CSS3 こういう発想は全然なかったですけど、Youtube等の動画で見るより分かりやすい気はします。動画は音声も使ええるのが魅力でしょうけど
4時間まったりWordPressテーマ作成講座
1. 4時間まったり！ WordPressテーマ作成講座 html/cssが分かる人、 コーダーさんやウェブデザイナーの方が、 自分でWordPressの勉強が できるようになるところまで。 Shinichi Nishikawa @shinichiN http://nskw-style.com/ http://colog.jp/ 2. 目次 • １： アンケートと目標設定 • ４：テーマ！ • ２：テーマ？？ • テンプレートタグ • テーマを理解するために必要な知識一覧 • WordPressのファイル構成全体 • phpと関数 • テンプレート階層（テーマのファイル構 • データベース 成） • WordPressについて • インクルードタグ • テンプレートタグ • 条件分岐タグ • テンプレート階層 • インクルードタグ • ４：発展編 • 条件分岐タグ • functions.
Rails 3.1でtwitter bootstrapを使用
Ruby on Rails 3.1でtwitter bootstrapを使用。 twitter bootstrapとはこれ http://twitter.github.com/bootstrap/ デザインができない開発者(自分のことです)を助けてくれるCSSフレームワークです。 使用方法はcss,jsファイルをとってきて、Asset Pipelineが有効になるよう・・・ということはせずに gem がありましたので、それを使用します。 twitter-bootstrap-rails https://github.com/seyhunak/twitter-bootstrap-rails リンク先に使用方法が書いてありますが、ざっと書くとこんな感じ。 gemfileに以下の内容を追加 gem 'twitter-bootstrap-rails' bundle installを実行 rails
WordPressのデザインをHTML/CSSのペアで試せる·Pears MOONGIFT
PearsはWordPress上でデザインを試してテーマを作成できるフレームワークです。 PearsはWordPressのテーマですが、デザインフレームワークとしての役割も兼ねています。そして実際にコードを試しつつ、デザインを作ることができます。 インストール後、テーマを有効にします。 一覧の画面です。 記事の画面です。HTML、CSSが入力できます。 例えばリストです。シンプルで見やすいです。 テーブル表示です。 フッターです。 一覧（HTML5）です。 一覧（テキスト）です。 一覧（サムネイル）です。 サムネイルのグリッド表示です。 フォーム（左にラベル）です。 フォーム（上にラベル）です。 検索フォームです。 ログイン系フォームです。 リストです。 ステータス表示です。 タグです。 垂直のタグも。 ナビゲーションです。 水平ボタンです。 水平リンクです。 タブです。 ページネーション
CSS拡張メタ言語「Sass」フレームワークをインストール（Mac） | サイブリッジラボブログ
こんにちは、デザイナーの石井です。 1年ほど前からTwitterのTLなどでしばしば目にして気になっていた「Sass」。 ちょっと調べてみたところ、CSSコーディングの際に「こんな事できたら良いのに！」と 今まで思っていた事が実現出来るすごいフレームワークなのでは？！と思い、 試しに触ってみる事にしました。 が！気軽な気分で手を出してみたものの、Zen Codingの様なものとはまた違い、 どうやらRuby on Railsのプラグインの様なものとして動く様子。 そもそも「Rubyってなに？」っていう状態の生粋の文系デザイナーなので、 案の定、インストールからエラーがでまくり…。 サイブリッジは開発案件も多く手掛けていますので、 こういう時、社内のプログラマーにすぐ聞ける環境なのは助かります。 今回は同じ様に躓くかもしれないデザイナーさんのために、 自分の環境でのインストール成功までの過程
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks.jp
twitter bootstrapを更に便利に使うgemがtwitter bootstrap railsです。 railsアプリを作りましょう。 rvmでgem set作ります。 rvm --create 1.9.3-p125@tbrsample railsアプリ生成します。 gem install rails --no-ri --no-rdoc rails new tbrsample gemを指定しましょう。 Gemfileのgroup :assetsに追加します。 cd tbrsample vim Gemfile gem "twitter-bootstrap-rails" どん bundle install --without=production bootstrapをgenerateしましょう。 必要なjsやcssをapp/assets配下に配置します。 rails g bootst
Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI
個人的にいじっていて便利そうだったのでご紹介。 Bootswatchは、Twitter社が提供するTwitter Bootstrapのさまざまなテーマをダウンロードできるサイトだ。 Twitter Bootstrapといえば簡単に今風デザインのサイトを作れるCSSフレームワークだが、それで作ると「あー、黒いトップバーだし、Twitter Bootstrapね」的になってしまうのが難点だった。 最新版ではテーマをカスタマイズできるツールもついているが、配色などを考えるのが面倒な人もいるだろう。そういう方はBootswatchを利用してみてほしい。 それにしてもどんどんウェブ作りが簡単になっていきますな・・・。
Twitter bootstrap on rails
This document discusses using Twitter Bootstrap, an open source toolkit for building responsive web applications, within a Ruby on Rails application. It describes how to install the twitter-bootstrap-rails gem to include Bootstrap's CSS and JavaScript. It also demonstrates how to generate Bootstrap layouts and forms using generators. The document encourages forking the twitter-bootstrap-rails proj
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
CSS3の制作をぐっと楽にする厳選20のオンラインツール