常連

実現したいこと
	•	AIエージェントを使って、PSD または Figma のデザインを できるだけ正確に HTML / CSS（必要であれば JS）へコーディングしたい
	•	手動コーディングとの差分（余白・フォント・レイアウト崩れ）を最小限にしたい

前提

Webコーディングの作業効率化のために、
AIエージェントを利用してデザインデータ（PSD / Figma）からコーディングを行う方法を検討しています。

候補としては以下のような方法を考えています。
	•	Figma → AI（MCP / API / プラグイン）連携
	•	PSD / Figma を画像として読み込ませて AI に生成させる
	•	Cursor / GitHub Copilot / Claude / ChatGPT などの AI エージェントを使った実装
	•	デザイン → コンポーネント分解 → AI補助で実装

しかし、
どの方法が最も「デザインに忠実（ピクセル精度・構造・再利用性）」にコーディングできるのかが分からず、判断に迷っています。

AIエージェントの活用法(コーダー)

h4クラスの「NEW」の左右に疑似要素で上に開いた斜め線をいれて、文字を強調したいのですが、「NEW」にtext-align:center;やalign-item:center;をかけても中央に移動しません。
また、疑似要素の線も回転しません。（今記述してあるrotateの数値は適当です）
他にもbuttonタグの「もっとみる」を右寄せしたいのですが、これも変化しません。

-実行したいこと
・NEWの中央ぞろえ
・文字強調のための斜め線
・buttonタグをPC表示でもSP表示でも要素の中で右寄せしたい
この三点になります。



位置の調整については、思いつくプロパティを色々いれてみましたが変化しませんでした。
疑似要素の回転については、調べてでてきたコードをいれてみたところ（positionを使った指定）、斜線自体はできましたが要素が画面いっぱいになっていて文字からかなり離れるか、文字に寄せるとNEWの位置自体が中央揃えでなくなりました。

複数質問になってしまいますが、一つでもいいので回答いただければと思います。
よろしくお願いします。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-10-04/280a59ed-24ef-4ebf-a5bc-037f6b01152a.png)

画像のように配置したいです。


**HTML**

<section class="other">
            <h4 class="new">NEW</h4>

            <div class="other-wrapper">

               <div class="other-article">
                   <h2 class="article-title">
                   <span><time datetime="2025-08-25">2025.08.25</time>【メディア取材のお知らせ】</span><br>
                    ATB「ひるまるっ！」で私たちの商品が紹介されました
                   </h2>
                   <ul class="link">
                     <li><a href="#">#MEDIA</a></li>
                     <li><a href="#">#2025</a></li>
                   </ul>
                     <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
               </div>

               <div class="other-article">
                 <h2 class="article-title">
                 <span><time datetime="2025-08-25">2025.08.25</time>【雑誌掲載のお知らせ】</span><br>
                 雑誌『美人百花』に掲載していただきました
               </h2>
                <ul class="link">
                   <li><a href="#">#MEDIA</a></li>
                   <li><a href="#">#2025</a></li>
                </ul>
                <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
               </div>

               <div class="other-article">
                 <h2 class="article-title">
                 <span><time datetime="2025-08-25">2025.08.25</time>【催事出店】</span><br>
                 日本橋三越本店フランス展２０２５
               </h2>
                <ul class="link">
                   <li><a href="#">#MEDIA</a></li>
                   <li><a href="#">#2025</a></li>
                </ul>
                <button class="more"><a href="#"><div class="mottomiru">もっと見る<i class="fa-solid fa-arrow-right"></i></div></button>
               </div>
                      
     </section>

 ------------------------------------------    
CSS

.other .new{
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  align-items: center;
  margin-bottom: 2rem ;
  text-align: center;
}

.other .new::before{
  content: "";
  width: 30px;
  height: 10px;
  border-left: 3px solid #333;
  padding-right: 16px;
  transform: rotateY(-30deg);
}

.other .new::after{
  content: "";
  width: 30px;
  height: 10px;
  border-right: 3px solid #333;
  padding-left: 16px;
}


.other-wrapper{
     
 }
 .other-article{
  width: 100%;
  margin: 16px 0;
  border-bottom: #999 1px solid;
}

@media(width > 800px){
  .other-wrapper{
     display: flex;
     align-items: center;
     justify-content: space-around;
 }
.other-article{
  width: 27%;
  margin: 16px 0;
}


}


