[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
月間 150,000人が利用する「無料SEOツール」で解決！ 13個のSEO対策の疑問
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──サイトチェックに使えるツール（1） クラウド隆盛の昨今、ソフトウエアと同等か、それ以上に便利な機能を持ったオンラインサービス／ツールが豊富に取りそろってきた。本記事では、オンラインサービスの中でも無料利用が可能なものを選りすぐり、Web制作を6つのシーンに分類してより快適に作業するための82の活用術を紹介する。Webサイトが完成しても即納品というわけにはいかない。不具合がないかを検証することもWeb制作の一部といっても過言ではない。ここではチェックツール活用例を紹介する。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツ
中小企業や個人経営規模相手のWebディレクションで気をつけている１５のこと。 | 笑顔を創りたいＷｅｂ屋の日常
笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 あくまで”僕が”です。そこ大変重要ですｗ 僕もまだまだ勉強中で、これが全て正しいと思えるほど見極めていません。 他にもあるだろうし、もっと大事なものもあるかもしれません。 それは各々考えてもらって（もしよろしければ教えていただいてｗ）、とりあえず同タイプの仕事している人の叩き台にでもになればなと思って挙げてみた次第です。 というのもですね、僕はWeb屋としてみるとなんか物凄く変な経歴・経験をしている人なのですねｗ まあ、Web業界って割と他業界から来る人たくさんいますけどね。僕は印刷会社→大手Weｂ制作会社→専門学校教員（正規職員）→弱小ITベンチャーなので、なかなかこういう奴はいないと思いますｗ 教員とか普通はできま
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース : LINE Corporation ディレクターブログ
※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著
ブログアフィリエイトで稼ぐのに役立った「最強ツール」２７選【保存版】
検索キーワードを調べるツールまとめ キーワードを調べる決定版「Google キーワード プランナー」 Googleが運営するキーワードツールで、おおよその月間検索数や競合性が高いかどうかを調べることができます。 キーワードリストをダウンロードしておいて、そこから作る記事を考えるのが効率的。 一定の広告料を使わないと細かな数値は分かりませんが、Googleのデータを元に記事タイトルを決められるので、使ってない人は絶対使っておきましょう。 Googleキーワードプランナー キーワードの組み合わせが分かる「ラッコキーワード」 キーワードの組み合わせを探せるアドバイスツール。 Googleのキーワードプランナーほど細かなデータは分かりませんが、シンプルで使いやすいツールです。 ラッコキーワード 検索順位を調べるツールまとめ 業者も使う順位チェックツール「GRC」 他のツールだと毎回キーワードを入力
Googleアラートで上手にサイトを管理する便利なテクニック | Moz - SEOとインバウンドマーケティングの実践情報
モニタリングダッシュボードの設定について取り上げた投稿やチュートリアルは、いくらでもある。好みは人それぞれだが、僕が気に入っているのは、マーティ・ワイントローブ氏がaimClearのブログに投稿した「評判管理用モニタリングダッシュボードの作り方」という記事で紹介されているものだ。 モニタリングを扱う新しいサービスは、Scout LabsやTrackurなど数か月ごとに続々と登場していて、その多くが非常に優れている。しかし場合によっては、これらの製品を使うのは、スーパーに牛乳を買いに行くためにフェラーリを運転していくのと同様のことがある。つまり、するべき作業と比較してパワーがありすぎ、不要な労力がかかってしまう。当面の必要性に適した、手早く簡単なソリューションだけあればいいという場合もあるんだ。そんな時に僕が使っている方法を紹介しよう。 大企業の会計責任者とか、個人事業の責任者なら、繰り返し
見えてきたECサイトの人気レイアウト
ECサイトのレイアウトは、ユーザーに情報を的確に届ける上で重要な役割を果たす。サポタントの調査結果から、ECサイトでトレンドになっている検索窓の設置場所やサイト幅のピクセル数が分かった。 Web・モバイル業界の人材事業を手掛けるサポタントは7月30日、EC（電子商取引）サイトのレイアウトのトレンドに関する調査結果を発表した。楽天市場（100サイト）、Yahoo!ショッピング（50サイト）に出展しているECサイトおよび企業が独自に運営するECサイト（100サイト）を7月に調査した。 70％がページ上部に「検索窓」を設置 Webページの上部に検索窓を設置しているECサイトは全体の70％だった。増加する商品点数に対し、検索性を向上させる目的で検索窓を設置するECサイトが増えているという。
MdN Design｜総合情報サイト
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──プロジェクト管理に使えるツール（1） Web制作では制作物のクオリティも重要だが、プロジェクトの進行管理を効率化し、コストを抑えることも大きな課題だ。そうしたツールの活用術を紹介しよう。 ■バックナンバー 第1回 デザインに使えるツール（1）はこちら 第2回 デザインに使えるツール（2）はこちら 第3回 デザインに使えるツール（3）はこちら 第4回 コーディングに使えるツール（1）はこちら 第5回 コーディングに使えるツール（2）はこちら 第6回 オフィス作業に使えるツール（1）はこちら 第7回 オフィス作業に使えるツール（2）はこちら Tweet [INDEX] >>> [technique 01]クライアントも巻き込んでプロジェクト管理をする >>> [technique 02]メモや注釈などのウィジ
Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 本当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多
ルートパスで書かれたhtmlファイルをローカルで確認するには。
8月は働くよー！お盆休みってなぁに？おいしーの？ ボーナスってなぁに？それっておいしーの？ さて、Webサイトを作成するときに、ルートパス（絶対パスとまとめられる事もありますが）で記載されてたり、SSIによるインクルードをしてたり、デフォルトインデックスのファイル名（index.htmlとか）を省略してたりすると、そのままローカルで確認するには不便があったり、場合によってはそもそも確認できない訳です。 そういう場合に、じゃあどうやって確認するか。となる訳ですが、毎回テストサーバとかにアップロードして確認していたら効率が悪いので、自分のPC（Windowsとして）で確認できたら嬉しいですよね！ じゃあ、どうしたら良いかって言うと、やっぱりWebサーバをローカルで構築するのが一番良いのかなと。 そうすると、自分のPCでちゃんと見れちゃう訳です。ンマーなんて素敵！ で、Webサーバって聞くと、サ
HTML5についてのおさらい｜Web制作 W3G
Updated 2010.07.29 / Published 2010.07.29 これからHTML5を使いはじめようという方に向けたHTML5のおさらいです。HTML5の記述方法にはじまり、導入にあたって間違いやすいところや勘違いしがちなところをまとめてあります。 hgroup, header, footer要素の説明を含めた続きもあります(続HTML5についてのおさらい)。 HTML5の記述方法 まず最初に、必ずDOCTYPE宣言を行います。HTML5には公式のDTDがないので、すごくシンプルになっています。 <!DOCTYPE html> 続いて、html要素にドキュメントの言語を宣言します。 <html lang="ja"> そして順番にhead要素ときて、文字エンコーディングの指定ですが、charset属性が新たに利用できるようになりました。 <meta charset="UTF
jQueryの日本語の解説サイトと国産のプラグイン集
MopBox 複数パネル（デモには100以上のパネルも）の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
時間の節約になるWeb制作関連ツール 12+1
2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト！ Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
Web制作に役立つ、何度お勧めしても足りないくらい素敵なツール10選 - かちびと.net
Web制作時、個人的にかなり助かっ ているWebアプリやソフトウェアなど をご紹介。何度お勧めしても足りない 位、助けられています。低スキルな 自分にとっては無いと困る。そんな ツールをシェアしたいと思います。 もっと沢山あるんですが、特に利用しているものを。制作時には毎回利用しているかもしれません。基本的に無料のものを使っています。順不同。 960 grid system グリッドシステムです。ブックマークレットも含め、色々手軽なのが嬉しい。何よりグリッドレイアウトはお客さん受け良い傾向にある気がします。 960 grid system Firebug Web制作といえばFirebugですが、僕はChrome派なのでChromeエクステンションのLite版を使っています。元々、Chromeにはデベロッパーツールがありますし、FxのFirebugも使いこなせてなかったのでこれで十分。 Fi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
