はてなブックマーク

先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。 レスポンシブウェブデザインとかスマートフォン系の記事を書くときにどこのカテゴリに書くか迷ってしまい、そろそろブログのカテゴリ分けの限界を感じてきました。 というか、早くブログを独自ドメインのサーバに移行したい･･･！ ということでさっそく本題ですが、 最近、レスポンシブウェブデザイン（以下、RWDと表記）の案件を2つほどやってみて、思うところがあったので書いてみました。今回は技術的なところというよりも、提案というか、案件の取り方というか、案件の流れについて書きたいと思います。 思いのほか長くなってしまいました･･･。 きっかけ 自分が関わった2つの案件のうち、一つは1ページもののキャンペーンサイト、もう一つは既存のデザインを変えずRWDにするという

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。 レスポンシブウェブデザインとかスマートフォン系の記事を書くときにどこのカテゴリに書くか迷ってしまい、そろそろブログのカテゴリ分けの限界を感じてきました。 というか、早くブログを独自ドメインのサーバに移行したい･･･！ ということでさっそく本題ですが、 最近、レスポンシブウェブデザイン（以下、RWDと表記）の案件を2つほどやってみて、思うところがあったので書いてみました。今回は技術的なところというよりも、提案というか、案件の取り方というか、案件の流れについて書きたいと思います。 思いのほか長くなってしまいました･･･。 きっかけ 自分が関わった2つの案件のうち、一つは1ページもののキャンペーンサイト、もう一つは既存のデザインを変えずRWDにするという

画像をリストタグとaタグでマークアップしたものをブラウズすると、変な余白が開く現象があります。 長年（過去2回ですが）苦しんできたこの現象の原因と回避法が分かりました。のでメモ。 HTMLバージョンXHTMLTransitional、XML宣言あり。 タグの状況liタグの中にaタグを入れその中にimgタグを入れている。 CSSの状況ul、li、img共にマージンはゼロ。list-styleはnoneに。 表示： marginを0にしているにもかかわらず、Firefox、Safari、IEで変なマージンがでる。 １．プレーンな状態。 CSSに何も指定していない状態。 ちなみにOperaはこの状態でもマージンがないです。 ２．CSSで、ul、li、a、imgタグのmarginを0に。 margin: 0;の指定があるにもかかわらず、変な余白が。 ３．imgにdisplay: block;を指定

数ヶ月ぶりになってしまいました･･･。 （と、毎回書いている気が） 最近Web制作とは別の趣味に注力してしまい、勉強がおろそかになりがちです・・・。 よく、仕事とは別の趣味を持って、週末はリフレッシュ！などということが聞かれますが、 私は向いていないみたいです･･･。 ・土日に仕事が入ると、好きなことができない！と若干ストレス ・好きなことが仕事中に気になりだすと、仕事中ももやもや このあたりの切り替えができるようになれば、もう少しうまくいくんだろうな。 ということで、前置きが長くなりましたが。 あんまり記事数は無いのですが、HTML5で検索していただいてアクセスしていただいている方が多いので、 今回は、『HTML5で、使用するタグを選ぶためのフローチャート』をご紹介します。（もう有名かもしれませんが。） ▽こちらのPDFから引用させていただきました。 Methods to Select

配属最初の一週間が終わりました。 かなりお仕事を振っていただいて、楽しく作業をしている反面、 細かいミスが多くてげんなりしてしまいます。 当事者として仕事に関わることは楽しいけれど、 一歩引いて作業をしないと周りが見えなくなってしまうな、 とも感じている今日この頃です。 前置き長くなりましたが、今回は 「相対ルートパスのサイトをローカルで見る方法」（バーチャルホスト設定方法）のメモ。 なぜこれを設定するのかというと、 まずはWebサイトのリンクのパスからの話にさかのぼります。 パスの書き方には3種類あります。 絶対パスhttp://granshe.blog.shinobi.jp/など、http://からパスを書くもの。 外部リンクを貼るときはこれ。 相対パス../index.htmlや../company/about.htmlなど、記述してあるHTMLから見て、リンク先のHTMLがどのディ

