K.Ayaka's Blog

商学部の学生やってます。

インターン⑤ CSS編その2

こんにちは!

 

先日インターン5回目に行ってきました。

 

今回は最初に同じインターンメンバーの先輩からプレゼンをして頂きました。

 

美術館や美術作品が好きということで、インターンを通して感じたことや学んだことを作品を例にしての発表がとても印象的でした。

 

 

そして、前回に引き続きCSSに入りました。

今回は主にCSSグリッドを作っていきました。

f:id:monono0927:20190329101313j:image

グリッドとはこのスライドにもあるように画面上に表示される格子状の線のことをいいます。デザインで余白やレイアウトを統一するために設定したり、画像や文字を配置するときの目安に使用したりします。

 

f:id:monono0927:20190329101939j:image

f:id:monono0927:20190329102610j:image

実際に福岡大学のホームページでもグリッドを使用して画像や文字を配置して統一感を出すような工夫がされていたり、YouTubeなどの有名サイトにも使用されているとのことでした。

 

グリッドのお話を聞きながら、このことを知るだけでなんか見方変わってくるな〜と思いました。

 

そして実際にHTMLとCSSを組み合わせてグリッドを作ってみました。

 

こちらが私がつくったものです。

きどのページ2

 

すごく単純なものにみえますが、ここまでで軽く1時間以上はかかりました…。

ちなみにコードはこんな感じになってます。

 

HTML

f:id:monono0927:20190329103450j:image

 

CSS

f:id:monono0927:20190329103658j:image

CSSはこんなもんではありません。

 

サイトを見やすくするだけで、こんなにも手間暇がかかるんだと驚きました。改めてプログラミングやっている人はすごいなぁ〜と。

5月から実際にサイトを作る仕事が始まるそうですが、できる気がしないです…。

 

 

最後に、レスポンシブのお話をして頂きました。

f:id:monono0927:20190329104639j:image

レスポンシブデザインとはどんな大きさの画面でも見やすく表示するためのものです。(スマホタブレット、PCなど)

 

内容(HTML)は全て同じだけど見せ方(CSS)を変えるということです。

レスポンシブデザインに対応することで、検索の上位にきやすくなるというのがメリットの1つとして挙げられます。実際にGoogleがこれに対応していないサイトは検索順位を下げるという発表をして、多くの企業がスマホ対応のサイトを制作したそうです。

 

 

「だから君たちもレスポンシブデザインは当たり前にしてもらうことになるよ〜」

と池田さんがおっしゃっていたので、また更に不安になりましたがとりあえずやってみようと思いました。

 

今回はこの辺で。