Skip to content

豊臣秀吉の自己紹介LPを追加 #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
muumuu8181 merged 1 commit into from
Feb 16, 2026
+511 −0
Merged

豊臣秀吉の自己紹介LPを追加 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
343 changes: 343 additions & 0 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,343 @@
:root {
--gold: #d4af37;
--dark-gold: #b8860b;
--black: #111;
--dark-gray: #222;
--white: #f5f5f5;
--red: #8b0000;
}

body {
margin: 0;
padding: 0;
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
background-color: var(--black);
color: var(--white);
line-height: 1.8;
}

a {
text-decoration: none;
color: inherit;
}

h1, h2, h3 {
font-family: 'Noto Serif JP', serif;
letter-spacing: 0.1em;
}

/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
overflow: hidden;
background: radial-gradient(circle, #333 0%, #000 100%);
}

.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM0NDQiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzR2LTRoLTJ2NGgtMnY0aDJ2NGgydi00aDJ2LTRoLTJ6TTM2IDM0VjMwaDR2NGgtNHpNNiAzNHYtNGgtMnY0SDJ2NGgydjRoMnYtNGgydi00SDZ6Ii8+PC9nPjwvZz48L3N2Zz4='); /* 和柄パターン（例：青海波などではないがシンプルなもの） */
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The hero background uses a Base64-encoded SVG pattern which adds significant inline data to the CSS file. While this pattern is small, it increases the initial CSS file size and cannot be cached separately. Consider moving this pattern to a separate SVG file that can be cached, or simplifying the pattern if the decorative effect is not critical. This would improve initial page load performance.

Suggested change
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM0NDQiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzR2LTRoLTJ2NGgtMnY0aDJ2NGgydi00aDJ2LTRoLTJ6TTM2IDM0VjMwaDR2NGgtNHpNNiAzNHYtNGgtMnY0SDJ2NGgydjRoMnYtNGgydi00SDZ6Ii8+PC9nPjwvZz48L3N2Zz4='); /* 和柄パターン（例：青海波などではないがシンプルなもの） */
background-image:
radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 0, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 1px, transparent 1px); /* シンプルなCSSパターンで和柄風の質感を再現 */
background-size: 4px 4px;

Copilot uses AI. Check for mistakes.
z-index: 0;
}

.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
z-index: 1;
}

.hero-content {
position: relative;
z-index: 2;
margin-bottom: 2rem;
}

.hero h1 {
font-size: 4rem;
color: var(--gold);
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
margin: 0;
writing-mode: vertical-rl;
text-orientation: upright;
margin-right: 1rem;
display: inline-block;
}

.subtitle {
font-size: 1.5rem;
color: var(--white);
letter-spacing: 0.2em;
writing-mode: vertical-rl;
text-orientation: upright;
display: inline-block;
}

Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vertical writing mode (writing-mode: vertical-rl) is used for the hero title and subtitle, which is aesthetically appropriate for Japanese text. However, on very narrow mobile screens, vertical text may become difficult to read or cause horizontal scrolling. The mobile responsive styles (max-width: 768px) reduce font size but don't address the writing mode. Consider testing on very small screens (e.g., 320px wide) or adding a media query to switch to horizontal text on extremely narrow viewports if readability becomes an issue.

Suggested change
@media (max-width: 480px) {
.hero h1,
.subtitle {
writing-mode: horizontal-tb;
text-orientation: mixed;
margin-right: 0;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
display: block;
}
}

Copilot uses AI. Check for mistakes.
.kamon {
position: relative;
z-index: 2;
margin-top: 2rem;
animation: rotate 20s linear infinite;
}
Comment on lines +92 to +93
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The animation for the kamon (family crest) rotates infinitely for 20 seconds. This continuous animation could be distracting for users with vestibular disorders or motion sensitivity. Consider adding a prefers-reduced-motion media query to disable or reduce this animation for users who have indicated a preference for reduced motion in their system settings.

