one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

CSS

【65:Sass】SassでCSSを楽にする

プロジェクトNo.65SassとはSyntactically Awesome Stylesheetsの略で、直訳すると「構文的なすごいスタイルシート」です。 Sassで書いたファイルをコンパイルしてcssに出力して使います。 大抵は大規模なサイトや複数人で実装するような現場で使われるようで…

【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装

プロジェクトNo.63: WOW.js+Animate.css - DEMO画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。 容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。

【62:PageTopへ戻る】使えるいい感じページトップへ戻るリンク

プロジェクトNo.62:PageTopへ戻る - DEMOページトップへ戻るリンクを簡単に実装しようと思うと、 <a href="#header">PAGE UP</a> みたいなのをfooterに配置するなど考えられるが、 今回実装するのは以下のようなもの。 リンクは画面下部に常に表示 ただし、ある程度スクロールした…

【61:videoタグで背景動画】HTML5のvideoタグで動画を背景に使う

プロジェクトNo.61:videoタグで背景動画 - DEMO前回はjQueryプラグインを使用しましたが、 HTML5のvideoタグでも実現できました。 またWebサイトで動画を使う際に付けておきたい、サウンドのon/offも実装してみました。

【46:プログレッシブエンハンスメント】ブラウザに適したスタイルで表示する

プロジェクトNo.46:プログレッシブエンハンスメント - DEMO従来のクロスブラウザという考え方から、最近ではプログレッシブエンハンスメントという考え方が流行っている様です。 プログレッシブエンハンスメントとは「新しいスタイルの書き方に対応している…

【45:Flexbox】floatを使わずに要素を横並びに配置する

プロジェクトNo.45:Flexbox - DEMO今までは上記の画像のように横並びに要素を配置しようとした場合、 floatを使って実現するのが主流でした。(その前はテーブルレイアウト) 最近では新しく「Flexible Box Layout Module」=Flexboxというものが、モダンブ…

【36:blend-mode 】CSSブレンドモードで画像と色を重ね合わせる

プロジェクトNo.36:blend-mode - DEMO複数の背景画像や色などを重ね合わせることができるCSSの機能「ブレンドモード」。 ただ単に重ね合さるだけではなく、色々な効果を与えることができます。 言葉で説明するのが難しいのでまずはDEMOをご覧ください。

【31:ナビゲーションヘッダーの固定】上部に固定ナビゲーション

プロジェクトNo.31:上部に固定ナビゲーション - DEMO画面上部のヘッダーを固定してスクロールしても常時、上部にリンクがある様にする方法。 色んなサイトでよく見られる表現ですが、ページ内リンクでずれるなど、色々気を付けねばいけない事がある様です。…

【29:画面サイズいっぱいの背景画像】画面サイズに対応した背景画像を指定

プロジェクトNo.29:画面サイズいっぱいの背景画像 - DEMO ビジュアル重視のサイトでよく使われるテクニックです。

【28:jquery.inview】:パララックス(要素出現) | JQueryプラグイン & CSSでPinterest風スタイル

プロジェクトNo.28:jquery.inview - DEMOパララックス(要素出現)も以前自作しましたが、プラグインがあったので使ってみたいと思います。 また、せっかくなのでCSSでPinterest風に表示させてみました。

CSSで文字を回転させる|transform: rotate()

CSS

transform: rotate()を使って、テキストを-90度回転させる方法です。

CSSで線形、円形グラデーションを表現する

CSS

今回はCSSを使った線形、円形グラデーションの表現方法を紹介する。

positionプロパティを使用する際の注意点|ブラウザ間での違い

CSS

positionプロパティを使って絶対位置・固定位置を指定した際に、ブラウザ間で配置が異なる事がある。その際の対処法を紹介する。

【5:Horizon】positionプロパティによるスクロールコンテンツ

プロジェクトNo.5:Horizon水平線から太陽が昇る様子を、positionプロパティを使って表現してみた。

【4:レスポンシブデザイン2】画面サイズによって画像と文字のスタイルを変更

プロジェクトNo.4:レスポンシブデザイン2前回のレスポンシブデザインを応用して、小ネタを作ってみた。 画面サイズを変更すると画像の種類と文字が変化する。

【3:レスポンシブデザイン】画面サイズによってレイアウトを変更

プロジェクトNo.3:レスポンシブデザインWordpressテーマを使ったプロジェクトサイトを、自分の手でも作ってみよう思い、レスポンシブなWebサイトを作ってみました。

【2:HelloWorld】CSSで吹き出しを表現する

プロジェクトNo.2:http://seiyatanaka.com/works/002/実質、スクラッチで作る1つ目のWebサイトです。 その名も「HelloWorld」!!! プログラミングを触った人ならみんな知ってる登竜門の様な名前ですね。今回はCSSだけで吹き出しを表現してみるというもの…