カテゴリー: HTML5+CSS3/4
Dreamweaver でSass/SCSSを
Adobe Dreamweaver CC 2017+ で Sass/SCSSをコンパイルする方法。
Adobe Dreamweaver CC（2017以降）で Sass/SCSSをコンパイルする方法。
See the Pen Sass Sample by Hiro Iruya (@leo-loki) on CodePen.
position: sticky
See the Pen position:sticky by Hiro Iruya (@leo-loki) on CodePen.
CSS：object-fit
【参考】画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
参考記事：Webクリエイターボックス
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
HTML5のタグを整理してみる
今さらですが、HTML5の追加タグについて、解説書やブログ記事など人によって使い方がことなるので、もう一度整理してみることに。
DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。
まずはややこしいセクショニングのタグについて。
main / article / section / aside
どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。
標準CSSでの変数
通常のCSS構文で変数を使う方法。
SASS／SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。
ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。
Flex box
display:flex を使ったカラムレイアウト。
毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。
※Javascriptを使えばＩＥ8・9にも適応させることもできますが、対応が必要なかたは以下の参考サイトでご確認ください。
【参考サイト】
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
アイコンWEBフォント（Genericons）
WEBフォントの「Genericons（ジェネリコン？）」を使ったアイコン表示。
「Genericons（以下ジェネコン）」とは、
WordPressのテーマで使われている記号用のWEBフォントで、
「 」こんな感じや、
「 」こんな感じのアイコンを
画像ではなく文字として表示するためのフォントです。
※【2017.04.30追記】現在「Generinons」は「Genericons Neue」に仕様が変わり、GitHubからSVGやCSS等のデータをダウンロードして使うようになっています。また、新仕様ではSNS等のロゴマークも無くなっています。
詳しくは本家 http://genericons.com/ にてご確認ください。
今回はこのフォントを通常のHTMLに組み込んで使ってみます。
HTML5＋CSS3の時代だからSVGを
SVG形式ならビットマップ画像じゃなく
パスの状態でWEBにアップできるから
拡大しても劣化しない？
かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。
しかし、HTML５＋CSS３の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。
作ってみるとかなり奥が深く、メリットもデメリットも多々あります。
まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。
HTML5 + PHPの注意
HTML5でPHPソースを記述する場合の注意事項です。
HTML5のページ先頭にPHPソース（<?php ･･･ ?>）を記述する場合。
PHPソースの終わり「?>」に「<!DOCTYPE html>」を続けて記述しないと、空行ができて不具合を起こす場合があります。
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if((mb_ereg("iPhone",$ua)) || (mb_ereg("iPod",$ua)) || (mb_ereg("iPad",$ua))){
$iFlag = true;
} else {
$iFlag = false;
}
?><!DOCTYPE html>
<html lang="ja">