
ワードプレスで「CSS(スタイルシート)」の基本を確認してみよう。「CSS(スタイルシート)」とは何か。今回は、ワードプレスで「CSS(スタイルシート)」の基本を確認してみようについて書いていきます。
「CSS」を使えば「HTMLタグ」や「クラス」に対し、自由にデザインを加えることができます。そうした高度なデザインを実現する上で大切になる「CSS」の基本的な事項を改めて確認してみましょう。
結論を先に話ししておきます |
実を言うと、当ブログ(miブログ)でも「トップページ」や「記事内」に於いて、ところどころ「CSS」を用いてカスタマイズしている箇所があります。パッと見ただけでは分からないと思いますが。
「CSS」は「Cascading Style Sheets/カスケーディングスタイルシート」と言います。「CSS」は、Webページのスタイルを設定するコードを意味し、HTMLのようにマークアップ言語ではありません。
「CSS」は、スタイルシート言語であり、HTMLの要素を選択的にスタイルする為に使うものです。各言語についても後程解説していきますので目を通してみて下さい。では言語の種類を見てみましょう。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
Webメディア・ブログ向け記事作成代行サービス!「ALVO」。 |
目次はコチラ
【言語の種類(動画付き)】
この章では「マークアップ言語」「スタイルシート言語」それぞれ解説していく訳ですが、その他にも「プログラミング言語」についてもお話ししていきます。どれも難しく感じるかも知れません。
「マークアップ言語は4つ」「スタイルシート言語はCSSのみ」「プログラミング言語は5つ」解説していきます。 |
ではここで動画を視聴してみて下さい。題して「主要プログラミング言語16選!特徴と初心者向けおすすめ度まとめ」です。
【マークアップ言語とは(動画付き)】
内容が難しいので、サラッと読んで頂いても大丈夫です。「マークアップ言語」とは、Webサイトにおける文章のテキストに対し、目印付けをおこない、コンピューターに認識させる為の言語を言います。
文章を「タグ」と呼ばれる要素で記述し、分類した後、装飾をおこなっていきます。コンピューターからしてみれば、文章をそのままアップロードされても、各単語や文脈の意味を適切に理解することはできません。
ではここで動画を視聴してみて下さい。題して「【マークアップ言語1】」です。他には「マークアップ言語2」「マークアップ言語3」「マークアップ言語4」「マークアップ言語5」があります。
HTML(ハイパーテキスト・マークアップ・ランゲージ)とは
全世界で一番利用されているであろう「マークアップ言語」の一つです。「HTML」は、幾度となくバージョンアップがおこなわれており、その度、使いやすくなっていることは言うまでもありません。
「HTML」は、初めからタグの各役割が決まっているのが特徴でもあり、シンプルなマークアップが可能となっています。また「画像」や「動画」を外部から貼り付けることも十分可能となります。
XML(エクステンシブル・マークアップ・ランゲージ)とは
「XML」を使用すると、共有可能な方法により、データを保存することができます。「XML」は「Webサイト」「データベース」「サードパーティーアプリケーション」など、情報のやり取りをサポートします。
また、事前に定義されたルールを使用した場合、受信者は、これらのルールを使用してデータを正確且つ効率的に読み取ることができる為、任意のネットワーク上でデータを「XML」ファイルとして送信できます。
XHTML(エクステンシブル・ハイパーテキスト・マークアップ・ランゲージ)とは
「XHTML」は「HTML」と「XML」を掛け合わせた言語です。文法扱いは「XML」仕様です。ちょっとややこしいですが。通常は「HTML」でタグ付けし、必要な部分は「XML」でタグ設定をおこないます。
また「XML」に基づく必要があるので、ソースコードの管理がしやすいメリットも挙げられますが「XHTML」を使うほどのメリットがない限りは、通常の「HTML」を使った方が安心と言えば安心です。
SGML(スタンダード・ジェネラライズド・マークアップ・ランゲージ)とは
「XML」といった「マークアップ言語」の基になった言語です。どう言うことかと言うと、元は、Webサイト用ではなく、印刷物や電子文書などの管理をする為に作られた「マークアップ言語」な訳です。
深掘りすると、文書の制作や管理など、世界の政府関連機関や企業に普及し、使われていた訳です。ですが、構造が非常に難しく、Webサイトにそのまま転用するにも難点が多く、派生して策定されたとのことです。
【スタイルシート言語とは(動画付き)】
「CSS」は、Webページのスタイルを指定する為に利用される言語ですが、スタイルシートとは何だと思いますか?それは、構造化された文書などの表示形式を制御する為の仕組みを指す訳です。つまり。
「CSS」は「構造化された文書=HTML」の「表示形式=スタイル」を指定する言語となっています。また「HTML」に適用する場合、同じ要素に対して複数のスタイルを指定する場合もある訳です。
ではここで動画を視聴してみて下さい。題して「【CSS入門講座】HTMLとCSSの基本を解説!WEBデザインの言語CSSを理解しよう」です。
ワードプレス制作を簡単にする!「プログラミング不要!WEBサイト作成ツール【weluka】」。 |
【プログラミング言語とは(動画付き)】
「プログラミング言語」とは、人がコンピューターに伝えたいことがある際に用いられるコンピューター専用の言語を言います。「プログラミング言語」を用いてシステムやサービスを作ることができます。
「プログラミング言語」は「Java」「PHP」「JavaScript」など、メジャーなものから、マイナーなものまで全て合わせると約200種類以上あると言われ、作るものによって使用される言語が異なります。
ではここで動画を視聴してみて下さい。題して「【初心者でもわかる】プログラミング言語とは?言語ごとに何ができるのか具体的に紹介」です。
Java(ジャバ)とは
「Java」は「パソコン」や「スマートフォンのアンドロイド」におけるアプリケーション・Webシステムなど、幅広いジャンルの開発で使用されている言語であり、大規模な案件で良く利用されています。
また、求人数が多いことも特徴です。一方で「Java」は、汎用性が高い反面、プログラムを記述する量が半端なく多く、全くのプログラム未経験者が最初に学ぶにはハードルが高すぎると言っても良いでしょう。
PHP(ピー・エイチ・ピー)とは
ワードプレスは「PHP言語」で作られています。「PHP」は、Webのアプリケーションで良く利用されているプログラミング言語であり、文法が分かりやすく、初心者でも習得しやすいのが特徴と言えます。
それにより「PHP」による拡張しやすいといった需要は見込まれます。また「PHP」は、どんなプログラミング言語なのか、一度学んでみるのも良いかも知れません。ちなみに私は、少しならいじれます。
JavaScript(ジャバスクリプト)とは
「JavaScript」とは、ブラウザで実行されるプログラミング言語のことを指します。ブラウザとは「Microsoft Edge」「Google Chrome」「Safari」「Firefox」「Opera」のことを言います。
「JavaScript」は、Webサイトの動きやサーバーとの通信をおこなう為に利用されます。また、スマートフォンの普及により、Webサイトへの需要が高まり「JavaScript」の将来性は高いと言えます。
Python(パイソン)とは
「Python」は、AIと呼ばれる人工知能の分野に於いて、ここ最近、注目されることが多いプログラミング言語の一つです。「Python」の文法はそれほど難しくなく簡単なので、習得の難易度は低いです。
ただ、AI(人工知能)への投資は今後も増えることが予想される為、将来性は高いと言えます。「PHP」同様「Python」もどんなプログラミング言語なのか、難易度が低いので学んでみるのも良いかと思います。
Ruby(ルビー)とは
「Ruby」は、日本人の「まつもとゆきひろ氏」が作ったプログラミング言語です。「Ruby」は、文法が簡単で数少ないプログラムのコードでWebアプリケーションが開発できることから人気があります。
また、スタートアップ企業に於いて、採用される傾向があります。「Ruby」は、上記で紹介した他のプログラミング言語同様、将来性が高い言語と言える為、学んでみることをおススメします。
【ワードプレスで「CSS(スタイルシート)」の基本を確認してみよう】
ワードプレスで「CSS」を設定するには、2通りの方法があります。1つ目は「外観 → カスタマイズ → 追加CSS」。2つ目は「テーマのstyle.css」で設定する方法です。どちらも同じデザインが実現可能です。
ではここで「外観 → カスタマイズ → 追加CSS」と「テーマのstyle.css」に於いて、どこにあるのかを確認してみましょう。 |
- まずは「外観 → カスタマイズ → 追加CSS」の順番で見ていきましょう。初めに「黄色枠」で囲まれている「外観」にマウスを移動すると「桃色枠」で囲まれているようにプルダウンが表示されます。
その中の「カスタマイズ」を開いてみましょう。
- カスタマイズを開くと「緑色枠」で囲まれている「追加CSS」が一番下の方に表示されているので開いてみましょう。
- 追加CSSを開くと「オレンジ色枠」で囲まれている中にCSSを記述していきます。
- では次に「テーマのstyle.css」内を見ていきましょう。初めに「紫色枠」で囲まれている「外観」にマウスを移動すると「赤色枠」で囲まれているようにプルダウンが表示されます。
その中の「テーマファイルエディター」を開いてみましょう。
- テーマファイルエディターを開くと「水色枠」で囲まれている中にCSSを記述していきます。
「マークアップ言語」「スタイルシート言語」「プログラミング言語」など、今回の記事は専門的な内容でしたが、時間ある時は、少しでも勉強していきましょう。 |
今回は以上となります。ワードプレスで「CSS(スタイルシート)」の基本を確認してみようについては理解できましたか。CSSはそれほど難しい言語ではないので少しずつでも学んでみてはどうでしょう。
以前投稿した下記の記事にも目を通して貰えると幸いです。