Copilot uses AI. Check for mistakes.
.kamon img {
filter: drop-shadow(0 0 10px var(--gold));
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Navigation */
nav {
position: sticky;
top: 0;
background-color: rgba(0,0,0,0.9);
z-index: 100;
padding: 1rem 0;
border-bottom: 1px solid var(--dark-gold);
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
margin: 0 1.5rem;
}

nav ul li a {
font-size: 1.1rem;
color: var(--gold);
transition: color 0.3s;
}

nav ul li a:hover {
color: var(--white);
}

/* Section Common */
.section {
padding: 6rem 1rem;
position: relative;
}

.alt-bg {
background-color: var(--dark-gray);
}

.container {
max-width: 1000px;
margin: 0 auto;
}

.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 4rem;
color: var(--gold);
border-bottom: 2px solid var(--gold);
display: inline-block;
padding-bottom: 0.5rem;
position: relative;
left: 50%;
transform: translateX(-50%);
}

/* About */
.content-wrapper {
display: flex;
justify-content: center;
}

.text-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
text-align: justify;
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text-align: justify property can create uneven spacing and rivers of whitespace, especially in Japanese text with longer words or mixed language content. This can reduce readability and is particularly problematic for users with dyslexia or other reading difficulties. Consider using text-align: left or center for better readability, especially for Japanese content.

Suggested change
text-align: justify;
text-align: left;

Copilot uses AI. Check for mistakes.
}

/* Achievements */
.achievements-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.card {
background-color: var(--black);
border: 1px solid var(--dark-gold);
padding: 2rem;
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.card h3 {
color: var(--gold);
margin-top: 0;
border-bottom: 1px solid #444;
padding-bottom: 0.5rem;
}

/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.gallery-item {
aspect-ratio: 16/9;
overflow: hidden;
border: 2px solid var(--dark-gold);
}

.placeholder-img {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
font-weight: bold;
color: white;
text-shadow: 1px 1px 2px black;
transition: transform 0.5s;
}

.gallery-item:hover .placeholder-img {
transform: scale(1.1);
}

/* Contact */
.center-text {
text-align: center;
margin-bottom: 3rem;
}

.contact-form {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.form-group {
display: flex;
flex-direction: column;
}

.form-group label {
color: var(--gold);
margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
padding: 0.8rem;
background-color: #333;
border: 1px solid #555;
color: white;
font-family: inherit;
font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
}

.btn-gold {
background-color: var(--gold);
color: var(--black);
padding: 1rem;
border: none;
font-size: 1.2rem;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
font-family: 'Shippori Mincho', serif;
}

.btn-gold:hover {
background-color: #fff;
}

/* Footer */
footer {
text-align: center;
padding: 2rem;
background-color: #000;
color: #666;
border-top: 1px solid #333;
}

/* Animations */
.fade-in {
opacity: 0;
animation: fadeIn 1.5s ease-out forwards;
}

.fade-in-delay {
opacity: 0;
animation: fadeIn 1.5s ease-out 0.5s forwards;
}

@keyframes fadeIn {
Comment on lines +298 to +307
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fade-in animations (.fade-in and .fade-in-delay) use the 'forwards' fill-mode which keeps the final animation state. However, these classes are applied to elements that should always be visible (the hero title and subtitle). If JavaScript is disabled or fails to load, these elements will remain invisible (opacity: 0) permanently. Consider using a noscript fallback or applying a default visible state that only gets overridden when JavaScript is available.

Suggested change
opacity: 0;
animation: fadeIn 1.5s ease-out forwards;
}
.fade-in-delay {
opacity: 0;
animation: fadeIn 1.5s ease-out 0.5s forwards;
}
@keyframes fadeIn {
animation: fadeIn 1.5s ease-out forwards;
}
.fade-in-delay {
animation: fadeIn 1.5s ease-out 0.5s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }

Copilot uses AI. Check for mistakes.
to { opacity: 1; }
}

.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up.visible {
opacity: 1;
transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 3rem;
}

.subtitle {
font-size: 1.2rem;
}

nav ul {
flex-wrap: wrap;
}

nav ul li {
margin: 0.5rem 1rem;
}

.section-title {
font-size: 2rem;
}
}
Loading