はてなブックマーク

• あとで読む

  はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ

  5 users

  webdesignrecipes.com

  先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ

  • テクノロジー
  • 2013/03/22 07:53

  • HTML
  • webデザイン
  • Web
  • html5
  • jQuery
  • CSS
  • javascript
  • デザイン
• あとで読む

  3冊目の著書 – 基礎からのWordPress – を執筆させていただきました！

  30 users

  webdesignrecipes.com

  この度、ソフトバンク クリエイティブさんから、私の3冊目の著作となる、「基礎からのWordPress (BASIC LESSON For Web Engineers)」 が発売になりました！この度 … と言っても、1月29日に発売になっているので、ちょっとご報告が遅くなってしましました …。 この本は WordPress のテーマをカスタマイズしたり、オリジナルテーマを作るときに必要となる基礎的なことに重点を置いた入門書になっています。でも Webサイト作成の入門書ではなくて、あくまでも WordPress のテーマ作成の入門書なので、HTML や CSS については解説はしていません。 また、WordPress は PHP で作られているので、テーマを作成する上でも PHP の知識は必要になりますが、「PHP はわからないけど …」という人にも、できるだけそのまま読んでいただけるように、

  • テクノロジー
  • 2013/02/20 21:25

  • wordpress
  • 本
  • 書籍
  • webデザイン
  • book
  • Webサイト
  • HTML
  • CSS
• あとで読む

  書籍「サイトのタイプ別につくる Webデザインテクニックブック」に執筆させていただきました

  16 users

  webdesignrecipes.com

  この度、MdN さんから発売中の書籍「サイトのタイプ別につくる Webデザインテクニックブック – 仕事ですぐに役立つプロのアイデア」に執筆させていただきました。5組の Web制作者のみなさんが各パートで、デザイン/サンプル/執筆をされています！ この本は、タイトルにもあるように、いろんなタイプ別のサイトをサンプルで紹介しながら、そこで使われているテクニックを紹介していく … といった形の内容になっています。なので CSS3 だったり jQuery だったり、Photoshop や Fireworks のテクニックだったり、それぞれののサンプルの中でいろいろなことが解説されています。 サンプルサイトとその中で使われているテクニックは、目次で紹介されているので、下記に転載させていただきます！ Webデザインテクニックブック 目次 情報提供を重視したデザイン 商品を魅力的に見せるデザイン 写真

  • テクノロジー
  • 2013/01/04 11:36

  • webデザイン
  • デザイン
  • テクニック
  • 書評
  • 書籍
  • jQuery
  • design
  • web
• あとで読む

  はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）

  1075 users

  webdesignrecipes.com

  初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？ 私が

  • テクノロジー
  • 2013/01/04 09:40

  • wordpress
  • テーマ
  • web制作
  • WordPress
  • webデザイン
  • tutorial
  • css
  • html
  • 参考
  • シンプル
• あとで読む

  2冊目の著書 – やさしくはじめる WebデザイナーのためのjQueryの学校 – あとがき

  49 users

  webdesignrecipes.com

  この度、マイナビさんから、私にとって2冊目の著書 「やさしくはじめる WebデザイナーのためのjQuery学校」が発売になりました！ この本は「HTML + CSS は分かるけど、jQuery ってよく分からない …」という人に読んでいただけたら … と思って書きました。jQuery って何？というところから始まって、基本的な使い方、コードの書き方など、基本的なことはもちろん、初心者の頃につまづきそうなポイントに重点を置きました。 1. 監修：西畑一馬さん、イラスト：狭間句美さん 今回 jQuery の本を執筆するにあたって、Web制作の現場で使う jQueryデザイン入門 の著者でもある、to-R の西畑一馬さんに監修していただきました。 私からしてみたら、西畑さんは jQuery の神様みたいな存在 … そんな人に監修していただけて、私自身もとても勉強になりましたし、読者の皆さんにお届

  • テクノロジー
  • 2012/12/25 11:20

  • jQuery
  • web制作
  • javascript
  • css
  • HTML
  • web
  • デザイン
  • jQuery
  • まとめ
  • css
• あとで読む

  Webデザインレシピ » Blog Archive » Perfect Full Page Background Image with CSS

  4 users

  webdesignrecipes.com

  CSS のみで画面いっぱいに背景画像 スクリプトを使わずに、CSSのみで画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 800 x 533 ピクセルですが、画面いっぱいに拡大表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像のサイズを大きくすれば軽減されます。画像の縦横比は維持されるので、ディスプレイの大きさによって変形する事はありません。 背景画像に position: fixed を指定すると、画像はページの中央に固定表示されるので、コンテンツが縦に長くなって、縦スクロールしても固定されたままになります。 position: absolute を指定すれば、スクロールと共に背景も一緒にスクロールしますが、その場合は画像の下端に注意する必要があります。 動作確認済みブラウザ Firefox 3.6 Safari 5 Chrome 5 O

  • テクノロジー
  • 2012/12/13 15:48

  • プラグイン
  • plugin
  • webdesign
  • css
  • web制作
  • webデザイン
