Porte Bonheur

心穏やかなひと時を

position

static
基準値や位置の設定を行わない

absolute
絶対位置指定。ウィンドウの左上から位置を指定。
親要素に relative が指定されている場合のみ、親要素の左上が基準位置となる。

relative
相対位置指定。absolute が指定されている要素を子要素に持つことにより、absolute の基準位置を変更できる。

top / bottomプロパティ
positionプロパティが指定されている要素にのみ指定できる。
上から〇〇px移動させる、下から〇〇px移動させるという意味を持つ。

left / rightプロパティ
positionプロパティが指定されている要素にのみ指定できる。
左から〇〇px移動させる、右から〇〇px移動させるという意味を持つ。

Donny Hathaway - The Ghetto

f:id:portebonheur:20171230150519j:image

この人も良い。
持ってたと思うんだけど、随分itunesに入れてないかも。
やっぱりミュージックライブラリ見直し時かなぁ?


Donny Hathaway - The Ghetto

no-js

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

一般的には、「javascriptがない」ときに作動する仕組みをつくる際に用いられる。

どういう目的で使用するかは人それぞれですし、決まりでもなんでもないので必須ではありません。

 

>class="no-js" は絶対に書かないといけないのでしょうか?

そのページが完全自作なら書く必要はありませんが、自分以外が作ったwordpressのテーマやプラグイン

あるいはjQueryプラグインを使用する場合は、必要になるケースはあります。

 

X-UA-Compatible

IE8以降でドキュメント互換を制御することができる機能。

meta要素で設定することができる。

  • IE8以降にドキュメント互換性という概念で「X-UA-Compatible」が追加された。
  • X-UA-CompatibleはWEB標準をサポートすることもできるし、旧ブラウザと同じように表示させることができる.
  • title要素や他のmeta要素より上に置く必要がある
  • edgeモードは使用可能な最高のモードでコンテンツを表示する
  • Google Chrome Frameを使用する場合はcontent属性に「chrome=1」を追加する

CSS,HTML基本記述

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="vewport" contenr="width=device-width,initial-scale=1.0"> レスポンシブ
metaの追加記述は下記の物を上から順に記述
OGP記述はここに
<link rel="alternate" media="only screen and〜>はここ
<link rel="stylesheet" href="style.css"> 自分のcss
<script src=""">
 
browsehappy記述は<body>直下
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
条件付きコメントで、IE7未満には「お使いのブラウザは古いです!
新しいのにするかChrome frameをインストールしてください」というメッセージを表示する
 
@charset "UTF-8";* {margin: 0;padding: 0;box-sizing: border-box;
}
 
 
meta
 
<meta http-equiv="robots" content="all" />
検索エンジンに、インデックスに掲載されないようにする。
低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめ。
普通にインデックスもクロールもして欲しい場合には、このメタタグは全く何も書かなければOKです。
 
<meta name="keywords" content="keywordsを,で区切って指定">
そのページの内容を表すキーワードを半角カンマ(,)区切りで書きます。
ただし、Googleは検索順位を決めるうえでメタキーワードを一切見ていません。
Googleがサポートしているメタタグ(公式ページ)
 
<meta name="discription" content="内容">
メタディスクリプションとして書かれたものは、検索結果に表示されることがある。
(必ずしも表示されるとは限らない)
ページの内容を表す魅力的な文章をメタディスクリプションに書いておけば、クリックされやすくなる
 
<meta name="google-site-verification" content="xxx" />
Google系サービス(サーチコンソールなど)のサイトの所有権確認コード
 
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.yashima.ac.jp/univ/sp/" />
モバイルページ(スマホタブレットで見た時のページ)のURLが、PCページのURLと別の場合に指定するものです。ここでもrel="alternate"を使って「スマホ版のページはここだよ!」と検索エンジンなどに伝えているわけです。なお、このタグを使うときには合わせて後述のlink rel="canonical"も指定しておくようにしましょう。
レスポンシブが聞かない時に使うっぽい?
 
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードページのURL" />>
このタグを記述しておくとRSSリーダーがそのサイトのRSSフィードを見つけることができます。
rel = "alternate"はフィード以外のlinkタグでもよく使われるもので
「そのページの代替ページ」であることを意味します。
つまり上の場合「ページのRSSフィード版はここだよ!」と伝えているのです。
こちらもWordPressでは自動出力されます。
 
<script type="text/javascript" src=""></script>
スクリプトの言語を type="text/javascript" のような MIMEタイプで指定します。
HTML4.01では必須の属性として定義されていましたが、HTML5 では省略時は type="text/javascript" とみなされるようになり
※HTML5では不要
 meta robots使い方例
低品質なページ noindex,nofollow 検索結果ページ noindex,nofollow タグ/日付別ページ noindex,follow トップページやカテゴリーページの2ページ目以降 noindex,follow <meta property="og:url" content="ページのURL" />

参照:メタタグとは?SEO効果は?metaタグ一覧と書き方まとめ

 

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ"><meta property="og:description" content="記事の抜粋" /><meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" /><meta name="twitter:site" content="@Twitterユーザー名" /><meta property="og:site_name" content="サイト名" /><meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
facebooktwitterでシェアされたときに、アイキャッチ画像などやタイトルを魅力的に表示してくれる設定。
ソーシャル流入を重視するのであれば必須
OGPを設定するメリットや、WordPressでの設定方法
 

Doobie Brothers ~ What A fool Believes (1979)

f:id:portebonheur:20171230145341j:image

 

6年前に、始めて人に教えていただいた時の曲は好みではなかったけど
今年になってまた違う方から教えて頂いたものは好きなテイストばかり。
音楽も出逢い。


Doobie Brothers ~ What A fool Believes (1979) Classic Rock R&B Pop

ジジ・ハディットのヘイターへの発言に共感

彼女の辛さを考えると、こう言うべきか分からないけれど
彼女の言っている事は素晴らしい。

日本だと、同じ年齢の人が同じ発言をすると、叩かれるけどね。
問題は年齢ではなく、自分で何をどう考えどう生きる上で実践してきたかなのだけど
オリンピックでも人が亡くなった報道でも、わざわざ年齢を言う日本だからね。

人は、強くならざるをえなかった経緯があって強くなる。
それを外から考えの浅い人間が、あたかも最初から強い人間だったと決めつけた発言をする事は
あまり快い気分ではない。

ただそのようなもに構う時間を割く機会を、
一度きりの人生でもつかどうか、
選択の自由は、常に私の中に、あなたがたの内にある。

m.elle.co.jp

東京手仕事展、行ってきました

先月末、行ってきました。
もっと大きな規模のもの見たいなぁ
店内を見ていたら、去年からずっと欲しかったTIN BREATHを見かけて買ってしまいました😊
(なのに仕事の事で気持ちが晴れず開けてません)

t.co


TIN BREATH

TIN BREATH Gold | NAGAE+公式オンラインショップ

Kool & the Gang   More Funky Stuff

f:id:portebonheur:20180212140031j:image


Kool & the Gang   More Funky Stuff


KOOL & THE GANG-funky stuff/more funky stuff