タグ

ブックマーク / scene-live.com (3)

  • 【CSS】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)

    こんにちは、ウェブマーケティング部の杉尾です。 前々回、CSS3のメディアクエリについてお話しさせていただきました。 また、前回は『スマホ、タブレットの横幅』(端末解像度と実質解像度)を紹介しました。 今回はその続きとして、ブレイクポイント(CSSの切り替え地点)を考えてみます。 レスポンシブデザインでサイトを作る際に必ず必要となってくるので、参考にしてみてください。 レスポンシブデザインとメディアクエリ 現場において、メディアクエリは主にレスポンシブデザインのサイトを制作する際に使われます。 レスポンシブデザインは、一つのHTMLソースで、スマホからPCまで画面構成を崩すことなく表示できます。 閲覧端末ごとの制作が必要なくなり、また管理もしやすいので、ここ数年でかなり普及しました。 【詳しくはコチラ】 ⇒http://scene-live.com/page.php?page=95 ブレイ

    【CSS】適切なブレイクポイントを考えてみる(レスポンシブデザイン用)
  • 【CSS】CSSで要素を横並びにする4つの方法の概要を説明

    こんにちは、WEBマーケティング部の杉尾です。 今回から数回にわたって、CSSで『要素を横並びにする方法』を紹介します。 レイアウトをするにあたって、初心者がつまずきやすい箇所です。 正しい知識を得るために、一緒に勉強していきましょう。 float CSSで横並びにする基的なやり方です。 要素を浮かせて移動させるイメージのスタイル指定です。 メリット ・要素の右寄せ、左寄せという感覚がわかりやすく、使いやすい。 ・HTMLで上に書いた要素を右に、下に書いた要素を左に寄せて横並びにできる。 デメリット ・右寄せ、左寄せをした後に、それを解除する必要があるので余計な記述が増える。 (次に来る要素にclear:both;をつける必要がある) ・親要素の高さがなくなる。 ・clearfixを使えば、clear:both;をつける必要はない上、親要素の高さが消えることはないが、CSSの記述が増える

    【CSS】CSSで要素を横並びにする4つの方法の概要を説明
  • HTML5のvideo要素を紹介 IE8にも対応させました【HTML5実践編】

    こんにちは、WEBマーケティング部の杉尾です。 今回と次回でvideoタグについてお話しさせていただきます。 よろしくお願いします。 videoタグとは videoタグはHTML5から新しく追加された、動画メディアを再生するためのタグ要素です。 これにより、閲覧者の環境にプラグインがインストールされているかどうかを気にすることなく、Webサイトに動画を設置できるようになります。 IE8への対応を含めたコードを載せていますので、下記をご覧ください。 説明不要でコードだけ欲しい方はこちらへ。 ファイル形式は MPEG-4です。 videoタグ実装前段階 まず、Web制作者ご用達のcaniuse.comを見に行きます。(下図) 主要ブラウザ(IE,Firefox,Chrome,Safari,Opera)の最新バージョンは既にvideoタグをサポートしています。 それに、iOS safariとAn

    HTML5のvideo要素を紹介 IE8にも対応させました【HTML5実践編】
  • 1