• あとで読む

  jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）

  1100 users

  webdesignrecipes.com

  jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery

  • テクノロジー
  • 2012/11/26 08:19

  • jQuery
  • コーディング
  • jQuery
  • javascript
  • web制作
  • プラグイン
  • webデザイン
  • *jQuery
  • 資料
  • あとで読む
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery Cycle Plugin

  3 users

  webdesignrecipes.com

  THE INTERVIEWS &Facebook THE INTERVIEWS、みんながやってるのを見てとても楽しそうだったので、思わず登録しちゃいました！Facebook ページもよろしくお願いします！ jQuery(document).ready(function() { jQuery('#slider').after('<div id="pager" class="clearfix">').cycle({ fx: 'fade', speed: 1500, timeout: 7000, pager: '#pager', pause: 1, cleartype: true }); }); Back to Article Hi. I'm Nori Takahashi, a freelance web designer and you're now browsing my private d

  • テクノロジー
  • 2012/11/01 10:25

  • jQuery
  • jQuery
• あとで読む

  Webデザインレシピ » Blog Archive » Perfect Full Page Background Image with maxImage Scaling Plugin

  3 users

  webdesignrecipes.com

  Perfect Full Page Background Image with maxImage Scaling Plugin jQuery のプラグイン、maxImage Scaling Plugin を使って、画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 1000 x 666 ピクセルというサイズですが、横幅がディスプレイサイズに合わせて表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像の大きさを大きくすれば軽減されます。 プラグインのパラメータに、overflow: 'auto' とすると、スクロール OK になります。たくさんのパラメータが用意されているので、色んなニーズに応えてくれそうです。 画像の縦位置も top、center、bottom の3種類から選べるのもうれしいですね！ 動作確認済み Firefox 3.6 Saf

  • テクノロジー
  • 2012/10/29 20:07

  • image
  • plugin
  • jquery
  • ui
• あとで読む

  WordPress で Web製作をしたいけど、PHP はまだちょっと … という人の PHP ガイド

  1473 users

  webdesignrecipes.com

  WordPress はとっても便利なブログツール。使い方さえ勉強すれば、HTML や CSSの知識がなくてもWebサイトを作成、運営することができます。そして HTML + CSS を勉強すれば、デザインを自分の好きなように変更することもできます。でも見た目のデザインだけじゃなくて、いろんな機能をつけたりカスタマイズしていくとなると、やっぱり PHP の知識が必要です。WordPress をカスタマイズしたいけど、PHP はまだ ... という人向けに、WordPress と PHP について簡単にまとめてみました。 WordPress は PHP（プログラム言語） + MySQL（データベース） で作られている、人気のブログエンジンです。最近ではブログじゃない一般的な Webサイトを、WordPress で作ってるっていう人も増えてきたように思います。WordPress を使えば、HTM

  • テクノロジー
  • 2012/10/09 07:52

  • wordpress
  • php
  • web制作
  • プログラミング
  • 勉強
  • css
  • web
  • あとで読む
  • 開発
  • webデザイン
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery Plugin Fancybox

  29 users

  webdesignrecipes.com

  1. 特にエフェクト無し + タイトル + グループ化 クリック時のオーバーレイの色を淡いグレー（背景のこと）にした以外、特にエフェクトを指定していない状態です。<a>タグの title属性が、そのまま画像タイトルとして表示されます。 <a>タグの rel属性に同じ名前（グループ名）を入れるとグループとしてまとめられ、矢印ボタンで移動できます！ また、jquery.mousewheel.js を使えば、マウスホイールでも画像を切り替えることもできます。

  • テクノロジー
  • 2012/10/04 10:32

  • jQuery
  • Lightbox
  • javascript
  • *jquery
  • プラグイン
  • wordpress
  • Design
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery Parallax

  3 users

  webdesignrecipes.com

  Hi. I’m Nori Takahashi, a freelance web designer. You’re now browsing my private diary. Here you can find some jQuery plugin samples. Nivo Slider Cycle Plugin BX Slider Ex1 BX Slider Ex2 Parallax Masonry Fancybox

  • テクノロジー
  • 2012/09/20 04:09

  • jQuery
  • plugin
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery Plugin Nivo Slider

  9 users

  webdesignrecipes.com

  Title #1 “don’t have to do anything, let’s just sit and talk about the usual things” Photo by @harold.lloyd Title #2 “More flowers I noted, yet I none could see / But sweet or colour it had stol’n from thee.” Photo by @harold.lloyd

  • テクノロジー
  • 2012/09/13 08:45

  • jQuery
  • slider
  • javascript
