今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペット27個まとめ

htmlsnippet2016feb-top

 

新しいテクニックを活用した、最先端のウェブデザインから学ぶ、今後のウェブ制作に活用したい素敵なHTML/CSSコードスニペットをまとめています。

 

 

コピー&ペーストで利用できるお手軽なCSSアニメーションやホバーリンクなどに加え、インパクトのあるレイアウトを実現できる本格的なアイテムやプラグインが揃います。スマートフォン端末ユーザーがさらに増えると予想される2016年、レスポンシブデザインやSVG形式に対応したスニペットは、今後より必要になってくるでしょう。

 

 

 

詳細は以下から。

 

 

 

今どきのウェブサイトをつくろう!差がつくHTML/CSSコードスニペットまとめ

 

右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTML、CSS、JSタブをクリックすることで確認することができます。

 

 

Simple Card Carousel

カード状に重ねたコンテンツをクリックすることで、まるでめくるような感覚で表示できるカルーセル機能。

See the Pen Simple Card Carousel by Andy Tran (@andytran) on CodePen.

 

 

 

Multi-device scrolling menu

水平方向へのスクロールを利用した、レスポンシブに対応するナビメニュー。リンクをクリックすると、背景カラーが変化します。

See the Pen Multi-device scrolling menu by Alberto (@ac_coding) on CodePen.

 

 

 

Pure CSS Header Menu

HTML/CSSのみでデザインされた、レスポンシブ対応のナビメニュー。

See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.

 

 

 

Velocity.js fullscreen flexbox overlay navigation

右上に配置されたハンバーガーメニューをクリックすると、フルスクリーンでナビメニュー用リンクが展開されます。滑らかさに定評のある Velocity.js プラグインを採用。

See the Pen Velocity.js fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.

 

 

 

megamenu.js – Last responsive megamenu

レスポンシブに対応した、滑らかなアニメーションが素敵なメガメニュー用プラグイン。※ 大きなスクリーンサイズでうまく確認できます。

See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek (@riogrande) on CodePen.

 

 

 

Demo for sass mixin library for text hover effects

左側メニューよりエフェクトを決め、「Hover Me」にマウスホバーすることで、ラインを利用した20種類以上のホバーエフェクトをまとめています。※ 大きなスクリーンサイズでうまく確認できます。

See the Pen Demo for sass mixin library for text hover effects by Antonija Šimić (@tonkec) on CodePen.

 

 

 

Hover Effect

マウスホバーするとボタンがラインに変化するアニメーション。

See the Pen Hover effect by zessx (@zessx) on CodePen.

 

 

 

Awesome split-in-half hover effect

ドクンドクンという鼓動のようなエフェクトに、ボタンが上下に割れるスプリットエフェクトがユニーク。

See the Pen Awesome split-in-half hover effect by Kriszta (@vajkri) on CodePen.

 

 

 

Sign In Button and Form

ボタンをクリックすると、フルスクリーン画面にログインページがポップアップ表示されます。

See the Pen Sign In Button and Form by Cole Waldrip (@colewaldrip) on CodePen.

 

 

 

Tweet Button v2

パタパタと羽ばたく鳥がかわいい、CSSアニメーションを利用したTwitterシェアボタン。

See the Pen Tweet Button v2 by Andreas Storm (@andreasstorm) on CodePen.

 

 

 

Lock/Unlock Navigation

ボタンをクリックすると、ロックされていた各コンテンツが解除されます。

See the Pen Lock/Unlock Navigation by Andrew Canham (@candroo) on CodePen.

 

 

 

Unicasts Blog Design

天地中央揃えを利用した、ブログコンテンツに適したレイアウト。

See the Pen Unicasts Blog Design by Mackenzie Child (@mackenzie) on CodePen.

 

 

 

Duo-tone example with scroll effects

カラフルな色使いに、幾何学模様のアニメーションが、今年のデザイントレンドにもあっています。

See the Pen Duo-tone example with scroll effects by Nicolás J. Engler (@nicolasjengler) on CodePen.

 

 

 

Untranslatable Slider

コンテンツが切り替わるたびに、単語がふわりと表示されるエフェクトが追加したスライダー。

See the Pen Untranslatable Slider by Joe Harry (@woodwork) on CodePen.

 

 

 

Tile with Gradient Title

グリッドレをうまく崩した、雑誌のようなレイアウトが特長。

See the Pen Tile with gradient title by Fabio Ottaviani (@supah) on CodePen.

 

 

 

Trending Decoration

フラットスタイルにCSSを利用してドロップシャドウを適用した、トレンド性の高いレイアウト。

See the Pen Trending by Philip Stapelfeldt (@caphil) on CodePen.

 

 

 

work element project animation

新しいサムネイル用レイアウトを提案する、CSSホバーエフェクト。

See the Pen work element project animation by Valentin Galmand (@asstor_) on CodePen.

 

 

 

Step by step register form

各ステップごとに進む、スライド式お問い合わせフォーム。

See the Pen Step by step register form by Jerome Renders (@JeromeRenders) on CodePen.

 

 

 

CSS Fill Murray welcome button!

プロフィール表示に活用できる、サークル型マウスホバーアニメーション。

See the Pen CSS Fill Murray welcome button! by Mathieu Lavoie (@theaftermath87) on CodePen.

 

 

 

StickyStack.js

スクロールに応じて、カードを重ねるようにコンテンツを表示することができるJSプラグイン。

See the Pen StickyStack.js by Mike Zarandona (@mike-zarandona) on CodePen.

 

 

 

Hover Reveal Effect

See the Pen Hover Reveal Effect by Tiffany Stoik (@tstoik) on CodePen.

 

 

 

Slider Animation

右端にあるナビメニューを利用して展開する、アニメーションが魅力的なスライダー。

See the Pen Slider Animation by Ettrics (@ettrics) on CodePen.

 

 

 

Scrolling effect kinda 3d

スクロールすることでキューブ状にコンテンツが展開する、立体的なエフェクト。

See the Pen Scrolling effect kinda 3d by Jerome Renders (@JeromeRenders) on CodePen.

 

 

 

Blog Concept

スクロールに応じて残りのコンテンツ量を、分かりやすくローディングバーで表示します。

See the Pen Blog Concept by Brian Douglas (@BrianDGLS) on CodePen.

 

 

 

Logo Animation

シンプルですが、デザインのアクセントになりそうなロゴ用CSSアニメーション。

See the Pen logo animation by Diego (@dieghh) on CodePen.

 

 

 

SVG Animation

複数のラインがロゴのまわりをアニメーションするユニークなコンセプト。

See the Pen svg animation by Anna Batura (@Anna_Batura) on CodePen.

 

 

 

Batman

@keyframeアニメーションを利用した、ポリゴンスタイルのバットマン。

See the Pen Batman by massimo (@_massimo) on CodePen.

 

 

 

SVG Diamond

キラキラと輝くダイヤモンドを、SVGファイルで描いています。

See the Pen SVG Diamond by Chris Gannon (@chrisgannon) on CodePen.