第5回 横並びメニューの区切り線をCSSで表現しよう：実践Web Standards Designのススメ｜gihyo.jp … 技術評論社
はじめまして、福島英児と申します。『実践Web Standards Design』刊行に合わせた著者3人による短期集中リレー連載ということで、この第5回を担当させていただくことになりました。 『実践Web Standards Design』の刊行にあたり、可能であれば追加したかったTipsがあったのですが、結局そのまま載せなかったネタを今回ご紹介したいと思います。 良く見かける横並びメニュー ウェブサイトのヘッダ部分やフッタ部分で、横並びになっている縦線で区切られたナビゲーションメニューを見かけることがあるかと思います。 今ご覧頂いているこのgihyo.jpのヘッダ部分にも、画像を使った横並びのナビゲーションが配置されているのが分かります。 図1 画像を使った横並びのナビゲーション（gihyo.jp） gihyo.jpでは画像を使っていますが、画像を使わずにテキストのみでマークアップした
BEMの基本ルール
BEMとCSSの書き方のひとつで、ブロック(Block)、エレメント(Element)、モディファイヤ(Modifier)の頭文字をとったものです。BEMを使うとブロックごとにモジュール化し、名前空間を持たせるようなことができ、わかりやすいCSSを書くことができます。 🐠 BEMの考え方BEMはCSSのセレクタの命名規則です。迅速な開発と長期的にメンテナンスしやすいコードとなり、再利用性を容易にします。 🍄 Block, Element, ModifierBEMはCSSセレクタをブロック(Block)、エレメント(Element)、モディファイヤ(Modifier)の3つに分けて定義します。 Block(ブロック)Blockは独立したエンティティで、アプリケーションを構成するパーツです。Blockは1つもしくは、複数で構成します。Blockの名前はユニークにして、パーツごとの独立性を保
手を動かして学習しよう！コードチャレンジ HTML/CSS 初級編
2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト！ コードチャレンジの進め方 私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。 この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると
table タグの cellspacing 等を CSS のみで指定する
プロパティの解説 border-collapse がボーダーの隙間を作るかどうかのプロパティで、値に collapse を指定することで隙間が無くなります。 これが table タグの cellspacing="0" に相当します。 border-collapse - CSS: カスケーディングスタイルシート | MDN また、例えば 2ピクセルの隙間を作りたい場合は、下記のように指定します。 border-collapse プロパティに separate を指定することで隙間が出来るようになり、border-spacing プロパティでその隙間の幅を指定します。 border-spacing: 2px 1px; 等とすることで、上下左右別に幅を指定することも可能です。 border-spacing - CSS: カスケーディングスタイルシート | MDN その他、table タグの bo
border-spacing - セル同士の間隔を指定する
説明文 「border-spacing」はセル間の間隔を指定する。「border-collapse」で「separate」を指定すると，セルとセルが分離して，その間に空白ができる。このborder-spacingでは，このセルとセル間の間隔を指定できる。 間隔を1つ指定すると，各セルの上下左右間隔が全て指定した間隔になる。また，スペースで区切って2つの間隔を指定すると，1つ目は左右の間隔を，2つ目は上下の間隔を指定できる。 また，「border-collapse」にて「collapse」を指定した場合は，セルの間隔を指定しても無効となる。 使用例 ● CSSの定義 table { border-spacing : 10px 4px; border-collapse : separate ; } th, td { border : 2px solid #000080; padding : 3
stackstock.net - stackstock リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET
こんにちは、最近新しいゲーム作りに仕事が変わった@yoheiMuneです。 新しい案件で、「display:-webkit-box」という見慣れないスタイルを発見。聞いてみると横並びにしたりするのにすごく便利なようで。 その具体的な使い方を今回はブログに纏めました。 まず始めに display:boxは、横並びレイアウトを行うために大変便利な機能ですが、2013/01現在はまだ使用策定中です。 最新の情報は、以下よりご参照ください。 - http://dev.w3.org/csswg/css3-flexbox/ また良くある疑問で「便利だけど動くブラウザあるのー？」という疑問については、以下のようなサポート状況のようです。 引用元：http://caniuse.com/#feat=flexbox ベンダープレフィックス付きで、だいたいのブラウザで動きそうな感じです。 特にスマホ用のマークア
![[CSS3] 横並びレイアウトを簡単に実現するdisplay:boxが便利 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa200920a849841c6a264659958eecc12570ae15/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F202.jpg)
定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！
定義リスト dl のdt/ddタグを横並びにする方法を紹介します！ floatをつかってキレイに整えましょう！ こんばんちわ、やのっぱです。(´・ω・｀) 今回は定義リスト[dl]の中身(dtとdd)を横に並べる方法やってみるよ。 その前に定義リストってなん？？？美味しいの？ ッと思ってたら、どこからともなく天の声が！！←天から聞こえとるがな 「説明しよう！定義リストとは定義（dt）する用語を説明（dd）するリストである！」 つまりは用語があって、それを説明する文がセットになってるときに使うリストってことです。 もっと噛み砕くと[これ]はこういう[意味]やで～ってことです。 やのっぱ（ここdt）毎日せこせことマークアップすることに快感を覚え、しかし打つのは面倒いので如何にして楽にマークアップするかと言うことに情熱を注ぐ汎用人型まーくあっぷえんじにゃぁ（ここdd） こんな感じで使ったりします
![定義リスト[dl]のdt/ddを横並びにする方法 | たねっぱ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/4e3d0e670c454b9af93366310784f905b0ebd3c7/height=288;version=1;width=512/https%3A%2F%2Ftaneppa.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcss2.jpg)
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
『HTML5/CSS3モダンコーディング』 - DESIGNMAP
Internet Explorer9以上と他のモダンWebブラウザを前提としたHTML、CSSのコーディング本。 2016年以降のWeb制作のコーディングを先取りした内容になっている。 文字サイズの単位はremを採用。bodyに%で文字のサイズを指定して、残りはremでサイズ指定をする。セレクタはタグセレクタとIDセレクタはほとんど使わない。基本クラスセレクタを採用。クラス名の名前のつけ方もクレバーですぐにでも参考にしたいスタイル。 ３つのサンプルはどれも実践レベル。 各サンプルともまったくのゼロからハンズオン形式でつくる構成になっている。 特にPART3が圧巻 特にPART3のシングルページレアイウトが圧巻。 画像の縦横比率を利用して、marginを割り出したり、display:table;をつかった可変型の段組みレイアウトをくんだり、::afterで画像をいれて、transformプロ
フロントエンド開発における革命とスタイルシートの管理 - Qiita
こんにちは、freee株式会社 の @ymrl です。フロントエンドエンジニアなるものをしています。 この記事は freee Engineers Advent Calendar の2日目です。 #革命について freee では最近フロントエンド開発を取り巻くいろいろなものを大きく変化させていて、これを 革命《レボリューション》 と呼んでいます。これはフロントエンド界の地殻変動の速さに付いて行きづらくなっているRailsアプリケーションのフロントエンドをエイヤッと近代化して、具体的にはRailsが用意している Sprockets によるフロントエンドの precompile のレールからはずれようとする動きです。 主力サービスである 会計freee は、最初のgitリポジトリへのコミットが2012年7月で、開発初期から jQuery UI や各種 jQuery プラグインや Backbone
Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton
Large user base Grids: Fluid and fixed UI tools: Lots of widgets; good for rapid prototyping History: Built by Twitter as a style guide for internal tools Medium user base Grids: Fluid. Most robust grid tools. UI tools: Good for rapid prototyping, but not as expansive as Bootstrap History: Built by ZURB as boilerplate for client projects Medium user base Grids: Fluid. Most robust grid tools. UI to
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
1. 文系デザイナーでも大丈夫！ レスポンシブWebサイトを で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子 12年11月3日土曜日 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター／デザイナー。 つまり１人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
CSS Lecture: class(クラス)を複数設定する方法
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About
idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。 スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？ この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回
![idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
how to draw the # of likes bubble like what is on the right side of the facebook like button
CSSのAからZを学べる映像チュートリアル『A to Z CSS』 | 100SHIKI
CSS Sheat Sheet