<ul>、<ol>、<li>の3つのタグを使うと、箇条書き（リスト）を作ることができます。
まずはこれらのタグの基本的な使い方を説明していきます。
【書き方について】
<ul> <li>項目1:吉田朱里</li> <li>項目2:矢吹奈子</li> <li>項目3:渡辺麻友</li> </ul>
︎箇条書きの1つ1つの文はliタグではさみます。
複数のliタグの前後はulタグではさみます。
liタグは何回使ってもOKです。
箇条書きの項目数分だけ増やすことも可能です。
これを実際にHTMLコードを書いてブラウザで表示してみます。
【HTML】
<ul> <li>項目1:吉田朱里</li> <li>項目2:矢吹奈子</li> <li>項目3:渡辺麻友</li> </ul>
【ブラウザ表示例】
- 項目1:吉田朱里
- 項目2:矢吹奈子
- 項目3:渡辺麻友
︎このようにulとliを使うと、各項目の先頭が黒丸になります。
※黒丸のデザインは変えることができます。
【HTML】
<ol> <li>項目1:吉田朱里</li> <li>項目2:矢吹奈子</li> <li>項目3:渡辺麻友</li> </ol>
【ブラウザ表示例】
- 項目1:吉田朱里
- 項目2:矢吹奈子
- 項目3:渡辺麻友
︎ulのかわりにolを使うと以下のように番号付の箇条書きになります。
このまま箇条書きを使っても良いのですが、少し寂しいのでレイアウトを変えてみます。
ulでもolでもCSSの書き方は変わりません。
まずは箇条書きのボックスを線で囲ってみます。
線で囲うにはulもしくはolに対してborderプロパティを指定します。
例として、2pxの赤色の線で囲ってみましょう。
【HTML】
<ol> <li>項目1:吉田朱里</li> <li>項目2:矢吹奈子</li> <li>項目3:渡辺麻友</li> </ol>
【CSS】
ol {
border: 2px blue solid;
/*2px 赤色 １本線を指定*/
}
【ブラウザ表示例】
- 項目吉田朱里
- 項目矢吹奈子
- 項目渡辺麻友
︎箇条書きが赤色の1本線で囲まれました。
このように<ul><ol><li>を使うことでリストを作成でき見やすく変えることが可能になります。
CSSでレイアウトもいろいろ変えられるので是非つかってみてください。
こんにちは。フローラです。
ご無沙汰してしまいすみませんでした。
今回はCSSで簡単におしゃれなInstagram風の画像にする方法をご紹介します！
Instagramは簡単に画像にフィルタをかけられますね。種類も豊富です。
- 配布サイトからファイルをダウンロードする
- head内でリンクさせる
- 画像にCSSを適用
たったこれだけです。では実際に見てみましょう。
Instagram.cssの公式サイトにサンプルが掲載されています。種類も豊富にありますね。
Instagram.css
GitHubからダウンロードしてきます。
https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css
GitHubにサインインしたら、CODEをクリックします。
「clone or download」ボタンを押します。
distフォルダの「instagram.css」が対象ファイルです。
「instagram.css」をHTMLのhead内で読み込みます。
<head> <link rel="stylesheet" href="instagram.css"> </head>
画像ファイルにフィルタ用のdiv等で囲って、div等にclassを適用するだけです。
classは「filter-〇〇〇」。
〇〇〇は公式サイトのサンプルをご参照ください。
【ノーマル】
<div> <img src="0000.png" alt="" width="900" height="600" /> </div>
【Poprocket】
<div class="filter-poprocket"> <img src="0000.png" alt="" width="900" height="600" /> </div>
下記コードを追加してみてください。
img{
margin: 0;
padding: 0;
vertical-align: bottom;
}
簡単にInstagram風のスタイルが実装できましたね。
この方法だと、いちいちphotoshopを立ち上げる必要もありませんし、画像ファイルも一枚で済みます。
種類も豊富で何パターンも用意されているので、色々試してみてください。
こんにちは。フローラです。
ヘルプファイルやちょっとしたインフォメーションを表示させるのに便利なモーダルウィンドウ。
モーダルウィンドウはJavaScriptで作るのが一般的だったと思いますが、CSSだけで簡単に作れるのはご存知ですか？
CSSだけで作れるのでプログラミングの知識の必要がなく軽量です。またIE9+、Safari、Chrome、Firefoxと主要なブラウザで動作します。
今回はCSSだけでモーダルウィンドウを実装する方法をご紹介します！
https://github.com/hunzaboy/Light-Modal
Light-ModalはGithubに置かれています。
（無料で自由に使用できる）でGithubから入手することができますが、ライセンスについては必ずご確認していただき、自己責任でお願いします。
LICENSE
Light Modal | Pure CSS
中央ボタンからウィンドウのデザインが選べます。
シンプルなウィンドウ、ヘッダーフッターのあるウィンドウ、イメージとキャプションのウィンドウ、ネクストボタンのあるギャラリーウィンドウです。
アニメーションは下にあるプルダウンで変化が付けられます。
こちらはAnimate CSSがベースになっています。
https://daneden.github.io/animate.css/
- CSSファイルをhead内で指定
- HTMLを記述する
- アニメーションを付ける場合はAnimate CSSへの外部ファイルとclassを追加
Githubにサインインして対象のプログラムを表示させると右上にDownloadボタンが表示されます。
<dist/css/light-modal.min.css>
をご自身のサーバー上にアップロードしてください。
まずリンクボタンを記述します。続けてその下にモーダルウィンドウを記述します。
htmlソースはdemo pageをご参照ください。
head内にAnimate CSSへのリンクを追加し、「.light-modal-content」にアニメーションのclassを追加するだけです。
Animate CSSへのリンク
<link rel="stylesheet" href="animate.min.css">
「.light-modal-content」にアニメーションのclassを追加する例
<div class="light-modal-content animated zoomInUp">
いかがでしたでしょうか。モーダルウィンドウを使用することで表現の幅が広がりますね。
是非ご活用してみてください。
それでは、また！
意外と知っておくと便利なツールチップ。
グローバルメニューをスタイリッシュに表示したい時に英語表記することが多々あるのですが、年齢層高めのユーザーがターゲットの場合、日本語表示も欲しいという声をいただきます。
そんなときにツールチップがあれば、英語表記だけどマウスオーバー時にちゃんと日本語で案内できるので、クライアント様の要件を満たせることが多いです。
みなさまも覚えておくと、ちょっとサイトデザインの幅が広がりますよ。
まずは、Wordpressにプラグインを追加しましょう。
今回ご紹介するのは「Simple Tooltips」です。
なので、Wordpressのダッシュボードの
「プラグイン」→「新規追加」→右上の検索ボックスに「Simple Tooltips」と入力しましょう。
すると「Simple Tooltips」が表示されますので、
インストール→有効化
をクリックします。
では早速、このプラグインを使ってグローバルメニューにツールチップを追加しましょう。
現在ご覧の弊社onWEBのサイトでは、グローバルメニューが英語表記となっています。
こちらに日本語表記のツールチップを導入し、ユーザーの利便性を高めたいと思います。
まず、ダッシュボードの左メニューの「設定」→「Simple Tooltips」をクリックします。
- Background Color
- Text Color
- Max Width
- Opacity
- Position
- Disable On Mobile
- Menu Selectors (Advanced)
ツールチップの背景色の変更
ツールチップの文字色の変更
最大幅の設定
ツールチップの背景透過度の設定
ツールチップの配置場所
モバイル時にツールチップを表示するかしないかの設定
グローバルメニューに設定する際にクラス名を指定
今回の重要なポイントです
背景色や文字色などは、サイトに合わせて設定してください。
では、グローバルメニューにツールチップを使用していきましょう。
まず、ツールチップを入れたい、グローバルメニューのクラス名を確認してください。
※弊社onWEBでは「headMainMenu」になります。
クラス名が確認できたら、上記「Menu Selectors (Advanced)」の項目に先ほどのクラス名を記入ください。
その際、「.」を入れるのをお忘れなく。
ツールチップ側の設定が完了しましたら、次はグローバルメニューの設定です。
ダッシュボード左メニューから「外観」→「メニュー」をクリック。
そこで、右上の「表示オプション」をクリックし、「タイトル属性」・「CSSクラス」にチェックを入れます。
次にメニュー構造のメニューを一つ開き、以下の項目を入力しましょう。
- タイトル属性
- CSS Class
ツールチップに表示するテキストを入力
「tooltips」と入力
以上で設定が完了しました。
ちゃんとグローバルメニューにツールチップが表示されるか確認してみてください。
このような簡単な設定で、グローバルメニューにおしゃれなツールチップが入りました。
これでまたデザインの引き出しが増えましたね。
今回のテーマは、Webサイトに書くmetaタグ（メタタグ）について解説していきます。
メタデータを記述した箇所がメタタグ、あるいはmeta要素と呼ばれます。
Webサイトにおけるメタデータとは、そのサイト、そのページに関する情報を定義したものです。
HTMLのソースとして記述するため、実際にサイトを見ても表示されない情報がほとんどです。
では表示されない情報をなぜわざわざ設定・記述するのかというと、
検索エンジン（Googleやyahoo）などに向けて
「うちのサイトはこんな感じですのでよろしくお願いします！」と自己紹介をして、主張の無いサイトよりも有益なサイトであると評価してもらうため。
そして更に検索結果の表示の際にサイトの説明文などを表示してもらうためです。
検索エンジンの手先となってサイト情報を収集しているクローラーから「ちょっといいサイトかも？」と認識してもらえたら
検索結果ページに表示される際に、表示順位が上がる可能性があります。
※「クローラー」
⇒ウェブ上の文書や画像などを周期的に取得し、自動的にデータベース化するプログラムである。
metaタグを適切に設定することによってユーザーやクローラーに内容を理解してもらいやすくなり、正しく評価されやすくなります。
さらにmetaタグの中で、SEOに有効とされるものが二つあります。
「keyword」と「description」です。
<meta name="keyword" content="ここにキーワード1,キーワード2,キーワード3,……">
※内の記述であるため、ブラウザで普通に閲覧することは出来ません。
<meta name="description" content="ここにサイトの紹介文……">
※Yahoo!、Googleの検索結果一覧画面にて表示されます。上記metaタグ内に上位表示させたいキーワードを含めると、クローラーはそのページのテーマを表す情報として読み取ります。
metaタグは、「直接的にページの順位を押し上げるため」というより、「検索エンジンにページのテーマをより的確に伝えるため」にある補助的な本文と考えましょう。
ここでコンテンツ内容と違うキーワードをたくさん埋め込んでしまうと、ページのテーマが曖昧になり、全てが台無しになってしまうため注意が必要です。
「keyword」と「description」以外のメタタグもいくつか紹介していきます。
<meta charset="utf-8">
文字コードを指定するためものです。日本語のサイトであれば、必ず書く必要があります。<head>タグのすぐ下に書くようにしましょう。
<meta name="viewport" content="width=device-width,initial-scale=1">
レスポンシブデザイン（スマホやタブレットでも表示を最適化）を実現するために書いておく必要があります。
<meta name="robots" content="noindex,nofollow">
こちらは検索エンジンに対して「このページをインデックス（掲載）しない」という指示をするためのタグです。低品質なページや、ユーザーにとって価値のないページに対して指定しておくのがおすすめです。
<title> そのページのタイトル </title>
こちらは厳密にはメタタグではないのですが、とても重要なものなので合わせて紹介しておきます。titleタグの中には、検索エンジンやブラウザに認識してもらうページのタイトルを書きます。メタタグを書く場所は「head要素」のm「meta領域」、つまり<head>から</head>までの間です。
<head> <meta name="description" content="サイバーグリーンシステムは医療機関と中小企業の良きパートナーとして課題解決のお手伝いをします"> </head>
上記のように書きます。
現在「何のメタタグが書かれているのか」をチェックする方法は簡単です（パソコンから見る必要があります）。
調べたいページを開き、ページのどこかを右クリックします。
↑ 表示されるメニューの中から「ページのソースを表示」をクリックします。これは人気のブラウザであれば、あらかじめ備わっている機能です。
↑ ページを構成するHTMLタグが表示されます。この中のheadタグ内にメタタグが書かれています。
【検索ショートカットで探そう】
「Ctrl」+「F」（Macの場合には⌘(command)+F）のショートカットを使えば、好きな文字列を検索できます。
「meta」で検索すれば、メタタグを見つけやすいのではないかと思います。
このようにサイトにmata(メタタグ)を入れることでさらに検索されやすくすることが可能になります。
少しでも上位に表示されたい、沢山の訪問者が来て欲しいと思っていて、metaタグを書いてない方は是非お試しください。
最近はtwitterに限らず「facebook」や「Instagram」などSNSがよく使われています。
今回はWordPressにTwitterを埋め込む方法を説明していきます。
早速やっていきましょう！
初めにTwitterにログイン
https://twitter.com/
上記にアクセスすると以下の黄色枠内で「ログイン」できます。
Twitterにログインした状態で以下のサイトをクリックししユーザータイムライン埋め込みコード作成ページにアクセスします。
https://twitter.com/settings/widgets/new/user
上記にアクセスすると以下の画面が表示されます。タイムライン埋め込み埋め込むには「赤枠」をクリックします。
細かい設定をしたい方は「緑枠」をクリック。
以下の画面が表示されます。今回は高さ500px、幅400pxにしています。
設定が完了したら黒枠の「Update」をクリックして更新し、これで埋め込む準備は完了です。
以下の「赤枠」をクリックしてコピーします。
WordPress管理画面で赤枠「外観」から次に緑枠「ウィジェット」をクリック、青枠内に「テキスト」を挿入し先ほどコピーしたコードを貼り付け、黒枠の「保存」をクリックして完了です。
以下が表示例になります、TOPページのサイドバーにしっかり表示されています。
このようにTwitterをウェブサイトに埋め込むことで見栄えもよくなりさまざまな情報を発信することが可能になります。
Twitterを使っていたら是非参考にしてみてください。
画像を使用することなくHTMLとCSSだけでデザインした見出しを紹介していきます。
デザインを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも是非やってみてください。
このデザインのポイントは「content: attr(title);」を使い、「h2のtitle属性」の値を表示している点です。
(contentに直接サブタイトルを記入してしまうと、流用しずらくなるためです)。
【HTML】
<h2 title="AKB48 渡辺麻友 卒業">AKB48 渡辺麻友 卒業</h2>
【CSS】
h2{
position: relative;
padding-top: 20px;
font-size: 20px;
}
h2::before{
position: absolute;
content: attr(title);
top:0;
font-size: 15px;
font-weight:normal;
color:#999;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記ように見出しの上部に表示することができます。
このデザインのポイントは「box-shadow: inset」を使うことで、シャドウをボックスの内側に表示しています。
背景を画像にしたり、シャドウのカラーを変更することで、いろいろなカスタムが可能となります。
【HTML】
<h2>劇場版「Fate/stay night[Heaven's Feel]」| 2017年10月14日第一章公開</h2>
【CSS】
h2 {
padding: 20px;
font-size: 20px;
background: #fac;
box-shadow: 0 0 20px #fac inset;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のように内側に影をつけて強調することができます。
このデザインのポイントは「before after」で「border-right-color: transparent;」と「border-left-color: transparent;」を指定することで、ボーダーの一部分だけ透明にしてリボンを表現している点です。
【HTML】
<h2>コード・ブルー ドクターヘリ緊急救命</h2>
このデザインのポイントは「after」に「background: #fff;」を指定することで、外枠のボーダーを一部分だけ消している点です。
ここでは左寄せにしていますが、テキストを中央寄せしても良いと思います。
【CSS】
h2{
position:relative;
padding:20px 10px;
font-size:20px;
border:1px solid #325A8C;
}
h2::after{
content: "POINT";
position: absolute;
top: -8px;
left: 10px;
background: #fff;
font-size: 12px;
color: #325A8C;
padding: 0 10px;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のようにborderで囲むみワンポイントにテキストを入れることで強調しています。
このデザインのポイントは「before after」で「border-right-color: transparent;」と「border-left-color: transparent;」を指定することで、ボーダーの一部分だけ透明にしてリボンを表現している点です。
【HTML】
<h2><span>おんな城主 直虎</span></h2>
このデザインのポイントは「span」に「display: inline-block;」を指定してグラデーションボーダーを消すように要素を乗っけています。
背景が白じゃないときは、「span」の背景色も白から変更してください。
【CSS】
h2{
position: relative;
text-align: center;
font-size:20px;
}
h2::before{
position: absolute;
top: 50%;
z-index: 1;
content: "";
display: block;
width: 100%;
height: 1px;
background: #000;
background: linear-gradient(-45deg, transparent, #325A8C 10%, #325A8C 90%, transparent);
}
h2 span{
position: relative;
z-index: 2;
display: inline-block;
padding: 0 20px;
background-color: #fff;
text-align: left;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のように見出しの左右に消えるborderを入れることで見出しが強調できます。
このデザインのポイントは「before after」に指定している「height: calc(100% + 20px);」です。
「h2」の高さよりも20px分多く高さを持たせることで、ボーダーがはみ出しているようにデザインすることができます。
【HTML】
<h2>ドクターX ～外科医・大門未知子～（5期）</h2>
【CSS】
h2{
position: relative;
padding: 10px 20px;
font-size:20px;
text-align:center;
border-top: solid 2px #325A8C;
border-bottom: solid 2px #325A8C;
}
h2::before,
h2::after{
content: '';
position: absolute;
top: -10px;
width: 2px;
height: calc(100% + 20px);
background-color: #325A8C;
}
h2::before{left: 10px;}
h2::after{right: 10px;}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のように見出しの4つ角から線をはみ出すことで見出しを強調できます。
このデザインのポイントは「before after」に指定した「content: “□”;」です。
□を◎☆♢などに指定すれば、別のマークの見出しにすることもできます。
【HTML】
<h2>打ち上げ花火、下から見るか? 横から見るか?</h2>
【CSS】
h2 {
position: relative;
padding-left: 30px;
font-size:20px;
color: #325A8C;
}
h2::before,
h2::after{
content: "□";
position: absolute;
}
h2::before{
left:0;
top:-3px;
}
h2::after{
left: 5px;
top: 3px;
color: #A1B8D1;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のように文字の最初にマークを表示することで見出しを強調できます。
このデザインのポイントは「h2」に「first-letter」疑似要素を指定し、フォントカラーとサイズを変更している点です。
【HTML】
<h2>Fate/stay night [Unlimited Blade Works]</h2>
【CSS】
h2{
position: relative;
padding:0 0 5px 0;
font-size:20px;
border-bottom:#BFBFBF dotted 1px;
}
h2:first-letter{
font-size:40px;
color:#ff0000;
}
これを実際にHTMLコードを書いてブラウザで表示してみます。
【ブラウザ表示例】
上記のように文字の最初を大きくすることで見出しを強調できます。
このように見出しのデザインを変えることさらに見やすくすることが可能になります。
CSSでレイアウトもいろいろ変えられるので是非使ってみてください。
皆さんこんにちは。フローラです。
星の数ほどあるテキストエディタですが、皆さまテキストエディタは何をお使いですか？
最近はとっても便利な機能を搭載しているものが多々あります。エディタそのものの機能だけではなくプラグインも充実していると便利ですね。
ご存知の方も多いと思いますが、今回はBracketsをご紹介したいと思います。
Bracketsはadobe製品の高機能テキストエディタです。
特にHTMLのコーディングには優れた威力を発揮してくれます。
主な特徴としては、
- ライブプレビュー
- 入力補助機能
- クイック編集機能
ブラウザで即時に反映され、コピー＆ペーストで書き直す必要もありません。ただしChromeがインストールされている必要があります。
簡略化したhtmlを書くと自動で補完してくれます。
htmlファイルでcssのスタイルを呼び出し編集出来たり、cssファイルでカラーコードを視覚的に確認しながら編集できます。
Bracketsからインストールします。
Bracketsはデフォルトで日本語に対応しています。
画面が開いたら、「Download Brackets」ボタンを押してください。
ダウンロードしたファイルを開くとインストールが始まります。そのまま「NEXT」、「Install」を押してください。
しばらくするとインストールが完了します。「Finish」を押してください。
一番最初はヘルプファイルが開きます。基本的な使い方が掲載されているので読んでみると良いでしょう。
ちなみに末尾にはカッコイイ？Bracketsのアスキーアートが貼られています。
- ライブプレビュー
- html,CSSの入力補助機能
- クイック編集機能
- 画像を視覚で確認できる
とりあえず自分のウェブサイトかヘルプファイルを開いてみましょう。
ctrl＋alt＋PかBracketsの右上にあるイナズマボタンを押してください。Chromeが立ち上がりプレビューできます。
このままBracketsで編集するとそのままリアルタイムで反映されます。ブラウザのデベロッパーツールなどを使っていると、画面確認後再度エディタで編集しなおさなければなりませんが、ブラウザを見ながらhtml、CSS編集できるので便利です。
簡略化したhtmlを書くと自動で補完してくれます。
htmlファイルでcssのスタイルを呼び出し編集出来ます。コード上で右クリック－「クイック編集」または、ctrl＋Eで使えます。
cssファイルでカラーコードを視覚的に確認しながら編集できる機能はとても便利です！
カラーピッカーを使い色を変更することができます。
コード編集していると何の画像か分かりにくいものですが、Bracketsではマウスオーバーするだけで画像のプレビューウィンドウが表示されるので、画像の編集作業もとっても楽です。
今回ざっくりご紹介しましたが、これだけでも機能多彩ですね。
Bracketsは拡張機能も豊富にありますので、「他にもこんな機能がほしい！」などある時はきっと見つかると思いますので、是非使い込んでみてください！
今回はWebサイト内で表を作る方法を説明していきます。
<table>はHTMLのタグの1つです。
<tr>や<th>、<td>などのタグと合わせて使うことで表を作成していきます。
【各タグ説明と略称】
- <table> 表全体をはさむ。<table>〜</table>の範囲が表となる。
- <tr> 「Table Row」の略。行全体をはさむ。
(いくつ使用しても大丈夫です。) - <th> 「Table Header」の略。trの中で使います、はさまれた部分は見出しセルとなる。
- <td> 「Table Data」の略。trの中で使います、はさまれた部分が表の中身のセルとなる。
(いくつ使用しても大丈夫です。)
【HTML】
<table>
<tr>
<th>所属</th><th>名前</th>
</tr>
<tr>
<td>AKB48 チームB</td><td>渡辺麻友</td>
</tr>
<tr>
<td>NMB48 チームM</td><td>吉田朱里</td>
</tr>
</table>
【表示例】
| 所属 | 名前 |
|---|---|
| AKB48 チームB | 渡辺麻友 |
| NMB48 チームM | 吉田朱里 |
︎「見出しセルの<th>」と「中身のセルの<td>」は同じように<tr>の中に入れます。
それぞれの段「<tr>内」に含めるセルの数は合わせるようにしましょう。
表の列数と行数は、<tr> <td> <th>を使う数によって変えることができます。
例：5×5の表を作っていきます。
- <table>の中に<tr>を5つ作「<tr>の数=行数」
- 5つのうちの1つの<tr>の中には<th>を5つ作る「=見出しに」
- 残りに4つの<tr>には<td>を5つずつ入れる「=中身のセルに」
実際にコードを書いてみます。
【HTML】
<table> <tr> <th>所属</th><th>名前</th><th>順位</th><th>年齢</th><th>好きな食べ物</th> </tr> <tr> <td>AKB48 チームB</td><td>渡辺麻友</td><td>2位</td><td>23歳</td><td>唐揚げ</td> </tr> <tr> <td>NMB48 チームM</td><td>吉田朱里</td><td>16位</td><td>21歳</td><td>アサイーボウル</td> </tr> <tr> <td>NMB48 チームH</td><td>矢吹奈子</td><td>37位</td><td>16歳</td><td>キウイ</td> </tr> </table>
【表示例】
| 所属 | 名前 | 順位 | 年齢 | 好きな食べ物 |
|---|---|---|---|---|
| AKB48 チームB | 渡辺麻友 | 2位 | 23歳 | 唐揚げ |
| NMB48 チームM | 吉田朱里 | 16位 | 21歳 | アサイーボウル |
| HKT48 チームH | 矢吹奈子 | 37位 | 16歳 | キウイ |
︎1つの<tr>〜</tr>の中には<th>もしくは<td>が5つ並んで入ります。
背景の色と文字の色をCSSを使い変えていきます。
【CSS】
table th{ /*thに対して*/
color: #f39c12 ; /*文字色*/
background-color: #8ec6ff; /*背景色*/
}
table td{ /*tdに対して*/
color:#95a5a6;
}
【HTML：表示例(上記と同じもの)】
| 所属 | 名前 | 順位 | 年齢 | 好きな食べ物 |
|---|---|---|---|---|
| AKB48 チームB | 渡辺麻友 | 2位 | 23歳 | 唐揚げ |
| NMB48 チームM | 吉田朱里 | 16位 | 21歳 | アサイーボウル |
| HKT48 チームH | 矢吹奈子 | 37位 | 16歳 | キウイ |
︎<th>と<td>別々に指定すれば、上記のように違う色を指定することもできます。
背景色の指定にはbackground-colorを使います、指定すると上記のように色を変えることができます。
【CSS】
table th, table td {
border: solid 2px #000000; /*実線 2px 黒*/
}
【HTML：表示例(上記と同じもの)】
| 所属 | 名前 | 順位 | 年齢 | 好きな食べ物 |
|---|---|---|---|---|
| AKB48 チームB | 渡辺麻友 | 2位 | 23歳 | 唐揚げ |
| NMB48 チームM | 吉田朱里 | 16位 | 21歳 | アサイーボウル |
| HKT48 チームH | 矢吹奈子 | 37位 | 16歳 | キウイ |
︎<th>と<td>に対してborderを指定することで各セルに線を引くことができます。
一重線に変えるにはtableに対して「border-collapse: collapse;」と指定します。
※border-collapseは線の間に隙間を作るかどうかを決めるCSSのプロパティになります。
【CSS】
table th, table td {
border: solid 2px #000000; /*実線 2px 黒*/
table {
border-collapse: collapse;
}
【HTML：表示例(上記と同じもの)】
| 所属 | 名前 | 順位 | 年齢 | 好きな食べ物 |
|---|---|---|---|---|
| AKB48 チームB | 渡辺麻友 | 2位 | 23歳 | 唐揚げ |
| NMB48 チームM | 吉田朱里 | 16位 | 21歳 | アサイーボウル |
| HKT48 チームH | 矢吹奈子 | 37位 | 16歳 | キウイ |
︎上記のように一重線になりました。あとは線の太さを変えたり、色を変えるなど自由に編集してみましょう。
表全体の幅を変えるには、tableに対してwidthを指定します。
たとえば、表全体の幅を500pxにしたいときはtable {width:500px}と書きます。
すると各列の大きさが自動調整されて、全体の幅がぴったり500pxになります。
table{
width:500px
}
【HTML：表示例(上記と同じもの)】
| 所属 | 名前 | 順位 | 年齢 | 好きな食べ物 |
|---|---|---|---|---|
| AKB48 チームB | 渡辺麻友 | 2位 | 23歳 | 唐揚げ |
| NMB48 チームM | 吉田朱里 | 16位 | 21歳 | アサイーボウル |
| HKT48 チームH | 矢吹奈子 | 37位 | 16歳 | キウイ |
︎合計幅が５００pxになるように自動でセルの幅が調整されました。
このようにtableプロパティの<tr><th><td>を使うことで表を簡単に作成することができ、CSSでレイアウトもいろいろ変えることができます。
何かをまとめたい時に便利なので是非使ってみてください。
webフォントとは、インターネット上からフォントのデータを引き出してきてホームページ上に表示させることが出来るシステムです。
webフォントを利用すれば、閲覧者側の端末環境に依存せずにホームページ作成者が指定したフォントを確実にホームページ上に表示できます。
いくら制作サイドで多彩なフォントを持っていたとしても、ユーザーサイドのPCにフォントのデータが無いため表示が変わってしまい、指定されたものとは別のフォントで文章が表示されていました。
この問題の解決手段として策定されたのがWebフォントです。フォントのデータをネットワーク上に置き、サイト表示の際はそこからフォントのデータをダウンロードして使用するため、ユーザーの環境に左右されることが無くなりました。
今回はwebフォント簡単に利用できるGoogle Web Fontsの使い方を解説していきます。
それでは各手順を細かく解説していきます。
初めに「Google Web Fonts」を開きます。
「Google Web Fonts」は個人利用・商用利用問わず無料で利用することが出来ます。
まずフォントを選びます。
ページの右にあるカテゴリーやタイプなどから探すことが出来ます。
︎
使いたいフォントが決まったら「＋(select this font)」をクリックします。︎
ページ中ほどのHTMLをコピーして
～の間に記述します。︎
このように記述します。︎
<head>
<link href='http://fonts.googleapis.com/css?family=フォント名' rel='stylesheet' type='text/css'>
</head>
次に、適応したい箇所に以下のCSSを適応すれば完了です。
このように指定します。︎
<h2> <font-family: 'フォント名';> </h2>
【実際のHTMLコード】
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Roboto', serif;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<h2>Fate Unlimitied Blade Works</h2>
</body>
</html>
【表示例】
Fate Unlimitied Blade Works
︎このように「Google Web Fonts」を利用すれば簡単にWebフォントを実装することが出来ます。
【メリット】
- 画像化しなくていいので、作成・変更・更新が簡単に出来る。
- 画像ファイルが少なく管理も簡単に出来る。
- CSSでシャドウなどのスタイルを作れる
- テキストデータなので検索エンジンにしっかり引っかかりSEO的にも効果あり
- レスポンシブなデザインにも手軽に対応出来る。
ポイントとして一つのサイトにいくつも存在する見出しやタイトル画像を作り直す必要がなくなり、これによって、大幅な工数の削減、制作コストの削減が可能になります。
【デメリット】
- バイト数の大きいwebフォントの場合、表示が重くなる場合もある
- 日本語webフォントはお金がかかる場合が多い
- 利用規約をしっかりチェックしないと、著作権侵害のリスクを負う可能性がある
サーバーにフォントファイルをアップしそれを参照するということは、誰でもそのフォントファイルを手に入れることができる状態ということ。
つまり再配布に当たるため著作権の問題が発生します、なので著作権には注意が必要です。
これからのwebデザインを大きく変えてくれるwebフォントになるので是非使ってみてください。
あとくれぐれも著作権には注意しましょう。