に投稿 コメントを残す

【Photoshop】サイト表示用の動く画像【アニメーションGIF】

サイト内の問い合わせフォームの案内(使い方の説明)を、アニメーションGIFを使って作る方法を説明します。

まずは以下のようにスマートフォンでページを少しずつスクロールしながらスクリーンショットを撮り、これらの画像をパソコンに送ります。

次にスマートフォン(iPhone)のモックアップ画像を、フリー素材サイトからダウンロードします。
今回はfreepikというサイトからiPhone XのPSDファイル(Photoshopファイル)をダウンロードしました。

Photoshopでまずは新規作成。先ほどダウンロードしたiPhoneのモックアップPSDファイルと全てのスクリーンショット画像もPhotoshopで開き、これらを新規作成したファイルにドラッグ&ドロップします。
モックアップとスクリーンショットのサイズが合うように調整します。

スクリーンショット画像がモックアップの四隅をはみ出してしまっているので、このモックアップのレイヤーの下にスクリーンショット画像を移動します。半透明の白いレイヤーがかかっているので、これを非表示にします。スクリーンショット画像のレイヤーは順番に並べ、1番最初のレイヤーを下にし、2〜5番目のスクリーンショット画像レイヤーを非表示にします。

タイムラインを開き、フレームアニメーションを作成していきます。タイムライン上にフレームを6ほど、複製しながら作っていきます。

各フレームの表示時間がデフォルトでは0秒になっているので、これを変更します。今回はとりあえず各フレームそれぞれ2秒ずつにしたいので、全フレームを選択した状態で、フレームの「0秒」という箇所をクリック、時間を指定します。
1番目のフレームには1番目のレイヤーが表示されている状態になっています。各フレームごとに順番にスクリーンショット画像のレイヤーを表示させたいので、2番目のフレームを選択した状態で2番目のレイヤーのみを表示、3番目のフレームを選択した状態で3番目のレイヤーのみを表示、、、という要領で6番目のフレームまで進めます。
「アニメーションを再生」という、再生マークのアイコンをクリックするとアニメーションをプレビューできるので、これを見ながら時間や表示内容を確認します。

カンバスの右側部分には、各コマごとの説明文を入れていきます。新規レイヤーを作り、文字ツールで文字を書いたら、そのレイヤーを複製してレイヤーを6個にし、それぞれのフレームごとに表示・非表示を変えておきます。

「アニメーションを再生」でプレビューして表示を確認し、問題なければWeb用に保存。「最適化ファイル形式」はGIF、「ループオプション」は無限にして、「保存」をクリック。これでアニメーションGIFファイルが作られました。
このGIFファイルをSafariやChromeなどのブラウザで表示して、表示を確認してみてください。

以上になります。
↓この動画でもう少し詳しく説明していますので、よかったら見てください。

0
に投稿 コメントを残す

【WordPress】トップページに画像スライダーを入れる【MetaSlider】

スライダーを入れる方法を動画で説明

サイトのトップページによくあるスライダーを入れる方法(WordPress)を説明しています。
スライダー機能は定番なので、テーマによってはこのスライダーが付いている場合もありますが、そうでない場合はプラグインを使えばOKです。

今回紹介したWordPressのプラグイン

MetaSlider

WordPressの投稿(ブログ機能)のことで分からないことがあれば是非コメント欄からお知らせください!

0
に投稿 コメントを残す

WordPress(ワードプレス)マニュアル:投稿する(ブログを書く)方法

主な内容

  • カテゴリーを設定する
  • プラグイン「Classic Editor」を使って、投稿その他編集画面のインターフェイスを変更する
  • ブログ記事を作成、編集する(タイトル、本文、カテゴリー、アイキャッチ画像)
  • ブログ本文中に画像を挿入する
  • プラグイン「Easy FancyBox」を使って画像表示に動きを加える

今回紹介したWordPressのプラグイン

  • Classic Editor
  • Easy FancyBox

WordPressの投稿(ブログ機能)のことで分からないことがあれば是非コメント欄からお知らせください!

0
に投稿

WordPressヘビーユーザーが勧める初心者向けレンタルサーバー比較(要はエックスサーバーでOK)

これまで規模や業種問わず様々なサイトを作ってきましたが、この数年はほとんどWordPressで構築しています。その理由はSEO対策、手軽さ、自由度などあらゆる面でWordPressを使うことにより大きなメリットを得られるからです。

WordPressを使うためには、そのサイトの住所となる「ドメイン」と、サイトのデータを置く場所にあたる「サーバー」が必要となります。高度な知識を持ち、かつ保守運用が可能な環境でない限り、通常サーバーは「ホスティングサービス」つまりレンタルサーバーを利用するのが一般的です。

数あるサービスから厳選して紹介

このレンタルサーバーですが、ものすごい数の業者、サービスが存在していて、初めて使う人にとっては選ぶだけでもひと苦労。そこでこれまでWordPressサイトやブログ用に数々のレンタルサーバーを使ってきた経験から、特におすすめのサービスを厳選して紹介させて頂きます。ちなみにタイトルにある通り、結論としてはエックスサーバーの一択になります。

おすすめの対象

  • 個人ブロガー
  • 小規模サイト運営者

レンタルサーバーが必要な方というのは、主にアフィリエイト収入または趣味でブログサイトを持ちたいケースと、個人事業主や中小企業の会社またはブランド用のサイトであったり、キュレーションサイトなどウェブサービスを展開する場合になってきます。それに該当する方で、これからどこのレンタルサーバーにするか検討しているなら是非参考にして頂ければと思います。

選ぶポイント

各サービスごとにそれぞれ良い点や悪い点があり、その全てを比較するのは時間も手間もかかりますので、選ぶ前に判断基準にしたいポイントを絞ってみましょう。

料金

皆さん一番気になるところですよね。将来的に多くのアクセスを獲得できそうな見込みがあれば、まずは予算を月額1,000円〜2,000円程度に設定して、アクセスが増えてきたらグレードを上げるか、別のサービスに移転するのがいいでしょう。あまりアクセスは期待しておらず、とにかく安ければ安いほどいいなら、予算設定は月額500円前後で問題ありません。

WordPress(ワードプレス)

ブログや小規模のサイトを作るときに必須とも言えるのがWordPress。使うにあたりサーバーにインストールが必要になりますが、今の時代ほとんどのレンタルサーバーでは問題なくインストールできます。また最近はレンタルサーバーの管理画面から初心者でも簡単にWordPressをインストールできるようになっているケースも多いので、そのあたりがレンタルサーバー選びのポイントになってきます。

ちなみにWordPressというのはブログ用に開発された、世界中で使われているオープンソースのソフトウェアです。ブログだけでなく多くの企業サイトにも使われています。もしブログや自前のサイトを作るのであれば、よほど何か別のこだわりがない限りWordPressで構築することをおすすめします。

