タグ

2017年4月10日のブックマーク (2件)

  • FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT by Beeworks

    ※この記事は2017年4月7日に執筆された記事です。現在は仕様が異なる可能性があります。 Webの開発をやったことのある方なら誰しも、「CSSって結局どう書くのがベストなの?」という悩みを感じたことがあるでしょう。 一見簡単なCSSですが、一度書き始めるとそのあまりの自由さに、まるで大海原に放り出された赤子のような気分になってしまいますよね。 人生何事も、ある程度制約があったほうがやりやすいものです。 そんなわけで今日はCSSの設計について考えてみましょう。 目次 どんな設計があるの? F、L、O、Uの4つに分けよう Foundation Layout Object Utility FLOU設計のメリットは? レイアウトが劇的に楽 CSSの見通しが良くなる FLOUで書くときのポイントは? まとめ どんな設計があるの? CSS設計について調べてみると、OOCSSだとかSMACSSだとかFL

    FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT by Beeworks
  • イメージスライダーを魅力的に!コピペ実装できるHTMLスニペット24個まとめ

    ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基原則を完全再現! 垂直型イメージスライダー くるりと回転したり、スクリーン

    イメージスライダーを魅力的に!コピペ実装できるHTMLスニペット24個まとめ