[CSS] 上下関係・親子関係を表した系図をCSSで描きたい 公開日:2020/10/04 更新日:2020/10/11 ある要素に所属する子要素の親子関係を表すときに系図が用いられます 組織図や家系図、サービスの分類図などなど、利用できるケースは多岐にわたります 今回はこの系図をCSSで描いてみました サンプルコード html <div class="genealogy"> <dl> <dt>竜騎将バラン</dt> <dd>ラーハルト</dd> <dd>ボラホーン</dd> <dd>ガルダンディー</dd> </dl> </div> クリップボードにコピー 子の数を増やす・減らすときはddタグの数を変更してください .genealogy { display: table; position: relative; margin: 0px auto; font-size: 1.5vw; }
Skip to the content. The New CSS Reset This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘unset’ and ‘revert’ keywords. The new property of ‘all’ which can reset all properties combined. The :where() pseudo-class to remove specificity. The :not() pseudo-class with multi arguments. What the-new-css-reset is resetting? This CSS reset is built from the understanding we
こんにちは。フロントエンドエキスパートチームの穴井（@pirosikick）です。福岡在住で、普段は福岡のweworkで働いています。他のメンバーは皆、東京に居てリモートで仕事をしていますが、モブでわいわい開発していますし、weworkが快適すぎて、毎日楽しいです！ フロントエンドエキスパートチームでは、サイボウズの各プロダクトが抱えるWebフロントエンドの課題を解決するのが仕事の一つです。 blog.cybozu.io 最近の取り組みとして、Puppeteerで不要なCSSを消した事例を紹介します。 このブログは、6/19に福岡で開催した「Google I/O '19のWebをまとめる会」で登壇したときの内容を詳細に説明しつつ、アップデートした部分もあるので、発表見たぞ、スライド見たぞという方も見ていただけますと幸いです。 speakerdeck.com きっかけ とあるプロダクトのCS
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 仕事でHTMLメールを作る機会があったんですが、メーラーは種類が多く、各メーラーによって実装状況にかなり差があるので、多くのユーザー環境で正しく表示されるHTMLメールを作ろうと思うとなかなか面倒でした。 しかもレスポンシブとなると、通常のwebページでいうクロスブラウザ対応の比ではないほど気を使うことに。。 なので、やったことをここにメモしておきます。 後々、会社のブログで記事にするつもりだけど。 基本的なつくりかた レスポンシブという言葉の響きで、なんかモダンな作りができそうだなーと思ってしまうけど、結局は下記のような昔ながらの作り
領域をはみ出したときに三点リーダー（…）で省略するtext-overflow: ellipsis;は、スマホサイトでは普通に使っていたけど、PCでは数年前に使おうとしてなんかのブラウザでダメだった記憶があって、使えないものとばかり思い込んでいた。 でも、ふとCan I use CSS3 Text-overflowをみたら、めっちゃ対応してた！IEなんて6から対応してるし、Firefoxも7から使えるようになってた。 実際に書いてみたら、いつものこんな感じのコードで普通に使えました。 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 昔、JSでなんとかそれっぽくできないかみたいに、誰かががんばっていたのはなんだったのか。 わたしみたいに使えないと思い込んでて、意外としらない人いるかもしれないので、ブログに書いてみま
#sample1 li { position:relative; } #sample1 li:hover { background: #deb3ba; } .sample1-tooltips { display: none; position: absolute; bottom: -2.8em; left: 0.3em; z-index: 9999; padding: 0.3em 0.5em; color: #FFFFFF; background: #c72439; border-radius: 0.5em; } .sample1-tooltips:after { width: 100%; content: ""; display: block; position: absolute; left: 0.5em; top: -8px; border-top:8px solid transpa
CSS3を使用してふわっと出現するアニメーションの吹き出し風のツールチップをcssのみで作る方法です。 完成は下のデモのような動きになります。 See the Pen CSSのみでふわっと浮かび上がる吹き出し風のツールチップ by Saomocari (@Saomocari) on CodePen. HTMLの部分 HTMLはulタグでマークアップします。ツールチップに表示させたい部分はliタグの中にdivを入れてその中に記入します。 <ul id="tooltip"> <li> <a href="#">tooltipsample1</a> <div>ツールチップの部分</div></li> <li> <a href="#">tooltipsample2</a> <div>ツールチップの部分</div></li> <li> <a href="#">tooltipsample3</a> <d
こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。（調査不足だったらすいません） 広告業界では Web広告業界の展開は日本国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの
Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explai
レスポンシブデザインのサイトやスマホ機種の解像度によってCSSの指定を振り分けられるmedia queryですが、クライアントによっては 「Apple製品だけきっちり見えれば良い」とか「ウチの社長のAndroidの○○だからそれでキレイに見せてよ」などなど・・・ 単純なスクリーンのサイズの指定だけでは済ませられないケースもあったりして・・・ なので主要機種用のmedia query指定のライブラリー一覧作ります。 お好みの指定をコピって下さい。 主要ディスプレイサイズ別 ディスプレイサイズ320px @media screen and (max-width: 320px) { /*スタイル記述*/ } ディスプレイサイズ640px @media screen and (max-width: 640px) { /*スタイル記述*/ } ディスプレイサイズ800px @media screen
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！ javascriptやphpを使わずに CSSだけで文字列を省略して「・・・」を付けて表示 させるテクニックを発見 前からできる感じだったが、つい最近知りました。 FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 どうやるかというと text-overflow: ellipsis; を使う。 ellipsis は、はみ出した部分の最後に「・・・」を付け足す。 ちなみに clip は、何もつけません。 text-overflow: ellipsis; だけだと上手くいかないので やり方としては、 横幅(width)、w
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。 「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。 参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート ChromeChrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
Gumby – A Flexible, Responsive CSS Framework – Powered by Sass こんにちは。ECプロデュース部の岡本です。 みなさまはレスポンシブサイトを作る時、どのようなフレームワークを使用されていますでしょうか？ 有名ドコロであれば「Twitter Bootstrap」や「Foundation」などがよく利用されているのではないかと思います。 特にBoostrapはナビゲーションなどの「コンポーネント」が非常に豊富で、モックアップなどを作成する際には非常に重宝されている様です。 しかし一方でカスタマイズするには束縛されるポイントも多く、実際のコーディングに使うには少し工夫が必要となります。 今回はBootstrap並にコンポーネントが多いのに、カスタマイズ性が非常に高いフレームワーク「Gumby」をご紹介いたします。 特徴１：柔軟なグリッド
わずか1行でInternet Explorerをクラッシュさせてしまうコードというものもありましたが、今回見つかったコードも、CSSに数行足すだけでInternet Explorer 8と9をクラッシュさせることが可能です。 Benutzer:Schinken/CSS-IE-Crash – Hackerspace Bamberg - Backspace http://www.hackerspace-bamberg.de/Benutzer:Schinken/CSS-IE-Crash デモページはこちら、IE8・IE9だとアクセスした瞬間にクラッシュし操作不可能になるので注意。 http://schinken.github.io/experiments/iecrash/crash.html 実際にIE8でアクセスしてみたところ、ページにアクセスしたとたんに一切の操作を受け付けなくなり、そのまま
デフォルトのボックスモデルでは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でガターの幅
floatを解除する手法のclearfix と 次世代のレイアウトの話 2013-06-20 / 2013-06-30 2011年にclearfixについて記事を書きましたが、Micro clearfixなどの新しい手法も出てきました。 記事を書いてから2年が経ち、色々思うところも出てきたので、改めてclearfixについて書きます。 floatを解除するには CSSでレイアウトの構築を行う際に、よくfloatプロパティが用いられます。 しかしfloatを使用すると、「親の背景が表示されない」「下の段のレイアウトが崩れる」などのトラブルが起こりやすくなります。 floatプロパティの特性 親の背景が表示されない理由は、floatプロパティを指定しているボックスが浮動化し、通常のボックスのフローから外されることが原因です。 通常フローから外されたボックスは、親のボックスの高さを認識できなくな
Twitter Bootstrap 2.1でAffixを使うと、Affixを適用した要素の大きさ（幅）が無視されてしまうアナタへ。 以下の例のように、Affixを適用した要素に兄弟となる要素（同じ親を持つ要素）が存在しないとそうなっちゃうようです。 <div class="span6"> <sidebar data-spy="affix">...</sidebar> </div> を入れておけば一応回避できます。 <div class="span6"> <sidebar data-spy="affix">...</sidebar> </div> しかし、これではあまりにダサいので、Bootstrapのサイトのサンプルに適用されているCSSを覗いてみたところ、 /* prevent column from collapsing when affixing */ .s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く