提携パートナー連絡フォームその他その他のお問い合わせホームページ運営ブログBlogホームページのことを中心にためになるかもしれないことをいろいろと書いています。ホームページ制作のことからSEOや広告、マーケティングの話まで思いついたことを語っています。最近ちょっと技術的な話も多くなってきましたが、今日はスタイルシートについて紹介しますね。内容的にはむちゃくちゃ簡単な話で、画像を円形に表示するというものです。技術レベルとしては高くは無いですが、意外にまだまだ丸い画像を表示するのにペイントソフトでトリミングしてから貼ってる人がいるので書いておきたいと思います。いった円形の表現はスタイルシートで簡単にできてしまいます。デモはこちらCSSで円形にトリミングしよう用意するのは通常の四角形の画像で構いません。やり方はいろいろとあるんですが、今回はむちゃ簡単な背景画像を使った方法。HTMLコードはたったこれだけです。class="img_circle"></div>このdivの部分に背景を入れて、形を円形に設定するだけです。100px;}超簡単でしたよね。高さや幅、背景の位置やサイズなども指定していますが、CSSなので、これらをうまく変更することでサイズやトリミングの位置など後からでも自由自在です。画像の差し替えも、トリミングなどなしで行えます。円形の中だけが拡大されるアニメーションCSSなどでこういったことをすると、アニメーションなどで面白いこともできます。デモページの3つめの画像にマウスを合わせると拡大するアニメーションができます。いうことは、ペイントソフトで加工した画像ではできませんよね。130%;}こんな感じで。今回は非常にシンプルな話でしたが、これからはこういった比較的簡単なものも紹介していければと思ってます。YCOMでは大阪を中心にホームページ制作サービスを提供しています。ホームページ制作、運用に関するサービスのご案内はこちらよりご覧ください。YCOMのホームページ制作0-0これも読もう!関連する内容の記事CSSだけのかっこいい表現。マウスオーバーでぼかして拡大するかっこいいリンク。背景画像を縦横比そのままでレスポンシブ対応するためのCSSの書き方。概要だけでも知っておこう、新しいレイアウトスタイルGridを使ったCSSの指定方法。投稿ナビゲーション前の投稿テキストを動かしたいならこれ!Javascript(jQuery)で様々なバリエーションの動きを表現できるスクリプト。me!大阪のホームページ制作会社YCOMです。ホームページの制作から運営まで幅広く対応。作って終わりの制作会社じゃない、運用面にも力を入れたクライアント様と一緒に進む制作会社です。ブログでは、ホームページに役立つ情報やノウハウを公開。ホームページ運営者はぜひ参考にして下さい。現在お仕事お請けできます。(1)まずはご相談から、ホームページを作るのがはじめての方も気軽にお問い合わせ下さい。|関東の方もホームページの制作を対応いたします。reserved.ホームページ制作YCOMトップホームページに必要な費用ホームページ制作料金ホームページ制作の流れオリジナルホームページ22万円パッケージプランホームページ制作実績ホームページ活用事例お客様の声よくある質問お問い合わせホームページの制作見積り依頼パートナー募集フォーム。