タグ

CSSに関するhibiki_koyoのブックマーク (24)

  • SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB

    はじめに みなさまこんにちは!おはようございます! マークアップエンジニアのうさこでございます! またお前か・・・という声が聞こえてきそうですね・・・?花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです!! クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります! 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEMBlock や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗

    SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • スマホだと反応が遅れる :hover を心地良くする方法

    スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。(あ、具体的な実装はまた次回ご紹介したいと思います。) 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい? マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ

    スマホだと反応が遅れる :hover を心地良くする方法
  • 【CSS】様々な要素を中央揃えにする方法

    久しぶりにCSSの記事です。CSS初心者の時につまずいた要素の中央揃えについてまとめておきたいと思います。 デモ まずは全パターンのデモページをご確認下さい。 Demo zipファイルをDownload 次にそれぞれの要素について説明いたします。 01.画像やテキストの中央揃え 02.positionを使って天地中央に要素を揃える 03.table-cellを使って天地中央に要素を揃える 04.ソーシャルボタンなどのリストを中央に揃える 01.画像やテキストの中央揃え <div id="center01"> <p><img src="http://placekitten.com/600/240" /></p> <p>画像やテキストを中央揃え</p> </div><!-- / #center01 --> #center01 { text-align:center; } text-align:

    【CSS】様々な要素を中央揃えにする方法
  • cssで背景だけを透明にする方法 | 株式会社インデックスジャパン

    opacityとrgbaの違い 案件で、ページにアクセスした際に上からホバーウインドウが降りてくる機能を実装することになりました。その際、背景だけを半透明したかったですが、思いのほか解決に手こずったので備忘録としてメモを残しておきます。 完成予想図は次のような状態です。 「透明といえばCSSでopacityを0.5ぐらいに指定すればいいだけだな」 と下記のコードをササッと書いてみた。 <div id="lp-ad" style="position: fixed; left: 50%; margin-top: -500px; margin-left: -323px; padding: 20px; background-color: #0000FF; opacity: 0.5; "> <a href="http://www.kurosawakoumuten.co.jp/lp/" target=

    cssで背景だけを透明にする方法 | 株式会社インデックスジャパン
  • 人気Webデザインを独学できる至高のWebアプリ8選がヤバイ! | シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ)

    このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

    人気Webデザインを独学できる至高のWebアプリ8選がヤバイ! | シェアしたくなる最新のWebサービス・ITニュース情報をチェック! APPGIGA!!(アプギガ)
  • CSSで複数の条件を満たした要素を絞り込む

    既存のPCサイトを外部CSSだけでスマホ対応させた案件で CSSだけでどこまでマニアックな指定ができるか限界に挑んだので、覚書的に。 複数のidやclassで要素を絞り込む 複数のidやclassをずべて併せ持った要素だけにスタイルを適用させたい場合は、 スペースを開けずに続けて指定する書式で指定できます。 .typeA.typeB { border-color: 3px solid #f00; } 例えばトップページだけ1カラム構成にしたいとき <div id="container" class="toppage"> <div id="mainColumn"> メインカラム </div> <div id="mainColumn"> サブカラム </div> </div> #container { width: 80em; } #container:after { content: '';

    CSSで複数の条件を満たした要素を絞り込む
  • CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)

    こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる? 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ?コレなんだったっけ? というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日語訳は以下のページをご参照ください http:/

    CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
  • CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

    CSSのセレクタがちょっとあやふやな人はやってみて! 楽しみながらCSSのセレクタを学ぶ -CSS Diner

  • Bootstrap 3 徹底解説!

    ついに登場した「Bootstrap 3」。このサイトでは、Bootstrap3を徹底的に解説していこうと思います。 Bootstrap 公式サイト(英語) Ver. 3.0.3 が最新版のようです(2014/01/02 現在) お問い合わせはコチラ Menu はじめに Bootstrap とは? Bootstrap3 導入の仕方 基HTMLコード CSS グリッドシステム タイポグラフィ(見出し、段落、文字サイズなど) コードの表示 テーブル(表) フォーム ボタン ヘルパークラス レスポンシブWebデザインで使えるコード Components アイコン ドロップダウン Coming Soon ... About どうもこんにちは、SofPyon(そふぴょん)です。最近、Bootstrap3に興味を持ち、サイトを作ってみました。できるだけわかりやすくしていこうと思いますので、よろしくお

    hibiki_koyo
    hibiki_koyo 2014/10/04
    bootstrap3使用サイト
  • Bootstrapの使い方超入門 (1/4) - @IT

    話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介と解説を厳選して紹介、解説していく連載「HTML5アプリ作ろうぜ!」。今回紹介するフレームワークは「Bootstrap」です。 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」とは 現在のWeb制作、開発では、ともにスピードが重視されています。「Bootstrap」を使用すると、既に用意されているスタイルを適用するだけで、格段に速く見栄えを整えられます。事実、Webシステムの管理画面などでBootstrapを使用するケースも増えてきました。 Bootstrapは最近

    Bootstrapの使い方超入門 (1/4) - @IT
  • Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお

    Twitter Bootstrap 3.0.0のcontainer、row、col(Bootstrap 2.xならspan)クラスの使い方を説明する。公式サイトでも例示されているが、体系だった説明がされていないのでBootstrap初心者の役に立つはずだ。 1. containerは中身をセンタリングし幅を固定するcontainerクラスは中身を画面の中央に幅を固定するクラスだということを理解しよう。containerクラスはBootstrapのレイアウトを使う上でルートとなるクラスである。 2.で述べるcontainerクラスより幅の広いレイアウトをする場合を除いて、Webページのほとんどの内容をcontainerクラスの内部に書くことになるだろう。 containerクラスはWebページの中に複数個作っても全く構わない。また3.で詳しく述べるが、グリッドシステムを使わなくて良いのなら、

    Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお
  • TECH PROjin

    セキュリティソリューション事業部からのお知らせ セキュリティソリューション事業部のブログサイトを新たに開設いたしました。 https://blog.sie-security.com/ 今後のセキュリティニュースの投稿は上記URLのサイトからとなります。よろしくお願いいたします。 担当:TY …More Read

    TECH PROjin
  • AKIOBLOG

    こんにちは、あきおです。 このブログは、33歳と、もう若いとは言えない歳になってしまった中年男性が日々の ・生活 ・仕事投資趣味 を晒していくアウトプットブログです。 詳しいプロフィール...

    AKIOBLOG
  • CSSスプライトについてあれこれ。

    CSS Sprites(CSSスプライト)」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね(2012.8現在)。 具体的には「サイト内で使用するたくさんの画像(パーツ)をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

    CSSスプライトについてあれこれ。
  • [CSS]ネガティブマージンの理解を深め、活用するテクニック集

    スタイルシートのmarginで使用する「ネガティブマージン(マイナスマージン)」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。

  • floatを解除する手法のclearfix と 次世代のレイアウトの話

    floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな

    floatを解除する手法のclearfix と 次世代のレイアウトの話
  • Typhooon

    2つのセレクトボックスを連動させる時に初めて気づいた問題です。 次のようなものを実装しようとしていました。 セレクトボックスAとセレクトボックスBには同じ値がセットされていて、セレクトボックスAで値を指定すると、その値を除いたものだけがセレクトボックスBに表示されるというものです。 実装の方法として、セレクトボックスAが選択された時に、セレクトボックスBの値と比較して同じものだけを非表示にすればよ […]

  • みんな大好きリキッドレイアウト~固定幅+リキッドレイアウトに挑戦~ « SetucoCMSプロジェクト

    はい、こんにちは。リーダーのskyguildこと三上です。 SetucoCMS合宿@2011のLT大会でリキッドレイアウトの話をしました。今回はそのスライド内で語り切れないデモの部分を中心に解説してみます。 リキッドレイアウトのLTスライド うまく表示されない方は下記のリンクからご覧ください。 みんな大好きリキッドレイアウト(別窓で開きます) 要約 リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して%で幅を指定する。 リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる! とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。 参考にしたサイト:「サイトの横幅」再論:950px時代のウェブデザイン 実装方法 というわけで、普通のリキッドレイアウトと、固定幅+リキッドレイアウトの実装方法について解

    hibiki_koyo
    hibiki_koyo 2014/05/31
    リキッドレイアウトの基礎知識です
  • 5分で分かるレスポンシブWebデザイン

    レスポンシブWebデザインとは単一のHTMLでスマートフォン、タブレットといった画面サイズが異なるデバイスへ対応できるWebサイト制作手法をいう。2010年に誕生し、今も進化をしている。言葉だけを引用するとレスポンシブとは“反応/変化”なので、それに環境に応じて変化するWebと広く理解する方もいるかもしれないが、基的にはグリッドシステム、フルードイメージ、メディアクエリを利用してマルチデバイスに対応させる手法がレスポンシブWebデザインだ。 欧米でも2012年にはリニューアルとともにレスポンシブWebデザインをする大企業のサイトも続々とローンチされている。世界的に有名なオンライン・メディア「Mashable」でも、ポストデスクトップ時代の終わりとモバイル時代の幕開けを理由の1つとしてレスポンシブWebデザインが2013年のメガトレンドと予想している。

    5分で分かるレスポンシブWebデザイン