display:noneとvisibility:hiddenの違いって何？実際に比べてみた - クリアメモリ
cssでカスタマイズをしていて要素を隠したいなんて時がありますよね。 そのような時に、よく「display:none;」や「visibility:hidden;」を使うことになると思うのですが、これらはどちらも要素を隠すためのcssなんです。 はじめに 今回紹介するのはcssで要素を隠すための「display:none;」と「visibility:hidden;」の違いについてです。 要素を隠す時に使われるcssは、一般的に「display:none;」を使うことが多いですよね。 けれど、visibility:noneも要素を隠します。 じゃあどっち使っても一緒なの？ って話になってきますが、そうではありません。 display:none;とvisibility:hidden;にはちゃんとした違いがあります。 ではこれらのcssにはどのような違いがあるのでしょうか。 以下の画像のような構成
予想以上に実用的！CSSを効率的にマークアップする概念「BEM」とは？
ホームページの構築作業に関わっていると、「もっとCSSを効率的に書きたい」と感じたことが一度はあるのではないでしょうか。 CSSが1996年に誕生してから20年以上経ち、サポート等は充実してきたものの書き方については特段簡素化されてはいません。 その中で「もっと効率的にCSSを書きたい」という要望を拾って具体化されていったのがBEM(ベム)と呼ばれる概念です。 CSSを効率的に書くことは、時間の短縮になるだけでなく、保守運用の面でもメンテナンスしやすくなります。 今回は、CSSを機能的にマークアップする概念「BEM」について、基本的な考え方や具体的なコーディング方法を解説します。 BEMが生まれるまで Built on Pablo 比較的小規模のサイトであれば、体系的にCSSを書く必要はあまりないかもしれません。 小規模サイトの場合は簡単なCSSを早速書いてみたり、SASSのようなプリプロ
BEMをSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