.other-wrapper h2 span{
  font-size: 14px;
}
.other-article ul{
  display: flex;
  color: blue;
  
}
.other-article li{
  font-size: 14px;
  margin-right: 24px;
}
.other-article button{
  display: inline;
  justify-content: center;
}
.other-article .more{
  margin-top: 10px;
  margin-bottom: 8px;
 border: #999 1px solid;
 
}

```


要素の位置調整について

ローカルに保存した画像ファイルをHTMLで出す、といった処理を実施したいです。

```
<img src="file:///C:/tmp/WFvbFvqjuE.jpg">
```

コンソールで以下が出力されていました。
```
Not allowed to load local resource: file:///C:/tmp/puTpkXdkQH.jpg
XMLHttpRequest cannot load file:///C:/tmp/puTpkXdkQH@2x.jpg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
```
上記のように記述したのですが、画面に表示されません。
srcの内容をコピペすれば画像が見れるので指定ミスではないのですが…。

お手数ですが、よろしくお願いします。

ローカルのファイルをHTML上で表示させたい

### 前提・実現したいこと

PHPとMariaDBで社内連絡用のシステムを作ろうとしています。連絡者がイントラ内のファイルサーバーにファイルを置いて、入力を呼び掛けたりする際に、そのファイルのあるフォルダパスを登録して、そのほかのユーザーは、リンクをクリックするとファイルやフォルダが開けるようにしたいです。

https://okwave.jp/qa/q5944306.html
こちらを見つけて、その通りにリンクを指定してみると、IEではファイルウィンドウ（エクスプローラー？）で開くことができました。

しかし、chromeやedgeでは、ファイルウィンドウではなくブラウザ上でフォルダ内が開きました。

chromeやedgeでもIEと同じようにファイルウィンドウで開く方法はないでしょうか？
また、aタグでは実現できなければ、buttonをクリックするなど、別の方法でもいいので実現する方法があれば教えていただきたいです。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```html
<a href="file://(ファイルサーバー名)/(以下フォルダのパス)>
```

### 試したこと

リンクをクリックすると、IEではファイルウィンドウが開いたが、chromeとedgeでは、ブラウザ上にフォルダの中身が表示された。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

aタグでイントラ内のファイルやフォルダを開きたい。

htmlとbootstrapを用いてwebページを作成しております。


```
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
```

今回やりたいこととしましては、
チェックボックにチェックを入れないかぎりはボタンを非活性にするという処理を入れたいことです。

```
<a class="btn btn-default" disabled="true" href="example.com">ページ遷移</a>
```

↑のようなボタンをdisabledによって非活性にしたかったのですが、リンク先に飛べてしまうため、困っております。

尚、画面上では、見た目上は非活性になっております。（色が薄くなり、かつ、マウスオーバーすると、×みたいなアイコンがでる。但し、リンク先には飛べる）

disabledの記述方法がおかしいのかと思い、色々と試しましたが、ダメでした。

disabled="true"
disabled="disabled"
disabled


どなたか解決策をご存知の方がいらっしゃいましたら、アドバイス頂けますと幸いです。

よろしくお願いします。

htmlで非活性(disabled)にしたのに、リンク先に飛べてしまう。

![イメージ説明](f2a2a88d4b57cdbeeee86acc4673ec75.jpeg)


###前提・実現したいこと
html,css初心者です。
htmlで画像の下に文字を配置して、文字を画像に対して中央揃えにしたいです。



###該当のソースコード
<div id="box1">
<img src="img/gazou.png" alt="" width="200" height="219">
<p>文字文字文字</p>
</div>

###試したこと
＃box1 {text-align: center;} で中央寄せをしてみたのですが、一応中央揃えはできるのですが、ｐｃ画面全体に対して中央になってしまいます。

画像に対しての文字のみ中央揃えにして、ｐｃ全体に対しては左揃えで配置したいです。

###補足情報
わかりにくい説明で申し訳ありませんが、ぜひ教えていただけると助かります。
よろしくお願い致します。

【html,css】画像の下に文字を配置して、中央揃えにしたい

### 実現したいこと
https://www.gorakadan.com/fuji/

上記URLのサイトのような、スクロールしたときの画像の現れ方を再現しようとしているのですが、つまずいています。
もやのようなものを再現するにはどうすればいいでしょうか？

### 発生している問題・分からないこと
画像を下から上に表示させることはできたのですが、
もやの再現方法が分かりません。



### 該当のソースコード

```HTML
<figure class="reveal-container"><img src="画像パス"></figure>
```

```CSS
.reveal-container {
    position: relative;
    overflow: hidden;
}


.reveal-container img {
    width: 100%;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 2s cubic-bezier(0.19,1,0.22,1);
}


