CSSで片方可変、片方固定のカラムレイアウトを実装する方法 - NxWorld
CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。 対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTMLと実装イメージについて 紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 <div class="wrapper"> <div class="main"> <!-- 可変 --> </div> <div class="side"> <!-- 固定 --> </div> </div> また、今回はこのイメージのようにdiv class="main"（青い背景色の領域）を可変、div class="side"（赤い背景色の領域）を固定にそれぞれする方法で、固
ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！
はい高いですか？こんなもんですか？以下見積もりの説明です。 リニューアルと言っても、既存サイトはCMS化されておらず、たいして情報もアップされていなかったため、ほぼほぼ新規案件に近い、というイメージです。そのため、旧システムからのデータ移行費用が入っていません。その代わり、商品データベースは既存のものがあり、定期的にそこからデータを吸い出してCMS側の商品ページに反映するというカスタマイズが入っています。色々調査した結果、1週間でできそうという見込みのもとに見積もりしていますが、この要望はなかなか軽く収まらないことが多いですね。 コンサルティング費用にどのくらいかけるかというのはサイトの規模感によってまちまちだと思いますが、誰に向けたサイトで、何の目的で、対象となる閲覧環境は、用意するサーバーは、考えられるリスクは、など細かく資料に起こしていき、事前に複数回クライアント往訪のうえ打ち合わせ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】｜今村だけがよくわかるブログ
【Web制作などの依頼で「概要」しかわからないのに「とりあえず見積が欲しい」と言われたとき、私はこんなことに気をつけています】 どうもです。いきなりですが、私は毎年この年末から来年の3月末あたりまで、段階的に仕事周りが騒がしくなって来る時期だったりします。決算期の都合もあるんでしょうかねぇ。似たような状況の方も多いのではないかと思います。ほんと、最近依頼が多いです。 ところで、仕事の依頼があるって嬉しいことです。 普段あまり交流のなかった方から突然の依頼や、または、人づてで紹介を受けたりなど。紹介を受けるってことは「仕事ちゃんとしてくれるよ」ってのを認めてもらえた証拠だと思っています。本気でうれしいです。 と、ここで「依頼」についてちょっと掘り下げたいな～と思いました。本題に入る前に、少しだけ前置きにお付き合いくださいますと幸いです。 ・・・「依頼」っていろいろありますね。 「ハマる依頼」
SEOで成果を出すために必要な知識と実践方法の全て
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOとは、「Search Engine Optimization」（検索エンジン最適化）という意味で、今の日本においては主にGoogleの検索エンジンで上位に表示されるための一連の施策のことだ。（Yahoo!やBingなどの検索エンジンも対象となる）わかりやすくいえば「自社サイトを1位に表示させるための対策」とも言える。 このページでは、よりビジネスを成長させたい方にSEOを攻略するために必要な具体的な知識とスキルを解説している。 ここで解説している通りに、真剣に取り組んでもらえれば、どのような業種の方でも今までをはるかに上回る流入と、コンバージョンを実現することができるようになるだろう。 現在、思うようにサイトにアクセスが集まらなくて
ウェブデザインにおけるテクスチャやパターンの使い方をしっかり学びたい人用のまとめ
当サイトでもテクスチャやパターンなどを素材として紹介しますが、ダウンロードして満足するだけでなく、どのように使うかが大切です。 テクスチャやパターンを効果的に使った実例を見ながら、その使い方を紹介します。 The What, Why and How of Textures in Web Design 下記は各ポイントを意訳したものです。 1. ノイズのテクスチャ 2. リアルにするためのテクスチャ 3. ビジュアル効果を与えるテクスチャ 4. トーンや印象を明確にするテクスチャ 5. シンプルなピクセルパターンの繰り返し 6. 大きなインパクトを与えるパターン 1. ノイズのテクスチャ ノイズのテクスチャは最近のウェブデザインでとても人気があります。これは背景からボタンまで、あらゆるデザインほとんどのエレメントにマッチします。 ノイズの使い方は使う場所に依存しますが、良いノイズというのはぱ
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
制作会社の人がやってしまいがちなSEO基本中の基本のミス など10+2記事（海外&国内SEO情報） | 海外&国内SEO情報ウォッチ
SEOに重要な基本的要素で、ウェブ制作会社が大切なことを見逃して失敗しがちなことを指摘した記事。Webディレクターとしてサイトの制作に携わっていたときに発見したというもので、次の4つの失敗パターンを挙げている。 titleタグにキーワードを入れないtitleタグやmeta descriptionの重複を気にしないrobots.txtやsitemap.xmlを設置しないデザインを優先して隠しテキストを使ってしまう1つ目と2つ目は実際に多いと筆者も実感している。SEOとしては基本中の基本であるし、titleタグにキーワードを入れることと各ページにユニークなtitleタグとmeta descriptionタグを設定することは、ユーザーにページの内容を伝えるうえでも重要だ。 3つ目のrobots.txtとXMLサイトマップは大切ではあるが必須ではない。robots.txtはクロールをブロックするペ
ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : LINE Corporation ディレクターブログ
こんにちは、NHN Japanのマッチングサービス事業部でマーケティングを担当しているotakeです。 今回は担当サービスの運用業務と並行して出稿も担っている忙しいディレクターさんやこれから出稿業務に携わる方のために、チャッチャと読んで現場ですぐに使える実戦的なナレッジの一部を「バナー広告制作の基礎知識」として書かせていただきます。 当事者意識を持たせるAttentionを考える ユーザーの購買行動において、バナー広告が担うポジションはAttention（注意）喚起にあたりますが、一般的にバナー広告は誰に注意を促すものなのでしょうか。 検索から目的を持って能動的に何かを探しているわけではないが、潜在的な関係性を秘めているのがバナー広告の対象となる潜在層。ここに位置する対象には”この広告はあなたに関係あるものです”、”おそらくあなたの話です”といった潜在欲求に気づきを与える「当事者意識を高め
制作会社、WEB担当者も知っておくべきSEO用語集 ｜https://wp.yat-net.com/name
SEO業者の方々とやり取りをする際や、クライアントへの説明が必要な際に知っておくべき用語をピックアップして意味を調べました。どの技術が有効で何がブラックなのかというのは基本的に記述していません。あくまで専門用語の解説として活用してください。関連する情報を解説しているサイトのリンクも付けていますので、詳しく知りたい方はリンク先のサイト等を参照してください。 ホワイトハットSEO 検索エンジンのルールに従いサイト制作を行うことです。 White Hat SEO （ホワイトハットSEO）とは – 海外SEO情報ブログ ブラックハットSEO SEOにおいて悪質な手法を駆使して検索上位に表示させる手法・技術のことです。上記ホワイトハットSEOと対極の言葉でもあります。 ブラックハットSEO – IT用語辞典バイナリ サテライトサイト SEO対策や集客を目的として本サイトとは別に作られたサイトのこと。
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
WordPressを使ってWeb制作をする為の手順リスト・【改正版】+α - かちびと.net
以前書いたWordPressでWeb制作する際 の手順リストが少し古い情報込みだったり するので改正版を書きます。先日、WPも 3.2のリリースを迎えましたので、手順リスト もアップデートすることにしました。多少考え が変わっているので内容も少し変更有ります。 以前のリストの改正版です。加えて他の情報も一緒に載せておく事にしました。 【2011・07・11】 WordPressインストール サーバーを用意（PHP5.2.4 以上 / MySQL5.0 以上） DBを作成 WordPressをダウンロードし、解凍 wp-config-sampleをwp-configにリネームし、内容をDBに合わせて変更 プリフィクス（接頭語）を変更する（wp_→foodblog_） FTPソフト等でサーバーにアップロード サイト名やパスワード、IDを決める（adminは避ける） 作成したユーザー名でログイン
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
WEB屋が使う最高の無料SEOツール41個 – マーケティングブログ
日本の無料SEOツールの中では高機能かつ動作が軽いのが特徴。ソーシャルブックマークやIPアドレスなども解析可能。 URL：http://seocheki.net/ WODGE相互リンクチェッカー 無料・無制限で使用可能。1度に５URLをまとめてチェックが出来るのも便利。相手先ページの発リンク数も表示されるので、有効なリンク先を見つける参考になります。 URL：http://www.wodge.biz/linkchecker/ エラーチェックツール Google Search Console これなくしては、現代のSEOはほぼ行えないでしょう。 モバイルでのエラーやページの表示速度など、基本的なユーザビリティチェック URL：https://search.google.com/ Dead Link.tv
SEO：タイトルと説明文のガイドライン -dmoz
利用するユーザーに分かりやすく、SEOにも高い効果が見込めるタイトルと説明文のdmozのガイドラインです。 タイトルとは、HTML文書などで使用されるtitleタグで括られたもので、主なブラウザ（Internet ExplorerやFirefox、Safariなど）のタイトルバーなどに表示されます。 説明文とは、HTML文書などで使用されるmetaタグのname属性にdescriptionを指定して記述するもので、検索エンジンの結果画面などに表示されます。 2007年1月にdmozのサイトを見てみたら、以前の内容からバージョンアップしていたので、現在のものと以前のものをここ数年の変化を探る意味で下記に記します。 タイトルのガイドライン -dmoz 2007 説明文のガイドライン -dmoz 2007 タイトルのガイドライン -dmoz 2004 説明文のガイドライン -dmoz 2004
日本語で読めるPhotoshopチュートリアル集 まとめ | 日刊ウェブログ式
Photoshopのチュートリアルというと英語が多いですが、日本語の方がサクサク読める（私の場合）ので、日本語で解説してくれているチュートリアル集をまとめてみました。 フォトショップでつくるキラキラに輝く人物の作り方 フォトショップでリアルな炎を出しながら走るバイクの作り方 フォトショップで夕日に輝く幻想的なライティング効果を作る方法 映画のタイトルロゴのような光と文字を描画するPhotoshopチュートリアル フォトショップでキラキラに輝く背景画像を作る方法 布地テクスチャーにペイント フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル Photoshopで六角形のキラキラに輝く背景画像をつくる方法 フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法 基本的な光の作り方2 基本的な光の作り方3 Photoshopで美女の画像に効果を入れる方法 フォトシ
Webデザイナーな私の勉強方法まとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
Loading...
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
HTML5の可能性を体験できる、すごいサイトのまとめ