2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
CSS Hat translates layer styles to CSS3 code
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
reveal.js - The HTML Presentation Framework
Hello Therereveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do. Vertical SlidesSlides can be nested inside of each other. Use the Space key to navigate through all slides. Basement Level 1Nested slides are useful for adding additional detail underneath a high level horizontal slide. Basement Level 2That's it, time
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
1ランク上の「HTML5」制作に欠かせないサイト・ツール・アプリのまとめ21個！
「HTMLファイ部」のほんだです(・Å・)∫ jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアをやっているものです。 よろしくお願いします！ 「HTMLファイ部」創立1周年！ 非常に手前味噌ではございますが、 弊社HTMLファイ部が創立から1年になりましたっ！・u・ HTMLファイ部は、「HTML5」技術を軸に、様々な表現に挑戦していくエンジニアを集めた部署となっています。 今回の記事では、HTMLファイ部の一周年を勝手に記念して、 HTMLファイ部のメンバーからかき集めてきた、HTML5サイト制作ツールをまとめます！ ツール系のサイト
いちばんシンプルなHTML5のベースを用意 | necozine
私は、例えばjavascriptをどう動かしたらいいかと理解する時、テキストエディタを使って最低限のコードでサンプルを試します。 そんな時の、ベースとなるHTMLのコードを紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> <!-- /*css*/ --> </style> <scr
CSS3 Loading elements – part 2Script Tutorials - Web Development Tutorials
CSS3 Loading elements – part 2 We received a lot of feedback on this article CSS3 Loading elements, so we decided to prepare the second part of this article. Where we will create 4 new loading elements. All of them use pure CSS3 animation and don’t use images. Let’s review them. Live Demo So, lets start Step 1. HTML You can see here four elements – our new ‘loading’ elements. Every of them have a
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」
大したものではないんですけど、jQueryの直書きに慣れ親しむ為に自分で前から欲しかったものをプラグインにして作ってみました。 ol要素の通し番号の種類 olにつける通し番号のバリエーションには、HTML側からだとtype属性で普通の数字、ローマ数字(小文字or大文字)、アルファベット(小文字or大文字)が指定できます。詳しくは以下のHTML5.jpのページで。 ol 要素 – コンテンツのグループ化 – HTML要素 – HTML5 タグリファレンス – HTML5.JP そして次にCSSの方からは何が出来るかですけど、これは結構種類がありますね。 スタイルシートリファレンスから参照しますと黒丸、白丸、黒四角等の定番の他、0つきの数字、漢数字、果てはヘブライ語、グルジア語なんてのもあるようです。 list-style-type－スタイルシートリファレンス ①、②がない？ でもなんで①とか
![[作りました]olの通し番号を丸や四角付きにするjQueryプラグイン 「orderedList.js」](https://cdn-ak-scissors.b.st-hatena.com/image/square/161bc62a98ab9bbdd056e7eceacde579662f12ed/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F06%2Fjquery-orderd-list-01-150x150.png)
Improve Website Usability 30 Best HTML5 and CSS3 Form Exercises
30 Best HTML5 CSS3 Contact Form TutorialsPosts by MultyShades3 Comments Contact form is an essential part for any website, as it used to query and display existing data in a similar manner to mail merge forms, with the same advantages. The use of web forms for this purpose avoids the problems to create separate web pages for each record in a database. Here we’re going to take a look at how to crea
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ionic Framework - The Cross-Platform App Development Leader
新しいCSSの仕様を色々調べてみた
TECH PROjin
stroll.js - CSS3 Scroll Effects