HTML5について学んでみました。 参考にさせていただいたサイト(敬称略) HTML5 W3C working draft HTML5.JP HTML 5 ― HTML 4 からの変更点 翻訳系の記事では常々申しておりますが、 基本的に、W3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございます。 以上をご理解いただけると助かります。 間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。 連絡先：granshe@jcom.home.ne.jp 今回は、DOCTYPE宣言と文法について。 HTML4.01では、HTMLの先頭にDOCTYPE宣言がなければならないというようなことが仕様書に記載されていました。 A valid HTML document declares what

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。 2ヶ月ぶりの更新に･･･。 商品としてのWebサイトを構築していく中で、 作業の手戻りや、「ここをこうしておけばよかった！」ということが良く発生するので、 これから使うべく自分ルールをメモ。 CSSは、基本ルール＋拡張ルールで作る。 各タグに、基本的なルールをつけます。 h1の見た目、pのマージン・行間など、タグに基本的なルールをつけた後、 同様のルールを別のクラスにもつけます。 制作をしていく中で、マークアップとしてはh2だけれど、見た目としてはh1、大見出しとして見せたいことがあると思います。 そのような時、タグに対してしかスタイルをつけていないと、「見た目」という観点から、本当はh2の箇所をh1としてマークアップしなければなりません。 （現場

繁忙期真っ只中です。 シルバーウィークやらプラチナウィークやらが９月にあるそうですが、 仕事をするものからすれば嬉しくもあり、煩わしくもあり。 この５連休のために、連休前にどかっと仕事を終わらせなければならない、という反面、 連休明けのお仕事を連休中に（出勤して）終わらせてしまえる（笑）、という考え方もできるし。 どうなることやら。 ということで、（全然関係ない前置きでしたが、） jQueryでつくるアコーディオンメニュー（Cookie機能付き） のご紹介です。 デモを見る 参考にさせてもらったサイトは下記です。 jQueryを使用したCookie開閉保持メニューをよりjQueryっぽく書き直す 「アコーディオンメニュー」とは書いていますが、 実際にはメニューではなく、開閉式のコンテンツとして実装しました。 デフォルトでは詳細が隠れていて、ボタンを押すと詳細情報が表示される仕組みです。 あ

先週末、うんちくたれてるだけじゃダメだなと思って、 実際にHTML5を使ってコーディングをしてみた。 そこから、ブラウザのHTML5のレンダリング傾向が分かったので、メモ。 １．article、section、header、footer、asideなどのHTML5で追加されるタグは、初期値はインライン要素としてレンダリングされる。 これはちょっと驚いた。 というよりも、HTML5が正式に宣言されていないにもかかわらず、ブラウザはこれらの新しいタグをタグと認識してくれるんだと感心した。 DreamWeaverも、タグ予測の中にこれらの新しいタグを入れているみたいだし、対応の早さに驚き。 ２．CSSのファイルタイプ指定（<meta http-equiv="content-style-type" content="text/css">）が消えた。 これを指定すると、HTML5バリデータ（β）では

HTML5勉強企画第2弾。 今回も参照させてもらったサイトを以下に（敬称略）。 HTML5 W3C working draft livedoor labs EDGE EDGEのトップページをHTML5化した件について:Blog hamashun.com HTML5のセクション(その2)：vantguarde 前記事同様、基本的にW3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございますこと、ご理解いただけると助かります。 間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。 連絡先：granshe@jcom.home.ne.jp section 文章の章を表すのに使う。ある程度意味の同じコンテンツをまとめる。 一般的にheader要素と共に用いられ、footer要素をともなうこ

さっそく初回はCREAMU様で拝見した、 「普段使われないが、これは使うべき！フォント８選」 をお送りいたします。 以下に、フォントを適用した実例を挙げてみます。 無事表示された人はおめでとう！表示されなかった人は、くじけずにがんばってください！ ちなみに私の環境では運よく、ほぼすべてのフォント指定が反映されました。 Windows、Mac普及率70％以上のもの Palatino Linotype / Palatino Tahoma Impact Arial Black Arial Narrow Windows中心のもの Century Gothic Mac中心のもの Copperplate / Copperplate Gothic Light Gill Sans / Gill Sans MT Arial Brackは目にしたことのある方も多いんじゃないでしょうか。 ちなみに、フォントを変