ユアマイスター株式会社エンジニアブログ

ユアマイスター株式会社のエンジニアが日々徒然。

RWD(レスプンシブWebデザイン) & 第一回 ユアマイスターEngineer Night

こんにちは!エンジニアインターンの土屋です! 今回は、ユーザーにwebサイトを見やすくさせるための工夫の一つとしてRWD(レスプンシブウェブデザイン)について書こうと思います。
また、ユアマイスターではないところでエンジニアをされている人やデザイナーの人を招いて、第一回Engineer Night 開催しました!それに参加しての感想、学んだことを書きます!


バイスに応じたサイトを作るMediaQueries

どのデバイスにもサイトを見やすくする(RWD)ための方法がMediaQueriesというものです!

MediaQueriesの書き方

  1. link要素として指定する場合(htmlのhead内に指定する方法)

  2. スタイルシートに指定する場合

ブレイクポイント

分岐点(例の場合はmax-widthやmin-widthの数値)細かく指定することで、複数のファイルをその条件の時に読み込ませるといった事が可能です。 この分岐点を「ブレイクポイント」と呼びます。

 @media all and (ブレイクポイント) {} 

↓こんな感じに・・・

@media all and (max-width: 640px) {
.pc-menu{
       display: none;
                 }
}

このように記述し{}の中に変更したい点のみを記述します。

@mediaの後の記述方法はいくつかあります。

  • @media all すべて

  • @media screen コンピュータ画面

  • @media print プリンタ

  • @media tv テレビ


    画面幅の指定(max-width、min-width)

    max-widthは、最大その幅まで(それ以下)の時こういう指定にしてくださいと指定する時に使います。
    min-widthは、最小その幅まで(それ以上)の時指定する際に使います。
    f:id:yourmystar_engineer:20170401014810p:plain
    hashimotosan.hatenablog.jp


レイアウトに合わせて、デバイスに合わせて、Webサイトをより見やすく使いやすいものにしていきましょう!!!!


第一回 Enjineer Night(外のエンジニアの人と交流して)

学んだこと

  • 開発で使う言語の選び方
    →作るサービスの大きさによって変えた方がよかったり、どうしてその言語を使っているのか明確すると良い

  • 色々な人の力があって良いサービスができる
    →エンジニア(一人のエンジニアでなく、様々な意見を持ったエンジニア)の他にデザイナーやマーケッター、色々な人たちが協力して良いものが完成していく。

    感想

    ユアマイスターでなく、外の違った環境でエンジニアをしている人たちのお話を聞くことができて、わからない単語も出たりしましたが、分かる範囲の会話でもすごく面白かったですし、何よりみんなプログラミングが楽しそうでした!!みなさん個性も強く、それぞれプログラミングに対する思いがあり、私も早く一人前になりたいと思いました!またこういった機会で色々なエンジニアの方と交流できたらいいなと思います!