ユーザープロフィール

ゲストさん

CSS 勉強・参考のイロハ

8件

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

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

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


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

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

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

元の記事


CSSで作れる絵柄やアニメーション~ボタンデザインや便利なジェネレーター、読込速度の遅延対策まで~

CSSで作れる絵柄やアニメーション~ボタンデザインや便利なジェネレーター、読込速度の遅延対策まで~

HTMLと合わせて使用されることの多いCSSは、HTMLで記述された文字のフォントや色を設定するためだけにあると思っている人が多いのではないでしょうか。しかし、CSSはヴァージョンアップするにつれて、アニメーションやさまざまな絵柄を表示させられるようになりました。今回はそんなCSSでできるさまざまな装飾についての記事を集めてみました。コピペするだけですぐに使えるようになりますので、初心者の方にも安…


CSSGram - スタイルシートを使ったInstagram風フィルタ

CSSGram - スタイルシートを使ったInstagram風フィルタ

Instagramは相変わらず高い人気で、10代を中心に多くのユーザが日々写真をアップロードしています。そんなInstagramの売りと言えば、写真に対する格好良いフィルタではないでしょうか。CSSGramはそんなInstagram風のフィルタをWeb上で再現してくれるライブラリになります。CSSレベルとあって、自由に変更も可能なのでWeb上で写真を効果的に見せるのに使えそうです。CSSGramの…

元の記事


【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。

【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。

こんにちは。mackyです。今日のタイトルは一見なんのこっちゃという感じだと思いますが、例えばサムネイルを表示させる際、どんなサイズ(比率)の画像がきても、表示させたいボックスの縦横比に合わせてきゅーっと縮めて、しかもボックスの縦横中央に表示させたいなんてことありますよね。そんな時に役立つCSSだけでOKな方法をまとめていこうと思います。IE7以上で表示確認できるようにしています。…

元の記事


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

s

ページトップ