HTML5カンファレンス2012の講演資料のまとめです。 HTML5カンファレンスは非常に有意義なものでした。講演頂いた方、スタッフの皆様ありがとうございます。 HTMLとかCSSとかAPIとか -2012秋編-（矢倉眞隆さん） HTML5 や CSS3 の新しいタグやプロパティについての解説。 でもその前に、W3C と WHATWG についての話。 一部のメディアで、W3C と WHATWG が決裂したかのような報道がされたが、実際は問題ないとのこと。 W3C と WHATWG の Editor を務めていた Ian Hickson氏は WHATWG の HTML に集中し、バグ修正が加速しそうです。 セッションでは紹介されていませんでしたが、こちらの記事に Ian Hickson氏からのメールの邦訳など載っています。 HTML5仕様をめぐるW3CとWHATWGについて、Ian Hick
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基本も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基本的な内容ですが、読んで頂ければ幸
WEBサイトを作る時、アイデア出しに詰まったりするなら参考になりそうなサイトを探したりするのもアリだと思いますが、たまには『WEBデザイン』の枠を超えた所からアイデアなんかが思いつくこともしばしばかと思います。 特にスペシャルコンテンツ的なサイトを作るときには、時として奇抜なアイデアや見たことも無いようなインパクトを必要とされる事もしばし。そんな時僕は一度“WEBデザイン”のことを忘れ、WEBデザイン以外のギャラリーや専門サイトを見る事も少なくはありません。 配色ルールなんかをインテリアやファッションデザインからヒントを得る的な記事も前に書かせてもらいましたが、似たような事かなと思います。たまにはWEB以外のデザインに目を通して違う発見やアイデアを得るための時間を作るのも面白いものですよー！ というわけで、今回は海外WEBデザインギャラリーまとめに続きまして続編的に書いてみようかなと、前回
１．piktochart http://piktochart.com/ 既に５０万のユーザーが利用しているインフォグラフィック作成ツール。 あらかじめ用意されている７０以上のテンプレートの中から、最もイメージに合うものを選ぶことによって、（無料で使えるテンプレートは５つ。）誰でも感覚的にキレイなインフォグラフィックを作ることができる。 操作性もブログを書く時のようにシンプルだ。 （※完成品は右図参照） また、ドラッグ＆ドロップするだけで使える８タイプのグラフ作成機能や、好きな配色を簡単に実現するカラーパレット機能などもついている。 慣れると３０分で、インフォグラフィックを作成できるようになる。 ２．infogr.am http://infogr.am/ こちらも感覚的にインフォグラフィックを作成することができるお薦めのツール。 新しいインフォグラフィックを作成する機能インフォグラフィックで
「急に言われましても」に対応する フリー素材サイトいっぱいお盆だよスペシャル 気の早い話だが、もうすぐお正月だ。 夏コミあとの冬コミがすぐにやってくるように、夏から年末は一瞬。そして新年。新年といえば、年賀状だ。来年であれば巳年だから蛇のイラストの需要が高まるわけだが……そんなとき、知っておくと助かるのがフリー素材サイトだ。 個人利用であれば無料のものが多く、かつデザインがステキ。またビジネス用のテンプレートも豊富に存在しているので、普段からチェックしてけおけば、「急に言われましても」なイベントにも即対応できる。 ということで、お盆スペシャルとして編集部オススメの素材サイトを一挙に紹介していく。個別にブックマークするよりも、このページをブックマークしておくといいゾ。
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
mizzz.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。 そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。 私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。 目的を達成へと導くボタン ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
無償のWebサイト構築ツール「WebMatrix 2」、新版はiPhone/iPadエミュレータ、Node.js、CoffeeScriptなど対応 先週末に行われたWindows Azureの新機能を紹介するイベント「Go Azure」の基調講演の中で、Azure以外に興味を引かれたソフトウェアがありました。マイクロソフトが無償で公開しているWebサイト構築ツール「WebMatrix」の新版、「WebMatrix 2」です。 WebMatrixは、HTML/CSS/JavaScript/PHP/ASP.NETなどに対応したエディタ機能を備え、コード補完機能も搭載。ローカルにデータベースやWebサーバを用意してPHPの動作をそのまま確認したり、WordPressやDrupalなどのWebアプリケーションをローカルで試すこともできました。 下記はその画面（参考：マイクロソフト、無償のWeb開発
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
ついに新型MacBook Proが登場し特にRetina採用の美しいディスプレイが話題を呼んでいます。画面が綺麗になることはユーザーにはとっても良いことなのでしょうが、この鮮明すぎる解像度が既存のウェブデザインに大きな波紋を呼んでいるようで。。。今回はそんなウェブデザイナー・ウェブ運営者が気になる話題をThe Next Webから。 – – SEO Japan 昨日AppleのWWDCを見た他の誰もと同じように、私は、最新のRetinaディスプレイ搭載のMacBook Proを自分の物にしたいと思っている。もちろん、2,200ドルからという価格を考えると、飛びつくには待たなければならないだろう。何とかなると信じて思い切るつもりでいるが、そう考えているのは私だけではないと思う。待っている間に、この新しいリリースの何が特別なのかを見る価値はある。 新しいMacBook Proモデルは、ハイエン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
