CSS

圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】

初心者向けに圧縮されたCSSを元に戻すツール10選について解説しています。最初に、圧縮されたCSSの見分け方について説明します。次に圧縮されたCSSを元に戻すツールの例と、その中からCloud9を使った方法を見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

圧縮されたCSSを元に戻すツール10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

圧縮されたCSSを元に戻すツール10選について詳しく説明していくね！

お願いします！

圧縮されたCSSの見分け方と違いについて

圧縮されたCSS（カスケーディングスタイルシート）は、符号的な文字列として一行として列挙されるのみになってしまっています。なお、検索エンジンなどの入力装置にコードを貼り付けますと、自動的に圧縮されます。

圧縮されていないCSSのコード

.readmore a.button {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
  background-color: #eee;
  padding: 10px;
  line-height: 14px;
  font-size: 14px;
  width: 160px;
  margin: 0 auto;
  border: 1px solid #aaa;
  border-radius: 10px;
  box-shadow: 0 5px 0px #666;
}

圧縮されているCSSのコード

.readmore a.button { text-decoration: none; color: #333; display: block; text-align: center; background-color: #eee; padding: 10px; line-height: 14px; font-size: 14px; width: 160px; margin: 0 auto; border: 1px solid #aaa; border-radius: 10px; box-shadow: 0 5px 0px #666; }

[PR] Webデザインで副業する方法とは

元に戻すツール10選

AWS（Amazon Web Services）Cloud9
CSS Minifier
Sublime Text 2
Visual Studio Codespaces
YUI Compressor
Visual Studio Code
Adobe Dreamweaver
Eclipse
CSS Compressor
vim

かつては、YUI(Yahoo User Interface) Compressorが、代表格でした。

ツールを使って圧縮を戻してみよう

AWS（Amazon Web Services）のCloud9を例に紹介します。

「Code Formatting」の「Apply Code Formatting」を選択することで、プログラム言語が特定されているソースコードの整形が可能になっています。

監修してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

今さら聞けない！Webデザインとは【初心者向け】

Webデザインを学びたいという方は非常に多いと思います。今回は、Webデザインとは何か、Webデザインの勉強方法について初心者向けに解説していきたいと思います。...

Webデザイン

80年代スタイルが2017年注目のトレンドになる8つの理由

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ライターのCarrie Cousins氏...

Webデザイン

8つの事例から学ぶ！優れたナビゲーションメニューの作り方

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Jake Rocheleau氏によって投稿されました。...

Webデザイン

擬似クラスを覚えよう！CSSのnth-childの使い方【初心者向け】

CSSで書くnth-childの使い方について解説をしています。 CSSを始めたばかりという人でnth-childを使う場面はなかなか出てこないかもしれま...

CSS

CSSでposition: fixedを使うと文字が重なる原因と対処法を現役エンジニアが解説【初心者向け】

CSSでposition: fixedを使うと文字が重なる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...

CSS

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...

CSS

あわせてよく読まれている記事

Pythonでzipファイルを圧縮・解凍する方法【初心者向け】

Pythonでzipファイルを圧縮・解凍する方法について解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 zipファイルを圧縮・解凍する方法について詳しく説明していくね！大石ゆかりお願いします！ zipファイルとは zipファイルとは、zipというデータ圧縮のフォーマットで圧縮したファイルのことです。データ圧縮は、一定のルールに従いデータを短い形式で表現します。例えば「aaaaaaaaaa」を「a10」と表現すると7文字短く表現できます。zipはこのような圧縮・解凍のルールを共通化したもので、 Windows や Mac で OS の標準機能として取り入れられている他、Pythonでも標準ライブラリzipfileにより利用することができます。 zipでは、1つのファイルだけでなく、複数のファイルやフォルダを圧縮・解凍することができます。zipファイルとして圧縮することで、大きな容量のファイルを小さくして配布したり、複雑な構造のファイルやフォルダを、まとめて受け渡しすることが可能となります。データ圧縮のフォーマットは、zipの他、 rar や tar.gz 、 7z などがありますが、 zip が最も多く用いられています。圧縮・解凍する方法 Python のライブラリ zipfile で圧縮・解凍する方法は以下の通りです。圧縮する方法 import zipfile with zipfile.ZipFile(zipファイル名, "w", zipfile.ZIP_DEFLATED) as zf: zf.write( 圧縮するファイル名, zipファイルの中でのファイル名) importによりzipfileライブラリを利用できるようにします。withで始まる行は、zipfileを扱うことを示しています。圧縮する場合、第一引数に作成するzipファイル名、第二引数に “w” を指定します。第三引数はzipファイルの圧縮形式です。一般的なzipファイルを作成するには zipfile.ZIP_DEFLATED を指定します。省略すると、ZIP_STORED （圧縮しない）が指定されます。その他、以下の種類があります。 zipfile.ZIP_STORED: 圧縮しない。複数ファイルをまとめて1つにする（デフォルト） zipfile.ZIP_DEFLATED: 一般的なzip圧縮 zipfile.ZIP_BZIP2: BZIP2圧縮 zipfile.ZIP_LZMA: LZMA圧縮解凍する方法 import zipfile with zipfile.ZipFile(zipファイル名) as zf: zf.extractall() 解凍の場合も同様に、importによりzipfileライブラリを利用できるようにし、withで始まる行で対象のzipファイル名を指定します。解凍には extractall メソッドを指定します。その他、特定のファイルだけを解凍する extract メソッド、zipファイルを読み込んで内容を表示するopen メソッド、 read メソッドなどがあります。詳しくは公式ドキュメントを参考にしてください。 https://docs.python.jp/3/library/zipfile.html [PR] Webデザインで副業する方法とは実際にファイルを圧縮・解凍してみよう今回のサンプルプログラムでは、日本語のテキストファイルを圧縮、解凍してzipfileの書き方を確認します。はじめに圧縮対象のファイルを作成します。こんにちは.txt こんにちは！ Pythonの世界へようこそ！それでは、圧縮するサンプルプログラムを書いてみましょう。 zip.py import zipfile with zipfile.ZipFile('hello.zip', "w", zipfile.ZIP_DEFLATED) as

Python

【メールで使える！】パワーポイントのファイルを圧縮する方法

Microsoftのパワーポイント(PowerPoint)はプレゼンテーション用のソフトとしてだけでなく、配布資料作成の用途でもよく使われています。配布資料や企業間でのファイルのやりとりでパワーポイントを使う際は、ファイルの大きさは注意したい点のひとつです。ファイルのサイズが大きいと、相手が受け取れない場合があったり、送れても相手のメールボックスを圧迫してしまい失礼な場合があります。今回はその対処法として、パワーポイントのファイルのサイズの圧縮方法を紹介します。なお本記事は、KiRAMEXのオンライン完結のPowerPoint(パワーポイント)講座の内容をもとに紹介しています。目次スライドの図や画像を圧縮する方法スライドに埋め込まれた音楽や動画を圧縮する方法スライドの図や画像を圧縮する方法早速、スライド上の図や画像を圧縮してみましょう。まずはじめに、圧縮したい画像を選択します。選択後「図ツール」の「書式」タブから「図の圧縮」をクリックします。「画像の圧縮」のウィンドウが表示されたら、圧縮オプションで「この画像だけに適用する」にチェックを入れます。チェックを入れない場合、スライド内のすべての画像に適用されます。「画像の圧縮」ウィンドウでは圧縮後の画像の解像度も選択できます。どの程度画像を圧縮するかは「解像度の選択」で選びます。ファイルのサイズを一番小さくしたい場合は「電子メール用」をお選びください。それぞれ選び終わったらOKを押して完了です。 [PR] Webデザインで副業する方法とはスライドに埋め込まれた音楽や動画を圧縮する方法パワーポイントのファイル圧縮は、画像だけでなく音楽や動画でも行えます。スライドに含まれる音楽や動画を圧縮するのは以下の操作で行います。まずはじめに、左上のファイルタブを開きます。ファイルタブを開いたら「情報」の、以下赤枠の「メディアの圧縮」をクリックします。クリックすると圧縮後のクオリティについて3つの選択肢が与えられますので、クオリティを指定します。以上でパワーポイント上の音楽や動画の圧縮が完了します。今回は大きく「画像を圧縮する方法」と「音楽や動画を圧縮する方法」を紹介しました。自分でプレゼンテーションするときは画像なども綺麗な方が好ましいですが、ビジネスパートナーにファイルを送付するときなどは、このような圧縮処理をしたり、いくつか気配りをしてみてください。

PowerPoint

EWWW Image Optimizerの使い方ーWordPressプラグイン【初心者向け】

WordPressで作ったサイトの表示速度が遅いといった方におすすめのプラグインを紹介する記事です。 WordPressのページ表示速度を高速化できるプラグインの1つであるEWWW Image Optimizerの使い方を紹介します。なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。大石ゆかり田島メンター！！WordPressのサイトをPageSpeed Insightsで速度計測したら、画像が大きいって言われたんですけど、どうしたらいいですか？田島悠介それなら画像を圧縮する必要があるね。「EWWW Image Optimizer」を使うと圧縮してくれるよ♪ 大石ゆかりどうやって使うんですか？？？ EWWW Image Optimizerとは EWWW Image Optimizerは、自動的に画像サイズを圧縮したり、過去の画像を圧縮することでサイト全体の容量を削減できるプラグインです。 WordPressの表示が遅くなる原因の1つに、「画像サイズが大きい」ことも挙げられます。そこで、このプラグインを導入して画像を圧縮することで高速化を図ることができます。プラグインのインストールこのプラグインは、管理画面から「プラグインを検索」してインストールもできますし、EWWW Image Optimizer公式サイトからダウンロードすることも可能です。インストール方法がわからない場合は、WordPressのプラグインをインストールする方法をご覧ください。インストールが完了したら、有効化してください。有効化すると、ダッシュボード＞設定＞EWWW Image Optimizer　に、プラグインの管理画面へのリンクが表示されます。 [PR] Webデザインで副業する方法とはプラグインの設定続いて、プラグインの管理画面を開いて設定していきます。設定項目は、大きく分けてCloud Settings（有料サービス向け設定なので、必要なし）、General Settings、Optimization Settings、Conversion Settingsの４つです。全て英語ですが、以下の3箇所のみ変更・確認すれば大丈夫です。 General Settings 下の方にある、disable pngoutのみにチェック（デフォルトで入っています）。 Optimization Settings 圧縮についての設定です。Remove metadataにチェックを入れてください。画像ファイルの不要なデータを削除するため、ファイルサイズ圧縮につながります。 Conversion Settings Hide Conversion Links にチェックを入れてください。圧縮時に、拡張子を変更することを防ぎます。こうすることで、圧縮に寄る画像の劣化を抑えることができます。以上3箇所で、設定は完了です。あとは、アップロードしたファイルを自動的に圧縮してくれます。今までにアップロードした画像を一括で圧縮したいときには、メディア＞Bulk Optimizeから操作可能です。いかがでしたか？ぜひ自分でも試してみてください。他の方法で高速化したい場合は、WP Super Cacheの使い方も合わせてご覧ください。大石ゆかり PageSpeed Insightsの結果がよくなりました！！！田島悠介よかったね。過去の画像も一括して圧縮できるところがいいね♪ 大石ゆかりそうですね♪ [お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。

WordPress

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。そんな時に必要になってくるのがCSSです。 HTMLでCSSを読み込むためには、2つの方法があります。今回は、その方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。目次圧縮されたCSSの見分け方と違いについて元に戻すツール10選ツールを使って圧縮を戻してみよう監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 HTMLにCSSを適用（読み込み）させる方法について詳しく説明していくね！大石ゆかりお願いします！ CSSの読み込み方（適用方法） HTMLでCSSを読み込むためには、次の2つの方法があります。外部CSSファイルをHTMLから読み込む方法 HTMLファイル内に直接CSSを記述する方法 1.外部CSSファイルを読み込む方法外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。 <link rel="stylesheet" href="sample.css"> HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイルの<head>タグ内に記述します。以下のようにHTMLファイルに記述しましょう。 HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sample.css"> <title>HelloTechAcademy</title> </head> <body> <p>ここにHTMLの文章などが入ります</p> </body> </html> ここで、CSSファイル読み込み処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、CSSファイル読み込み処理は以下のように記述します。 <link rel="stylesheet" href="css/sample.css"> 2.HTMLファイル内に直接CSSを記述する方法 HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。まず、以下のようにCSS定義を<style>タグの中に記述します。 <style type="text/css"> p { color : red; } </style> 用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。 HTML <html> <head> <meta charset="UTF-8"> <style type="text/css">p { color

HTML

PHPでファイルをZIPファイルに圧縮する方法【初心者向け】

PHPでファイルをZIPファイルに圧縮する方法について解説します。ファイルを圧縮すると配布する場合などに転送量を節約することが出来ます。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでファイルをZIPファイルに圧縮する方法について詳しく説明していくね！大石ゆかりお願いします！ ZIPファイルとは zipは元々pkware社が開発したpkzipで作られるアーカイブファイルの形式です。アーカイバと呼ばれるツールによって複数のファイルを1ファイルにまとめます。古くは磁気テープに保存するための前処理などに使われていました。通信機能によるデータの交換にも便利だったためよく利用されています。この時に大容量のデータを保存したり送信したりするのは大変なので圧縮するというアイデアが生まれてきました。比較的圧縮率が高く利用しやすかったのでzip形式のファイルがネット上で多数交換されるようになり現在に至ります。これとは別にgzipという形式もあります。名前は似ていますが別物ですので混同しないでください。圧縮ファイル全般に言えることですが、テキストファイルは圧縮率が高く、バイナリファイルは低くなる傾向があります。また、jpegなどすでに圧縮済みのファイルはほとんど圧縮できず、逆に大きくなってしまう場合もあります。 ZIPファイルに圧縮する方法コマンドやGUIのユーティリティで圧縮することが多いですが、PHPにもzipファイルを取り扱う機能があります。 php.net-zip php -m コマンドで zip が表示されれば組み込み済みになります。 [PR] Webデザインで副業する方法とは実際に書いてみよう <?php $zip = new ZipArchive; $zip->open(__DIR__.'/sample.zip', ZipArchive::CREATE|ZipArchive::OVERWRITE); $zip->addFile(__DIR__.'/hello.txt'); $zip->addFile(__DIR__.'/flower.jpg'); $zip->close(); ZipArchiveがzipをサポートするclassです。 $zip->open( ) 関数は指定したzipファイルをオープンするメソッドです。 ZipArchive::CREATE は指定したzipファイルが無かったら作るオプションです。 ZipArchive::OVERWRITEは指定したzipファイルが有っても新しいファイルで上書きするオプションです。 $zip->addFile( ) 関数でzipファイルにアーカイブするファイルを追加します。この例では2つのファイルを追加しています。最後に $zip->close( ) 関数で zip ファイルを閉じます。この記事を監修してくれた方大網清和（おおあみきよかず）現在は派遣スタッフとして Laravel で大手ポータルサイトの開発業務をしています。プログラム歴は長く中学生の頃から始めて35年くらいになります。古くは BASIC、C、COBOLなどを経験し SQL を集中的に使っていた時期もあります。 Web の開発はまだ2年位とあまり長くは無いですが、プログラミングの楽しさを伝えられたら良いなと思っています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

PHP

今さら聞けない！CSSとは【初心者向け】現役Webデザイナーが解説

CSSとは何かについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。「CSSが分からないけど今さら聞けないよな…」「CSSってなんで必要なんだろう…」「どうやってCSSを書いたらいいんだろう…」上記のような疑問や悩みを感じている方は、最後まで読んでいただければ「CSSとは何か」を理解できますのでぜひ参考にしてみてください。目次圧縮されたCSSの見分け方と違いについて元に戻すツール10選ツールを使って圧縮を戻してみよう監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター！！CSSは何を行うものなんですか～？田島悠介 CSSの役割はサイトの「見た目」を作ることだよ。音声による読み上げや印刷時に関する設定もできるけれど、一番多く使われる役割はWebページのデザインやレイアウトなど「見た目」に関する指定だね。大石ゆかり見た目というと文字や画像の大きさ、色などですか？田島悠介そうだね。実際のサイトで、CSSが適用されている場合とそうでない場合の違いを見てみよう。 CSSとは CSSとは「Cascading Style Sheets」の頭文字をとったものであり、スタイルシートとも呼ばれます。 HTMLは見出しやヘッダー情報などWebページの文書構造を形作るための言語です。対してCSS言語は、HTMLで作られた文書構造にデザインを加えて見栄えを整える役割を担っています。 WebページはHTMLとCSSが組み合わさって作られているのです。実際に、ブラウザでWebページを表示してみましょう。（ここでは、例としてテックアカデミーのWebサイトを開いています）上記のページはHTMLとCSSとの両方を使って作られています。画像が入っていたりリンク部分をボタンのように装飾したり、見栄えが良くなるようデザインされていますよね。試しに上記のページからCSSを除き、HTMLの文書構造のみを表示させてみましょう。かなり簡素なページになりましたね。たまにWebページの読み込みがうまくいかない場合など、このような画面が表示されたことがある人もいるのではないでしょうか。キレイに整ったデザインのWebページを表示するためには、HTMLにCSSを加える必要があるのが分かりますね。田島悠介 CSSを適用していない場合のサイトを見るとどうかな？大石ゆかり見出しと文字がただ順番に書かれただけになって、画像の位置や大きさもなんだか変わっちゃいましたね。田島悠介これらのレイアウトやデザインを指定しているのがCSSになるんだ。今見ているのは、HTMLだけで構成された状態の文書だね。大石ゆかり見やすいページを作るのに、CSSはとても大事なんですね。 CSSファイルの作り方 CSSファイルの作り方の手順をご紹介しましょう。ファイル名に拡張子の「.css」をつけることで、CSSファイルとしてコンピュータが認識してくれます。拡張子とは拡張子とは、ファイルの種類を分かりやすく判別するために使われる文字列です。みなさんも普段使うWordやExcelなども以下のような拡張子で表示されます。 Word：.docx Excel：.xlsx 文書：.pdf 画像ファイル：.jpeg CSSファイル作成の手順 CSSファイルの作成は以下の手順で行います。新規フォルダを作成作成したフォルダ名の最後に「.css」と書く練習でCSSファイルを作成する場合は「test.css」や「style.css」など、分かりやすい名前を付けてあげましょう。実際に以下の画像のように「.css」のファイルを作成してみます。上記のように簡単にCSSファイルが作成できますので、実際に手を動かしてみて作成してみましょう。 [PR] Webデザインで副業する方法とはCSSを実際に書く方法先ほど作成した「style.css」ファイルを使って、実際にCSSを書いてみましょう。まずは、HTMLファイルを用意します。 CSSをHTMLファイルに読み込ませるために、<head>と</head>で囲まれた部分に <link rel="stylesheet" href="style.css"> といった一文を以下の画像のように入れます。 <link rel="stylesheet" href="style.css">を書くことで、HTMLに「style.css」ファイルがリンクされ、CSSの指定をHTMLでも読み込んでくれるようになります。では実際に、以下のような緑色の背景に白色で「TechAcademy」という文字を表示させるCSSの指定を書いてみましょう。編集は以下の手順で行います。 HTMLファイルを編集 CSSファイルを編集では、順番に見ていきましょう。 HTMLファイルの編集まずはHTMLファイルの編集です。 <body>と</body>で囲まれた部分に表示させたい文章を書いていきましょう。コードを書く際、CSSを適用させる場所を分かりやすくするため、緑色の背景を表示させるための「main」という枠と、文字を表示させる「text」という枠を用意します。完成されたページで見ると、以下のように分けています。用意した枠にそれぞれ「クラス名」を設定してあげます。クラス名とは「class=”○○”」というように表記されたCSSを適用させるためのタグのことです。今回はbodyタグ内に、「main」と「text」のクラス名をそれぞれ以下のように記述します。（HTMLの記述に自信がない方は「HTMLとは」という記事も合わせてお読みください。）以上でHTMLの編集は終了です。 CSSファイルの編集続いて、CSSファイルの編集です。 HTMLの編集で全体を囲む「main」クラスと、文字を表示させる「text」クラスを用意しましたね。それぞれのクラスに幅や配色などのデザインを「style.css」に指定していきましょう。今回は背景と文字のデザインを以下のように指定しましょう。背景色：緑高さ：200px 幅：100％テキストの位置：センターフォントサイズ：36px テキストの色：白上記の内容を「style.css」に以下のように記述していきます。 CSSファイル内では、クラス名の名前の前に「.」を付けて表現するのが決まりですので覚えておきましょう。上記のようにCSSを指定すると以下のようなページが表示されます。はじめはCSSの記述と完成イメージがうまく結びつかず、思うようにレイアウトやデザインが出来ない場合も多々あるでしょう。しかし、繰り返し練習していくと慣れていきますので何度も試しながら学習していきましょう。執筆してくれたメンターノマリカ印刷会社の校閲部門に半年、DTPオペレータとして4年間経験を積んだ後、Web制作会社にて8年間デザイナーとして従事。現在は住宅メーカーに勤務しながら社内のSE及びWeb担当として従事しています。田島悠介 CSSに関する基本的な構造だよ。大石ゆかり「main」の部分、「text」の部分それぞれに色や大きさの指定をしているんですね。田島悠介この「.main」「.text」のようなスタイルを適用させる範囲の指定を「セレクタ」というんだ。まずはこれを覚えておこう。大石ゆかり頭に入れておきます。ありがとうございました！ CSSを実際に書いてみたい場合は、CSSの書き方の記事も合わせてお読みください。また「HTMLとは」という記事も読んでおくと、よりHTMLの理解も深まりますのでおすすめですよ。 CSSを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい CSSを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

CSS

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

圧縮されたCSSを元に戻すツール10選を現役エンジニアが紹介【初心者向け】

目次