CSSでコンテンツの中央配置を実装する方法 - NxWorld
左右・上下左右などCSSで要素やコンテンツの中央配置（中央寄せ）を実装する方法を備忘録も兼ねていくつか紹介します。 どれも目新しいものではないのですが、ただ中央寄せといっても様々な実装方法があるので、デザインや動きによっていろいろ使い分けることができるとコーディングでレイアウトを組むなども楽になると思います。 はじめに ここで紹介している内容はいずれもHTMLは下記のようなものを使用し、<div class="child"> ... </div>の部分を中央配置させるという内容になっています。 また、領域がわかりやすいように.childにはグレーの背景色を指定しています。 <div class="parent"> <div class="child">Lorem ipsum dolor sit amet.</div> </div>
SassMeister | The Sass Playground!
SassMeister is a playground for Sass. Add some Sass and SassMeister will show you the rendered CSS.
Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント
（2014年2月15日追記）よりよい解決方法として「CSSプリプロセッサやポストプロセッサで出力されたCSSの整形」「Grunt.jsでCSSの整形を行うgrunt-cssprettyを公開」を書きましたのでご覧下さい。 Less & Sass Advent calendar 2011の17日目は、@_hideki_aがSassの出力ソースをカスタマイズする方法について書かせていただきます。 3日目の「Sass を今すぐ実務で使おうよ！」ほか様々な記事で紹介されている通り、SassはCSSの設計を強力にサポートしてくれる素晴らしい言語です。しかしながら、学習コストや環境設定など多少のハードルがあり制作チーム全員がすぐに導入するのは難しいという場合や、納品後の運用はクライアントさんが行うためにSassの導入はしてもらえないという場合もあるのではないでしょうか。 そのようなことから、構築時はS
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
SassでコンパイルされるCSSの書式をカスタマイズする
Sass、便利ですよね。 変数、関数、mixin、extend...、Sass 3.2 からはPlaceHolderなんて機能まで追加されました。 機能的には全く問題ないのですが、 ただ1つ不満なのは、デフォルトでコンパイルされるCSSの書式。 例えば、下記のようなコード（SCSS）。 //ネストする場合 html { body { #container { margin:0 auto; width:900px; #content { padding-bottom:120px; #main , #sub { background:#fff; } #main { float:left; width:600px; } #sub { float:right; width:200px; } } } } } //比較の為にネストしない場合 html body #container { margin:
【決定版】僕の考えた最強のfont-family指定
本記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど) [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieveの反省会会場となります。 未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人はこちら。 [CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！の狙いタイトルではてブや検索流入を狙う本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで 解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。 はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。 「font-family 指定 オススメ」というキーワードを埋め込んで
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
CSSのプロパティを正しい並び順でソートし直してくれる『CSScomb』
CSSのプロパティを正しい並び順でソートし直してくれる『CSScomb』 CSScomb OnlineはCSSファイル内のプロパティを一定のルールにしたがった正しい並び順でソートしてくれるオンラインツール。 使い方はコードをペーストして『RESORT』をクリックすれば結果が右半分に表示されます。 変換したコードは『Copy result code』をクリックすればすぐにコピーができます。 ソートのルールはあらかじめ設定されていますが、必要に応じ『Setting』からカスタマイズすることも可能です。 こちらのオンライン版以外にも各種エディタ用のプラグインなども公開されているので、興味のある方は試してみてはいかがでしょう。 書き方によってはエラーとなる場合があるようですが、具体的にエラーとなるケースなどはこちらのページでに詳しく載っています。 （特にLESSやSASSの記法では注意するケースが
[CSS] border-radiusとbox-shadowを組み合わせると、それぞれ単体でのスタイルより５倍重たい！？ - YoheiM .NET
[CSS] border-radiusとbox-shadowを組み合わせると、それぞれ単体でのスタイルより５倍重たい！？ こんにちは、@yoheiMuneです。 @ahomuさんのブログで、CSSの重みの計測をされているのを拝見しました。 自分でもしてみたいなぁと思いやった手順と、その内容や結果をブログに書きたいと思います。環境構築部分でつまったので、その辺りは詳し目に書きたいと思います。 CSSの重みを計測する 以降のChrome限定のお話になりますが、ChromeではSkia（Wikipedia:Skia）というGoogle製の2Dグラフィックライブラリを利用して画面の表示を行っているようです。 そのSkiaにはSkia Debuggerというデバッグツールがあり、そのデバッグツールを使うと画面のレンダリングの順序や所要時間などの情報を取得することが出来ます。 今回はSkia Debu
![[CSS] border-radiusとbox-shadowを組み合わせると、それぞれ単体でのスタイルより５倍重たい！？ - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aa082c4555cf140875ad76203d61b4e598a2a47/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F264.jpg)
【便利ツール】Emmetで、ちょっと気持ちいいコーディング with sublime text 2・下巻 | DevelopersIO
ダミーテキストの挿入 loremを記載して、展開するとダミーのテキストを挿入してくれます。 //展開前 p*3>lorem //展開後 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus consectetur nisi modi alias aspernatur suscipit nihil laborum vero possimus. Nobis velit iste eveniet atque aspernatur! Repellendus illum nulla similique quia.</p> <p>Magni sapiente dolorum dolorem expedita natus eaque aut nesciunt modi libero aspernatur omn
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
This domain may be for sale!
Sass(SCSS)について
8. mixin よく使うコードを再利用 //mixin .color1 { @mixin color { font-size: 1em; color: #F00; color: #F00; } } .color1 { .color2 { font-size: 1em; font-size: .5em; @include color; color: #F00; } } .color2 { font-size: .5em; @include color; } 8 9. extend デザインを拡張する //@extend .box, .box { .box-red, display: inline-block; .box-fixHeight { width: 20%; display: inline-block; height: 100%; width: 20%; } height: 100
SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。
半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 Coda2で検索して来た方へ この記事ではCoda2の事についてあまり触れていません。ですが、こちらの記事でがっつりcoda2の魅力を語っていますので是非ご覧になって下さい。 参考記事：Coda2の使い方をマスター出来るチュートリアル[完全版] Sassってなーに? CSSを拡張しよう!っていう感じのメタ言語らしいです!サスって読むらしいです。なんだか僕的にはいい響き!「ググる」とかと似ているかも。「Sass
WordPress Plugin の管理ページで指定の JavaScript と CSSを読み込む - utahta blog
WP Social Bookmarking Light の管理ページをつくってるときにハマった点メモ。 メモ JavaScript と CSS の読み込みには、wp_enqueue_script と wp_enqueue_style APIを使用する。 管理ページ上で上記 API を反映させる為に、add_action の admin_print_styles と admin_print_scripts を使用する。 ただし、単純に add_action('admin_print_styles', 'myplugin_admin_print_styles'); add_action('admin_print_scripts', 'myplugin_admin_print_scripts'); とすると、他のプラグインの管理ページにも同様に指定の JavaScript と CSS が反映され
透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件 * prasm（プラズム）
CSSで定義済みの色「red」とか「blue」とかRBGの値（16進数）「#ffddcc」とか「#112233」とかRBGの値（10進数）「rgb(0 0 0)」とか「rgb(255 255 255 0.5)」とか初心者向けの本なんかでは例えば白を指定する場合は #ffffff、もしくは省略して#fff等で書いているコトがよくあると思います。 RGBの16進数で書けば rbg(255 255 255)と、表記することが出来ます。同じ意味です。 得られる結果は同じですが、知っておくべき概念として Webセーフカラーとは 【web safe colors】 – 意味/解説/説明/定義 ： IT用語辞典 webデザインをする場合、閲覧する環境が、閲覧する人によって変わるという考え方を常に持たないといけません。 webデザインにおける色の指定のおさらいをサラッと終わらせて、本題に入ります。 今回使
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
WordPressでCSSやJavascriptをページ毎に振り分ける｜Webクリエイターネット
Category WordPress WordPressでオリジナルのテーマを作成したり、テンプレートファイルをカスタマイズする場合、投稿ページ・カテゴリページ・固定ページ・カスタム投稿タイプで作成したページ等、ページによってCSSやJavascriptを個別に読み込みたい場合があります。 header.phpで条件分岐させてもよいのですが、様々な設定を一括管理できた方が楽です。 そこで、functions.phpでCSSやJavascriptといった外部ファイルの読み込みを一括管理する方法を書こうと思います。 Keyword：外部ファイル管理,css,javascript,functions.php functions.phpで外部CSSの読み込みを一括管理する ここでは、｢全ページ共通のCSS｣｢TOPページ専用のCSS｣｢投稿ページ・カスタム投稿ページ専用のCSS｣｢カテゴリページ専
WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法 - NxWorld
WordPressでページや記事ごとに個別のCSSやJavaScriptを追加したいときに役立つカスタマイズを紹介します。 他のページでも使うような共通のスタイルだったり、かなり長くなってしまうような場合はもちろん外部で読み込む方が良いと思いますが、何かちょっとしたスタイルを指定するぐらいであれば結構便利なカスタマイズだと思います。 （例えば特定のページのみ文字の色を赤にするとか、強調したいから太字指定するとか...） 以下で紹介する方法はfunctions.phpを使用しますので、テーマ内にない場合は作成してください。 CSSを追加できるようにする CSSを追加できるようにする場合は、下記をfunctions.phpに記述します。 //Custom CSS Widget add_action( 'admin_menu', 'custom_css_hooks' ); add_action(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderの書き方論
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html