[B! qiita][html] xai1981のブックマーク

テキストの縦方向の中央揃えについて - Qiita

ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。その場合どのように配置しているでしょうか。インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、うまいこと配置できないことがあり、今回は、縦方向の中央揃えについて調べてみました。

xai1981 2018/02/07

リンク

フォーム(form)をtableタグを使わずに綺麗に並べる方法とhtml.slim.CSS,SASSでの記述方法 - Qiita

今回は、基本のformをtableタグを使わずに、きっちり整列させる方法です。コード量が増えるので、わたしはtableタグがあんまり好きじゃないんです(>o<) でもtableタグを使わないと、きちんとinputとlabelが揃わない状態から抜け出せなくてすごく困っていました。なんとか中央寄せで、それぞれの要素の縦のラインが綺麗に揃う方法を見つけたのでご紹介します。使うタグは「ul,liタグ」！ ulタグとliタグを使えば、form要素を簡単に綺麗に並べることができます。まずは基本となるhtmlを書いて、フォームを表示させます。ポイントは「ul,liタグ」を使うことです！ <form> <ul> <li class="name"> <label for="name">Name<label> <input id="name" type="text" name="name" place

xai1981 2017/05/17

リンク

React.jsでFormを扱う - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

xai1981 2017/01/13

リンク

こんなHTMLとCSSのコーディング規約で書きたい - Qiita

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。誰に向けた記事かこの記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積

xai1981 2016/10/26

リンク

BEMの考え方を基にしたHTML / CSSのid・classの命名規則 - Qiita

概要 id・classの命名規則についてはGoogleのガイドラインや、BEMがあることで、ある程度指標ができておりますが、仕事で使うガイドラインを制作するにあたって、どのような形が望ましいのか、考えなおそうと思い、色々情報を集めていました。 BEMの考え方が個人的に良かったので、採用しようと思ったのですが、BEMは少し冗長になりがちなので、個人的にはそこを改善したいのと、無駄になりそうな要素はなるべく減らして行きたかったので、BEMの考え方を基に少しカスタマイズして、命名規則を思案しました。 BEM 記事も揃っておりますので、ここには特筆はしません。簡単な説明のみとさせていただきます。 BEMとは？「Block」「Element」「Modifier」の頭文字。BEM（ベム）と呼びます。 Block / 構成のルートとなる親要素。 Element / Blockに付随する子要素。 Mo

xai1981 2016/01/05

リンク

破綻しにくいCSS設計の法則 15 - Qiita

ブラウザスタイルは平坦化しておくリセットCSSはオプトアウト可能にしておく登場頻度の高い組合せはplaceholderとして登録してから利用する可能な限り画像はスプライト生成してから利用するそれ以上分解不可能なコンポーネントは要素のように扱うコンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる可能な限り@extendは利用しないレスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく詳細度または特異性の高いものほど後方に記述する可能な限り!importantしない可能な限りハックしない変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく例えば、こういうScrap & Buildは単に通信量のムダ。