Sassの実行環境についてSassの新機能は公式が推奨するDart Sassから実装されるだけでなく、今までの記述方法が今後非推奨となり、廃止されるものもあります。

みなさん、こんにちは。山田です。 Sass界ではDart Sassというものが注目を浴びていると小耳に挟みました。 公式でもこちらを推奨しており、Sassの新機能はこちらから実装されるとか。 記述の方法も変わってくるとなれば、フロントエンドエンジニアとして生きていく上では避けては通れなくなってしまう。 @importが@useに変わる、などの変更点についてはすでに多くの方が記事にしているようなので、今回はコピペでサクッと実行してコンパイルできるような形にしていきたいと思います。 今回はこのような構成にして、コンパイルにはGulpを使用します。 CSS設計はFLOCSSを参考にしていますが、この辺はお好みに合わせて編集してください。 / ├ htdocs (閲覧環境) │ └ css │ └ style.css ├ gulpfile.js ├ package.json └ src/ (開発環

Sassに新しいモジュールシステムが導入されます。具体的には@useと@forwardという2つのルールが登場し、@importルールは将来的に廃止される予定です。現在、Sassのおもな実装としてDart SassとLibSassがありますが、まずDart Sassへの実装が進んでいて、今年10月に安定版がリリースされる予定です。この新しいモジュールシステムを簡単に紹介したいと思います。 なお、ここで言うSassの「モジュール」とは、メンバー（変数、関数、ミックスイン）のコレクションを指し、具体的にはSassのソースファイルのことです。 背景 新しいモジュールシステムが開発された背景として、@importルールがかかえる多くの問題があります。ファイルスコープがないため依存モジュールの把握が困難になったり、名前空間を持たないためにライブラリの作者と利用者が命名を工夫しないといけなかったり、と

吉本集 1981年生まれ、札幌出身、東京在住。Web制作会社で経験を積んだ後、2008年にフリーランスとして活動、2010年、株式会社aruを設立。現在、フロントエンドエンジニアとして活動中。 執筆 jQuery 仕事の現場でサッと使える! デザイン教科書 スキル JavaScript / jQuery / TypeScript / HTML / CSS / Sass / WordPress / ActionScript / Flash / PHP / grunt / gulp / webpack リンク Blog / Twitter / Facebook

HTML 側の内容とセレクタがマッチすればスタイルが適用されます。このように CSS はとても単純な仕組みですが、その単純さゆえに大規模な実装では管理が難しく簡単に破綻してしまう問題点を抱えています。 CSS が破綻してしまう主な理由は以下の通りです。 セレクタには詳細度 (優先順位) が存在するスタイルには子要素にまで継承する同じセレクタを多重定義できるHTML 側の各要素はスタイルが複合的に適用される 開発現場では CSS が単純であるがために軽視されてしまう嫌いがあります。多くのプロジェクトでは Java や SQL などのコーディング規約やアンチパターンなどは用意されていますが、CSS は用意されていないケースは珍しくありません。その結果、統一されたルールがない状態でプロジェクトが進み、開発が佳境にさしかかったタイミングで CSS の逆襲が始まります。CSS が悪いわけではありませ

基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。

はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ

公開日: 2016/03/09 | 更新日: 2017/08/10 WEBPコンバーターは、JPEGやPNGをWEBPに、WEBPをPNGに変換するウェブサービスです。画質を保ったまま、圧倒的に容量を圧縮できるWEBPをウェブサイトで活用していきましょう。Chromeにのみ対応しています。 ヒントJPG、PNGからWEBPに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、PNGかJPGのファイルを指定して下さい。「変換後の画像」という項目に、WEBPに変換した画像が表示されるので保存して下さい。WEBPからPNGに変換する「変換前の画像」という項目にある「ファイルを選択」を押して、WEBPのファイルを指定して下さい。「変換後の画像」という項目に、PNGに変換した画像が表示されるので保存して下さい。プライバシーについてここで使用した画像は、当サイトのサーバーにはアップロー

HTML 5.2のそれぞれの要素が入れ子にできる「子要素」、包含されることが可能な「親要素」の一覧のルールを視覚化して表示します。 ※1 a要素の親要素が包含可能であること※1 audio要素の親要素が包含可能であること※1 canvas要素の親要素が包含可能であること※1 del要素の親要素が包含可能であること※1 ins要素の親要素が包含可能であること子要素省略※1 map要素の親要素が包含可能であること※1 noscript要素の親要素が包含可能であること かつ body要素の子孫であること子要素省略※1 video要素の親要素が包含可能であること ルート要素＆文書メタデータ html 親 子 head 親 子 title 親 子 base 親 子 link 親 子※HTML 5.2から可能。フレージングコンテンツが期待される場所※head要素の子孫であること meta 親 子※he

対応方法について 基本的には WebP 画像を作成後、 img タグに直接 .webp のファイル名で記述すれば対応できるのですが、 <img src="xxx.webp"> WebP に対応していないブラウザもあるため（特に Safari）、従来画像と共存させる必要があります。 共存させることを前提とした場合、今の時点での対応方法については大きく２種類が考えられます。 １，picture タグを使う ２，htaccess で制御する 結論から言うと、htaccess での対応が良さそうですが、それぞれの対応について解説していきます。 １，picture タグを使う場合 picture タグで対応する場合、下記のように記述することで対応することができます。 <picture> <!-- WebP用画像 --> <source srcset="xxx.webp" type="image/we

概要 制作時にブクマしとけばいいのについ毎回検索しちゃうものや ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ？」みたいなやつを防ぐ為に 自分及び社内用に作ったリンク集です。 ルール 会員登録やインストール無しで使える無料のwebツール等 ※例外としてGoogleはログイン可能とします。 オンラインエディタ コード共有 CodePen HTML・CSS・JSをブラウザ上でサクッと試すのに便利。 右上の「New Pen」で無料で使える。 scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能 CodeSandbox VanillaJS、React、Vue、Angularなどの環境がサクッと試せる。 Add Dependencyでnpmのパッケージを入れたり、Shareの方法も様々でテンプレートとしてのダ

このたび、BtoBサイトの成功パターンをまとめた『BtoBサイト・チェックリスト』とワイヤーフレームを、株式会社ベイジ、株式会社才流、株式会社WACULの3社連名で発表しました。 チェックリスト（PPT版）ワイヤーフレーム（PPT版）ワイヤーフレーム（XD版）ここで取り扱っているBtoBサイトとは、BtoB企業のマーケティングあるいはセールスに貢献することを目的として作られたwebサイトのことです。そしてこの取り組みの根底にあるのは「BtoBサイトにおける車輪の再発明を減らしたい」という3社共通の思いです。 BtoB企業といっても多種多様な企業が存在するように、BtoBのマーケティングやセールスを含む購買プロセスも突き詰めれば、個別の商材特性、顧客特性、業界特性、組織特性、経営環境などの影響を受けた、多種多様なものになります。 しかしながら、個別最適化しか手がないわけでもなく、BtoBビジ

2019/09/11 2014年6月から集計している、ユーザーの画面幅(解像度)のシェアをまとめています。ウェブデザインの設計などにお役立て下さい。データは1日ごとに更新されます。 集計期間このページでは、最近3ヶ月間(9月12日〜12月10日)のデータを表示しています。過去の集計を確認したい方は、下記のリンクからご覧下さい。 2014年6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2015年1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2016年1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月2017年1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月

こんにちは。フロントエンドエンジニアのほりでーです。 Webやアプリの開発ではデザイナーとエンジニアの連携が欠かせません。デザイナーとエンジニアが分業する場合、デザイナーがPhotoshopなどのグラフィックツールで完成図となるデザインカンプを作成し、それを元にフロントエンドエンジニアが実装してWebサイトを完成させることが多いでしょう。 しかし、最近のWebサイトで多用されているリキッドレイアウト（横幅の変化に追従するレイアウト）や、ユーザーの操作に反応するインタラクティブなアニメーション表現、CMSやJavaScriptと連動して動作する複雑なUIなどをカンプ上で表現するのは困難です。 そのため、デザイナーが「ここはこういう風に動かしたいな〜」と思っていても、それがエンジニアに伝わっていない、という見落しも発生してしまいます。 一般的に、ソフトウェアの開発では仕様が不安定（＝必要な機能

2017年11月17日の「まぼろしのマークアップ勉強会 #1」でお話したスライドです #mbrs_markup_study

レゴランドの水遊びはどれがおすすめ？ウォータメイズとスプラッシュパッドはどっち？ 2024/06/17

⇒ WordPressの準備・導入パターンとレンタルサーバー費用相場・比較表 WordPressの始め方、導入パターン・レンタルサーバーの費用相場、おすすめのレンタルサーバーを紹介 ⇒ マンダラ塗り絵ダウンロードサイト マンダラや幾何学模様、花、ボタニカルアートの塗り絵を配布中。 同じ画像なのにパソコンで見るときれいに表示されていても、スマートフォンでは、画像がぼやけている。 スマホサイトやレスポンシブサイトを制作していると、とっても気になる問題ですね。 画像がぼやけて見えるのは、デバイスの画像解像度の違いが原因です。 この「デバイスの画像解像度の違い」と「スマホでの画像表示の考え方」は、結構複雑で、フクモトもWebや書籍で調べても、一度読んだだけでは…???…でした。 何度、参考書を読み返しても、よくわからない。 Retinaディスプレイ・デバイスの画像解像度の違い・液晶画面の幅・デバイ

こんにちは、ウェブマーケティング部の杉尾です。 かなり時間が空いてしまいましたが、前回、CSS3のメディアクエリについてお話しさせていただきました。 それに関係する話で、スマホとタブレットの横幅(端末解像度、実質解像度)を紹介したいと思います。 制作の参考にしてください。 【前回はコチラ】 ⇒http://scene-live.com/page.php?page=95 スマートフォンの端末解像度と実質解像度 iPhoneとAndroidに分けてお伝えします。 iPhone デバイス 端末解像度(横×縦) 実質解像度(横×縦) 画素(ppi) Device Pixel Ratio

[fancy_box]この記事は、海外デザインブログDesignModoで公開された「How to Create a Web Design Style Guide」の著者Tomas Laurinaviciusより許可をもらい翻訳しています。Thank you so much guys, @designmodo & @tomaslau!![/fancy_box] ウェブ技術の発達によりウェブサイト制作はより複雑になっており、時には共同で作業をすることもしばしばです。プロジェクトを目標へと最大限に近づけたり、ユーザーに楽しい体験をしてもらうためにも、デザインが首尾一貫となっていることが重要になります。 プロジェクトに関わるチームが、ウェブサイトの異なるパーツをデザインしているときなど、全員がデザインに対する共通認識、ルールを適用できるひとつの方法として、デザイン・ドキュメントまたはウェブデザイ