HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ

リセットCSSとは、Google ChromeやSafariなどブラウザがあらかじめ持っているデフォルトのCSSを、リセットするための手法・設定です。 ブラウザ毎に設定されているフォントサイズやマージン、パディング等の設定をまっさらにする役割を持ちます。 今回は、2016年で最もダウンロードされたリセットCSSトップ5をご紹介します。 各ブラウザのデフォルトCSSの一覧は以下サイトをご参照ください。 デフォルトCSS一覧（たまちゃんHTMLのおうち） リセットCSSを使うメリット リセットCSSを設定することで、ブラウザによってスタイルが違う点を考慮しなければいけない問題を解決できます。また、もともとデフォルト設定されているCSSを前提に検討する必要も無いのでコーディングが楽になります。 リセットCSSの人気度ランキング 人気度が高いものから挙げると以下のようになります。 1. Eric

リセットCSSの基礎知識と、おすすめのリセットCSSについてまとめました。リセットCSSと一言に言っても、その特徴はさまざま。シーンに応じて、最適なリセットCSSを使っていくようにしましょう。 ※ご紹介したリセットCSSを利用したりカスタマイズする場合は、各リセットCSSのライセンスを確認するようにしてください。 本題に入る前に、リセットCSSとはどういったものなのか簡単にご紹介しておきましょう。 リセットCSSとは？ このページをご覧の方はご存じの方が多いかと思いますが、Webページは主にHTMLとCSSから出来ています。HTMLはページ構造やコンテンツを司っていて、CSSはデザインやレイアウトを指定しています。 さて、ご存じのようにブラウザにはさまざまな種類があります。Google ChromeやMozillaが開発しているFirefox、Macなどのアップル製品にお馴染みのSafar

