htmlファイルを作成し、CSSでいろいろと調整を行っていく
まずはindexファイルを作成
今回はTeraPadにてコードの作成を行った。
↓indexの空の状態
コード
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
<link href="" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>スクリーンショット
拡張子は.txt
index.htmlと拡張子を変えると、文字の色が変わる。
参考サイト
Youtubeの埋め込み
iframeに入っているwidth属性、heights属性は影響するので、一回消す。(reset.cssと同じ考え)
リロードすると最小のサイズで表示される。
検証ツールから要素に変更したいソースを張り付ける。（検証ツールはあくまでもシミュレーションなので、実機で確認は必要）
参考サイト
検証ツールで行ったことを、ＰＣ上の方でも行っていこう！
indexファイルと同じところにstyle.cssファイルを作成し、パスを通す。
「セレクタ CSS チートシート」
CSSセレクタのチートシート｜37パターンを一覧で解説
youtubeの使いまわしがあるとき、下記の指定している箇所をコピーする。
親の中の子を横並び
ｘの埋め込み
ｘの公式サイトより埋め込みのコードを取得
http://help.x.com/ja/using-x/embed-x-feed
bodyの中に張り付ける。
昔はアカウントトップページの埋め込みはできていたが、今は有料になった。
Googleマップの埋め込み
Googleマップでマップしたいところにピンを立てる。
その後共有ボタンから、コードを取得。
bodyに張り付ける。
width=”600″ height=”450″は消して、配置したサイズ、場所はCSSファイルで調整する。
所感
埋め込み作業については、どれも同じような作業でそんなに難しくなかった。提供する会社の仕様が変わりできたことができなくなることもあるので、そんなに凝らないように上手に利用していきたい。
CSSの理解不足があるが、今日で少し思い出してきた。