CSS
プロジェクトNo.65SassとはSyntactically Awesome Stylesheetsの略で、直訳すると「構文的なすごいスタイルシート」です。 Sassで書いたファイルをコンパイルしてcssに出力して使います。 大抵は大規模なサイトや複数人で実装するような現場で使われるようで…
プロジェクトNo.63: WOW.js+Animate.css - DEMO画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。 容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。
プロジェクトNo.62:PageTopへ戻る - DEMOページトップへ戻るリンクを簡単に実装しようと思うと、 <a href="#header">PAGE UP</a> みたいなのをfooterに配置するなど考えられるが、 今回実装するのは以下のようなもの。 リンクは画面下部に常に表示 ただし、ある程度スクロールした…
プロジェクトNo.61:videoタグで背景動画 - DEMO前回はjQueryプラグインを使用しましたが、 HTML5のvideoタグでも実現できました。 またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。
プロジェクトNo.46:プログレッシブエンハンスメント - DEMO従来のクロスブラウザという考え方から、最近ではプログレッシブエンハンスメントという考え方が流行っている様です。 プログレッシブエンハンスメントとは「新しいスタイルの書き方に対応している…
プロジェクトNo.45:Flexbox - DEMO今までは上記の画像のように横並びに要素を配置しようとした場合、 floatを使って実現するのが主流でした。(その前はテーブルレイアウト) 最近では新しく「Flexible Box Layout Module」=Flexboxというものが、モダンブ…
プロジェクトNo.36:blend-mode - DEMO複数の背景画像や色などを重ね合わせることができるCSSの機能「ブレンドモード」。 ただ単に重ね合さるだけではなく、色々な効果を与えることができます。 言葉で説明するのが難しいのでまずはDEMOをご覧ください。
プロジェクトNo.31:上部に固定ナビゲーション - DEMO画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。 色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。…
プロジェクトNo.29:画面サイズいっぱいの背景画像 - DEMO ビジュアル重視のサイトでよく使われるテクニックです。
プロジェクトNo.28:jquery.inview - DEMOパララックス(要素出現)も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。
transform: rotate()を使って、テキストを-90度回転させる方法です。
今回はCSSを使った線形、円形グラデーションの表現方法を紹介する。
positionプロパティを使って絶対位置・固定位置を指定した際に、ブラウザ間で配置が異なる事がある。その際の対処法を紹介する。
プロジェクトNo.5:Horizon水平線から太陽が昇る様子を、positionプロパティを使って表現してみた。
プロジェクトNo.4:レスポンシブデザイン2前回のレスポンシブデザインを応用して、小ネタを作ってみた。 画面サイズを変更すると画像の種類と文字が変化する。
プロジェクトNo.3:レスポンシブデザインWordpressテーマを使ったプロジェクトサイトを、自分の手でも作ってみよう思い、レスポンシブなWebサイトを作ってみました。
プロジェクトNo.2:http://seiyatanaka.com/works/002/実質、スクラッチで作る1つ目のWebサイトです。 その名も「HelloWorld」!!! プログラミングを触った人ならみんな知ってる登竜門の様な名前ですね。今回はCSSだけで吹き出しを表現してみるというもの…