Google が2014年に発表したマテリアルデザインは、ウェブだけでなくグラフィックデザインでもますます人気となっており、さまざまな方法で採用しているケースをよく見かけるようになりました。 今回は HTML と CSS、わずかな JavaScript で実装できる、今後の参考にしたいカード型レイアウト用コードスニペットをまとめてご紹介します。コードニペットは各レイアウト別にカテゴリ分けしているので、ウェブサイト制作に活用したものを見つけてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度 コンテンツ目次 1. ブログコンテンツ用レイアウト 2. 名刺型レイアウト 3. グリ

画面を縦半分に二分割した「スプリット・スクリーン（英: Split Screen）」デザインの利用がウェブサイトで増えてきています。このレイアウトは、「ひとつの画面に2つのメッセージ」というシンプルなルールだけです。 各パネルには写真イメージや文字テキスト、イラストなど異なるさまざまな要素を配置できるのが特長のレイアウトです。 シンプルとなってきているグラフィックのデザイントレンドに比べ、画面を2つに分割することは、よりユニークな方法でサイトへの興味を引くことができます。もう少し詳しく見ると、以下のような利点があります。 特定のパートにユーザーの注意を引きつける。 コントラストをうまく利用できる。 これまでにないスタイルを提供できる。 また、あらゆる画面サイズに対応する、レスポンシブデザインにとっても良い選択と言えるでしょう。このタイプのレイアウトは、大画面やタブレットでの表示が特におすす