ブラウザの対応がかなり進んでいるので、そろそろ使っても良いかな。
https://caniuse.com/?search=writing-mode
値の「sideways-…」は、現状、Firefoxのみ対応なので利用は難しい。
ブラウザの対応がかなり進んでいるので、そろそろ使っても良いかな。
https://caniuse.com/?search=writing-mode
値の「sideways-…」は、現状、Firefoxのみ対応なので利用は難しい。
Adobe Dreamweaver CC 2017+ で Sass/SCSSをコンパイルする方法。
See the Pen Sass Sample by Hiro Iruya (@leo-loki) on CodePen.
Adobe Dreamweaver CC 2017版から、SASS/SCSSやLESSがコンパイルできるようになりました。
“Dreamweaver でSass/SCSSを” の続きを読むSee the Pen position:sticky by Hiro Iruya (@leo-loki) on CodePen.
【参考】画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
参考記事:Webクリエイターボックス
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー
画像を指定した範囲内に自動でフィットさせるCSSプロパティ。
IE/Edgeへの対応方法もあり。
DOCTYPE宣言や文字コード指定、IE旧バージョンやスマホ対応など、<head>タグ内の設定については割愛します。
当方で利用している headタグのテンプレはこちらでご確認を。
main / article / section / aside
どう組み合わせてもだいたい正常に表示されますが、ブラウザや検索エンジンにページ構成を正しく理解させるためには、正しく使う必要があるらしいです。
SASS/SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。
ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。
毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。
※Javascriptを使えばIE8・9にも適応させることもできますが、対応が必要なかたは以下の参考サイトでご確認ください。
【参考サイト】
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利!
「Genericons(以下ジェネコン)」とは、
WordPressのテーマで使われている記号用のWEBフォントで、
「 」こんな感じや、
「 」こんな感じのアイコンを
画像ではなく文字として表示するためのフォントです。
※【2017.04.30追記】現在「Generinons」は「Genericons Neue」に仕様が変わり、GitHubからSVGやCSS等のデータをダウンロードして使うようになっています。また、新仕様ではSNS等のロゴマークも無くなっています。
詳しくは本家 http://genericons.com/ にてご確認ください。
今回はこのフォントを通常のHTMLに組み込んで使ってみます。
かなり昔からイラレのファイル形式にあったSVG形式。
WEBにアップして拡大してもキレイに見えるってことで、一度、挑戦してみたことがあるのですが、ほとんどのブラウザが対応していなっかたのであきらめてました。
しかし、HTML5+CSS3の時代がやってきた今では実用しているサイトを見かけるようになったので、ちょっとサンプルを作ってみました。
作ってみるとかなり奥が深く、メリットもデメリットも多々あります。
まだまだ私も勉強が必要なのですが、参考までにぜひどうぞ。