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

どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。

“HTML5のタグを整理してみる” の続きを読む

標準CSSでの変数

通常のCSS構文で変数を使う方法。

SASS/SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。

ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。

“標準CSSでの変数” の続きを読む

Flex box

display:flex を使ったカラムレイアウト。

毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。

Javascriptを使えばIE8・9にも適応させることもできますが、対応が必要なかたは以下の参考サイトでご確認ください。
【参考サイト】
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!

“Flex box” の続きを読む

アイコンWEBフォント(Genericons)

WEBフォントの「Genericons(ジェネリコン?)」を使ったアイコン表示。

「Genericons(以下ジェネコン)」とは、
WordPressのテーマで使われている記号用のWEBフォントで、
 」こんな感じや、
 」こんな感じのアイコンを
画像ではなく文字として表示するためのフォントです。

※【2017.04.30追記】現在「Generinons」は「Genericons Neue」に仕様が変わり、GitHubからSVGやCSS等のデータをダウンロードして使うようになっています。また、新仕様ではSNS等のロゴマークも無くなっています。
詳しくは本家 http://genericons.com/ にてご確認ください。

今回はこのフォントを通常のHTMLに組み込んで使ってみます。

“アイコンWEBフォント(Genericons)” の続きを読む

HTML5+CSS3の時代だからSVGを

SVG形式ならビットマップ画像じゃなく
パスの状態でWEBにアップできるから
拡大しても劣化しない?

かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。

しかし、HTML5+CSS3の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。

作ってみるとかなり奥が深く、メリットもデメリットも多々あります。

まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。

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">

 

関連記事

【PHP 5.3.x 以降】eregの代わり