読者です 読者をやめる 読者になる 読者になる

わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

なんかおかしいマークアップ

マークアップ HTML

他の人にわかりやすいとかの目的の場合の書き方について。
タグの意味合いを意識した書き方。

例1:ヘッダーのタイトルとロゴについて

×ダメな例

<header>
	<div class=“logo”>
		<img src=“logo.png”>
	</div>
	<h1>
		Sitetile
	</h1>
</header>

h1 と.classが別物という扱いになってしまう。

○良い例1

<header>
	<div class=“sitelogo”>
		<div class=“logo”>
			<img src=“logo.png”>
		</div>
		<h1>
			Sitetile
		</h1>
	</div>
</header>

.sitelogoでグルーピングしたら同じものという扱いになる

○良い例2

<header>
	<div class=“sitelogo”>
		<h1 class=“logo”>
		<img src=“logo.png”>
			Sitetile
		</h1>
	</div>
</header>

h1に入れて同じボックスに入れても良い。

例2:記事のmoreボタン

×ダメな例

<div class=“content-box”>
	<div class=“text”>
		tex text
	</div>
	<div class=“text-more”>
		TEXTETXT
	</div>
</div>
<p class=“btn-more”>More</p>

記事のグループ.content-boxから.btn-moreがはみ出ている。
マークアップ的に.content-boxと.btn-moreは関係性のないものということになってしまう。

○良い例

<div class=“content-box”>
	<div class=“text”>
		tex text
	</div>
	<div class=“text-more”>
		TEXTETXT
	</div>
	<p class=“btn-more”>More</p>
</div>

.content-boxに入れて同じグループにする。

例3:h1,h2,h3...に直接スタイルを当てない

×ダメな例

<h1>Title</h1>
h1{
	color: red;
}

理由は忘れたがそうらしい。

○良い例

<h1 class=“sitetitle”>Title</h1>
.sitetitle{
	color: red;
}

あれこれのパッケージマネージャーからインストールしている物を確認する

環境構築 Linux

何かインストールしようとする時に

(以前に入れたかも?二回入れるのはやだな)

とか思い何度も何が入っているのか確認するためにググるのでいい加減メモる

・HomeBrew

>|lynx|

brew list

||<

・gem(ruby)

>|lynx|

gem list

||<

・npm(node)
グローバル

>|lynx|

npm ls -g

||<

inline-blockの隙間を消す

CSS

inline-blockで横並びしたときに隙間が開くのでそれを消す方法

親要素に font-size:0;  を入れる。

 

原因は改行コードが表示され隙間が開くそうです。

See the Pen inline-blockの隙間を消す by yachiru (@yachiru) on CodePen.

:notの使い方の例

CSS

css3の擬似セレクタ:notの使い方

ナビなどでボーダーを引くときに「一番最初以外にボーダーを適用」という条件を入れられる。

nav ul li:not(:first-child) a{ 

See the Pen css:notの使い方 by yachiru (@yachiru) on CodePen.

背景指定で画像を要素全体に表示する

 

要素全体に画像を100%にして表示させる。

background-sizeのcoverは使える

縦幅に注意が必要 、heightを指定する必要があるかもしれない

center center も場合によって変える

場合によって切れる

 

.images{
background: url("http://placehold.it/480x200") center center;
background-size: cover;
}

IE11でCSSのアニメーションが動かなかった対策

CSS IE対策

@media クエリの中にkeyframes を入れたら反応しなかったです。

外に出したら動きました。(´-`)

IE11のFlexにした時にbasisがおかしくなる

CSS IE対策

Flexboxで組んでいて、IE11でおかしかったのでメモ

flex-basisだけだと横幅がIE11でずれるのでその時は↓を入れる。

 

/*IE用*/
max-whidth: 50%;

 

See the Pen Float-basis IE by yachiru (@yachiru) on CodePen.

 

今回、記事を書いて

おかしくなったのを再現しようとしたが、うまくいかないことが判明した。

 

参考サイト様

IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない | KuroBox

htmlとcss

CSS

今日は仕事のメモ

CSS

クラス名の付け方

×left

○section

編集のしやすさの為要素にとって意味のある文字を入れる

flex-basis

flexだけセットして

要素が50%と50%になってちゃんと2等分できた

次に、50%の要素の片方にpaddingとmarginセットしたら要素が50%から大きさが変わってしまった。

・対策

flex-basisをセットする。

widthでも良い。

2つは同じ意味

文字のレイアウト

brで改行させる場合は、リキッドに注意

画面を縮めた時に中途半端なところで改行されるか

英文サイト

単語ごとの改行か文字での改行か意識

テキストを均一に揃える

ie9だとtext-justify

text-align: justify;

HTML

セマンティック構造

書いてある内容を意識する。

Article と Section

Article = 記事

Section =部分、断片、(建物・部屋などの)仕切られた場所、(全体を組み立てる)部分品、(オレンジ・ミカンなどの)袋、房、(書物・文章の)節、段落、項、(新聞・雑誌の)欄

Article と Sectionは同じ意味

親子関係逆転でも使える。