Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
CSSのvw, calc()を使用した、レスポンシブ対応のフォントサイズを指定するこれからのテクニック
本文や見出しなどのフォントサイズをスマホ時やデスクトップ時で変える時、通常はMedia Queriesでスクリーンサイズごとに文字サイズを指定していると思います。 ここで紹介するフォントサイズの指定方法はちょっと新しいアプローチで、最初にベースとなるフォントサイズを設定し、スクリーンサイズが大きくなるにつれ、Viewport Unit（ビューポートの単位）で加算してサイズを大きくします。 Viewport Unit Based Typography 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Viewport Unit（ビューポートの単位）とは？ フォントのサイズ指定のためのビューポートの使い方 他の文字の要素をビューポートで指定 縦のリズムとモジュラースケールをビューポートで指定 フォントサイズの指定の精度をアップする さらに精
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
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:
角丸に角丸を入れ子にした時、それぞれの角丸をバランスよくデザインする方法
角丸のパネルに角丸のパネルを重ねたデザインで、それぞれの角丸はどのくらいにしていますか？ 親と子のカーブを同じにしたり、親のカーブを緩やかにしたり、その時の見た目でデザインすることもあるかもしれません。 こういった時の一つの目安として、バランスが良い角丸のデザイン方法を紹介します。 しっかりとした数値で2つの角丸をデザインすることができます。 Quick Tip: Rounded Corners Done Right 見た目的になんとなくデザインではなく、親と子の角丸の中心点を揃えてカーブを描きます。こうすることで、2つの角丸は非常にバランスのとれたものになります。
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
AppleのナビゲーションをCSS3で実装するチュートリアル:phpspot開発日誌
Apple Navigation with CSS3 | Design in Development AppleのナビゲーションをCSS3で実装するチュートリアル。 おなじみのAppleのヘッダーナビゲーションをCSS3で再現したものが公開されています マークアップは以下のように超シンプル CSSのradiusやgradientによって実現されており、クリックした際の動作も再現されています。 関連エントリ Apple.comの新スライダーエフェクトを実装するjQueryプラグイン Apple関連のフリーのアイコンや素材集２０ AppleのiCouldアイコンを描画するPhotoshopチュートリアル appleスタイルのクールなインプットフィールド実装チュートリアル
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
利用中のテーマやプラグインのCSS編集と保存がその場で出来るWordPressプラグイン・WP Live CSS Editor - かちびと.net
WordPressを使ったWebサイトで現在利用中の テーマやプラグインのCSSをその場で編集、 保存を可能にするWordPressプラグインの ご紹介。多用するものではありませんが、 開発中とかに使っても便利かも、と思った のでメモがてら。 何度か似たようなものもありますけど多くは無いので選択肢の一つとして。Webサイトを見ながらその場で利用中のテーマやプラグインのCSSを編集、保存できるプラグインです。ローカル環境で開発の手助けにもなるかな、とか思ったりしましたよ。 これ便利ですねー。機能はシンプルで、Webサイトの右側にボタンが出るので、クリックするとエディターが開きます。あとは修正して保存すればいいだけ。 編集中はインタラクティブに反映されますのでサイズの指定ミスなんかをするとエディタも場外にすっ飛ばされて編集できなくなっちゃうので気をつけてください。微調整向けですかねー。 編集し
Say hello to Bootstrap 2.0 | Twitter Developers
Six months ago we open-sourced Twitter Bootstrap, an extensive front-end toolkit for developing web sites and applications. Woohoo! Twitter Bootstrap, an open-sourced CSS/HTML framework from myself and @fat, just went live: dev.twitter.com/blog/bootstrap… #kaboom— Mark Otto (@mdo) August 19, 2011 Since then, Bootstrap has grown to be one of the most popular projects on GitHub, the largest open sou
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
[CSS] 美しいパンくずを実装する4つのスタイルシート | コリス
画像を使用せずに、シンプルなHTMLで美しいパンくずを実装するスタイルシートのチュートリアルを紹介します。 CSS3 breadcrumbs [ad#ad-2] デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE9+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><a href="">Lorem ipsum</a></li> <li><a href="">Vivamus nisi eros</a></li> <li><a href="">Nulla sed lorem risus</a></li>
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
iPhone Android など、スマートフォン向けhtmlコーディング/CSS : H.I. Art Works [ Web Technology ] – ウェブ制作技術情報 -
iPhone / iPod touch の画面サイズへの調整 画面サイズ：320×480px（Safariの表示領域は320×356ｐｘ） 横幅980pxまでのサイトは自動で320まで縮小する iPhone向けサイトを作成する場合は、meta name=”viewport”を指定すると、iPhoneでの最初の表示サイズ等を指定できます。 1 <meta name="viewport" content="width=320, "> 例えば上記のように書いた場合、横幅320ピクセル分までの領域をiPhoneの画面上に表示する事になります。 横幅を何も指定しない場合、横幅980ピクセルまでの領域が、画面上で表示されるように自動的に縮小します。 ※iPhoneでは画面サイズに合わせて文字が改行するわけではなく、PCのモニタなどで表示する横幅980pxまでの位置で文字を改行し、それを縮小すると
レスポンシブなWEB制作のためのCSSフレームワークのまとめ
様々なデバイスが出現してきており、WEBサイトもその環境を考慮した制作を求められており、制作側もどんな端末でも快適に閲覧できるレスポンシブなレイアウトが広まりつつありますが、今日紹介するのはレスポンシブなWEB制作のためのCSSフレームワークのまとめ「15 Responsive CSS Frameworks Worth Considering」です。 Less Framework 4 様々な端末に対応したフレームワークが多数まとめられていますが、今回はその中からいくつか気になったフレームワークをピックアップをして紹介したいと思います。 詳しくは以下 Foundation 12カラムで構成されたレスポンシブなフレームワーク。背景も端末に併せて縮小されます。 Skeleton 真っ更なレスポンシブなフレームワーク。 Amazium ブラウザサイズによってレイアウトが組み変わるレスポンシブフレー
様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
http://www.cmmntr.com/m/27
HTMLやCSSのマークアップのパターンを作成し、その場で編集、インタラクティブに確認出来るツール・・・・を作れるWordPressテーマｗ - かちびと.net
