技術ブログ | 株式会社クラウディア » CSS https://cloudear.jp/blog クラウド専門の業務システム・社内ツール開発 Fri, 12 Nov 2021 05:00:35 +0000 ja hourly 1 http://wordpress.org/?v=4.0.1 レスポンシブデザインを導入するための手順 https://cloudear.jp/blog/?p=1697 https://cloudear.jp/blog/?p=1697#comments Wed, 14 Oct 2015 01:29:56 +0000 https://cloudear.jp/blog/?p=1697 レスポンシブウェブデザインの基礎知識と、実際に導入する際の手順をご紹介します。

レスポンシブデザインって？

現在では、さまざまなデバイスが登場していますよね。例えば、ひとくちにスマホと言ってもディスプレイサイズはさまざま。このように多岐に渡るディスプレイサイズに対応するために、レスポンシブウェブデザインを採用しているウェブサイトが増えてきました。

レスポンシブウェブデザインとは、さまざまなディスプレイサイズに対応するためのウェブ技術のこと。簡単に言うと、ディスプレイサイズによって適用するCSSを切り替えます。これによって、ユーザーが使っているデバイスごとに、最適なレイアウトでウェブページが表示されるのです。

レスポンシブウェブデザインのイメージ図

デバイスごとに異なるスタイル（CSS）を適用させる

レスポンシブウェブデザインのメリット・デメリットをまとめておきましょう。

メリット

  • デバイスによらず同一のコンテンツを提供できる
  • SEOに強い
  • シェアに強い
  • 保守管理が楽になる

デメリット

  • ページの表示に時間がかかる（場合がある）
  • 制作工数・コストがかかる（場合がある）

レスポンシブウェブデザインの最大のメリットは、全てのユーザーに同一のコンテンツを提供できることですね。また、SEOやシェアに強いことでも知られています。レスポンシブウェブデザインでは各ページのHTMLファイルが一つなので、Googleによるインデックスがばらけないことが理由です。

一方で、つくり方によっては制作コストがかさんだり、ページの表示スピードが遅くなることもあります。メリット・デメリットを把握した上で、うまく活用していきたいものですね。

レスポンシブデザイン導入の手順

レスポンシブデザインを導入する方法はいくつかありますが、今回はCSS3のmedia queryを利用した手順をご紹介していきましょう。

ステップ１．ブレークポイントを指定する

レスポンシブデザインのポイントは、デバイスのディスプレイサイズによってCSSを切り替えること。CSSファイルを別個に用意してもいいですし、一つのCSSファイル内にまとめてもかまいません。

さて、CSSを切り替える方法ですが、CSS3から追加されたmedia queryを使います。例えば、下記のように記述すれば、iPad（縦、ランドスケープ）に対してのみ適用させるCSSを記述することができます。

 

@media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait) {
    /* CSS */
}

 

レスポンシブデザインを上手く構築するには、ディスプレイサイズごとに的確にCSSを分けることです。適用するCSSを切り替える「ブレークポイント」を、正確に指定することが肝要です。

ステップ２．CSSスタイルを記述する

次に、上で設定した各画像サイズごとに、スタイルを記述します。コツとしては、リキッドレイアウトでデザインすることです。各要素の横幅をpx（ピクセル）指定で固定するのではなく、%（パーセント）指定を使って可変レイアウトにしておきましょう。

スタイルの可変指定が漏れてしまっていると、その要素が原因となってレイアウト崩れ（要素がはみ出てしまったり）を起こしてしまうことがあります。画像のサイズ指定については特に注意が必要なので、よく配慮しましょう。

ステップ３．viewportを指定する

さて、CSSの準備ができたら、HTMLから読み込みましょう。なおステップ１ではCSS内でスタイルを切り替えましたが、HTMLファイルから読み込むCSSファイルを切り替えることも可能です。デバイスごとにCSSファイルを用意している場合は、この方法でスタイルを適用させましょう。

<link rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" href="ipad-portrait.css" />

 

最後に、viewportで表示領域を指定して完了です。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

 

]]> https://cloudear.jp/blog/?feed=rss2&p=1697 0 便利なCSSジェネレーターまとめ https://cloudear.jp/blog/?p=1313 https://cloudear.jp/blog/?p=1313#comments Sun, 05 Jul 2015 13:50:18 +0000 https://cloudear.jp/blog/?p=1313 みなさんこんにちは、masa です。今日は CSS を使って装飾する際に便利なジェネレーターをいくつかまとめてみました。
角丸やボタン作成などありますので、お役に立ててください。

　メニューボタンを作りたい

CSS Menu Generetor
cssg1

 

CSS Menu Builder
cssg2

CSS3 Button Generator
cssg6

 

　グラデーションを作りたい

CSS Gradient Generator

cssg3

Ultimate CSS Gradient Generator

cssg4

 

　吹き出しボックスを作りたい

CSS ARROW PLEASE

cssg5

 

　角丸を作りたい

CSS Border Radius Generator

cssg7

 

　フォームデザインを作りたい

Live Tools – Form Builder

cssg8

 

　いろいろまとめてやりたい

CSS3.0 Maker

cssg9

 

いかがでしたか？今日は CSS デザイン時に使えるジェネレーターを独断と偏見で選んでみました。みなさんのデザイン制作の一助にしていただければ幸いです。

]]> https://cloudear.jp/blog/?feed=rss2&p=1313 0 jQuery でメニューにバーを追随させる https://cloudear.jp/blog/?p=1019 https://cloudear.jp/blog/?p=1019#comments Sun, 19 Apr 2015 06:50:08 +0000 https://cloudear.jp/blog/?p=1019 みなさんこんにちは、 masa です。サイトのメインメニューというのはアイキャッチとともに非常に目立ち、ユーザーが最初に操作する可能性が高いパーツですよね。デザイナーのみなさんが個性を出しやすいと同時に、デザインに悩みがちなメニューですが、今日はマウスホバー時にアンダーバーを追随させる方法をご紹介します。

