「かっこいいサイト作るぞ!」 と意気込んでみたももの、いざ作ってみると 「あれ・・・なんかダサい・・・」 WEBサイトを作成したことのあるプログラマーの方なら、 経験したことがある方も多いのではないでしょうか? WEB制作は、基本的に、デザインはデザイナー、システムはプログラマー、という 役割分担の元に作業が行なわれるため、プログラマーが見栄えのするサイトを作ることは、 簡単なようで、なかなか難しいことです。 かくいうプログラマーである私も、いくつかのWEBサイトを個人的に作成してきましたが、 自分で納得のいく見た目のサイトが作れず、夜中の謎のハイテンション時にデザイン を完成させ、1度寝てから再度確認すると、そこには見るも無残なWEBサイトが・・・ なんていうことを何回も経験してきました。 そこで私が試行錯誤した結果を元に、プログラマーが、シンプルながら ある程度見栄えのするWEBサイト
よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、 デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。 貴金属比 nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。 よく聞く黄金比は、貴金属比の1つです。 近似値 1.6180(約5:8) CSSで黄金比を見る 伝承では古代ギリシアから使われ始めたと言われています。 パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。 白銀比 白銀比には、以下の2つがあります。 1:1+√2 の第2貴金属比に含まれる白銀比 1:√2 の日本で古くから使用されている白銀比(大和比) どちらも白銀比と呼ばれることが多いので、紛らわしいです。 白銀比(第2貴金属比) 近似値 1:2.414(約5:12) CSSで白銀比を見
Facebookのグラフ検索が、Googleに、出会い系にもたらす意味2013.01.21 12:00 福田ミホ あちこちで新たな戦いが。 Facebookのグラフ検索は、第一義的にはFacebookの新しい使い方です。でも、それは他社のサービスにとっても非常に大きな(主に悪い)意味を持っています。グラフ検索でもっとも衝撃を受けている、または今後受けそうなのはどのサービスでしょうか? グラフ検索は、まだフェアに評価できる段階ではありません。Googleみたいな検索エンジンではなく、そういう意味では比較対象がありません。それにまだベータ版で、Facebookの10億人ユーザーのほとんどはまだ使えません。グラフ検索とは何で、Facebookはそれをどんなものにしていきたいのか? シンプルな答えは、全インターネット上のあらゆる競争におけるキラーです。 では、具体的にどういったサービスがFaceb
まず、サイトが無いとアフィリエイトを始める事は出来ない。 サイト、といっても…。 最近ではウェブサイトより、ブログの方がアクセスを稼ぎやすい気がするので、ブログを作成しよう。 無料でアフィリエイト目的でブログを始めるなら、FC2ブログや、Seesaaブログなどがお勧め。 多少のお金をかけてでも自由にブログを作成したいなら、さくらインターネットやドメインキングなどで、レンタルサーバを借りてWordpressを設置しよう。 Wordpressにはアフィリエイトをする場合に便利なプラグインなどが多数公開されていて、実際に長く続けようと思った場合、レンタルブログより遥かに運用しやすい。 (ドメインキングなら、2010/11/6現在、独自ドメイン+サーバを最大1年間100円で利用可能。WordPressの自動インストール機能もある。) レンタルブログを借りる場合でも、レンタルサーバにブログソフトウェ
Google Web Search GoogleはGoogle検索のインデックスに新しいページを登録する方法、または既存のページ情報を素早く更新するための新しい手段を「ウェブマスターツール」に追加したことを発表した。Googlebotとしてクロールを実施する「Fetch as Googlebot」の機能に、指定したWebページを即時にクロールさせ、クロールに成功したページを検索インデックスに追加する機能が組み込まれている。 この新機能の使い方は簡単。これまでのように「ウェブマスターツール」にログインしたら、操作したいサイトを選択。左のメニューから「Fetch as Googlebot」を選択し、検索インデックスに新しく追加したいページやサイト、または更新して欲しいページを指定して「取得」ボタンをクリック。クロールに成功すると「インデックスに送信」といったリンクが登場するので、これをクリック
軽量でカスタマイズしやすいデートピッカー のjQueryプラグイン・glDatePickerのご紹介。 とてもシンプルで、4KBと超軽量です。汎用 的で使いやすいかなと思ってエントリー。 jQueryUIでもいいっちゃいいんですけど、 デートピッカーだけならUIを入れる必要は 無いですしね・・・ 何かとシンプルな方が使いやすく汎用性も高かったりしますね。4KBは確かに軽いです。また、IE6や7などの非モダンブラウザでも問題なく動作してくれます。 カレンダーの日付を押すだけでボックス内にデータを入力出来るやつです。デートピッカーというんですが、これがあるとユーザーは視覚的にも探しやすく、入力ミスも防げるので日付を入力するフォームに導入するといいユーザービリティになりそうです。 また、シンプルなコードでカスタマイズもしやすいのが特徴です。というわけでサクッと日本語にしてみました。 デモ デモで
前の翻訳記事でも述べらているけど、やっぱりデザイナーもプログラミングはある程度書けたほうがいいと思う。んで、その言語はJavaScript! O’ReillyさんからJavaScriptを学ぶうえで役立つ本をまとめた電子書籍(JavaScript Bibliography)が公開されているのを教えてもらったのでAmazonリンクを張ってみるポスト。こう見てみると、翻訳されていないJS本いっぱいですね(気づいてないのもありそう…)。原書の方はKindle版も売ってますので、円高のアレもあるのでYOU買っちゃったらいいんじゃないの! JavaScript Bibliography - O’Reilly Media Beginning JavaScript
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
※煮詰まる× → 行き詰る○ なんかおもいっっきり日本語間違って使ってました。めっちゃごめんなさい>< 更新が滞るとEvernote開いて整理整頓ついでに記事を書くのが日課になってしまったセナですこんにちは。 さて、数年WEB屋やってると、自分の作るものが単調になったなと思うことがたまにあります。WEBでも紙でも制作技術を学んでいた時はいろんなサイトを見て見まくって、「どうしてこんなに見やすいんだろう。」とか、「どうしてこんなに分かりやすいんだろう。」とか。そんなことを感じては、常に目にする物から何かを吸収しようと躍起になっていたものです。 何かを見る度、知る度に確実に何かを学んでいったあの感覚は、何時になっても忘れてはならないものだと常々思います。 アイデアに詰まっていたり、物づくりへの刺激が欲しい時なんかに見ると、やる気とかが舞い降りてくるかもしれません。 Dribbble クリエイタ
MySQL の勉強をせずにフレームワーク等で SQL を書かずに Web サイトを構築していました。データ数も2万件程度でしたので、そこまで困ることはありませんでしたが、今回100万弱の商品データを扱う機会ができたので、MySQL のチューニングや発行する SQL について見直す機会がありました。 この記事では MySQL を高速化するのに行った対策など勉強したものを自分用にメモしておきました。 条件式で比較するカラムにインデックスを使用して高速化 商品コードで存在しない商品を見つけて、商品をDBに登録するという処理を行っている場合、4万件超えたころから処理に2秒以上かかるようになってきます。12万件超えた頃には10秒程度かかるようになってしまいましたが、商品コードのフィールドに対してカラムインデックスを貼ることで0.2秒に短縮することができました。 MySQL のリファレンスにも以下のよ
Warning: Undefined array key "width" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1681 Warning: Undefined array key "height" in /home/youhei0828/kachibito.net/public_html/wp-includes/media.php on line 1682 自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目
HTML5 におけるアウトラインに関して簡単解説 HTML5 で重要なアウトラインに関して、なるべくわかりやすく簡単に解説してみます。 最近、ヨモツネットさんで 「HTML5 でのセクションの誤用にご注意」 なんて記事が出てたり、ちょうど HTML5 Doctor でも 「Document Outlines」 と題してアウトラインの解説記事が上がってたりするので、この 「アウトライン」 について簡単にまとめてみようと思います。解説って言うほど偉そうなものではありませんがなるべくわかりやすく書いてみようかと。 アウトラインを理解することは、HTML5 でマークアップする際にとても重要になりますので覚えておくとよいと思いますよ。 アウトラインとは? アウトラインとは見出し、フォームタイトル、テーブルタイトル、その他ラベル付けされた要素によって生成される文書構造のこと…なんて書くととても難しそう
SEOの言葉の定義 この前書いたブログが結構いろいろなところで議論になっていて、盛り上がっているようです。 SEOの終わりとソーシャルとnanapiのコンテンツの未来 - ロケスタ社長日記 @kensuu なんか咬み合わないなーと思ったら、どうやらSEOという言葉の意味が捉える人によって違うぽいので、まとめてみます。たしかにちょっとわかりづらい。 SEOの定義 いろいろな意見があると思うのですが、観測範囲でわかったSEOの言葉の定義を説明しておきます。 おおざっぱに分けて2つほどあります。 - 「機能的な意味でのSEO」 - 「ハック的な意味でのSEO」 機能的な意味でのSEO 機能的な意味でのSEO、とはいわゆるGoogleが出来ていないところを、Web制作側が手助けするという意味でのSEOです。 SEOはあくまで最適化です。Googleが本来の技術で出すべきSERPsが、Webサイト側
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く