PHP で CSS スタイルを使用する
この記事では、PHP で CSS スタイルを使用するのに役立つ 3つの方法を説明します。
1つ目は PHP のみのファイルを使用する方法で、2つ目は PHP を HTML+CSS ファイルに埋め込む方法です。 次に、3 番目の方法では、PHP の echo ステートメントでインライン CSS を使用します。
PHP のみのファイルで CSS を使用する
標準の HTML ファイルでは、CSS スタイルを <head> 要素に埋め込むか、外部 CSS ファイルにリンクできます。 デフォルトでは、この CSS ファイルは css 拡張子を持ちますが、php 拡張子を持つこともできます。
これは、CSS コードを記述し、それを PHP ファイルとして保存して、HTML にリンクできることを意味します。 この PHP ファイルでは、CSS ファイルで行うよりも多くのことができます。 PHPコードを書くことができます。
まず、CSS プロパティと値を変数として格納する PHP コード ブロックを定義できます。 次に、PHP ブロックの外側で、変数を CSS プロパティの値として使用する通常の CSS を記述できます。
以下でそれを行いました。 styles.php として保存します。
<?php
// The "header" is the most important part of
// this code. Without it, it will not work.
header("Content-type: text/css");
$font_family = 'Trebuchet MS, Verdana, Helvetica';
$font_size = '1.2em';
$background_color = '#000000';
$font_color = '#ffffff';
// Close the PHP code block.
?>
body {
background-color: <?php echo $background_color; ?>;
color: <?php echo $font_color; ?>;
font-size: <?php echo $font_size; ?>;
font-family: <?php echo $font_family; ?>;
}
次の HTML を保存し、<link> タグで styles.php をリンクしたことを確認します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpage using CSS styles generated with PHP</title>
<!-- Link styles.php as the CSS file -->
<link rel="stylesheet" type="text/css" href="styles.php">
</head>
<body>
<h1>Hello, We styled this page using CSS in a PHP file!</h1>
<h1>How cool is that?</h1>
</body>
</html>
出力：
PHP+HTML ファイルで CSS を使用する
HTML は、専用の PHP ブロックに PHP を含めることができる <style> タグまたは <link> タグを介して CSS を使用できます。 PHP コードが HTML コードを生成または操作する場合、リンクされた CSS コードは HTML のスタイルを設定できます。
たとえば、PHP がデータベース レコードをプルして HTML テーブルを作成する場合、CSS を使用してテーブルのスタイルを設定できます。 これを行う方法を示すために、MySQL で my_website というデータベースを作成します。
次に、次のクエリを使用して my_website に site_users テーブルを作成します。
CREATE TABLE site_users (
user_id INT NOT NULL AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
email VARCHAR(100) NOT NULL,
PRIMARY KEY (user_id)) ENGINE = InnoDB;
site_users テーブルにデータを挿入します。
INSERT INTO site_users (username, email) VALUES ('user_1', 'user_1@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_2', 'user_2@gmail.com');
INSERT INTO site_users (username, email) VALUES ('user_3', 'user_3@gmail.com');
次に、HTML、PHP、および CSS を示します。 CSS は <head> 要素にあります。 PHP は HTML 内の PHP ブロックにあります。
PHP は、site_users テーブルのレコードを使用して HTML テーブルを作成します。 PHP がテーブルを生成すると、CSS がスタイルを設定します。
<!doctype html>
<head>
<meta charset="utf-8">
<title>Style MySQL table with CSS</title>
<style>
/* This CSS will style the table generated by PHP. */
table { border-collapse: collapse; width: 30em; font-size: 1.2em; }
table, th, td { border: 2px solid #1a1a1a; }
td,th { padding: 0.5em; }
/* Create a striped table. */
tr:nth-child(even) { background-color: #f2f2f2; }
/* General body styles. */
body { display: grid; justify-content: center; align-items: center; height: 100vh; }
</style>
</head>
<body>
<main>
<!--
We generated this table using PHP, and the CSS
style in the <style> tag will apply to it.
This is another way to use CSS in PHP.
-->
<?php
// Connect to the database. Change the connection
/// settings based on your environment.
$connect_to_mysql = new mysqli("localhost", "root", "", "my_website");
// Select the data from the site_users table.
$site_users = $connect_to_mysql->query("SELECT * FROM site_users")->fetch_all(MYSQLI_ASSOC);
// Get keys from the first row.
$table_header = array_keys(reset($site_users));
// Print the table.
echo "<table>";
// Print the table headers.
echo "<tr>";
foreach ($table_header as $value) {
echo "<th align='left'>" . $value . "</th>";
}
echo "</tr>";
// Print the table rows
foreach ($site_users as $row) {
echo "<tr>";
foreach ($row as $value) {
if (is_null($value)) {
echo "<td>NULL</td>";
} else {
echo "<td>" . $value . "</td>";
}
}
echo "</tr>";
}
echo "</table>";
?>
</main>
</body>
出力：
PHP echo ステートメントでインライン CSS を使用する
PHP は HTML とうまく連携し、インライン CSS を含む HTML を Web ブラウザーに送信できる echo ステートメントを備えています。 これは、HTML の大きなチャンクをデバッグしたり、Web ブラウザーに送信したりする場合に役立ちます。
以下は、PHP echo でインライン CSS を使用する方法を示しています。 テキストを定義し、$colors_array に 3つの色を格納します。
次に、foreach を使用して $colors_array をループし、配列要素をインライン CSS の値として設定します。 コードを実行すると、テキストが異なる色で 3 回表示されます。
<?php
$sample_text = "We generated this text color using inline CSS in PHP.";
$colors_array = ['red', 'green', 'blue'];
foreach ($colors_array as $value) {
// Use inline CSS with PHP echo.
echo "<p style='color: $value'>" . $sample_text . "</p>";
}
?>
出力：
Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.
LinkedIn