ドメイン管理

レンタルサーバーによってはドメインも一緒に管理できます。通常ブログやサイト運営にあたってはドメインとレンタルサーバーがセットで必要になるので、1つの契約で両方まとめて管理できると楽です。

独自SSL

ブラウザの上段、サイトURLが表示されている場所に鍵マークが付いていたりなかったりするのはご存知でしょうか? 鍵マークが付いていればそのサイトは「常時SSL化」されていて、付いてなければ「常時SSL化」されてないということになります。SSL化されているとユーザー(サイト訪問者)にとってセキュアであるばかりでなく、検索上位表示を狙うSEO対策上でも有利であり、これからブログやサイトを立ち上げるならSSLは必須と言えるでしょう。SSLにはいくつかの認証レベルがあり、そのレベルによって大きく金額が変わります。最近では最も認証レベルの低いSSLが多くのレンタルサーバーのサービスにて無料で利用できるようになってきているので、是非そういったサービスを選びましょう。

その他

レンタルサーバー選びの判断基準として、他にはディスク容量や転送量、安定感、速度なども本来は重要なのですが、今回そのあたりの比較は省略します。これらも含めると余計判断が難しくなってしまうでしょうし、基本的にはサービス利用料金とこれらスペックは比例しますので、機能面でこだわりたければ、それに応じて料金の高いものを選べばOKです。ページの表示速度はSEOの観点からも重要ですので、サイト公開後にアクセスも増えてきて、いよいよ検索上位表示を狙いたいとなれば、ある程度グレードの高いプランを選びましょう。

おすすめNo.1レンタルサーバー

言うまでもありません。かれこれ20年ほどレンタルサーバーを利用してきた私が自信を持って皆さんにおすすめできるのはこちらです!

エックスサーバー

エックスサーバー
タイトルや冒頭にも書きましたが、結論としてはエックスサーバーを選んでおけばOKです。その理由は以下の4つになります。

コスパが良い

料金のわりにスペックが高く、安定感があります。1契約で複数ドメインを利用するのであれば、より安く感じるでしょう。ディスクはSSDで、最も安いX10プランでも200GBという容量となっていて、このクラスでは最強と言えます。

ニーズの高い機能を完備

無料で独自SSL化できたり、WordPressのインストール(+データベースの作成)が簡単にできたり、その他セキュリティ設定など高度な知識を要する作業も管理画面上でだいたいできてしまうところが優れています。1つの契約でドメインの管理もできるのですが、こういった利便性は1年、2年と長く使うほどに実感していきます。

サポートが早くて丁寧

今まで様々なレンタルサーバーを使ってきた中で、サポートが悪いと感じたことはほとんどないためあまり比較にはなりませんが、その中でもエックスサーバーを利用していて何か突発的なトラブルが起こったときのサポートはいつも素晴らしいです。ここなら安心してデータを預けていられるという感じですね。

