Posted by アイ・エス・シーシステム事業部
on 2011年08月25日 in HTML,HTML5/CSS3,WEB,技術


ホームページ作る人のネタ帳さんより
CSS3で作成されたサンプル・チュートリアルを紹介している
CSS3で作るあんなものやこんなもの
という記事を見つけましたのでご紹介します。

中には画像のようなものを描いてしまうものや宇宙~まであるんですが
こちらがわかりやすかったのでご紹介します。

The Shapes of CSS
こちらでは丸や三角から始まって台形~ハートまでいろいろなソースをサンプル提示してくださっています。

こんなソースでハートが書けちゃうんですね・・・

[html]
<div id="heart"></div>
<style contenteditable>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
[/html]

—- ここからサンプルです。 — CSS3対応ブラウザにて御覧ください。



—- ここまで —- (表示されない方、ごめんなさい)
[大丈夫だったブラウザ]
Google Chrome では確認しました。
[ダメだったブラウザ]
InternetExplorer8 では四角に見えることを確認しました。

Posted by アイ・エス・シーシステム事業部
on 2011年06月07日 in HTML,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます!

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて!

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・ と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・


この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・(抜粋)
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="css/style.css?v=2">

<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<p class="info">Your HTML5 project is almost ready! Please check the <a href="TODO.txt">TODO list</a>.</p>
<div id="header-container">
<header class="wrapper">
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="#">Some</a></li>
<li><a href="#">navigation</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
</header>
</div>
<div id="main" class="wrapper">
<aside>
<h3>Something aside</h3>
</aside>
<article>
<header>
<h2>Your article heading</h2>

    ・
    ・
[/html]

冒頭に[if IE]の嵐がっ!
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

Posted by アイ・エス・シーシステム事業部
on 2011年05月25日 in ブラウザ,技術


アットマークアイティでこんな記事を発見。
常に考えていたことで共感が持てたのでご紹介します。

クロスブラウザはもう 古い! HTML5+CSS3時代の プログレッシブ・エンハンスメント

内容はサイト制作やWebシステム開発を行う際に常に問題になってくる「クロスブラウザ対応」の進化型論のような感じ

今までは「どのブラウザで見ても同じように表示されること」を目指して制作してきたものですが
これからは「より適した環境」を用意したユーザーには最適な表示をしてあげよう!という考え方にシフトしていくだろう…していかなければいけないということですね。

現況IE(インターネットエクスプローラー)においてはInternetExplorer6を本家であるMSさえも消し去ろうとしています。
それなのにIE6での表示をサポートする理由はもはや無いんですよね。
なのに、いまだに「システム要件」に対象ブラウザ(IE6)って…

個人的には違和感を覚えていたところなのでこの記事はスカッとしました。
※この記事に関しては投稿者の主観に基づいたものです。会社としての総意ではありません。

ページトップへ戻る

Get Adobe Flash player