CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました - NxWorld
バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
