マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
手軽にWebを彩るCSSコーディングテクニック50 - 海外デザイン事情第7回 - MdN Design Interactive
第7回「手軽にWebを彩るCSSコーディングテクニック50」 2010年03月15日 基本的なCSSを使ったWeb制作はそれほど難しくないが、より高いレベルのデザインを実現しようとすると、難易度はグッと上昇する。そんなときは、世界中のデザイナーやデベロッパーが提供しているCSSテクニックを使ってみるとよいだろう。ここでは、世界各国のデザイナーやデベロッパーが紹介している、ビジュアル表現やレイアウトなどを中心としたCSSのコーディングテクニックを紹介していこう。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) http://www.smashingmagazine.com/2010/0
WPのパフォーマンスを改善してみようか | gaspanik weblog
日本のWeb業界でもそろそろサイトの表示パフォーマンスをどうにかしなきゃなぁ…と考えている方もいらっしゃることでしょう（ごく一部かもしれませんが 笑）。いわゆる普通のWebサイトの表示パフォーマンスの改善については、ここでも年末から数回にわたって取り上げています。 Webサイトの高速化的な話をWD誌でYSlow!、使ってわかるあんなことこんなことPage Speedでチェックついでに最適化Page Speedが1.6βになったようでここのエントリーに挙げた以外に、ちょっと前にゲリラ的にUSTREAMでくっちゃべってみたところ反響も大きかったようです（最初の回は特に他のどこ探してもないことも言いましたしね、フフフ）。 で、今回はこのブログでも使っているWordPressのパフォーマンスをアップさせるためにできることをいくつか紹介したいと思います。「できる」「できない」は設置されている環境で異
pukiwiki、はてなトップページの妙な恐怖感
尾野（しっぽ） @tail_y 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:49:50 нσυѕαι тσяυ／縫采 徹 @firty_housai 何があった…RT @tail_y: 先週のことだけど、会社にいる女の人がtwitterクライアントを入れるという話になった時にググってこのページを見せたのだけど、後々、このサイトが「怖かった」という話を聞いた。普通のpukiwikiページ。 http://bit.ly/HdaHR 2010-03-08 11:50:38
就活に打ち勝つポートフォリオWebサイトの作り方 | Webクリエイターボックス
2016年2月18日 Webサイト制作 Webデザイナーとして働く際、自分をアピールするのに最も大切なのがポートフォリオWebサイト。今まで作った作品や自分がどんな人間なのか、何ができるのかを紹介するサイトを作っておけば、就職活動にも大変役立ちます。ここではポートフォリオWebサイトを作る際のポイントや素敵なポートフォリオサイトを紹介します！ ↑私が10年以上利用している会計ソフト！ 最新版書きました！こちらも参考にしてみてください。 ポートフォリオWebサイトを作ろう！2015年版 ポートフォリオWebサイトを作る時のポイント 1. 自己紹介 自分は何者なのか？何ができるのかをわかりやすく完結に紹介します。あまりダラダラ書いても読まれない確立が高いため、大きめのフォント・短い文章で紹介すると効果的です。 「自分はWebデザイナー」という事をはっきり書く 自分ができることをわかりやすく表記
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
matopc :: computing » Eclipse on MAMP
hiromasaさんの「Eclipse + XAMPP で WordPress の開発環境を作ろう」というエントリに刺激されて、最近リリースされたMAMP 1.0.1とEclipse 3.1 + PHPeclipse pluginを連携させて、ローカルにphp開発環境をセットアップしてみました。結論からいうと結構上手くいきました。:grin: セットアップにはhiromasaさんの記事をかなり参考にさせて頂きました。そちらを先にお読みになる事をお勧めします。ちなみに僕はこのサイトで使っているWordPressをいじる環境が出来ればOKで、プログラム開発に対する深い理解は持っていませんので「動いたんだね。」くらいでお読みください。Eclipseについて早速引用。:wink: Eclipse について Eclipse は、The Eclipse Project が提供する統合開発環境です。
Mac OS X 10.5.6 に WordPress をインストール | WordPress | かたつむりくんのWWW
お正月に買った新型 MacBook に、WordPress をインストールしてみました。 今回は MySQL を単独でインストールする方法ではなくて、MAMPを使う方法でインストールしました。どうやらその方が簡単なようです。 MAMP をインストール まず最初に、living-e AG: MAMP - Mac - Apache - MySQL - PHPのページの中央あたりの「MAMP & MAMP PRO 1.7.2」をクリックしてファイルをダウンロードします。 ダウンロードが始まります。130MB もあるので結構時間がかかります。 解凍してできた MAMP_1.7.2.dmg ファイルを開き、「Agree」します。 MAMP フォルダを Applications フォルダの上にドラッグ＆ドロップすればインストール完了です。 MAMP.app を開き Mac OS X のパスワードを入力
ppBlog official
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル:phpspot開発日誌
少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル 2010年03月03日- 30 High-Quality Free Website Templates to Download|Dzine Blog 少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイルが３０種類も紹介されています。 次のような、本当に、本当にフリーでいいんですか？本当にフリーでいいんですか？とつい歌ってしまいそうなレイアウト集がダウンロード出来ます。 色鮮やかでインパクトあるデザインや、すっきり見やすいレイアウト等、そのままWEBサービスに使ってしまってもよいようなものばかりです。 ライセンス等は確認したほうがよいと思いますが、活用すれば手間を大きく削減出来るかもしれませんね。 関連エントリ チュートリアルで
Zen-Codingで楽々コーディング! + コツ1つ
話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ! zen-codingって何？使い方は？という人は以下のページを見てくださいね。 Zen-Codingでできるあんなことこんなこと 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。 たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは無いんですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
Ajax » jQuery plugin » アニメーション、エフェクト | PHP & JavaScript Room
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説ブロック要素を2つ重ねておき、上の要素にマウスオーバーするとシャッターのように上下左右方向にスライドして、下の要素を表示するjQueryプラグイン。 設置イメージ 設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content
Webサイトのデザインが崩れていた時、どうする? - アイシェア調べ | 経営 | マイコミジャーナル
アイシェアは2月10日、20代から40代の男女502名を対象に実施した「Webサイトのデザインの崩れ」に関する調査結果を発表した。同調査では、Webサイトが崩れていても利用を続ける人は女性よりも男性のほうが多いという結果が出ている。 回答者のうち、インターネット利用経験者にPCでアクセスしたWebサイトのデザインが崩れていたことがあるかを聞いた質問では、83.4%が「ある」と回答した。 この「ある」と回答した人にWebサイトのデザインの崩れを経験した時にそのサイトを利用し続けるかを聞いたところ、、「利用し続ける」が49.0%、「利用をやめる」が30.3%となった。「利用し続ける」とした人は男性が55.5%と女性(41.9%)よりも13.6ポイント高く、逆に「利用をやめる」とした人は女性が33.9%と男性(27.0%)より6.9ポイント高かった。 デザインが崩れたWebサイトに遭遇した時、使
nanapiのデザインプロセス（その１） - エスカフラーチェLLC
9/1にロケットスタートからリリースされたサイト「nanapi [ナナピ] - みんなで作る暮らしのレシピ -」でのサイトデザインを担当させていただきました。 制作過程みたいなものを書いてみたいと思います。 ロケットスタートに全力投球を誓った、けんすうさんからのご依頼 ある日、ロケットスタートの社長、けんすうこと古川健介さん（以下、けんすうさん）から ：HOWTOサイトをつくりたいからデザインを依頼したい！ ということで早速じっくりとお話を伺うことにしました。 ベンチャーだからこそできる！？合宿的制作スタイル 以前けんすうさんと一緒にお仕事させていただいたときに双方にとってよかったことがあります。 それは、デザインカンプができあがるまでのプロセスの段階で、短期間ながらじっくり直接やりとりする時間をつくる、ということでした。 宿泊こそ伴わないものの、合宿に似たようなスタイルです。 長い時
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]商用サイトでもそのまま利用できるCSSのナビゲーション集
css-lecture.com
【WEBデザイン】原研哉さんを中心に巻き起こった深夜のフォント熱論まとめ
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集