作成：2016/11/7 更新：2016/11/07 Web制作 > 404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 テキスト部分だけの背景を動かす ストライプなど繰り返しの要素を作るrepeating-linear-gradient関数（repeating-linear-gradient - CSS | MDN）を使い、グラデーションの繰り返しを作ります。さらにmix-blend-mode: screen;で、 要素を混合しています。 mix-blend-mode: screen; background-image: repeating-linear-gradient(-45deg, transparent, tran

TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS

こんにちは、お久しぶりです。ウェブデベロップメント黒帯を務めております、HTMLやCSSやJavaScriptが大好きな岡部 和昌（@kzms2）と申します。 最近はCSSやSVGのアニメーション、ElectronやCordovaなどを用いたハイブリッドアプリなどがお気に入りです。 最近の活動 東大の坂本 大介先生と弊社の坂本 竜基、鈴木 健司（@kensuzuk）と一緒にFix & Slideというタッチデバイスにおける選択のUIについての論文を投稿し、UIST 2015やmobileHCI 2016と言った世界的なトップカンファレンスにて採択され発表・登壇などを行っていました。 上記の論文に関しましては、また別の機会でご紹介できたらと考えております。 それでは本題に入ります。 pointer-eventsについて 皆様はpointer-eventsというCSSプロパティーやその使い道を

クリスマスシーズンにブログに雪を降らせてみませんか？ 本記事では以下の WordPress プラグインをご紹介しています。 WP Snow Weather Effect Christmasify! 番外編として、CSS のみで雪を演出するサンプルコードも載せています（本ページ上部で使っているコードです）。 雪を降らせる WordPress プラグイン 以下の環境で実際に検証しました。 WordPress 6.4.2 テーマ：Twenty Seventeen 各プラグインの動作デモページつきでご紹介します。 WP Snow WP Snow – Best Snow Effect Plugin 「WP Snow」は、有効化しただけでサイト全体に雪を降らせてくれるシンプルなプラグイン。 ［設定］>［WP Snow］で雪の大きさや色、適用したいページの指定ができます。 Font Awesome アイ

CSSの作業をする際に便利なWebベースのツールやアプリケーションをご紹介します。 すべて無料のものをそろえましたので、Webクリエイターの方はぜひチェックしてみてください！ extractCSS HTMLシートからclass, id, インラインスタイルなどを抽出してCSSスタイルシートとして形成するための便利なツールです。 CSS Beautifier CSSスタイルシートを自動でフォーマットしてくれるので、読みやすく統一感のあるデザインのページが出来上がります。 CSScomb コーディングのスタイルをフォーマットする機能を持っていて、CSSプロパティをソートしてくれます。 CSS Compressor 圧縮してサイズを小さくしてくれる便利なアプリケーションです。 Style Stats どんなスタイルシートからでも便利な統計を取ることができるツールです。 アクセスしてURLを入力す

「小さいけども重大なミス」というのはWeb開発においてよく見られます。 バックエンドやモバイルのデベロッパー初心者であれば、そのようなミスが頻繁に起こるということをあらかじめ心得ておかなければなりません。 しかし、確認するときのポイントとなるものは存在します。 ここでは、ミスを減らすために気を付けるべきポイントをいくつか紹介します。 1. インラインのエレメントをメインコンテナとして使用していないか HTMLには2つの異なるエレメントが存在します。ブロックとエレメントです。 ブロックはメインのコンテナとして用いられ、親要素として働きます。 Div、ul、h1、h2、h3、aside、formといったものがこれにあたります。 一方、インラインはspan、li、a、labelなどが該当し、ブロック内で子要素として存在するものです。 時々、インラインの中でブロックの要素を持ったエレメントを使用し

ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。 その場合どのように配置しているでしょうか。 インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、 うまいこと配置できないことがあり、 今回は、縦方向の中央揃えについて調べてみました。

いよいよゴールデンウィークも最終日となりました。 みなさんはいかがお過ごしでしょうか？ 今日は、PCやタブレットなどの大型端末では閲覧できて、スマートフォンなど小型のモバイル端末ではコンテンツ（画像や表など）を表示させない方法をご紹介します。 今回は、下の画像をPCなどの大型デバイスでは表示、スマホなどの小型デバイスでは非表示になるようにしたいと思います。 「チーバくん」です。かわいいでしょ！ １．まずは任意のclassを作成 ホームページ作成ソフトで、新規CSSを作成して、 セレクトタイプ：クラス（HTMLエレメントに適用可能） セレクタ名：.spNone OKボタンを押す。 カテゴリ ＞ ブロック ＞ Display（D）:noneを指定してください。 ２．CSSにMedia Queriesを記述 次に、CSS内にメディアクエリを記述します。 今回は、横幅480px以下の端末では非表示

前回に引き続き、実際にわたしが行っている開発を解説していきます。 Photoshopを触る時間は以前より格段に少なくなり、その変わりコードに触れ合う時間が長くなりました。 本授業ではとくに「インブラウザって本当にPhotoshop使わないの？」と疑問に思っている方々に向けて、わたしがどのくらいの頻度でそれぞれに触れているか、シングルページのデザインを作りながら解説していきます。 必要なもの * Photoshop * Sketch * less コンパイラ 学べること * インブラウザを前提としたPhotoshopの利用方法 * Photoshop以外のデザインアプリ、Sketchの簡単な利用 * cssをもっと便利にかけるlessでのコーディング方法 ■授業中に使うデータ ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イ

WebサイトはHTML(文章構造)、CSS(視覚構造)、JavaScript(インタラクション)の組み合わせでできています。その中でも、Webサイトのデザインを担当するCSSを学んで行きましょう。 この授業では、W3C（Web技術の標準規格化非営利団体）で勧告となった最新情報に基づいてCSS2とCSS3を書く方法をハンズオンで1から学んでいきます。1回づつ完結していますが、シリーズを通して受講されるとCSSに対する理解が深まります。 今日はいよいよページ全体のレイアウトをCSSで作り上げる手法を学びます。これまで積み上げてきたスキルの集大成ですが、本日学ぶスキルも沢山あります。 この授業は次回のシリーズ「シングルページの制作入門」の前提知識となります。 ■ 事前準備 テキストエディタをご用意下さい。既にお使いのものが無ければ https://atom.io/がオススメです。 参考ファイル:

Webページの閲覧は、サイトによってはスマートフォン（以降、スマホ）での閲覧が90％を超える時代になりました。スマホがWeb閲覧の主流となりつつある今、UIのデバイス切り替えは欠かせない手法です。 数年前までは、大規模サイトにおいてはPCサイトに付加されるされる形で、スマホ専用サイトを後付けで作るのが通常でした。それがいまでは大手企業のサイトでも一からレスポンシブサイトにリニューアルするところが多くなってきています。 デバイス毎のUIを実装する方法は、MediaQueryを用いてCSSをデバイス幅で切り替えるレスポンシブサイトと、.htaccess（ApacheなどのWebサーバで使用できる、Webサーバの動作をディレクトリ単位で制御するためのファイル）を用いてデバイスによって表示サイトを切り替える手法があります。 このコースでは前者のMediaQueryを用いたCSSのコーディング方法を

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。 CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。 「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」 「jQueryの実装の仕組みがいまいちよくわからない」 今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。 最後の授業では、切り替えタブの実装を学習していきます。情報量の多いサイトではよく用いられる手法です。この実装を学習するとよりモバイルアプリケーションライクなWebサイトを作成することができます。

Webページは写真やロゴなどの「ビジュアル」と、HTMLやCSSといった「コード」で成り立っています。 この授業では、カフェ店舗のWebサイトをテーマにして下記の流れで進めていきます。 １．サイトの目的を考える ２．ビジュアルとコードを見つめる ２．ビジュアルイメージを練る ３．レイアウトを構成する ４．HTMLを設計する ５．CSSで飾る ６．Javascriptで演出する ※写真・テキストなどの原稿はダウンロードいただけるよう、ご用意します ブログやfacebookなど、既に出来上がっているWebを活用するのも楽しいことですが、まっさらな状態から制作することでWebへの理解が深まり、Webをつくる喜びを感じられるはずです。 Web業界は常に過渡期の連続ですが、変わらない技術と考え方が存在します。 それは試行錯誤する能力であり、スポーツ選手にとっての体幹です。 これらが身につけば、新しい

■ Webデザイン入門 0から自分でコーディング！~スマホサイト編~(全8回)8回目 はじめてコーディングを学ぶ方から、HTML入門（全3回）を見て少しコーディングに触れた方など、コーディング初心者を対象としています。 シリーズ8回通してできるようになる事はgoogle推奨のモバイルフレンドリーな開発環境を整え、スマホサイトを完成させる事です。 なお、このシリースで制作したスマホサイトは次のシリーズでtabletやPCなどデバイズごとにデザインが切りかわるレスポンシブサイト制作実践へと続きます。 前回までの授業でスマホ用のシングルページサイトが完成しました。この授業では、完成したサイトをマルチデバイス対応にして、同一htmlページのUIをデバイス毎に切り替える手法を学んでいきます。今回もcssを一緒にコーディングしていくハンズオン授業になります。同じサイトの見え方を、それぞれのデバイズに最

CSS設計方法論の1つである「BEM」について、徹底的に解説します （今回は全2回ある内の2回目の授業です） ■こんな方におすすめです ・BEMは少し知ってるけど、詳しくはない ・BEMを実務で使いたいけど、上手くいかない ・BEM知ってるけど、実務で使うメリットあるの？ ・一緒に仕事してる人がBEMを使ってるので、覚えとかないとヤバい ■今回はこんな内容をやります 前編では基礎的な内容を解説しました。 今回の後編では、それを実務で使うことを見越した、実践的な内容を解説します。 ・前回の授業のおさらい ・複雑なBlockを構築する方法 ・自分のプロジェクトに合わせてBEMを改良する方法 ・ディレクトリ構成の設計方法　など ■この授業を受けるにあたって必要な知識 ・HTML,5 CSS3の基礎（必須） ・OOCSSなどのCSS設計についてのざっくりした知識（推奨） ■前回からの宿題 + ひな