logosWordPress へようこそ。こちらは最初の投稿です。編集または削除し、コンテンツ作成を始めてください。
見落としがちなHTML5で変更された要素いろいろ
2013年3月23日 HTML, Webサイト制作 HTML5を勉強していて、section, nav, header, footerなどの新しく追加された要素について説明している記事はよく見かけるのですが、HTML5で変更された要素について触れている記事が少ないように感じたので、よく使うものを中心にちょっとまとめてみます。既存のWebサイトをHTML5化する時は、コンテンツ内に変更された・または廃止された要素がないか確認することも大切ですね！ ↑私が10年以上利用している会計ソフト！ HTML5の基本はここからお勉強！ 「ところでHTML5ってなに？」という方は、まずは以下の記事を読んでみてください。このようにHTML5の基本について解説している記事はたくさんあるので、詳しい説明は今回は端折らせて頂きます。変更点のみに焦点を当てますよ！ Webの3つの問題を解決する「HTML5」とは何な
SNS色々ありすぎ！各ソーシャルシェアボタンの特徴を簡潔にまとめてみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です。ディレクターの鮫島です。 今年もあと2ヵ月で終わりですね。来月になれば後1ヵ月。1年経てばやはり後2ヵ月です。 そうして人は歳をとり、一生を終えていくのですね。人は死んだら一体どうなるのでしょうか… さて、今回はサイト内に設置されるFacebookいいね等のソーシャルボタンをまとめてみました。もはやFacebookいいねとTweetボタンはほぼ必須になったこのご時世、その他にも様々なソーシャルボタンがあるのですが、色々ありすぎてボタンの役割とか種類がごちゃごちゃになっていませんか？ そんなあなたはこの記事を見て、「あ、今はこんなのがあるのね」と多分大体ざっくりとわかってもらえると思います。 シェア系 Facebook もうほとんどのWebサイトで見かけますね。ここ1年で携わったプロジェクトで拡散がNGなクローズドのサイト以外ではいいねボタンを付けなかった事はありません。 名称
3日間で検索順位が200位上昇したSEO対策10項目
今回ご紹介するのは、検索順位が200位以上も大幅に改善された事例です。 そのサイトは12月末にSEO対策の見直しも含めてリニューアルを行いました。SEO対策の見直しと言っても、外部対策は一切行わず、内部対策の見直しだけ行いました。その結果、リニューアルの3日後には検索順位が200位以上上昇しました。1ヵ月半経った現在も順位は安定しています。 「検索順位が上がらない」「検索順位が極端に低い」という方のご参考になればと思い共有させて頂きます。 リニューアル前のサイトの状況 リニューアル前のサイトの状況は以下の通りです。 企業サイト（サイト内に社員ブログあり） スモールキーワードで1年以上240位前後に位置する ページランクは1（被リンクは殆どなし） ペナルティに該当するSEO対策はやってきてない 今回行ったSEOの方針 上記の通り、このサイトはペナルティに該当するようなSEO対策は行っていない
htmlをiPhoneに対応させる
そもそもwidthは ・縦:portlaitモード（320px）約1/3 ・横:landscapeモード（480px）約1/2 （1）metaタグにviewportを使う <meta name="viewport" content="[プロパティ]=[値](, [プロパティ]=[値])"> initial-scale 倍率の初期値 乗数で指定（例：120%の場合は1.2） minimum-scale 倍率の最小値 乗数で指定 maximum-scale 倍率の最大値 乗数で指定 user-scalable 拡大縮小の可否 （ye/no） <meta name="viewport" content="width=device-width" /> デバイスにあわせる（スクロール分の余白ができてしまう） <meta name="viewport" content="width=320; init
ちょっとこの辺でHTML5のタグを全部確認してみようぜ！！
HTML5のタグは108つある って話は以前このブログでしましたねー。なんの偶然か、108っていう数字には厨二心をくすぐられますｗ 何か意味があるような気がしてなりませんね★ HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― 現在HTML5は最終草案の状態です。この108と言う美しい数字を崩す可能性のある要素として、以前から仕様から外れるかもしれないという話のあったhgroup、Editor’s Draftから追加される可能性のあったdialogやdata、そして新しく追加しようという話の持ち上がったpictureやmainなどがあります。 ただとりあえずHTML5.0のうちは変化することは多分無さそうです。この辺のことはこのAdvent Calendarの初日の記事、覚え書き＠kazuhi.to: 巷（何処）で話題のmain
CSS： marginの正しい理解 - kojika17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
配色に悩んだときに、きっと役立つ7つの配色技法【基本】
私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナーさんは沢山います。 人の目で見分けられる色の数は750万色以上あると言われていて、デザイナーはこの膨大な色の中から配色を考えるんですが、これが結構大変なんです。経験を積んだWebデザイナーさんでも何日も配色に悩み、目の下に隈を作ることがあると聞いたことがあります。 そこで今回は、配色を考える時や、配色に悩みすぎて出口が見えなくなってしまった時に役立つ、基本的な7つの配色技法を紹介したと思います！ 基本的な7つの配色技法 これから紹介するの7つの配色技法は、お互いに明確な違いがない物もいくつかありますが、あくまでもこれらは配色の方向性・配色の考え方を示すものだと理解してください。それでは早速、例を交えながら特徴と効果をまとめて紹介させていただきます。 ドミナントカラー配色
Dreamweaverの便利なコマンドや拡張機能のまとめ
コーディングをするときに自分が主に使ってるのがDreamweaverです。そのままでもいろいろ機能があって便利ですが、コマンドや拡張機能を入れることによってさらに便利に使うことができます。 そこでDreamweaverのコマンドや拡張機能で見つけたものをまとめてみました。他にもこんな便利なものがあるよなど教えてもらえるとうれしいです。 使い方は、コマンドの場合はファイルをダウンロードしてきて以下に入れます。環境によって違う場所にあるかもしれません。 Windows → C:\Program Files\Adobe\Dreamweaver CS5.5\ja_JP\Configuration\Commands Mac → ライブラリ\Application Support\Adobe\DreamweaverCS5\ja_jp\Configuration\Commands 拡張機能はダウンロード
面倒なCSS3グラデーションのスタイルシートをグラデーションの画像から簡単に生成するツール -GradienFinder
Photoshopなどの使い慣れたソフトウェアで作成したグラデーション画像から、CSS3グラデーションのスタイルシートを生成するオンラインツールを紹介します。 GradienFinder ドロップすると、すぐにグラデーション画像が反映され、スタイルシートが生成されます。 CSS: 生成されたスタイルシート background: -webkit-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,rgb(128, 128, 128) 100%); background: -o-linear-gradient(-90deg, rgb(254, 254, 254) 0%,rgb(208, 208, 208) 20%,rgb(147, 147, 147) 61%,r
私がウェブサイト作成時にお世話になっているサイトをご紹介
こういうのを集めだすときりがないのですが、個人的に本当によくお世話になっているサイトに絞って紹介してみます。 有名なサイトばかりですがサイトを作るにあたってお世話になる順に紹介していきます。参考になればうれしいです。 Webデザインギャラリー | I/O 3000 まず、ギャラリーサイトでサイトのイメージを膨らませます。カテゴリ、タグ、カラーで整理されており、とても探しやすいです。 このようなギャラリーサイトは他にもありますが、ページ変遷なしで次を読み込むのでとても見やすいです。 他にはこんなサイトをよく見ます。 WEBデザインの見本帳 Web Design Clip 【Webデザインクリップ】 【HTMLタグの簡単検索】TAG index - ホームページ作成情報 プロの方はPhotoshopで描いてからコードを書いていくみたいですが、私は最初からHTMLを書いていきます。 一応Drea
ディレクターが指摘すべきデザインの注意ポイント10個
ずいぶん久しぶりの投稿になってしまいました。申し訳ない。 今回はタイトルの通り、ワイヤー上がった！デザイン依頼した！で上がってきたデザイン案（もしくはモックアップ）を見て、その段階でディレクターが何を「確認」すればいいのか？という内容についてです。 もちろん経験を積む。もしくは自分自身でデザイナーも経験するなどの機会に恵まれれば大丈夫なんですが、僕みたいに「いきなりWebディレクターという肩書きを与えられてしまった人」は、デザインの何を確認すれば良いのか分からなくなってしまうケースも多いんじゃないかな？と思って書いてみました。 実際にはマークアップ後まで影響してくるので、もっともっと項目は伸びると思うのですが、ひとまず僕が注意して見ているポイントを10個ピックしています。 色数を使いすぎていないか あれもこれも！と欲張りすぎて、結局なにが「一番強調したいのか」が分からなくなってしまっている
美しい横メニューの作り方
<ul id="menu"> <li><a href="#">html</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Perl</a></li> </ul> HTMLは最後まで変更しません。 #menu { width:530px; padding:0; margin:0; list-style-type: none; } #menu li { width:20%; float:left; padding:0; margin:0; text-align:center; } #menu li a { width:auto; color:#fff; font-size:12px; font-weight:
Webサイト制作の終わりと始まり
12月10日に年末好例のイベント CSS Nite Shift が開催されました。Webサイト制作に関わる様々なキーワードに触れながら1年を振り返るこのイベントも既に5回目。今年は「我々が知る世界の終わり（けど大丈夫）」と題し、Web に関わるプロフェッショナル達が、今後クライアントや利用者に向けてどのような価値を提供できるのかというテーマで話をしました。 Webサイトを作ることが目的になっていないか いつの間にか、公式サイトを作って公開することが当たり前になっている今日。CMS が広く導入されるようになってきた頃から、「とりあえず作る」という傾向が強くなった印象があります。システムを上手く活用すれば、コンテンツはあとで後で流し込めるので、コンテンツが揃う前に作れる（装飾をする）という考えが定着したのかもしれません。作ることが目的になっているからこそ、Web サイト制作における価値も作るた
8億円の売上アップをもたらした、ECサイトでコンテンツを増やす9＋1個の方法 at PubCon
Googleのスパム対策強化やブランドリンク重視そしてその他もろもろを先日参加したPubCon Las Vegas 2010のレポートとして、お伝えしてきました。 今日はレポートをもう1つ追加します。 ECサイトを運営するサイト管理者、特に「ECサイトではオリジナルのコンテンツを作るのは無理」と“あきらめモード”に逃げているネットショップの運営者（そう、あなたのことです！）の参考になるはずです。 （たった数秒といえど）言い訳を探すのに費やすムダな時間と思考回路をこれからリストアップするコンテンツ増強のアイディアを探すことに向けてください。ｗ モデルとなるのは、“狩猟犬アイテム”をオンラインで販売するGUN DOG SUPPLYというECサイトです。 このサイトが、当初の売上見込額の3倍の1,000万ドル（日本円で8億数千万円）を6年間で増やすことに成功した施策の1つがサイトのコンテンツを増
[CSS]チェックしておきたい、スタイルシートのテクニックのまとめ | コリス
実用的なものから実験的なものまで、最近リリースされたものを中心にスタイルシートのテクニックを紹介します。
index.html「あり・なし」のURL正規化 – 301リダイレクト応用編
“www.example.com/“と”www.example.com/index.html“、人間のユーザーにとっては同じページでも、サーチエンジンにとっては、まったく別のページです。 （余談ですが、example.com,example.net,example.orgは、例を出すときに使用するために予約されたドメインです。例えのドメインを示すときには、これらを使いましょう） 異なるページ（＝異なるURL）ということは、被リンクもそれぞれ別のページへ向けられたものとして処理され、合算されるわけではありません。 たとえ、実際にはまったく同一のページへ張られていてもです。 SEO塾の石崎さんによれば、Yahoo!ではindex.htmlがある場合と、ない場合（スラッシュで終わる場合）では、インデックスに問題が生じるケースがあるとのことです。 Yahoo!検索でindex.html表示、スラッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実用的なスタイルシートのテクニックのまとめ | コリス
Loading...
http://www.seo-blogs.biz/2010/03/23/1475/
