自分用CSSスタイルガイド
2011年12月時点でのCSSを書くときの自分内での決まりごとを書いておきます。 まあこういうのは自分（やチーム）が分かりやすければ何でもいいと思いますけどね。 基本的に自分以外は編集することがないので、結構好き勝手に書いてます。 インデント・改行・空白基本的にセレクタはインデントなし。宣言（プロパティと値）の部分はセレクタの開始位置から半角スペース2つ分インデントする。@media内など、ネストされている場合はその中のセレクタはアットマークルールの開始位置から半角スペース2つでインデントする。セレクタが複数ある場合は基本的にカンマで改行するが、擬似要素・擬似クラスが違うだけの場合は同一行でもよい。 （リセットCSSなどは除く）宣言ブロック開始の波括弧{は最後のセレクタと同じ行に書き、直後に改行を入れる。宣言ブロック終了の波括弧}の直前に改行を入れる。各宣言ごとに改行する。基本的にはセミコ
文脈によって活かされるコンテンツ配信
今年の始めに執筆した「文脈を理解したWebコミュニケーションデザイン」で、利用者の文脈を理解して Web サイトを設計する必要性を解説しました。当時は Web サイトデザイン全般について供述していましたが、コンテンツ戦略にとっても文脈は大事です。 先日のWordCampで紹介した NPRの映画レビューのページが好例です。PC版では大きなスクリーンサイズと高速回線を活用して、大きな写真や動画だけでなく本文に付随する様々な情報が用意されています。しかし、モバイル版では小さな画像と本文のみが提供されています。小さなスクリーンで移動中かもしれない利用者に対して「目的の記事を読む」というニーズに素直に応えた形になっています。さらにiPadアプリだと、また見せ方が少し違います。タブレットはリビングルームのような気軽な生活の場で利用されるデバイス。ゆったり座りながら記事が読めるようなレイアウトと情報構成
Webサイト制作の終わりと始まり
12月10日に年末好例のイベント CSS Nite Shift が開催されました。Webサイト制作に関わる様々なキーワードに触れながら1年を振り返るこのイベントも既に5回目。今年は「我々が知る世界の終わり（けど大丈夫）」と題し、Web に関わるプロフェッショナル達が、今後クライアントや利用者に向けてどのような価値を提供できるのかというテーマで話をしました。 Webサイトを作ることが目的になっていないか いつの間にか、公式サイトを作って公開することが当たり前になっている今日。CMS が広く導入されるようになってきた頃から、「とりあえず作る」という傾向が強くなった印象があります。システムを上手く活用すれば、コンテンツはあとで後で流し込めるので、コンテンツが揃う前に作れる（装飾をする）という考えが定着したのかもしれません。作ることが目的になっているからこそ、Web サイト制作における価値も作るた
WordPressの検索機能をもっと使いやすくする
2013年4月1日 Wordpress WordPressにはデフォルトで検索フォームが設定されているので、一行のコードを追加するだけで簡単に検索フォームを設置することができます。しかしその検索フォームは本当に簡易なもの。よりユーザーが使いやすくなるようにカスタマイズする方法をいくつか紹介します。実際にWebクリエイターボックスで使っているコードも公開しているので、ぜひ参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ 検索フォームの設置方法 まずは基本編、フォームの設置方法です。自分でオリジナルテーマを作成したり、カスタマイズする時に地味にひっかかる検索フォームの設置方法（たぶん）。設置するだけなら以下の一行をテーマファイル内に記述するだけでWordPressが最初から用意しているフォームを実装することができます。 <?php get_search_form(); ?>
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
Under Construction
Please be wary if some broker is offering this domain for sale.
WordPress のカスタムフィールド・投稿タイプ・タクソノミーを使い分けよう！
12月25日まで毎日ブログをつないでいく WordPress Advent Calendar、7日目担当マクラケン直子 (@naokomc) です。なつき（@Stocker_jp）さんの人気記事「Croppyの作り方」に引き継いでいただきました！ドキドキ。 カスタムフィールドとカスタムタクソノミーについてはなつきさんの記事でも触れられていますが、WordPress で使える便利な拡張機能として、 カスタム投稿タイプ カスタムタクソノミー（カスタム分類） カスタムフィールド といったものがあります。どれもこれもカスタムカスタムとうるさいですが、名前を見ただけでは違いがよく分からない…ですよね。これらについて意外と知られていないところもあると思うので、それぞれどういう時に使うのか、どうやって使うのかという全体像を説明してみます。 目次 使い方のちがい それぞれのメリット 使い方の基本 使いどこ
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
Web情報配信｜Wiwi connect» Blog Archive » モバイルコーディング逆引き辞典！
基本編 Q：1適切なDOCTYPEは？ Q：2適切な文字コードは？ Q：3xhtmlでコーディングしたのですが表示されない… Q：4容量制限はあるの？ Q：5色は何色まで再現が可能？ Q：6デザインを整える際の注意点はあるの？ テキスト編 Q：7テキストの適切な大きさは？ Q：8斜体や太字はできるの？ Q：9流れる文字や点滅文字はできるの？ Q：10カタカナは全角？それとも半角？ Q：11画像へのテキストの回り込みはできるの？ 画像編 Q：11画像へのテキストの回り込みはできるの？ Q：12画像のサイズってどうしたらいいの？ Q：13拡張子は何がいいの？ Q：14画像の周りにスペースを作る事は可能？ Q：15tableの中にある画像が小さく表示される… table＆div編 Q：15tableの中にある画像が小さく表示される… Q：16valignは使用可能？ Q：17「div」または「t
Cheerz(チアーズ) │ WEB上のどこでも、人とつながるソーシャル・レイヤー・サービス
sample<P> フリーテンプレート【sora】をご利用頂き有難う御座います。 当サイトのテンプレートは、商用、非商用に関わらずご自由に、無料でご利用頂けます。ただし、全て自己責任でのご利用宜しくお願い致します。 便宜、変更してご使用頂ければ幸いです。 【sora】トップページへ sample<UL> <li>スペースtextてきすとテキストtextてきすとテキストtextてきすとテキスト <li>スペースtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすとテキスト <li>スペースtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすとテキスト <li>スペースtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすとテキストtextてきすと
おいしい紅茶抽出飽和砂糖水溶液の作り方
http://takeshima.2ch.net/test/read.cgi/news4vip/1239803943/ ※実際にやってみようという方は自己責任でお願いいたします 1 ：VIPがお送りします：2009/04/15(水) 22:59:03.34 ID:F+GU6HOZ0 仕事で、勉強で、趣味で集中したいときにオヌヌメの紅茶抽出飽和砂糖水溶液の作り方を紹介します。 用意するもの ・砂糖 250g～300g ・紅茶 濃い目 程度はお好み ・びん ウィスキーなどの小瓶が手ごろ。今回は容量350ml程度の瓶を使います。 あとはじょうご、割り箸、スプーンなどがあると便利です。 4 ：VIPがお送りします：2009/04/15(水) 23:00:36.77 ID:GBNQGe4s0 ＼ / ＼ 丶 i. | / ./
アイコンにも使える！？「Wingdings」と「webdings」 #LOVEFONT
webcre8さんで「皆さんの好きなフォントに対するアツい想いをブログでぶちまけ合う#LOVEFONT」というのがあります。 そこで自分も紹介してみようと思います。といっても業務でデザインすることが今はないのであまりフォントのことを知らないのですが・・・ みなさんの記事を見てると、フォントってすごいなーと感動するばかりです。 自分がご紹介するのはこの「Wingdings」と「webdings」です。ご覧のとおり絵文字フォントです。 Wingdings 絵文字フォントの一つ。Microsoft Windowsには標準添付されている。英語で「ドンチャン騒ぎのお祭り」の意。 以下の画像はフォントの一部です アイコンや装飾に使える！ 特に凝ったアイコンではなくてもよい場合はこちらをそのまま使えそうですし、ちょっと加工するだけでも面白いものが作れそうです。 どうしてこのフォントをおすのかというと、昔
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
giftee - Send a Small Thank You.