CSS3の登場によって、JavaScriptなどでプログラミングをしなくても実装できるケースが増えてきました。そこで今回は、プログラミングなしで使えるHTML/CSSテクニック記事を10個厳選してご紹介します。「えっ、これプログラミングなしで動かしてるの?」という驚きのテクニックや、「ちょっと使ってみようかな」と自サイトで取り入れてみたくなるテクニックなどなど、いろいろなテクニックを集めました。「自分のスキルの相場をしりたい」と思う方へ簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!単価相場算出ページへ※相場算出に個人情報の取得はおこないません。Webクリエイターボックスhttp://www.webcreatorbox.com/tech/js-to-css/従来はJavaScriptを使う必要があった表現が、CSSで実装できることが増えてきました。本記事では「Div全体をクリックできるようにする」「スライドパネル」「アコーディオン」など、CSSの小技をサンプル付きで10個紹介しています。スライドパネルやアコーディオンをJQueryで作っているサイトは多いと思いますが、CSSでの実装もぜひトライしてみてください。Webクリエイターボックスhttp://www.webcreatorbox.com/tech/flexbox/続けて「Webクリエイターボックス」さんの記事です。Flexboxはサイズが不明な要素群をフレキシブルにレイアウトできる手法で、CSS3で導入されて簡単に実装できるようになりました。本記事はサンプル付きでFlexboxを丁寧に解説しているので、どういったことができるのか、どう実装するのか気になっている方はぜひ参考にしてください。コリスhttp://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-2015-mar.html「マウスホバーすると下からニュッと3本の木が現れるボタン」「横からスライドでアニメーションするナビゲーション」「スクリプトを使わずにモーダルウィンドウを表示するアニメーション」など、CSSを使ったテクニックをまとめた記事です。各サンプルのコードはWebエディタの「CodePen(http://codepen.io/)」で見ることができます。4.CSSの素晴らしいアイデアが満載!2015年スタイルシートのテクニックのまとめhttp://coliss.com/articles/build-websites/operation/css/css-most-awesome-techniques-of-2015.html同じく「コリス」さんの記事です。ページの背景にアニメーションで動く霧をかけたり、マウスを動かすと幾何学模様がCanvasで描かれたり、「CSSでこんなことまでできるの!?」という驚きがたくさんあります。「CodePen」でコードを閲覧できますので、どういう風に動かしているのか気になったテクニックがあればチェックしてみてください。animation(アニメーションの基本原則12個)」をHTMLとCSSで再現した記事です。12個の原則それぞれをHTMLとCSSだけで表現するという興味深い内容となっています。勲氏が携わっています。VIPhttp://photoshopvip.net/archives/88174本記事では「モザイク状に表示」「ポップダウン表示」「アイコンを回転させて表示」といった30個のホバーエフェクトを紹介しています。一口にホバーエフェクトといっても表現の幅が広く、本記事で紹介しているサンプルのように使い方次第でいろいろなデザインができます。WEBデザインファンhttp://www.webdesign-fan.com/css3-matome「アコーディオンメニュー」「モーダルウィンドウ」「ホバー効果」「ローディング」といったCSS3を使ったアニメーションの実装方法をまとめた記事です。使いどころがあるのか疑問が残りますが、映画風の「エンドロール」を実装する方法も紹介しています。NxWorldhttp://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.htmlハンバーガーメニューとは、スマートフォンサイトやアプリなどでよく使われている「三」の形のアイコンのことです。タップしたときに動きをつける12種類の実装方法を紹介しています。W3Qhttp://w3q.jp/t/4458Web制作に関するQ&Aサイト「W3Q」の投稿記事です。「レスポンシブな円形メニュー」「曇りガラス風に背景をぼかす」「リッタ汽笛に回転するボタン」など、CSS3を使ったテクニックを11個紹介しています。Tipshttp://rakuten-tips.com/htmlcss/text-effect/本記事では「カラフルなテキストアニメーション」「文字を重ねるテキストエフェクト」「CSSで作るロゴアニメーション」など、CSSを使ったテキストエフェクトの例を31個紹介しています。テキストをオシャレに見せたいときは、CSSを使ってエフェクトをかけてみましょう。まとめご覧いただいたように、これまでJavaScriptを使わなければ表現できなかったこともCSS3で実装できるようになりました。上手に使えば開発工数の削減などのメリットがありますので、気になったテクニックは積極的に取り入れてみましょう。最後に簡単4ステップ!スキルや経験年数をポチポチ選ぶだけで、あなたのフリーランスとしての単価相場を算出します!単価相場算出ページへ※相場算出に個人情報の取得はおこないません。クリエイターの求人・案件探しは、レバテッククリエイターへレバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。自社調べ求人・案件探しの相談をするまた、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。「個別相談会」に申し込む役に立った/参考になったと思ったら、シェアをお願いします。EffectsMayaInDesignDreamweaverレバテッククリエイターおすすめコンテンツレバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。us運営会社ヘルプフリーエンジニア案件エンジニア・クリエイター転職ハイクラス転職ITエンジニア向け新卒就活支援サービス案件の提案をご希望の方はお気軽にご相談下さい。無料サポート登録レバテック株式会社は、「プライバシーマーク」使用許諾事業者として認定されています。