今持ってるリファレンス本は、最新のHTMLとCSSに対応していますか？ HTML5の要素とCSS3のプロパティについて、機能や役割や対応ブラウザなど実装に必要な情報がコンパクトにまとめられたリファレンス本を紹介します。 本書は2018年6月時点の最新情報が掲載されており、IE11, Edge42をはじめとする各ブラウザの対応状況も掲載されています。 リファレンス本の大切なポイントの一つが、使いやすいこと。 HTML5とCSS3の完全版だとそれなりに分厚いのが想像できると思います。本書は512ページとけっこうな分厚さなのですが、どのページでも見開きが簡単にできます。手で押さえておく必要はありません。 四六判なので、キーボードの横に置いても邪魔にならないでしょう。
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画... 制作時はSassでCSSを設計するが、公開（納品）後の運用環境ではSassが導入されていないケースがあるかと思います。そのような時はSassをexpandedのスタイルで出力する事で、ある程度可読性の... 現在RCでリリースの近いSass3.3ですが、新機能でBEMを取り入れた命名がしやすくなるようなので、正式リリースに備えて紹介&メモします。BEMとは？Block、Element、Modifi... 前回、CreateJSに簡単に触れましたがCanvasでちょっとしたビジュアルを作成する機会があった為、早速CreateJSを導入しました。先に結論から書くと、ノンライブラリ（Canv
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/gakuchi/pannyatto.net/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/gakuchi/pannyatto.net/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_la
Create engaging videos, images, and HTML5-based designs for your business that can run on any device Intended for business use only Features that help businesses bring ideas to life Google Web Designer gives you the power to create beautiful and compelling videos, images, and HTML5 ads. Use animation and interactive elements to build out your creative vision, then scale your content for different
商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。 ウェブサイトを構築する際に、ベースとして利用するのによさそうです。 Markup Framework Markup Frameworkの特徴 Markup Frameworkのサポートブラウザ Markup Frameworkのデモ Markup Frameworkの特徴 レスポンシブ対応、モバイルファーストのレイアウト。 再利用可能なUIエレメントのライブラリ。 最新のスタンダードなHTML5/CSS3を使用。 ピュアなHTMLとCSSで、Hackなし、JavaScriptなしです。 ミニマルなマークアップ。 ページの容量は小さめ。 サーチエンジンにフレンドリー。 アクセシブル。 セマンティックスとスタイルの明確な分離。 モジュー
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡
今回はCSS3のみで１pxのラインまでデザインされたナビゲーションを作ってみました。 □demo □サンプル.zip 参考までに・・・こちらがPhotoshopで制作したナビゲーションです。（画像使用） 次にこちらが今回CSS３のみで作成したナビゲーションです。（画像不使用 Win7 Firefox12.0でキャプチャ） どうでしょう？さほど違いはないんじゃないでしょうか？ HTML <ul id="menu"> <li class="first active"><a href="#">デザイナー</a></li> <li><a href="#">プログラマー</a></li> <li><a href="#">社長ブログ</a></li> <li class="last"><a href="#">お空</a></li> </ul> HTMLソースはわずかこれだけ！ 本当はクラス名の「fir
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
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
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
