ユーザープロフィール

ゲストさん

CSSのイロハ

51件

CSSの基礎から参考となるソース、さらにコピペで使えるテンプレートやジェネレーターなどについて集めたカテゴリです。さらに、近年人気のJQueryとの組み合わせで、動きのある美しいサイト作りにも応用できるテクニックもご紹介。ぜひマスターして、魅力的なWebページを作ってください。

Bootstrapの使い方とおすすめテンプレート・2017年版

Bootstrapの使い方とおすすめテンプレート・2017年版

2017年現在、ウェブサイト制作の現場でのマルチデバイス対応はほぼ常識となりました。とはいえ、1から全てをコーディングするのは膨大な時間と労力を要します。そこで欠かすことが出来ないのがマルチデバイス対応、すなわちレスポンシブなUI設計です。そこで今回は、人気の高いCSSフレームワーク「Bootstrap」の使い方と人気の無料テンプレートを紹介していきます。Bootstrapについて知ろうhttp:…


Webサイトの文字デザインをワンランクアップ! CSSでフォントを指定したり太字にするテクニック

Webサイトの文字デザインをワンランクアップ! CSSでフォントを指定したり太字にするテクニック

デザインを作る上で、文字のデザインは重要です。特に、文字の見た目を印象づけるフォントは、デザインの意図を決める上で雰囲気を大きく左右します。Webデザインにおいて、フォントを利用するには大きく2つの方法があります。画像の中で使用したいフォントを使った文字を入力するHTML本文に、CSSでフォントを指定する前者の場合、画像を作成するパソコンに使用したいフォントが入っていれば利用することができます。後…


CSSの設定でWebサイトに一工夫。透過する表現を取り入れた半透明デザインの作り方

CSSの設定でWebサイトに一工夫。透過する表現を取り入れた半透明デザインの作り方

実際に見てみる、半透明デザインの事例3件CSSで半透明なデザインを実践する前に、実際に半透明または透過のデザインを採用しているWebサイトを見てみましょう。ただ単にデザインの一部を取り入れれば良いわけではなく、サイトのどの箇所に半透明デザインを採用するか、どのように取り入れることによって、デザイン上どういったメリットがあるのか、まずは理解するところから始めてみましょう。Tossedhttp://t…


迷った時の参考に!CSSで作る見出しデザインまとめ

迷った時の参考に!CSSで作る見出しデザインまとめ

Webサイトのデザインで悩みがちな見出しの例を集めてみました。さらっと目を通すだけでも刺激になりますが、いざという時に備えてブックマークに入れておくと安心です。■とにかく見本が見たい時にオススメ!ギャラリー系サイト魅力的なデザインを集めたサイトです。再現にはそれなりに手間がかかりますが、開発初期にインスピレーションを得たい時、行き詰まりを感じてイメージをリセットしたい時など何かとお世話になる機会は…


【レスポンシブ対応】スマホで使えるハンバーガーメニューを実装してみた

【レスポンシブ対応】スマホで使えるハンバーガーメニューを実装してみた

みなさんこんにちは、サポート部の本田です。GWも終わり日々気温も上昇するなかで、本格的な夏が近づいてきていることを実感しています。 さて、今回はスマホサイトでよく見かけるハンバーガーメニューの簡単な実装方法をご紹介したい…

元の記事


Jotted - プラグインで拡張できるHTML/JavaScript/CSS実行環境

Jotted - プラグインで拡張できるHTML/JavaScript/CSS実行環境

HTML/JavaScript/CSSの良いところはWebブラウザ上でそのまま実行できると言うことです。そのためJSFeddleやjsdo.itといったサービスが人気になります。環境を用意しないでデモが見られるのは良いことです。そんな実行環境を自分でホスティングできるのがJottedです。プラグインの仕組みもある面白い実行環境です。Jottedの使い方右側がJottedを使った表示です。結果から。…

元の記事


CSS Gallery – これはすごい!スタイルシートだけで作られたイメージギャラリー

CSS Gallery – これはすごい!スタイルシートだけで作られたイメージギャラリー

ブログなどで画像を一覧で表示したり、記事中に写真を埋め込んでいるのはよく見る光景です。そんな時、画像をクリックするとフローティングで拡大表示されます。また、次の写真に移動することもできるでしょう。そんな見せ方はCSSとJavaScriptを使ってこそできるものだと思っていましたが、CSS Galleryは違います。スタイルシートだけで実現してしまうのです。CSS Galleryの使い方CSS Ga…

元の記事


オウンドメディア運営会社の皆様へ

s

ページトップ