ワードプレス初心者向け情報サイト『webcode』WordPress初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。2020年2月24日webcode編集部FacebookTwitterはてブPocketFeedlywebデザインの業界で、最近はデザイン手法にもトレンドがあります。その時々によって、全体構想が変わったり、アニメーションを加えたりなどの流行があります。今回は、カードなどのブロック要素を用いたデザイン手法を紹介していきます。ちなみに本格的にデザインについて学ぶなら、筆者も受講したwebデザインスクールの受講がおすすめです。課題を解くことで次に進める形式グリッドレイアウトとは?まず、グリッドレイアウトとは、サイトの幅と高さから、デザインの大枠を「四角形(格子)」に分解して構成したレイアウト手法です。Googleの提唱しているマテリアルデザインで使われている「カード」の概念とも、非常に相性が良いと言えます。リキッドレイアウトとは?続いて、リキッドレイアウトとは、画面の表示幅に応じて相対的に指定したり、レイアウトの配置を変えたりするレイアウト手法です。いえ、これでは覚えにくいので、他のレイアウト手法とは「幅をパーセントで指定する」という点が違うと考えてください。具体的なイメージを掴んでいただくために、ここからはグリッドレイアウトの例を紹介していきます。これを見ると、なんとなく見たことがあるなという感じになると思います。RECRUITURL:https://r.recruit-jinji.jp/ここでは、余白が無いグリッドレイアウトが使われていますね。カントリーマアムURL:https://www.fujiya-peko.co.jp/countrymaam/このサイトでは、グリッドレイアウトの中にスライドショーが埋め込まれています。劇団四季URL:https://www.shiki.jp/このサイトでは、グリッドレイアウトの中に横幅いっぱいの使い方を取り入れています。ちなみに、この記事を書いた時点での、このサイトのトップページのデザインもグリッドレイアウトを導入しています。グリッドレイアウトのメリットとデメリットグリッドレイアウトの細かい作成方法に入る前に、これを使うメリットとデメリットを知っておきましょう。画像メインなのでアニメーションとの相性が良いマテリアルデザインが導入しやすいとにかく、四角形が使いやすいのが特徴でしょう。レスポンシブ対応しやすかったり、アニメーションとの相性が良いというメリットがあります。グリッドレイアウトを利用するデメリット画像が重要になる上手くテキストが入れられないと、何のコンテンツか分からないとにかく、画像がメインになるので、いい画像が準備できないと全体的にダサく見えます。あとは、最初からテキストが記載されていたりしないと、そのコンテンツが何を意図したものなのかが伝わりにくいです。グリッドレイアウトの作成方法それでは、実際のグリッドレイアウトの作成方法です。最後のCSSで各部分は省略してしまってますが、現在はdisplay:gridを使った方法などもいろんな方が紹介されています。格子数」「横の格子数」を決めると自然と決まってきます。2.グリッドを使いたいサイズで結合する次は、グリッドを結合していきます。人によっては、ひとつも結合しないで使いたいという場合もあるかと思いますので、その場合は次に進んでください。3.余白を揃える次は、余白を揃えましょう。くっつけて表現したい場合は、余白を0pxに指定していくといいです。この時、横幅は%指定がしやすいので楽なのですが、縦幅は%指定がしにくいので大変です。個人的なオススメとしては、余白だけはpx指定をしてしまう方がいいかなと思っています。width:%指定height:px指定margin:px指定このような感じでしょうか?もっと良い方法があればコメント欄で教えてください。4.CSSで実装する最後に、ここまで決まったらCSSで実装をしていきます。具体的な記述は省略しますので、以下の方々の素晴らしい記事を参考にしてみてください。筆者はdisplay:gridが上手く使いこなせない時があるので、半ば無理矢理CSSで組むことがあります。グリッドレイアウトに関するオススメ本7日間でマスターするレイアウト基礎講座こちらの本はグリッドレイアウトに限らず、レイアウト全般について学べる本です。読めますので、レイアウトについて学びたい方にはおすすめです。デザインブックがおすすめです。2018年にグリッドレイアウトに特化した本が出ましたので、紹介させていただきます。デザインブック」はこちらグリッドレイアウトに関するまとめ以上、いかがでしたか?今回は、リキッドレイアウトの中で、最近のトレンドを抑えたレイアウト手法の「グリッドレイアウト」を紹介しました。このレイアウトはすぐに実装できるようになると、どんな場面でも使いやすいですし、レスポンシブ対応もスムーズにできます。マテリアルデザインとの相性も良いです。便利な手法かと思いますので、参考にしてみてくださいね。ちなみにデザインについて本格的に学んでいきたい方には、筆者も受講したデザインスクールがおすすめです。【参考】完全オンラインのプログラミングスクールTechAcademyまず、筆者が受講したの完全オンラインのプログラミングスクールのTechAcademyです。TechAcademyは上場企業が運営するプログラミングスクールで、これまでに法人では600社、のべ3万人以上の受講実績がある大手のプログラミングスクールです。デザイン以外にもさまざまなプログラミングコースを提供しており、筆者の場合はWebデザイン+WordPressコースを受講しました。TechAcademyは完全にオンラインのため、オンラインテキストを自分で学習して進めていき、都度わからないところがあればSlackでメンターに質問する形式です。課題を提出して現役エンジニアやデザイナーにレビューしてもらい、その課題をクリアすると次の課題に進むことができますので、着実にスキルが身につきます。WebデザインコースWebデザインコースでは、デザインの基礎から実際にコーディングをしてデザインを作っていくまでの一通りを学ぶことができます。TechAcademyは週2回ほどオンライン面談が30分ほどあり、現役デザイナー・エンジニアからフィードバックをもらえます。その場で疑問に思っていることを聞いてみたりすることで不安が解消されたり、定期的にオンライン面談があることでモチベーション維持にも繋がります。筆者も一歩一歩着実に課題をクリアしていったことで、デザインの基礎を習得することができました。上記のように課題をクリアすると次に進むことができるようになりますので、他のプログラミングスクールとは異なりかなり着実にスキルが身につきます。ちなみにWordPressとデザイン両方を学びたい方は、Webデザイン+WordPressの8週間コースがおすすめです。合計費用は、早割プランで申し込めば社会人が248,000円、学生が188,000円です。ある程度まとまった時間が取れそうな、お盆期間の夏休みや年末年始の冬休みなどに合わせて受講されてみるのも良いでしょう。TechAcademyは無料体験レッスンを提供していますので、詳細がきになる方は無料体験を受講されるのが一番おすすめです。筆者も受講前はいくつかプログラミングスクールの無料体験を受講してから決めましたので、おすすめはいくつかの無料体験を受講して一番自分にあったスクールを選ばれることです。TechAcademyの無料体験レッスン予約へTechAcademの公式サイトへ>>TechAcademyの詳しい口コミはこちら最後まで読んでいただき、ありがとうございました。LIGの評判や料金は高い?WordPressデザインを学ぶおすすめスクールを比較2019年11月16日WordPressカスタマイズ外注時の料金相場は?どのやり方が一番おすすめ?2019年3月18日サイトマップの作り方!簡単にテンプレートで作成する方法IllustratorとPhotoshopの違いは?使い方を初心者向けに解説おすすめの記事レンタルサーバーシックスコアの評判!専用サーバーと共有サーバーの違いを比較しておすすめな人を紹介シックスコアは、ビジネス向けのレンタルサーバーになります。シックスコアには専用サーバーと共有サーバーがあり、専用サーバーは利用可能な容量も大...ホームページ作成ツールwebnodeの評判は?料金・メリット・デメリット・利用がおすすめな方を解説ホームページ作成ツールのwebnode(ウェブノード)の評判です。webcodezeroRANKINGShopify(ショピファイ)の評判は?カラーミーショップやリピートとの比較エックスサーバーの使い方をワードプレス初心者にわかりやすく画像で解説【経験談付き】ロリポップはライトプランで十分?ワードプレスを複数するならどのlolipopのプランが良い?バインドアップ(BiNDup)の評判は?料金比較やメリット・デメリットを解説ヘテムルとエックスサーバーの比較!wordpress初心者におすすめはどっち?CATEGORYWordPress(ワードプレス)初心者向けにwordpress(ワードプレス)に関するお役立ち情報が掲載されています。おすすめプラグインやおすすめ有料テーマ(テンプレート)、おすすめ無料テーマ(テンプレート)なども紹介しております。Goope(グーペ)初心者向けにグーペに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、グーペの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。Jimdo(ジンドゥー)初心者向けにjimdoに関するお役立ち情報が掲載されています。リアルな口コミやメリット・デメリット、jimdoの利用がおすすめな人や他のCMSとの比較情報などもご紹介しています。WIX(ウィックス)初心者向けにWIX(ウィックス)に関するお役立ち情報が掲載されています。口コミや評判、メリット・デメリット、WIXの利用がおすすめな人や、他のCMSやホームページ作成ツールとの比較情報などもご紹介しています。RentalServer(レンタルサーバー)レンタルサーバーに関する口コミや評判、メリット・デメリット・料金比較などが掲載されています。ワードプレス(wordpress)運用におすすめのレンタルサーバーもご紹介しております。