プログラミング

Mac Plus デザイン再現 CSS

最終更新： 29/03/2025
1 分の読み

Mac Plusは1986年に登場した、Appleのクラシックなパーソナルコンピュータです。そのデザインは非常にシンプルでありながらも、当時の革新性を象徴していました。この記事では、Mac Plusの外観を模倣したデザインをCSSを使って再現する方法について説明します。特に、Mac Plusの特徴的な形状やディスプレイの枠、インターフェースのスタイルに焦点を当て、詳細なCSSコードを提供します。

1. Mac Plusの特徴的なデザイン

Mac Plusのデザインは、角が丸く、フラットで簡潔な外観を特徴としていました。金属製のケースとフロントパネルは、シンプルながらも高級感を醸し出しています。スクリーン部分は黒い枠に囲まれており、画面自体は非常に特徴的なディスプレイです。これらの特徴をCSSで再現するためには、ボックスモデル、ボーダー、シャドウ効果を使用します。

関連記事

1.1 Mac Plusの外観

  • 本体: シンプルな金属のケース

  • ディスプレイ: 黒い枠で囲まれた、少し角の丸いディスプレイ

  • ボタン: スクリーンの下に配置された小さなボタン

2. CSSでMac Plusの外観を作成する

2.1 HTML構造

まず、Mac Plusの外観を再現するために基本的なHTML構造を作成します。このHTMLは、Mac Plusの本体部分とディスプレイ部分を表す2つの主要な要素を持っています。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mac PlusのCSSデザインtitle>
    <link rel="stylesheet" href="styles.css">
head>
<body>
    <div class="mac-plus">
        <div class="screen">
            <div class="display">div>
        div>
        <div class="buttons">
            <button class="button">ボタン1button>
            <button class="button">ボタン2button>
        div>
    div>
body>
html>

2.2 CSSスタイル

次に、CSSを使ってMac Plusのデザインを模倣します。特に、金属の質感、スクリーンの枠、そしてボタンのデザインに焦点を当てます。

css
/* Mac Plus本体のスタイル */
.mac-plus {
    width: 400px;
    height: 500px;
    background-color: #c0c0c0; /* 金属的なグレー */
    border-radius: 20px; /* 丸みを帯びた角 */
    margin: 50px auto;
    position: relative;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* スクリーンのスタイル */
.screen {
    width: 350px;
    height: 250px;
    background-color: #000; /* 黒いスクリーン */
    margin: 20px auto;
    border-radius: 10px;
    position: relative;
}

/* スクリーン内のディスプレイ */
.display {
    width: 80%;
    height: 80%;
    background-color: #333; /* ダークグレーの画面 */
    margin: 10% auto;
    border-radius: 5px;
}

/* ボタンのスタイル */
.buttons {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    width: 60%;
}

.button {
    background-color: #d3d3d3; /* ボタンの色 */
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.button:hover {
    background-color: #b0b0b0; /* ホバー時の色変更 */
}

2.3 解説

  1. Mac Plusの本体: mac-plusクラスでは、角を丸くした金属的な質感を表現しています。box-shadowプロパティで少し立体感を与えています。

  2. スクリーン: screenクラスでは、ディスプレイ部分を黒くして、内部にdisplayクラスでさらに小さな枠を作成しました。これによって、Mac Plusのスクリーンの感じを再現しています。

  3. ボタン: buttonsクラスでは、Mac Plusにある物理ボタンを模倣し、buttonクラスでスタイリングしています。ホバー時の色変更も追加しました。

3. 応用とカスタマイズ

この基本的なデザインを元に、さらに細かいディテールを加えることができます。例えば、次のようなカスタマイズが考えられます。

  • 画面のグラデーション: displayクラスにグラデーション効果を追加して、画面に光沢感を持たせることができます。

  • 金属感の強調: mac-plusクラスの背景に、よりリアルな金属的なテクスチャを追加することができます。CSSのbackground-imageプロパティを使用して、メタリックなパターンを背景に入れることが可能です。

  • アニメーション効果: マウスオーバー時にボタンが少し浮き上がるようなアニメーションを追加して、インタラクティブな効果を強化できます。

4. 結論

この記事では、CSSを使用してMac Plusの外観を再現する方法を紹介しました。Mac Plusは、そのシンプルでありながらも印象的なデザインが特徴的です。このデザインをCSSで模倣することで、Webサイトのデザインやプロジェクトにレトロでありながらも現代的な要素を加えることができます。更なるカスタマイズやアニメーションを加えることで、よりリアルな再現が可能です。

最終更新： 29/03/2025
1 分の読み
Back to top button