サービス エックスサーバー
プラン X10 X20 X30
月額利用料 12ヶ月契約:1,000円
24ヶ月契約:950円
36ヶ月契約:900円
12ヶ月契約:2,000円
24ヶ月契約:1,900円
36ヶ月契約:1,800円
12ヶ月契約:4,000円
24ヶ月契約:3,800円
36ヶ月契約:3,600円
初期費用 3,000円
ディスク容量 200GB 300GB 400GB
データ転送量(目安) 70GB/1日 90GB/1日 100GB/1日
マルチドメイン 無制限
WordPress簡単インストール
独自SSL 無料(Let's Encrypt)
無料お試し 10日間
独自ドメイン管理 ドメインはインフォパネル、サーバはサーバパネルと、2種類のコントロールパネルで管理
運営会社 エックスサーバー株式会社
公式サイト エックスサーバー

※表記は全て税別

逆にエックスサーバーを選ばないという場面もあります。私自身、これまで多くの方からサーバー選びの相談を受けてきましたが、2〜3割は結果的にエックスサーバーを使っていません。理由は単純、予算です。「とにかく安ければ安いほどいい」という場合のみ、ロリポップ!やさくらをおすすめしています。ちなみにこのサイトはもちろんエックスサーバーを使っています。



格安のレンタルサーバー

ここで紹介する2つのサービスは、これからブログやサイトを始めたい方にとっておすすめできる、業界でもトップクラスの格安料金で利用できるものです。

ロリポップ!

ロリポップ!
エックスサーバーが高いと感じた方に最もおすすめしたいのがロリポップ!のスタンダードプランです。エックスサーバーの半額以下で、WordPressのインストール機能や無料の独自SSLも付いてきます。ただしドメインは別のサービスで取得する必要があり、管理が別になるためその点は目をつぶるしかありません(慣れればそこまで面倒ではないです)。またサーバのスペック的には、安い割にはそこまで悪くないですが、アクセスの多いホームページだと重くなるので、使っていくうちに物足りなく感じるでしょう。

サービス ロリポップ!
プラン エコノミー ライト スタンダード
月額利用料 100円 1・3ヶ月契約:300円
6ヶ月契約以上:250円
1・3ヶ月契約:600円
6ヶ月契約以上:500円
初期費用 1,500円
ディスク容量 10GB 50GB 120GB
データ転送量(目安) 40GB/1日 60GB/1日 100GB/1日
マルチドメイン 20 50 100
WordPress簡単インストール
独自SSL 無料(Let's Encrypt)
無料お試し 10日間
独自ドメイン管理 ムームードメインなど別途サービスを利用
運営会社 GMOペパボ株式会社
公式サイト ロリポップ!

※表記は全て税別



さくらのレンタルサーバ

さくらのレンタルサーバ
レンタルサーバーのサービスでは老舗中の老舗です。こちらもスタンダードプランではエックスサーバーの半額以下ですがWordPressの利用も無料独自SSLもいけますので、1つの選択肢としてはアリですね。個人的には率先して使いたいと思ったことはありませんが、仕事の関係上わりと頻繁に利用しています。あまりおすすめできない理由としては、管理画面が見づらくて使いづらいという点と、サポートが微妙で、なかなか問題が解決せずものすごい時間がかかってしまったことが何度かあるという点です。ここを選ぶとすれば、安いことと、古くからサービスを続けているという安心感でしょうか。

サービス さくらのレンタルサーバ
プラン ライト スタンダード プレミアム
月額利用料 12ヶ月契約:119円 12ヶ月契約:477円 12ヶ月契約:1,429円
初期費用 953円
ディスク容量 10GB 100GB 200GB
データ転送量(目安) 40GB/1日 80GB/1日 120GB/1日
マルチドメイン 20 100 150
WordPress簡単インストール
独自SSL 無料(Let's Encrypt)
無料お試し 14日間
独自ドメイン管理 さくらのドメインなど別途サービスを利用
運営会社 さくらインターネット株式会社
公式サイト さくらのレンタルサーバ

※表記は全て税別



その他のおすすめ

これだけだと選択肢が少ないでしょうから、初心者の方に向けてあと2つだけ紹介します。どちらもコスパの面では非常に優れたレンタルサーバーです。

お名前.comレンタルサーバー

お名前.comレンタルサーバー
ドメイン取得でおなじみ、お名前.comが提供しているレンタルサーバー。ドメインをお名前l.comで取得している方におすすめです。

サービス お名前.comレンタルサーバー
プラン SD-11 SD-12
月額利用料 12ヶ月契約:980円
24ヶ月契約:900円
12ヶ月契約:1,960円
24ヶ月契約:1,800円
初期費用 無料
ディスク容量 200GB 400GB
データ転送量(目安) 不明
マルチドメイン 無制限
WordPress簡単インストール
独自SSL 無料(Let's Encrypt)
無料お試し なし(申し込み後最大2ヶ月分無料)
独自ドメイン管理 ドメインはサーバーNavi、サーバはコントロールパネルと2種類のコントロールパネルで管理
運営会社 GMOインターネット株式会社
公式サイト お名前.comレンタルサーバー

※表記は全て税別



ヘテムル

ヘテムル
エックスサーバーと同様に、ヘテムルもディスクにSSDを使っているので、エックスサーバーとの比較という点で検討するのもアリですね。私自身はあまりおすすめできないのですが、その理由としては、同じような価格帯ながらデータ転送量など様々な面でエックスサーバーが優位であることと、料金がそれほど安くないということが挙げられます。

サービス ヘテムル
プラン ベーシック プラス
月額利用料 12ヶ月契約:900円
24ヶ月契約:850円
36ヶ月契約:800円
12ヶ月契約:1,800円
24ヶ月契約:1,700円
36ヶ月契約:1,600円
初期費用 2,000円
ディスク容量 200GB 300GB
データ転送量(目安) 80GB 120GB
マルチドメイン 無制限
WordPress簡単インストール
独自SSL 無料(Let's Encrypt)
無料お試し 15日間
独自ドメイン管理 ムームードメインなど別途サービスを利用
運営会社 GMOペパボ株式会社
公式サイト ヘテムル

※表記は全て税別



総評

ここ1〜2年でこの価格帯(月額500〜1,500円前後)のレンタルサーバーサービスは、どこも無料で独自SSLを始めているということが分かりました。利用しているレンタルサーバーに物足りなさを感じるようになったら引っ越しという手もあるので、まずは安いところから使ってみるというのもいいですね。すでに独自ドメインでのブログやサイト運用実績がある方でしたら、とりあえずエックスサーバーを選んでおけば間違いないでしょう

0
に投稿

英語が分かると仕事が捗る! 場所を選ばすお金をかけずにできる勉強方法

オイゾウは主に日本国内で日本の企業様を対象にウェブサービスを提供している業者ですが、より良いサービスを追求するためには英語力が重要であると日々実感しています。
なので今回はその理由と、誰でもできるおすすめの勉強方法について紹介していきます!

英語が分かると良い理由

まずは、何故英語が必要なのかという理由から説明したいと思います。

ウェブ制作業務に英語を活かせる

ウェブサイトの制作は主にマークアップ言語のHTMLとCSSというスタイルシート、さらにサーバサイドのプログラム言語であるPHPやクライアントサイドのJava Scriptといった言語などへの理解が多少なりとも必要になってきます。
これらの言語は全て英語がベースになっています。
そもそもウェブ業界で使われる専門用語はカタカナだらけです。
さらにWordPressなどのCMS(コンテンツマネジメントシステム)を利用する機会も多いのですが、こういったCMSを利用する最大のメリットはレイアウトのベースとなるテーマや多種多様な機能を導入できるプラグインを利用する点にあり、これらのプログラムは海外の開発者によって作られていることが多く、開発者とコンタクトを取ったり、ただ利用するだけでもある程度の英語力が必要になるケースが多々あります。
ちなみに私はウェブ関連の他にAdobe製品(デザイン、レイアウト、映像、モーショングラフィックスなど)といった専門分野の知識を必要とする仕事もしていますが、これらはよりクオリティの高い業務をこなしていく上で常に新しい知識の習得やトレンドの追従が欠かせず、そのための情報のほとんどをウェブから得ています(参考書が不要という意味ではありません)。
情報源になるのはYouTubeやその他ウェブサービスで情報発信しているトップクリエイターであり、その多くは英語です。

パソコン周辺機器やカメラやその他機材選びの選択肢が広がる

私どもはウェブ制作だけでなくスチール写真や動画の撮影+編集も行なっている関係で、撮影機材やそれに付随する様々な製品を日常的に購入しています。
機材や周辺機器などにこだわり始めると、欲しいものが海外向け製品でかつ日本語のマニュアルがない場合というケースが、高い頻度で出てきます。
それは単に日本語対応しているものより安いからということもあれば、欲しいものが日本未発売だからという場合もあります。
さらにeBayや中国のTOMTOPという海外の通販サイトなどを利用して買い物することがありますが、これらは基本的に英語です。
また同じくAlibaba(バイヤーとサプライヤーをつなげるマッチングサービス)には様々な商品が業販用として売られていますが、やり取りは英語が基本になります。
英語が分からなくても当然Amazonを利用したり日本の卸売業者と取引すればいいだけの話ではあるのですが、それ以外の手段も考慮するのは、コスト面や機能面でベストな選択を望むのであれば、選択肢は多い方が有利だからです。

英語の勉強方法

そうはいってもなかなか英語を勉強する時間を取れなかったり、またそこまで必要に迫られない限り勉強するモチベーションが上がらないという方も多いのではないでしょうか。
それに「英語を話せるようになる」ためにパッと思いつく手段としては語学留学やワーキングホリデーあたりになってきますが、時間もお金もない場合はなかなか難しいのではないかと思います。
英会話スクールは(オンラインは別として)私自身がすぐに飽きてしまったことで3ヶ月ほどで辞めてしまい、おすすめしたくても全く説得力がないためここでは割愛させて頂きます。

(2019年1月4日追記)
英語を話せるようになりたいなら「フィリピン人が先生のオンライン英会話」一択! おすすめスクール3つ」という記事もよければご覧になってください。

そこで、私が実際に「お金もかけず、空いた時間で手軽にできる」日常生活で取り入れている英語の勉強方法を紹介します。

英語の音楽やドラマ、映画を鑑賞する

肩肘張らず習慣的に実践できる勉強方法としてはこれがベストではないかと思っています。
勉強と思って構えてしまうとやる気が出ないときがあったり途中で諦めてしまったりすることがあっても、それが娯楽であれば続けることは簡単です。
そもそも語学は習慣によって身につけるものですから、そういった意味ではこのように娯楽として割り切って英語を勉強すること自体、とても理にかなっているのではないでしょうか。
音楽にしてもドラマや映画にしても共通して言えるのは、学校の授業で習うことが難しい「生きたフレーズ」を身につけられることだと思います。
一例を挙げてみますが、ドラマや映画で頻繁に耳にする「Get out of here.」というフレーズがあり、これは直訳すると「ここから出なさい」です。
意訳だと「帰れ」とか「あっち行け」というようなニュアンスが(状況によって変わりますが)近いですよね。
記憶にある限りでは、こういった、耳にタコができるほどよく聞くフレーズであるほど学校などで習うことが少ない(もしくは全くない)です。
さらに言うとこのフレーズは「勘弁してよ」的な、あるいは漫才のツッコミで言うところの「なんでやねん」のような意味合いで使われることもあり、その辺の感覚は特にアメリカのドラマを観てると自然と身につくこともあります。
ポイントとしては自分の好きなものを見つけられるかどうかだと思います。
例えば音楽であれば好きな歌手や好きなジャンルに没頭するような感じですね。
映画とドラマの鑑賞も英語力をつけるには良い手段だと思いますが、個人的には映画よりドラマの方がおすすめです。
理由はドラマの方が一般的に長いので役者の話す癖や雰囲気を掴みやすく、またセリフが多いからです。
映画はドラマと比較するとセリフ以外のシーンが多いですからね。
ちなみに私は1回目に観るときは日本語字幕で内容を理解しつつ、2回目以降は英語字幕で何回も観るというやり方で英語を勉強していました。

おすすめの海外ドラマ

様々な海外ドラマを観た中で、個人的に英語の勉強にも最適で内容も面白いと思った作品を2つ紹介します。
ちなみに一度ネタを知ってしまうと面白さが半減してしまうようなミステリー系やアクション系は、何度も観るのに適してないので、よほど好きでない限りはあまりおすすめしません。

アリー my love

アメリカ合衆国のFOXで1997年から2002年まで、5シーズンにわたって放送されたコメディドラマシリーズ。 アメリカ・ボストン市にある法律事務所で働く女性弁護士・アリー・マクビールを取り巻く恋愛模様や、法廷での活躍を描いたドラマ。
ウィキペディアより

法律関係の用語が頻出するので、そういった単語や言い回しの勉強にもなります。
また法廷ドラマでありながらミュージカル要素も盛り込まれていて、大物歌手がたくさん出てくるのも見どころです。
(英語の勉強という意味で)唯一の難点としては、セリフが誰よりも多い主役の女性弁護士アリーがとても早口なところですね。


バリー・ホワイト「My first, my last, my everything」を頭の中で流しながら踊るこのシーンは何度観ても笑えます!

フルハウス

アメリカで製作されたシチュエーション・コメディ。ABCテレビで1987年から1995年にかけて全192話が放送された。制作はロリマー・テレビジョン。妻を事故で亡くした男が、男友達に助けられながら子育てをしていく物語である。
ウィキペディアより

シチュエーションコメディ=シットコムの代表的なシリーズ。
前述のアリー同様日本でも放送されたのでご存知の方も多いかと思います。
オルセン姉妹が演じたミシェルの「You got it, dude.」(了解だぜ)や、ミシェルの姉ステファニーの「How rude.」(ほんと失礼ね)、お笑い担当ジョーイの「Cut it out.」(やめてくれ)などキャストごとに決め台詞があったりして、そのあたりも英語の勉強をしながら楽しめたりします。


ミシェルの決め台詞。

YouTubeで海外のニュースやドキュメンタリー、スポーツなどを観る

英語を勉強したい人にとっては最高のツールでしょう。
何しろお金が全くかかりませんし、スマホとWI-FIさえあればいつでもどこでも観れるのですから。
もちろん英語のレッスンを目的としたチャンネルも良いのですが、個人的には自分の興味あるトピックを観るのがおすすめです。
例えば私はバスケが好きなのでNBA選手のインタビューや解説者のトークなんかを観て、日本にいながら日常的に英語のヒアリングを習慣づけています。


今シーズンのMVPはヒューストン・ロケッツのジェームズ・ハーデンが受賞しました。
感動的なMVP受賞スピーチのはずですが、見た目は完全に麻薬組織の元締めですね・・・。

それ以外だと、例えばウェブクリエイターや映像クリエイターによるチュートリアル動画などもよく観ますが、日本語だけだと入ってこない情報をいち早く得ることができるので重宝しています。


このチャンネルは字幕付きなので、英語が苦手な人にもおすすめです。

英語で人前で話すときの参考として、また自己啓発にも興味があるので、政治家や経営者が行なうスピーチやプレゼンテーションの動画もよく観る機会があります。


2005年、スタンフォード大学の卒業式で行なわれたアップル創業者のスティーブ・ジョブズによる伝説のスピーチ。
最後の「Stay hungry, stay foolish.」はとても有名なフレーズです。
こういった広く知られているスピーチだと、日本語字幕付きの動画もあったりします。


全世界で2,000万部売れたビジネス書「7つの習慣」の作者スティーブン・R・コヴィー博士が、習慣1「Be proactive」で大学教授として、また企業コンサルタントとして自身の経験をもとにしたエピソードを話しているシーンです。
主体的ではない人を皮肉りながらユーモアを交えて話てくれたりと、固い話も聞きやすくなっています。
字幕も付いてるのでよかったらご覧になってください(自動翻訳なのでところどころおかしい部分もあります)。

最後に

補足として私が学生時代に好きだった作家に国際ジャーナリストの落合信彦氏がいます。
その落合氏のエピソードとして、まだ日本で学生だった頃、アメリカの大学に入学するために英語を猛勉強したそうですが、その方法というのが確か「日英辞書を片っ端から読み、読んだページは破って捨てる」というものだったと記憶しています。
背水の陣作戦とでも言うべきでしょうか、破って捨てたらもう読み返せないですから、それはもう死に物狂いで覚えたのだろうと容易に想像できます。
この話は半世紀以上も前のことなので、その頃と比べれば現代は何かと便利な世の中です。
今ならスマホを持ってるだけでいつでもどこでも簡単に英語を日本語に翻訳できますから、そんな勉強方法に価値を見出だすのは難しいことかもしれません。
結局のところは便利かどうかではなく、英語を勉強して身につけるのも、またどんなするにもその人の気持ち次第ということでしょう。

英語圏ではない国の人と話すとき、暗黙の了解で英語に

一度でも海外に旅行などで行ったことがある方なら分かると思いますが、まず多くの国において、あらゆる言語の中で英語が圧倒的に重要であるとともに、途端に日本語が通用しなくなってしまうことを痛感しました。
これは仕事でも旅行でも、また今の時代は海外に直接行かなくてもインターネットを通じて世界中の人とコミュニケーションを取れますが、その意味で多くの人にとっての共通言語である英語がいかに重要であるかということにもつながります。
例えば以前中国の方と取引をしていたときのことですが、相手は中国語しか話せないので通訳が必要になります。
日本語が話せる中国人の方がいるときは問題ないのですが、二ヶ国語以上話せる中国人の多くは英語が話せる場合が多かったのが実感としてありました。
日本から通訳の人を連れて行くか、現地で見つけるのもアリですが、当然コストがかかりますので自分が英語を話せるに越したことはありません。
中国以外だと香港、シンガポール、マレーシア、タイ、フィリピンなど東南アジアの国では、日系企業との取引でなければ(通訳や現地アテンドスタッフがいないケースでは)通常はやはり英語で話すことになります。
また以前、サラリーマンをしていた20代の頃にアメリカ出張していた際は、ヨーロッパをはじめ世界中から人が集まる国際的な展示会に参加することが多かったのですが、英語圏ではない国の人達がとても流暢に英語を話しているのを目の当たりにし、驚きとともに自分自身にがっかりしたことをよく覚えています(その頃はカタコト英語しか話せませんでしたので)。
インターネットを誰もが手軽に利用できるこの時代においては、言語を日本語に限定してしまうということが、得られる情報自体を大きく限定してしまうことを意味します。
ビジネスにおいて情報収集が全てではありませんが、得られる情報の質とスピードに比例して、成功の確率が引き上げられることは間違いありません。

個人的には英語を理解することが仕事に限らず生活そのものを豊かにしてくれると実感しているので、仕事をする上で英語と直接的な関わりがない人にも是非英語の勉強をされることをおすすめします!

0
に投稿 コメントを残す

独自SSLって何? 今こそホームページをHTTPS化するときです!

独自SSLとは

SSLはSecure Socket Layer(セキュア・ソケット・レイヤー)の略で、インターネット上のデータ送受信において、情報を暗号化する世界標準のセキュリティ技術のこと。
例えばネットショッピングするときに自身の住所や氏名、電話番号、パスワード、ID、クレジットカード番号などといった個人情報を送信することがあるかと思いますが、その情報データを暗号化することで、第三者からの不正な盗聴や改ざんなどから守ります。
独自SSLを導入しているサイトかどうかは、通常だとブラウザ上部に表示されているURL(http://〜で始まる文字列)で判別できます。

http://xxxxxx.com

このようにURLの始まりが「http」である場合はSSLに対応してないサイトです。

https://xxxxxx.com

URLの始まりが「https」となっていればSSLの暗号を通信しているということになります。


緑色の鍵マーク、「保護された通信」の記載、「https」が緑色になっていれば、このサイトはSSL化されたサイトという証明になります。

サイトにSSLを導入するためには「SSLサーバ証明書」が必要となり、認証のレベルなどによって様々な種類があり、基本的にグレードが高いほど高額になります。

例として

ジオトラストの「トゥルービジネスID」が年間55,000円
グローバルサインの「企業認証SSL」が年間59,800円
シマンテックの「EV SSL証明書」が年間162,000円

※金額は記事公開時のものになります。


このようにサービスを提供している会社やそのサービス内容によって変わるとはいえ、決して安くはありません。
とは言ってもここ1〜2年で急激にサイトのSSLが進んでおり、実際にオイゾウでも多くのクライアント様よりSSL導入についてのお問い合わせを頂いています。

独自SSLを導入するメリット

その前に独自SSLではなく利用しているレンタルサーバのサービスの1つとして共有SSLというものがあり、これはSSL証明書を独自か複数のユーザーで使用するかの違いがあります。
共有SSLの場合は無料で使えることがほとんどですが、URLが変わってしまいます。
例えば「https://xxxxxx.com」の場合、「https://xxxxxx.レンタルサーバのドメイン.com」のように変わってしまうので、サイト訪問者からすると「フリードメインを利用しているサイト」と見られかねません。
そのためには独自SSLを導入することが望ましいです。
なお余談ですが、アメリカ政府は2016年内に政府関係機関全てのサイトを常時SSL化することを義務付けました。
また、検索エンジン最王手のGoogleは2014年「https化されたサイトを優遇する」ことを公式に発表しています。
ということで独自SSL化がもたらすメリットをまとめると、以下の3点となります。

  • サイト訪問者に安心感を与えることができる
  • データの送受信時における不正な盗聴や改ざんを防ぐ
  • SEO対策上、良い影響がある

この1〜2年で独自SSLが導入しやすい流れに

SSL化が重要とは言え、以前は決して安くない独自SSLを導入することが小規模サイトにとっては非常にハードルの高いものでした。
ところがこの1〜2年の間に状況はガラッと変わり、レンタルサーバ各社が独自SSLを無料または少額で提供し始めました。
ですのでもし現在ご自身のサイトで利用しているレンタルサーバがこの独自SSLに対応しているようであれば、SSL化することをおすすめします。
なお、サイトをSSL化する上で気をつけておきたいのは、トップページだけでなくサイト内全てのページをSSL化(常時SSL化)させる必要があるということです。

独自SSL利用可能なおすすめレンタルサーバ

レンタルサーバ各社それぞれ、独自SSLを導入した場合の料金を紹介します。

エックスサーバー

ブランド名:Let’s Encrypt
料金:無料
対応プラン:全プラン対応(X10、X20、X30)

さくらのレンタルサーバ

ブランド名:Rapid SSL
料金:1,620円(1年)
対応プラン:全サーバープラン対応、他社でも利用可

お名前.comレンタルサーバー

ブランド名:アルファSSL
料金:100円(1ヶ月)
対応プラン:SD-11、SD-12

ロリポップ!

ブランド名:Let’s Encrypt
料金:無料
対応プラン:全プラン対応(エコノミー、ライト、スタンダード、エンタープライズ)

mixhost

ブランド名:COMODO
料金:無料
対応プラン:全プラン対応(エコノミー、スタンダード、プレミアム、ビジネス、ビジネスプラス)

これからサイトを始める方はSSL化が必須

一度作ったホームページをSSL化させるのは結構大変です。
ですので新規でホームページを始める場合は、上記で紹介したようなサーバをレンタルし、公開時にはSSL化していることが望ましいでしょう。
オイゾウでは全てのクライアント様に対して独自SSL化を必ず推奨しておりますので、もし独自SSL(HTTPS化)についてご不明な点や移行を検討されている場合は是非お気軽にお問い合わせください!

0
に投稿 コメントを残す

ワードプレスでサイト運営している方はブルートフォースアタックに要注意

ホームページの放置はとても危険です

WordPress(ワードプレス)を利用してホームページやブログを運営している方も多くいらっしゃるかと思いますが、サイトを放置しておくと様々なリスクがあります。
WordPress自体またはプラグインの脆弱性を突いたブルートフォースアタック(総当たり攻撃)で不正ログインされると、サイトが改ざんされたり、悪意のあるスクリプトを埋め込まれたり、バックドアを仕掛けられたりということが起こりうるのです。
そうなってしまったらサーバ上のデータを初期化する必要があり、全データを一度消去しなければなりません。
そんなときにもしバックアップを取ってなければ、もうお先真っ暗です・・・。
いまや世界中で1/4のサイトがWordPressで作られているということもあり、シェアが大きいため狙われやすいのも事実です。
かといってWordPressほど汎用性の高いCMSはきっとないでしょうし、今の時代は個人にしろ法人にしろ何かしらウェブで情報を発信するのが当たり前な時代ですので、これは避けて通れない問題なのではないでしょうか。
このようなトラブルを未然に防ぐために、是非ご自身でできる対策はしっかりと行なって頂くことをおすすめします。

具体的な対策方法

定期的にアップデートを行なう
とても重要です。
WordPressのバージョンだけでなく、インストールしている各プラグインも同様に、できるだけこまめにバージョンアップするようにしましょう。
また、普段使ってないプラグインは削除した方が良いですね。
ユーザー名やパスワードを複雑にする
ブルートフォースアタックはユーザー名とパスワードをランダムに組み合わせてログイン試行しますので、もし現在のユーザー名やパスワードがシンプルなのであれば、できるだけ長くしたり、大文字小文字や数字・記号を組み合わせるなど変更しておきましょう。
パスワードジェネレーターなどを利用すると便利です。
ログイン試行回数を制御する
ログイン試行に何度か失敗するとログインできなくなるようにするプラグインを導入することで、数で勝負の無差別攻撃を防げます。
ログイン時に画像認証を必須にする
こちらもプラグインによって利用できます。
例えば管理画面にログインする際、ユーザー名とパスワードに加えて画像が表示され、その画像に書かれた文字を正しく入力しないとログインできないといった機能です。
これによりプログラムではログインできないようにすることができます。
海外からのログインを不可にする
ブルートフォースアタックは海外のサーバーからがほとんどですので、海外からのログインをできないように設定するだけでセキュリティレベルがかなり上がります。
設定方法については、ご利用されているサーバのサポートにお問い合わせください。
定期的にバックアップを取る
ブルートフォースアタックへの対策ではありませんが、もしサーバ上の全ファイルとデータベースのバックアップを取っていれば、万が一のことが起きた場合でも、バックアップを取ってないよりは被害を抑えることができます。
全てのファイルとデータベースファイルを消去しなければならなくなってしまうケースも考えられますので、そのときはバックアップを取ってないと全て最初からホームページ(またはブログ)を作り直しということになってしまいます。

他にもやった方が良い対策方法はいくつかありますが、少なくとも上記に紹介したことを行なうだけでセキュリティのレベルも格段に上がりますので、もしご自身でWordPressを利用してホームページやブログを運用している場合は是非試して頂きたいです。

0
に投稿 コメントを残す

ホームページの階層構造〜ディレクトリでファイルを整理

ホームページの階層構造〜ディレクトリでファイルを整理

ディレクトリ=フォルダです

こんにちは、ホームページ制作のオイゾウです!
HTMLとCSSについての理解が深まってきたところで、ここからはパソコン内で作ったそれらのファイルをインターネット上に公開するための方法を説明していきたいと思いますが、その前にオイゾウのホームページ講座で学んでいる篠田さんとジョージさんを招き、「ホームページの構造」についてお話ししたいと思います。

篠田さんプロフィール

川越市内の某お土産屋さん、68歳。
趣味の家庭菜園をテーマにしたホームページを立ち上げるため勉強中。
Apple製品に目覚め、携帯電話はiPhone、PCはMacBook Airを愛用。

ジョージさんプロフィール

川越市内で理容室を営む52歳。
理容師として30年以上の経験を世の中に伝えるため、店舗ホームページを作りつつブログで情報発信する予定。

no name
HTMLとCSSについては理解できてきましたか?
no name
だいぶ分かるようにはなったけど、あとは実際にやってみて覚えていければいいかな。
no name
あ、そうそうアマゾンで本を買ったよ!

no name
篠田さん、前向きにがんばってますね!
どれどれ、アマゾンで検索と・・・
ホームページ入門書部門で売れ筋ランキング1位じゃないですか!
no name
読んでたらすぐにでもホームページ作れるような気がしてきたよ。
no name
っていうか篠田さん、アマゾンで買い物できるようになったんだ。
no name
最近はコレ(iPhone)ね。
本は結構アマゾンでいろいろ買ってるよ。
カミさんの影響でベニシアさんにハマっててさ、この前はこの「ハーブ便り」買ったけど、すごい勉強になるんだよね!
これからハーブを育てようと思ってるよ。

no name
篠田さんがベニシアさんにハマるなんて意外ですね!
読み終わったら貸してください(笑)。
ところでかなり話がそれたので戻しますが、では作成したHTMLやCSSファイル、それに画像を用意して、それらをインターネット上に公開するためにはどうすればよいと思いますか?
no name
サーバにアップするんじゃないかな?
no name
正解です!
そのためにはFTPという通信手段を行なう必要があるのですが、でもその前に覚えておいてほしいことがあります。
それは「ホームページの構成」です。
まずは以下の図を見てください。

ディレクトリを使わず理路整然としてない状態

no name
ここではフォルダのことをディレクトリと呼ぶことにします。
意味は同義と思っておいてもらえればとりあえずは問題ないです。
これらのファイルがサーバ上にあると考えて、トップページである「index.html」の他に2つのHTMLファイル、そして1つのCSSファイル、あと6つの画像ファイルが同じ階層に並んでいます。
今のこの状態というのはかなりファイル数の少ないホームページと言えますが、実際にはもっとファイルの種類も数も増えますので、その場合にディレクトリを使うことで構成をもっと理路整然とした階層による構造にする必要があります。
no name
そうしなければならない理由があるの?
no name
厳密に言えばこれでも問題なく表示することは可能ですが、一方でSEO対策(検索エンジからの評価が上がる)にもなります。
また、サーバに上げたこれらのファイルを1人で管理すると考えれば気にする必要はありませんが、複数人で管理するとなれば、やはり分かりやすい構造であるべきですよね。
さらに言えば、これは今後の話になってしまいますが、WordPressなどのCMSで構築する場合は、もっと深い階層になっていますので、この「階層構造」を理解できてないといけません。
ということで、ここでは2つの新たなディレクトリを作り、そこにCSSファイルと画像ファイルをそれぞれ分けて入れてみたいと思います。

ディレクトリを使って理路整然としているホームページ構造

no name
こうすることで、ファイルの種類ごとにディレクトリにまとめられ、とてもすっきりとした分かりやすい構造になるというわけです。
ちなみに決まりはありませんが、CSSディレクトリのディレクトリ名は「css」、画像ディレクトリのディレクトリ名は「images」とするのが一般的です。
また、HTMLファイルがもっと増えてくれば「index.html」以外をディレクトリに入れて1つ下の階層にした方が良いですね。
例えば「osusume.html」というHTMLファイルについて説明すると、まず今の階層(同じ場所)に「osusume」というディレクトリを作り、このディレクトリに「osusume.html」を入れて、ファイル名を「index.html」に変えます。
そうすることでとても分かりやすい構造になります。
no name
その「index.html」っていうのは、このファイル名じゃないといけないとか、何か決まりでもあるの?
no name
特にそういうわけではないですが、その階層の中でもし「index.html」というファイルがある場合は、そのファイルを表示するという仕組みになってるんです。
no name
じゃあさ、逆にその階層に「index.html」がない場合は?
no name
その場合、よく見たことがあると思いますが「404 Not Found」(ページが見つかりません)というエラーが出ます。
具体的に説明すると、ジョージさんが「http://oizo.jp」にアクセスしたとしますよね?
すると、実際には「https://oizo.jp/index.html」を表示しているんです。
なので、「https://oizo.jp/index.html」にアクセスしても同じことなんです。
ですがもしルートディレクトリ(一番上の階層)に「index.html」がなかった場合、「http://oizo.jp」にアクセスしても「404 Not Found」エラーになってしまいます。
no name
なるほど。
とにかく、ディレクトリを作って、CSSなら「css」というディレクトリに、画像なら「images」というディレクトリに入れて、トップページ以外のHTMLもディレクトリにした方がいいってことだよね。
この解釈で合ってる?
no name
はい、バッチリです!
では次回はこの流れで「相対パス」についての説明をしていきますので、引き続きよろしくお願いします!

ところで話は少しそれますが、ファイルとフォルダに関しては以前「ファイルとフォルダの関係、パソコンの整理整頓」で詳しく書いていますので、もしよかったら併せて読んで頂ければと思います。

0
に投稿 コメントを残す

CSSのプロパティ解説~背景編(色・パターン・画像)

CSSのプロパティ解説~背景編(色・パターン・画像)

今回は背景の装飾をします

こんにちは、ホームページ制作のオイゾウです!
前回「CSSのプロパティ解説~文字編(テキスト・フォント関連)」では文字を大きくしたり色を付けたりなど、文字に関するスタイルを指定する方法を紹介しましたが、今回は背景編ということで、色を付けたり画像を入れたりする方法です。
前回の文字と今回の背景を組み合わせるとかなりホームページのデザインも本格的な雰囲気に仕上がっていきますので、是非覚えましょう!

背景に色を付ける

背景は、何も指定しなければ色は白(#ffffff)です。
この背景に色を付けたり、グラデーションにしたり、画像を入れたりすることができますので、その方法を説明します。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html]

色を付ける

[html highlight="2"]p {
background-color: #957171;
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

背景をグラデーションにする

[html highlight="2"]p {
background: linear-gradient(#957171, #e7d1d1);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

「background」というプロパティで、値は「linear-gradient(色1, 色2)」というように指定します。
色1が上で色2が下です。
値を「linear-gradient(●deg, 色1, 色2」(●に角度を数値で入れる)にして角度をつけたり、値を「radial-gradient(色1, 色2)」にして円形グラデーションにすることもできます。

背景を画像で表現する

以下のようなもみじの写真画像を使い、背景に画像を入れる方法を説明します。


画像のファイル名;bg_momiji.jpg

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_momiji.jpg);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

背景をパターン(柄)で表現する

先ほどのように画像を入れるのですが、今回は写真ではなくお部屋の壁紙のような柄にします。
以下のような小さい画像を使います。


画像のファイル名;bg_pattern_sample.png

[html highlight="2"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
color: #ffffff;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

このように繰り返し表示され、柄の背景になります。

背景に指定した画像を繰り返し表示しない

「bg_pattern_sample.png」という画像は小さかったので、p要素の空いているスペースを全て埋めるように繰り返し表示されました。
今回は繰り返し表示させず、さらに表示位置を指定します。

[html highlight="2,3,4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 50px 50px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

解説

「background-repeat: no-repeat;」と指定することで、繰り返し表示されなくなります。
さらに「background-position: 50px 50px;」とありますが、これは背景の位置が「左からの距離 上からの距離」です。
ただこれだと文字の背景に画像が中途半端な状態で入っていてとても違和感があるので、位置を変えてみます。

[html highlight="4"]p {
background-image: url(https://oizo.jp/sample/images/bg_pattern_sample.png);
background-repeat: no-repeat;
background-position: 0 25px;
padding: 20px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

応用編・見出しを目立たせる

ここまで来れば、CSSでかなり表現できる幅も広がってきたことでしょう。
そこで最後に、文章の見出しをちょっと装飾してみたいと思います。

ベースになるHTMLはこちら

このHTMLにスタイルを指定していきます。
[html]<p>当店の芋まんじゅう</p>[/html]

使用する画像


この画像を背景に指定し、アイコンのように表示させます。
画像のファイル名;icon_manju.png

CSSの記述

[html]p {
background-image: url(https://oizo.jp/sample/images/icon_manju.png);
background-repeat: no-repeat;
background-position: 10px 10px;
background-size: 30px 30px;
height: 50px;
padding: 6px 50px;
border-bottom: solid 1px #919191;
border-right: solid 10px #b18247;
color: #6a222f;
font-size: 1.4em;
font-weight: bold;
}[/html]

このように表示されます

当店の芋まんじゅう

まとめ

いかがでしたでしょうか?
この応用として、画像を使わずにパターンで表現したり、写真画像にグラデーションを重ねたり、もっとこだわったデザインにすることもできますので、いろいろとご自身で試行錯誤しながらチャレンジしてもらえればと思います!

0
に投稿 1件のコメント

CSSのプロパティ解説~文字編(テキスト・フォント関連)

CSSのプロパティ解説~文字編(テキスト・フォント関連)

文字のスタイルを指定しよう

こんにちは、ホームページ制作のオイゾウです!
CSSでスタイルを指定するとどんな感じになるかはある程度ご理解頂けたかと思いますので、ここからは実際にどのようなプロパティがあるのか、そしてそれらを指定することでどんなことができるかということを、プロパティの種類ごとに解説していきます!

フォント

文字のフォントを指定します。
日本語のホームページになるかと思いますので、その場合は日本語と英語を使うことになりますから、両方を指定しましょう。
さらに言うとユーザー(訪問者)が使用するデバイス(パソコンやスマホ、その種類)やOS(オペレーションシステム)によって表示できるフォントが変わってきますので、複数のフォントを書いていきます。

一般的なフォントの指定

[html]p {
font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}[/html]

備考

font-familyプロパティにはルールがあり、まず記載した順番にフォントが適用されるので、優先的に表示させたいフォントの順に書くようにします。
それから値(フォント名)に全角文字やスペースが入っている場合は必ず前後を”(ダブルクォーテーション)または’(クォーテーション)のどちらかで囲んでください。
今回のように複数の値を指定する場合は、それぞれの値を,(カンマ)で区切ります。
ここではp要素でフォントの指定をしましたが、通常はbody要素でフォントの指定をまとめてします。

文字のサイズ

文字を大きくしたり小さくしたりします。

1.6倍にする(大きくする)

[html]p {
font-size: 1.6em;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

0.8倍にする(小さくする)

[html]p {
font-size: 0.8em;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

ここでは値の単位を相対指定のemにしましたが、他に%(パーセント)やpx(ピクセル)、絶対指定のpt(ポイント)を使うこともあります。
また値はsmall(小さい)やlarge(大きい)といった絶対指定から、smaller(小さく)やlarger(大きく)といった相対指定で指定することも可能です(実際にはあまり使いませんが)。

文字に色を付ける

RGBで文字に色を指定することができます。

RGBで指定する

[html]p {
color: #7a4f64;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

色の名前で指定する

[html]p {
color: green;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

RGBとは、光の三原色と呼ばれるものです。
詳しくは「ウェブデザインに必須・初心者のためのCSS基礎知識」の「色はRGBで指定する」で解説していますので、よろしければご覧になってみてください。
色名で指定する場合、16色から選ぶことができます。詳しくは「ホームページのデザインを決めるCSSを実際に書いてみよう」の「文字が読みづらいので、色を変えたい」をご参照ください。

文字を太くする

文字を太くして強調させるにはいくつかの方法があります。

font-weightプロパティ

[html]p {
font-weight: bold;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

b要素

[html]<p>小江戸川越名物のお芋を<b>あんこの中にたっぷり入れた</b>、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html] このように太字にしたい箇所をbタグで囲むと、

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

strong要素

[html]<p>小江戸川越名物のお芋を<strong>あんこの中にたっぷり入れた</strong>、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?</p>[/html] 今度は同じ箇所をstrongタグで囲むと、

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

まず、font-weightプロパティは「normal」で標準に、「bold」で太文字になりますが、100〜900の9段階で文字の太さを変えることもできます。
ですが実際には2段階(normalもしくはbold)で表現されるというのと、この数値で指定することはほとんどありません。
それからb要素とstrong要素はHTMLのタグですのでCSSから話が少し反れましたが、太文字にする方法はこのように何種類かあります。
文章中の一部分を太文字にするのであれば、前述のようなインライン要素(改行されない)であるbやstrongを使います。
bとstrongは見た目の効果は同じですが、bは見た目以外の意味を持たないのに対し、strongは重要であるという意味を持ちますので、SEOに効果があります。
ただし多用しすぎるのは良くないので、重要な意味があるならstrongで、特に意味はなく単に目立たせたいだけならbにするなど、うまく使い分けましょう。

表示位置を揃える

通常の左揃えや上揃えだけでなく、中央揃えや右揃え、下揃えにすることができます。

水平(横)方向に表示位置を揃える(中央揃え)

[html highlight="2"]p {
text-align: center;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

水平(横)方向に表示位置を揃える(右揃え)

[html highlight="2"]p {
text-align: right;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

垂直(縦)方向に表示位置を揃える(中央揃え)

[html highlight="2,3"]p {
vertical-align: middle;
display: table-cell;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

垂直(縦)方向に表示位置を揃える(下揃え)

[html highlight="2,3"]p {
vertical-align: bottom;
display: table-cell;
background-color: #f8f3f5;
height: 200px;
}[/html]

小江戸川越名物のお芋をあんこの中にたっぷり入れた、美味しくてヘルシーな芋まんじゅう。しのだ屋自慢の商品です。お土産にいかがですか?

備考

揃えた位置が分かるように背景に色を付け、p要素の高さをちょっと大きめに取りました。
vertical-alignプロパティは、text-alignプロパティと違い、今回のp要素のようなブロック要素には適用させることができません。
インライン要素やテーブルセルにのみ適用されるプロパティになります。
今回のようにp要素にvertical-alignを適用させる場合は「display: teble-cell;」と記述してテーブルセルに表示形式を指定することによって使うことができるというわけです。
標準の状態である左揃えにしたい場合は「text-align: left;」、上揃えにしたい場合は「vertical-align: top;」になります。

行間の高さを指定する

行の高さを調節することができます。

行間を1.6にする

[html]p {
line-height: 1.6;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

行間を1.8にする

[html]p {
line-height: 1.8;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

行間を2にする

[html]p {
line-height: 2;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

備考

値が1だと行と行の間が全くない状態、値が2だと行と行の間が行の高さ1つ分空きます。
状況によるので一概には言えませんが、1.7〜1.8が読みやすいですね。
今回、値には単位を入れず数値だけで指定しましたが、例えば「1.8em」といった感じでemや%などの単位で指定することも可能です。
ただしline-heightプロパティに関して、通常は単位を使わないことをおすすめします。
詳しくは「ホームページのデザインを決めるCSSを実際に書いてみよう」の「行間をもっと広くしたい」をご参照ください。

文字に線を引く

下線や取り消し線などを引くことができます。

下線を引く

[html]span {
text-decoration: underline;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

取り消し線を引く

[html]span {
text-decoration: line-through;
}[/html]

素材の持つ素朴な味わいを最大限に引き出し、安心して食べて頂くために、地元で採れた無農薬の食材を厳選して使用しております。当店の芋まんじゅうは、上品な甘さとやさしい口溶けが自慢。緑茶や抹茶によく合います。12個入りで販売中、お取り寄せもできますので是非ご利用ください。江戸時代から続く伝統は崩すことなく、今の時代に合ったテイストを取り入れて、温故知新の味を実現しました。

備考

ここでは分かりやすくするためにp要素の中にインライン要素であるspan要素を入れ、そのspan要素にスタイルを指定するという形で線を引きました。

他にもいろいろありますが・・・

いかがでしたでしょうか?
実を言いますと、CSSで文字に関連するプロパティはここに紹介したもの以外でもいろいろとあるのですが、OSやブラウザ、またそれらのバージョンによっては対応してなかったり、バグが発生してしまう可能性があるものなどもあり、その上であまり使用頻度も高くないであろうものはあえて紹介しませんでした。
初心者の方にとって、文字に関しては今回紹介した内容をしっかりと覚えて頂ければ十分だと思いますが、もしどこかのホームページを見て「こんなことがやってみたいけどやり方が分からない」というデザインやレイアウトがありましたら、できる限りお答えしたいと思いますので是非直接お問い合わせください!

0