2018-03-15

サブタイトルの作り方 - CSS

CSS

サブタイトルのためのタグはないため、作るときにはh1の中にspanとbrを使って実装する

span
br

サンプル

HTML

<h1>東雲めぐの配信最高！！<br>
    <span class="subtitle">〜毎朝、早起きして癒やしてもらおう〜</span>
</h1>

h1内にタイトルとサブタイトルを記述し、span内にサブタイトルを記述する

CSS

h1 {
    font-size: 1.5em;
    line-height: 1.2em;
    text-align: center;
}

h1 .subtitle {
    font-size: 0.7em;
    font-weight: normal;
}

h1(タイトルとサブタイトル)に対してスタイルを設定して、サブタイトルだけにスタイルを設定する

サブタイトルのフォントサイズは1 * 1.5 * 0.7で1.049…となり、ほぼ1。

結果

CSS適用前

f:id:tmg1998:20180315230301p:plain:w500

CSS適用後

f:id:tmg1998:20180315225719p:plain:w500

わ〜CSSってすごいんだな...

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

作者: 狩野祐東
出版社/メーカー: SBクリエイティブ
発売日: 2016/10/27
メディア: 単行本
この商品を含むブログ (1件) を見る

2018-03-15

テキストの文字色を変える - CSS

CSS

colorプロパティを使う。

値の指定の仕方

16進数(6桁の数値)で指定する

R(赤)、G(緑)、B(青)をそれぞれ16進数で2桁ずつで表現する。

#赤緑青で指定する

body {
    color: #808080;
}

カラーキーワードで指定する

redやblueやblackなどのキーワードで指定することができる

body {
    color: gray;
}

rgb()

color: rgb(赤, 緑, 青);

値はそれぞれ、0〜255

例）グレーを指定する場合

body {
    color: rgb(80, 80, 80);
}

rgba()

color: rgb(赤, 緑, 青, 透明度);

値はそれぞれ、0〜255
透明度を指定できる

例）グレーで透明度が50%の場合

body {
    color: rgb(80, 80, 80, 0.5);
}

参考文献

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

作者: 狩野祐東
出版社/メーカー: SBクリエイティブ
発売日: 2016/10/27
メディア: 単行本
この商品を含むブログ (1件) を見る

2018-03-14

Google Maps API(Google Maps Embed API)を使ってみる

HTML GoogleMapsAPI

Google Maps APIというもので簡単にGoogle Mapを表示できるらしいからやってみた！

今回は「Google Maps Embed API」を使って表示してみる。

JavaScriptを使う「Google Maps JavaScript API」もあるらしい。

4つのモード

Google Maps を表示するときは4つモードがある

Placeモード
Directionsモード
Searchモード
Viewモード

Placeモード

ある位置にピンを指すことができる

Directionsモード

2か所以上のルート、距離などを表示することができる

Searchモード

表示可能なマップに検索結果を表示する

Viewモード

ピンやルートが表示されていないマップを表示することができる

Googleマップを表示してみる

表示を行うまでの順序は以下の通り

APIキーの取得
HTMLで埋め込む

1.APIキーの取得

Google API Consoleにアクセス
新規プロジェクトを作成するか、既存プロジェクトを選択する
「続行1をクリック
使用するAPIを「Google Maps Embed API」を選択する
「必要な認証情報」をクリック
APIキーが表示される

2.HTMLで埋め込む

今回は「Placeモード」でさいたまスーパーアリーナにピンを指して表示してみた

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>GoogleMapsAPIテスト</title>
</head>
<body>
    <h1>GoogleMapsAPIを使ってみた</h1>

    <iframe
      width="600"
      height="450"
      frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?key=取得したAPIキー
        &q=埼玉県さいたま市中央区新都心８" allowfullscreen>
    </iframe>
</body>
</html>