.reveal-container::after {
    content: "";
    position: absolute;
    left: -10%;
    bottom: -150px;
    width: 120%;
    height: 300px;

    background:
        radial-gradient(circle at 20% 60%, rgba(255,255,255,.8) 0%, transparent 60%),
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.7) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,.8) 0%, transparent 60%);
    
    filter: blur(20px);
    opacity: .9;

    transform: translateY(0);
    transition: transform 2s cubic-bezier(0.19,1,0.22,1);

    animation: steam 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}


@keyframes steam {
    0%   { transform: translateY(0) translateX(0); }
    50%  { transform: translateY(-30px) translateX(20px); }
    100% { transform: translateY(0) translateX(0); }
}


.reveal-container.is-animated img {
    clip-path: inset(0 0 0 0);
}

.reveal-container.is-animated::after {
    transform: translateY(-120%);
}
```

```JavaScript
jQuery(function($) {
    $(window).on('scroll load', function() {
        $('.reveal-container').each(function() {
            var targetPos = $(this).offset().top;
            var scrollPos = $(window).scrollTop();
            var windowHeight = $(window).height();

            if (scrollPos > targetPos - windowHeight + (windowHeight * 0.2)) {
                $(this).addClass('is-animated');
            }
        });
    });
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
もやが再現しにくく動きも画像においつかない感じになってしまいます。

### 補足
特になし

画像に白いもやをつけたい

###前提・実現したいこと
HTTP ERROR 500が出て困っています。
このエラーを解消したいと考えております。
PCは2台あり、1台はサーバー構築用(centos7.2)。もう一台はhtml,phpファイルの作成(win7)として使っております。
win7側で作成した、htmlファイル、phpファイルをFFFTPを用いてサーバー側に転送し、
win7側のchromeで表示させたところ、私が作っているサイトのトップページがメールアドレスとパスワードを入力することで会員専用のページに飛ぶ役割のページなのですが、登録したメールアドレス、ﾊﾟｽﾜｰﾄﾞを打ってログインしようとした際に、タイトルのエラーが発生しました。（トップページに新規登録できるページに飛べるようになっていてそこで登録できるようになっております。また、新規登録に必要な情報を入力して新規登録ボタンを押した際も上記エラーが発生します。）

###発生している問題・エラーメッセージ

```
○○○○○○ページは機能していません

○○○○○○では現在このリクエストを処理できません。
HTTP ERROR 500
```
###試したこと
正直、お手上げ状態です。
調べてみると、サーバーが落ちているからという人もいれば、そもそもサーバがダウンすれば500エラーを返すことができないので、ありえない話です。という人もいたので、原因が分からずじまいです。期限も迫っており、質問した次第です。
身勝手ですが大変申し訳ありません。

###補足情報(言語/FW/ツール等のバージョンなど)
サーバー側PC
centos7.2
mysql5.7.16
mysqlユーザー名 root
mysqlにサーバー側から直接つながるのですが、php経由では繋がりません。

winPC
newfile.phpでmysql接続を試みてます。
作ったファイルを保存した場所から直接開いて新規登録ログイン等は可能です。
接続文は
try {
$pdo = new PDO('mysql:host=localhost;dbname=users;charset=utf8','root','NLCpotenz@0902',
array(PDO::ATTR_EMULATE_PREPARES => false));
} catch (PDOException $e) {
 exit('データベース接続失敗。'.$e->getMessage());
}
です。

必要な情報が書き込み不足なのは百も承知なのですが、その際は追記しますので、どうかよろしくお願いいたします。
大変申し訳ありません。

追記が遅れて申し訳ありません。
学校の環境内に構築しているため、エラーログ等休日に確認できませんでした。

himakumaさん＞フレームワークは使っておりません
otnさん＞新規登録ボタンを押した際のエラーメッセージ PHP Fatal error: Class 'PDO' not found in /var/www/html/newfile.php on line 43, referer: http://「IPアドレス」/register.php
newfile.phpの43行目は、
$pdo = new PDO('mysql:host=localhost;dbname=users;charset=utf8','root','NLCpotenz@0902',
mysqlは
ユーザーroot
パスワードNLCpotenz@0902
でログインしてデータベースを作成しています。
ログインボタンを押した際のエラーメッセージ Class 'PDO' not found in /var/www/html/log-in.php on line9, referer: http://「IPアドレス」/login.php

log-in.phpの9行目は、
$pdo = new PDO('mysql:host=localhost;dbname=users;charset=utf8','root','NLCpotenz@0902',
です。

HTML5