reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css
HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。 「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。 sanitize.css sanitize.css -GitHub sanitize.cssとは sanitize.cssの対応ブラウザ sanitize.cssのスタイル sanitize.cssの注目すべきスタイル sanitize.cssの適用 sanitize.cssとは sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。 有用なデフォルトはそのまま 多
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
画面サイズに合わせて高さを指定する3つの方法
縦長のサイトなどで、1つのセクションが画面の大きさと同じになっていることがよくあります。横幅はwidth: 100%;でいいわけですが、高さを画面サイズに合わすにはちょっと工夫が必要です。今回、画面サイズに合わせて高さを指定する方法を3つ紹介します。 画像は背景で指定していて、最初と最後は固定しています。固定している部分は難しいことをしているように見えますが、CSSだけで簡単にできます。 section { background: url(image.jpg) no-repeat fixed; background-size: cover; } では、高さの指定方法を100%を例に3つ紹介します。 jQueryを使う まずは、jQueryを使う方法です。個人的には１番なじみがあります。 $(document).ready(function () { hsize = $(window).he
ほんっとにはじめてのHTML5
はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からサンプルを作りながら解説しています。 サイトの編集ができるようになる手助けになれば…と思っています。 はじめてのHTML INDEX HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO！ CSS3レイアウトも時々登場します。 HTML要素 索引 HTML要素のアルファベット別INDEXです。 特定のHTML要素について調べたいときには、わりと便利です。 はじめてのCSS INDEX CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO！ （はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください） 属性セレクター（attribute selector）の続きです。 今回は、属性値の大文字小文字の区別を「す
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
HTMLで表組み作るならマークダウンが直感的で超簡単だからオススメ - あなたのスイッチを押すブログ
書き方の簡単な説明 ◇一行目に、列の最上段に記載する項目を記入します。 ◇列を分けるときは「 | 」（縦線／バーティカルバー）を使います。 ◇二行目に、その列のテキストの寄せを決定します（後述）。 ◇三行目から、各項目を書いていきます。 右寄せ・左寄せ・中庸寄せ 対象の列のテキストを右・左・中央に寄せるためには、マークダウンで表組みを作った時の二行目で調整します。 ◇「|:-----|」 列が左寄せになります。 ◇「|-----:|」 列が右寄せになります。 ◇「|:-----:|」 列が中央寄せになります。 簡単な話、寄せたい方向に「 : 」（コロン）を入れれば、それで完了です。真ん中の「 - 」（ハイフン）の数は適当でOK。１つでも構いません。 マークダウンからHTMLへの書き出し マークダウンで書いたテキストをブログ記事に上げても、そのままではもちろん表組みにはなりません。改めてHT
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips
こんにちは、鴨田です。 今更感はすごくあるとは思いますが、 コーダー初心者でも簡単なJavaScript/jQueryのコードで、 ちょっとした運用を楽に出来るTipsを紹介したいと思います。 １．現在見ているページのナビゲーションをアクティブにする JS if (document.URL.indexOf("001.html") != -1) { $("nav a.top").toggleClass("on"); } else if (document.URL.indexOf("002.html") != -1){ $("nav a.list").toggleClass("on"); }
HTMLとCSSを自由に書ける＆リアルタイムにプレビューできるサービス「CSSDesk」 | ライフハッカー・ジャパン
「CSSDesk」はHTMLとCSSを自由に書くことができ、リアルタイムにプレビューが確認できるサービスです。ひとつの画面内で、HTML, CSSを書いてプレビューも確認できます。リアルタイムに自分の修正が反映されるので、ウェブデザインなどに便利かと。 以下に使ってみた様子を載せておきます。まずCSSDeskへアクセスしましょう。左側がHTML, CSSがかけるスペースとなっています。自由に記述できますよ。 右側がプレビュー画面です。背景はいくつかパターンが用意されているので見やすいものを利用しましょう。記述したHTML, CSSがリアルタイムに反映されてデザインを確認できますよ。HTML, CSSの練習にも使えそうですね。ぜひご活用ください。 CSSDesk （カメきち）
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
数あるビギナーズガイドの中でも特にクオリティが高いと感じたWEBデザイナーの教科書的サイト色々 | バンクーバーのうぇぶ屋
今日は、以前『WEB制作者になりたいと言う人が見ると良さ気な、様々なことを学べるサイト15選！』という記事を書かせて頂きましたが、そのリバイス版の記事になります！あの記事書いてからもう一年かぁ。一年もあればビギナー向けのサイトや記事もどんどんどんどん変わって新しい物もどんどん出てきますね！ 特に前回もそうでしたが春先はそういった内容の記事も凄く多いので、流れに乗って今日は僕が今日まで見たなかで、これはクオリティたけぇ！と僕が独断と偏見で感じたビギナーズガイドの数々をご紹介させて頂きましょう！（Evernoteにそういうネタが溜まったのでアウトプットしよーってノリも大きいですが・・・ｗ） そいえば、この前バンクーバーにある美大の社会人向けWEBデザイナーコースに行ってきたのですが、やっぱこっちはあり得ない位授業の進みが早いんですよね。その話は別でするとして、HTMLって何？ってレベルから経っ
高機能テキストエディタ「Sublime Text 2」をDLしてみた＆導入したプラグイン
巷で話題ﾌｯﾄｰしそうだよぉ…と言うか話題沸騰しておりますテキストエディタ、「Sublime Text 2」。 Sublime Text: The text editor you’ll fall in love with あおり文句は「The text editor you’ll fall in love with」。 英検2級の私が全力で和訳してみたところ「このテキストエディタは愛欲が凄い」みたいな事だと思うのですが、何はともあれずっと気になっていたので先日ようやっとDLしてみました。 参考記事 DLに当たって参考にしましたのは以下の記事。なんだかとっても便利そうなにほひ。 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog ”恋に落ちるエディタ”「Subl
パララックスエフェクトの基本
jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間でJavaScriptの株は上昇の一途をたどっています。その勢いはとどまることを知らず、リッチなWebコンテンツを作るには、Flashをはじめとしたプラグインに頼るという、それまでの常識をすっかり覆してしまいました。 さらに、HTML5やCSS3も登場し、各ベンダのブラウザがWeb標準の仕様に合わせて実装の足並みを揃え始めるなど、プラグインに頼らずともリッチなUIのWebコンテンツを少ない手間で作れ
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
短期間でプログラミングを習得してWebサービスをつくるための知識と方法まとめ | らふらく ^^
最近、スマホの普及と共に、プログラミングを学習したい人が増えてきているようです。 私の周りでも、プログラミングに興味があり、webサービスをつくってみたいという人が大勢います。 ということで、プログラミングをやった事がない人（または初級者）のために、 プログラミングで何を学べばいいか、 どうやって勉強したらいいかというノウハウを紹介したいと思います。 何を学ぶべきか プログラミングにはいろんな言語があるため、どの言語をやればいいかわからないという声を耳にします。 そこで、初級者でも学びやすい言語を厳選し紹介したいと思います。 1. 何はともあれ「HTML」 こちらは、Webサービスをつくる上で書かせない言語で、 今見ているページ（見た目の部分）はすべてHTMLで書かれています。 HTMLを学ぶ上では以下のサイトが参考になります。 HTMLの基本 HTML入門 ドットインスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
IDEA * IDEA
これが全部無料！？フリーで使えるレスポンシブ対応のHTML5テンプレート
新着記事
HTML5.JP - 次世代HTML標準 HTML5情報サイト