まずはこちらの DEMO をご覧ください。
follow_bar1

マウスをホバーするとホームにいたバーが追いかけてくるメニューです。
上記のものを作る際には HTML, CSS, jQuery を使います。

(HTML)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="../css/sample.css">
  <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
</head>

<body>
  <div id="menu">                                                                                                                                                                                    
    <div id="nav"> // 以下ご自由にメニューを書き換えてください
      <a href="">サービス</a>                                                                                                                                                                        
      <a href="">お問い合わせ</a>                                                                                                                                                                    
      <a href="">開発プロセス</a>                                                                                                                                                                    
      <a href="">技術ブログ</a>                                                                                                                                                                      
      <a href="">会社情報</a>                                                                                                                                                                        
      <a class="current" href="">ホーム</a>                                                                                                                                                          
      <span></span>
    </div><!-- nav -->
  </div><!-- menu -->

<script>
$(function() {
        $('#nav span').css({ 
                width: $('#nav .current').outerWidth(),
                left: $('#nav .current').position().left 
        });
        $('#nav a').mouseover(function(){
                $('#nav span').stop().animate({
                        width: $(this).outerWidth(),
                        left: $(this).position().left}
                ,{ duration: 170, easing: 'linear', });
                //上記でバーの移動スピードとイージング方法を設定できます
        });
});
</script>

</body>
</html>

 

(CSS)

#menu {
    font-size: 16px;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    background: #2C3E50;
}

#menu a {
    margin: 0 4% 0 0;
    text-decoration: none;
    color: white;
}

#menu a:visited {
    text-decoration: none;
    color: white;
}

#menu a:hover {
    text-decoration: none;
}

#nav {
    position: relative;
}

#nav a {
    padding:10px;
}

#nav span {
    background: #FD9802; //バーの色を設定できます
    height: 2px; //バーの太さを設定できます
    display: block;
    position: absolute;
    width: 30px;
    left: 0
}

#nav a:hover {
    cursor: pointer;
}

これだけです。バーの移動スピードが遅すぎるとユーザーがストレスを感じる可能性もありますので、個人的には 170ms あたりがオススメです。CSS デザインを変えてオリジナルのメニューを作成してみてくださいね。

]]> https://cloudear.jp/blog/?feed=rss2&p=1019 0 Sass で CSS をクールにキメる https://cloudear.jp/blog/?p=169 https://cloudear.jp/blog/?p=169#comments Sun, 30 Nov 2014 03:10:48 +0000 https://cloudear.jp/blog/?p=169 一人で簡単な Web を作るなら CSS生書きでも問題ないのだけど、規模が大きくなって CSS が膨大になってくるとプログラマーとしては「変数使いてぇ」「ベンダープレフィックス毎回書くのめんどくせぇ」とかなってくるわけです。

そんなわけで、今日はSassの導入と変数の使い方を書いていきます。Sass は Ruby を必要とします。Mac や今時の Linux なら最初から入っていますが、もし入っていない場合は yum などで入れておいてください。
Windows の場合はインストールが必要なので、Ruby Installer をダウンロードして入れてください。

ruby_install

うまくインストールできましたか？
次はいよいよSassのインストールです。Winな方はコマンドプロンプトをおもむろに立ち上げ以下のように入力

cd C:\Ruby21\bin
gem install sass

無事 sass のインストールが終わりましたか？では『C:\Ruby21\bin』の配下に、style.scss という sassファイルを作りましょう。

style.scss

@charset "utf-8";

/*ここに変数を定義していきます*/
$blue1: #006A99;
$blue2: #1A9CE5;
$mcenter: 0 auto; 

.hoge {
    background: $blue1;
    color: $blue2;
    margin: $mcenter;
}

最後に scss をコンパイルします

sass --watch style.scss:style.css

すると、style.scss から　style.css が生成されました！

@charset "UTF-8";
/*ここに変数を定義していきます*/
.hoge {
  background: #006A99;
  color: #1A9CE5;
  margin: 0 auto; }

/*# sourceMappingURL=style.css.map */

これで多くのカラーコードを管理するのがとても楽になります。しかし、まだまだ Sass の機能はこんなものではありません。角丸などで border-radius を書く際に、何回も各ベンダープレフィックスを書くの疲れませんか？疲れますよね(´･ω･｀)

そこで、Sass の『ミックスイン (Mixin) 』機能を使いましょう。

同じく『C:\Ruby21\bin』の配下に以下のサンプルを作ります。

style2.scss

@charset "utf-8";

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  -o-border-radius: $radius;
  border-radius: $radius;
}

.hoge { @include border-radius(5px); }
.piyo { @include border-radius(20px); }

同じくコマンドプロンプトからコンパイルします

sass --watch style2.scss:style2.css

style2.css が生成されました！

.hoge {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

.piyo {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px; }

/*# sourceMappingURL=style2.css.map */

複数のベンダープレフィックスをひとつのセットにして、あとは『@include』で読み込んでしまえば、毎回毎回ベンダープレフィックスを書く必要がなくなるわけです。便利ですね。

いかがでしたか？
Sass はそのほかにも継承や計算などもできます。興味がある方はぜひ調べてみてください。

]]> https://cloudear.jp/blog/?feed=rss2&p=169 0