インターンシップ5回目

こんにちは

ちえです。

長いテストが終わり、やっと春休みに入りました！！！！！

ほどほどにだらだら過ごして、楽しい休みをすごいしたいと思います〜

もちろんインターンシップもバイトも頑張ります！

さて今回はインターンシップも5回目ということで、以下の流れでアウトプットしていこうと思います。

①デザインを見やすくするポイント

②ホームページをスマホ版に

③ライブラリを活用する

の３つで書いていきたいと思います。

最後までお付き合い頂ければ幸いです^ ^

①デザインを見やすくするポイント

まずは、今回「見やすいデザインを作るためには？」ということで、グリッドを活用することを学びました！

グリッドとは格子状の線のことで、デザインするときに重要な要素になります。

例えば上の資料のようにロゴをぴったり6個のセルに収まるように作ることで、わかりやすく、見やすいデザインになったりします。

このグリッドの縦（列）をcolumn【カラム】といい、横（行）をrow【ロウ】、一箱分のことをセル、1列分を1frと呼びます！

HTMLとCSSでは下のように実装します。

ここまでグリッドの活用方法をご紹介しました。

誰が見てもわかりやすいということは、こちらの意図や情報がそれらを伝えたい相手にスムーズに伝わるということだと考えています。

このグリッドシステムを上手く活用することで、ぱっとみて「大事ことがわかる」とか「なんか印象に残る」という効果にもつながるので、これから重要視していきたいと思います！

②ホームページをスマホ版に

普段は情報収集や検索をするときはどんな媒体を使っていますか？

現在はさまざまなデジタル機器が存在していますが、やはり一番身近という点で考えるとスマートフォンやパソコンが多いのではないでしょうか。

私はスマホを用がなくてもついついさわってしまって時間を浪費した…なんてこと多々あります（ ; ; ）もっと自己管理しないとな〜と思う日々です…

ということで、今回のインターンシップではホームページをパソコン版だけではなくスマホ版でもいい感じの表示にする方法を学びました。

このようにユーザーのブラウザやサイズに合わせて表示を適応させることをレスポンシブといいます。そしてスマホに適用させることはスマホ・フレンドリーと呼びます。（なんかかわいい）

詳しくは以下の通りです。

企業によってはグーグル検索で上位に出るように検索エンジンを活用しているところも多いですし、日本のスマホやタブレットの普及率も高いので、このスマホ・フレンドリーは必須になります。

実装の仕方は以下の通りです。

これを入れるだけで対応するってすごい…なんて思ってしまいます（笑）

ユーザーのことを常に意識して取り組むことが大切だと改めて思いました。

③ライブラリを活用する

ライブラリとは完成コードの集まりのことです。「オープンソース」という考え方をしており、ネット上で直接プログラムを読み込むこともできます。例えばJavaScript・Googleフォント・CSS等をDLL（ダイナミック・リンク・ライブラリ）から利用できます。

資産として有効に活用していこうと思います。

さて、今回はここまでになります！

まだCSSを理解できていないところもあるので、復習をしながら学んでいきたいと思います。

タッチタイピングももう少し早く打てるようになりたいので、ちょこちょこ練習頑張ります！

ではまた次回(^^)