• あとで読む

  Webデザインレシピ » Blog Archive » CSS Snipet いろいろ

  8 users

  webdesignrecipes.com

  1. ページを中央に配置する ブラウザで開いた時にページを中央に配置し、左右を余白にするのが最もポピュラーな表示方法かなーと思います。横方向のマージンに auto を設定するだけです！

  • テクノロジー
  • 2012/08/13 17:59

  • css3
  • まとめ
  • CSS
  • Web制作
  • webデザイン
  • development
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery Plugin BX Carousel Slider

  6 users

  webdesignrecipes.com

  jQuery(document).ready(function() { jQuery('#slider').bxSlider({ auto: true, autoControls: false, controls: false, pager: true, mode: 'horizontal', speed: 1000, autoHover: true, pause: 4000, easing: 'swing', displaySlideQty: 3, moveSlideQty: 2 }); }); Back to Article Hi. I'm Nori Takahashi, a freelance web designer and you're now browsing my private diary. Here you can find some jQuery plugin samp

  • テクノロジー
  • 2012/07/20 16:50

  • jquery
• あとで読む

  書籍「jQueryプラグイン徹底活用 – プロのデザインアイデアとテクニック」に執筆させていただきました

  32 users

  webdesignrecipes.com

  この度、書籍「jQueryプラグイン徹底活用 – プロのデザインアイデアとテクニック」に執筆をさせていただいたので、ブログでお知らせです ;D MdN デザインインタラクティブさんから、7月3日に発売されました！ この度、MdNさんから出版されている書籍「jQueryプラグイン徹底活用 – プロのデザインアイデアとテクニック」で、執筆させていただきました！この本は、jQuery のプラグインの基本的な使い方はもちろん、それらを使ったアレンジなどを特集した内容になっています。 この本では、たくさんのプロの Webデザイナーさんたちが、サンプルの制作、執筆をしています。私は 4つ程サンプルと文を担当させていただいたのですが … 他の Webデザイナーさんの作品に比べると見劣りしてしまうかも …。7月3日に発売されていますので、ぜひ読んでいただけるとうれしいです！ まずはこの本の目次を、簡単にご

  • テクノロジー
  • 2012/07/15 17:51

  • jQuery
  • 書籍
  • デザイン
  • 2012
  • *プログラミング
  • プラグイン
  • ツール
  • web
• あとで読む

  Web Design ::: Webデザインレシピ

  26 users

  webdesignrecipes.com

  Web Design - I've been doing web design and Ilove it as much as sweet cakes. 35 posts

  • テクノロジー
  • 2012/07/11 11:26

  • web制作
  • photoshop
  • Webデザイン
  • デザイン参考
  • css
  • デザイン
  • 解説
  • *webデザイン
  • 学習
  • html5
• あとで読む

  WordPress ::: Webデザインレシピ

  38 users

  webdesignrecipes.com

  WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だ …

  • テクノロジー
  • 2012/07/10 01:26

  • WordPress
  • カスタマイズ
  • 学習
  • Web制作
  • Webデザイン
  • web
• あとで読む

  これからWebサイトを制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド

  33 users

  webdesignrecipes.com

  以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べ

  • テクノロジー
  • 2012/07/10 01:08

  • web制作
  • Webサイト
  • webデザイン
  • まとめ
  • 勉強
  • HTML
  • コンピュータ・IT
  • サイト
  • MyInterest
• あとで読む

  http://webdesignrecipes.com/wp-content/cache/supercache/webdesignrecipes.com/web-developers-guide-to-getting-a-start-up-and-running//index.html.gz

  34 users

  webdesignrecipes.com

  • テクノロジー
  • 2012/07/10 00:57

  • Web制作
  • webデザイン
  • Webサイト
  • web
  • *あとで
  • web design
  • コンピュータ・IT
  • MyInterest
  • it
• あとで読む

  これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド

  2244 users

  webdesignrecipes.com

  以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる

  • テクノロジー
  • 2012/07/09 08:12

  • web制作
  • webデザイン
  • html
  • 勉強
  • web
  • css
  • webサイト
  • WEB制作
  • あとで読む
  • *あとで読む
• あとで読む

  Webデザインレシピ » Blog Archive » 978px グリッドシステム

  3 users

  webdesignrecipes.com

  More samples If you enjoy the post, you might like these related samples as well. jQuery Parallax jQuery Masonry Plugin Perfect Full Page Background Image with jQuery Plugin fullscreenr

  • テクノロジー
  • 2012/07/08 00:04

  • CSS
  • WEB
