女性Webデザイナーが女性向けに特化したWebサイトやWebデザインを制作します。Webサイト制作やデザインはもとより、コンサルティング、ブランディング確立へのデザイン、チラシや名刺などのプロモーションツールと、あらゆるニーズにお応えします。SEOやモバイルファーストインデックスを考慮したスマートフォンサイト制作(レスポンシブ対応)をはじめ、成果を出すランディングページ(LP)、Webサイトの更新性を高めるWordPress導入など、女性をターゲットとするサービスのWebサイト制作をお考えの方はご相談ください。me私のご紹介ブログとお知らせボランティア活動プライバシーポリシーPortfolioContactついでにCSS3についてBrowse:Home情報ついでにCSS3についてついでにCSS3について※この記事は2014年12月26日に書かれたもので、内容が古い可能性がありますのでご注意ください。今日は関連の深いCSS3についてかいてみようかと思います。(カスケーディング・スタイル・シート)の略で、HTMLの文書情報にレイアウトや、文字色やエレメントなどの装飾といったヴィジュアル要素を指定する技術です。CSS3はその最新バージョンとなります。CSS3ではCSS2より新しく追加されたプロパティやセレクタによって、従来より表現の幅が格段に広がりました。CSS3は、まだ策定中の技術ではあるものの、ブラウザでの実装が先行して進められており、特に、近年市場が急速に拡大しているスマートフォンでのブラウジングにおいては、実質的にスタンダード使用されています。従来のCSSと何が違う?基本的な部分は何も変わりません。CSSにはバージョンを示す記述が存在しないため、従来のCSSと混在した記述が可能です。CSS3で追加された新しい仕様のセレクタやプロパティを記述し、CSS3をサポートしているブラウザで閲覧することで記述通りの表示が可能です。アンカーで飛んだ先のdiv要素CSS3では多数の属性セレクタや疑似クラスなどが追加されました。これによって、「○○が●●の場合...」といった自由度の高い指定が可能になりました。div要素の背景にhoge.pngとfuga.pngを指定CSS3では角丸やボックスシャドウ、グラデーション、アニメーションなど、様々なプロパティが追加されました。今まで画像を使っていた装飾が、CSSの記述のみで手軽に実現できるようになりました。いったプロパティを使って数値部分を独自にデザインしています。リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね。Images次のような吹き出しも下記のようなシンプルなマークアップで実現出来ます。Rocks!</p>影もついてますね。次のような、何かを考えてる風の吹き出しにも出来ます。border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを2枚重ねることでとんがった部分を実現しているという。マークアップが綺麗になるのが何より嬉しいですね。フルスクリーン背景がスライドショーになるCSS3を見つけました。ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうですね。デモページISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね。詳しく知りたい方は下記をご覧ください。