• あとで読む

  Webデザインレシピ ::: About

  9 users

  webdesignrecipes.com

  About. Hi. my name is Nori Takahashi nad I am a Web Designer. Web Design Recipes About this web site. Webデザインレシピは、Webデザインや Web制作に関する情報、美しい写真や素敵なアート、デザインなどを綴っているプライベートブログです。 このブログを通して素敵なものをみんなと共有できれば、とっても嬉しく思います。お気軽にコメントくださいね！ I’m a web designer living in Japan. My personal diary reflects my journeys through web design, and I share them here with you… About me Hello! I am Nori Takahashi. 静岡県在住、Webデ

  • テクノロジー
  • 2012/06/22 11:45

  • webデザイン
• あとで読む

  Webデザインレシピ » Blog Archive » jQuery BX Slider Plugin

  12 users

  webdesignrecipes.com

  Today must be a Thursday. I could never get the hang of Thursdays. Photo by harold.lloyd

  • テクノロジー
  • 2012/06/21 15:07

  • jquery
  • スライダー
  • slideshow
  • WEBデザイン
  • 画像
  • webdesign
  • photo
  • 資料
• あとで読む

  スニペットメモ

  5 users

  webdesignrecipes.com

  WordPress でサイト構築するときのスニペット … というか、かなり個人的なメモです。このブログを作った時に使ったコードのメモ書きです。 1. アーカイブページで使えるハック カテゴリーやタグ、日時別に表示するアーカイブページ。あまり意識することがないページですが、他のページとちょっと違いを出して、少しだけ分かり易いアーカイブページにしてみました。 タグやカテゴリー、検索などをした時に、ちょっとひと言ページに表示するだけで、ページが変わったことも明示できますしね！ 1.1. カテゴリーの名前と件数を表示する WordPress のループ外で使うことを想定しています。… header.php とかで。index.php などで、メインループの中で使うコードではありません。下記は、カテゴリー “WordPress” を表示しているページです。 カテゴリー : WordPress 今回はヘ

  • 世の中
  • 2012/06/19 13:04

  • wordpress
• あとで読む

  パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない（コード 付き）

  596 users

  webdesignrecipes.com

  タイトルはパンくずリストなんですけど、パンくずリストを紹介する記事ではありません。でも、パンくずリストを自分で作ってみると分かるんですけど、パンくずリストのコードには、WordPress でのサイト構築のノウハウが詰まっているなーって思います。なのでパンくずリストを作りながら、WordPress でのサイト構築の考え方みたいなものを紹介する感じの記事になっています。 WordPress でブログじゃない Web サイト構築をするとき、サイトの構造によってはサイドバーなどを自分でカスタマイズしなくてはいけません。例えば固定ページを作ったら、親ページでは子ページへのリンクを表示したりとか、逆に子ページでは親ページのリンクを表示したりとか …。もちろんリンクだけじゃなくて、アイキャッチ画像なんかも一緒に表示したいこともあったりします。一般的な Webサイトを WordPress で作ろうとすると

  • テクノロジー
  • 2012/06/19 08:22

  • wordpress
  • パンくず
  • パンくずリスト
  • web制作
  • カスタマイズ
  • WordPress
  • web
  • *wordpress
  • ブログ
  • tips
• あとで読む

  はじめての著書 – 現場のワークフローで覚える Webサイト制作教室 – あとがき

  41 users

  webdesignrecipes.com

  この度、本を執筆させていただきました。その本「現場のワークフローで覚える Webサイト制作教室」の紹介と、執筆をし終わってから思ったことを「あとがき」としてブログにしてみました。 今日 ４月20日、私のはじめての著書「現場のワークフローで覚える Webサイト制作教室」が発売になりました！久々のブログが、ちょっと宣伝ぽくなってしまってすいません … X( でも私にとっては初めて書いた本なので、一生の想い出になる大事件です。なのでブログに書くことにしました。 この本には「あとがき」というものがないので、本の紹介と共に、一冊の本を書き終わって思ったことを書きたいと思います。 1. はじめに まずは本の中の「はじめに」を丸写しです。 私たち Webデザイナーの仕事をひとことで言ってしまうと「Webサイトを作成すること」です。でも、ひとつの Webサイトを完成させるまでには、本当にたくさんの準備と作

  • テクノロジー
  • 2012/04/20 09:35

  • Web制作
  • Webデザイン
  • publish
  • web
  • コンピュータ・IT
  • webdesign
  • book
  • CLIP
  • work
  • 本
• あとで読む

  Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ

  1389 users

  webdesignrecipes.com

  私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違

  • テクノロジー
  • 2012/02/22 07:29

  • web制作
  • Webデザイン
  • デザイン
  • 考え方
  • webdesign
  • web
  • design
  • *web制作
  • webサイト
  • あとで読む

次のページ