前略プロフィール風テンプレートを作ってみた

投稿日：

更新日：

ラベル：Web 制作

このブログにプロフィールページでも設けようと思ったが、どうせ作るなら普通じゃつまらない。

そこでひらめいたのが、今は亡き前略プロフィールの再現だった。

「前略プロフィール　テンプレート」で検索しても、それ風の HTML と CSS を配布しているところは見つからなかったので、自分で1から作ることにした。

テンプレート作成方法

サービスが終了したサイトといえどウェブアーカイブにはデータが残っている。

本当はソースコードを丸パクリしようと思ったが、やたらと div まみれだし style 属性に CSS を直に埋め込んでるしで、煩雑な印象だ。

そのため、デザインを元に極力近付けつつ HTML と CSS を書き直した。

プロフィールの項目は以下の知恵袋に載っていたものを流用。

ただ、下の記事の画像を見る限り、他にも項目はあるっぽい。

前略プロフィール風テンプレート

HTML,CSSを分けてみたけど特に意味はない。

<div class="prof-box">

<h2>名前 * Name</h2>

<img alt="プロフィール画像" height="240" width="320" src="[画像 URL]"/>

<h3>HN</h3>
<p></p>

<h3>HNの由来</h3>
<p></p>

<h3>性別</h3>
<p></p>

<h3>誕生日</h3>
<p></p>

<h3>星座</h3>
<p></p>

<h3>血液型</h3>
<p></p>

<h3>前世</h3>
<p></p>

<h3>住んでいるところ</h3>
<p></p>

<h3>生まれたところ</h3>
<p></p>

<h3>職業</h3>
<p></p>

<h3>学年</h3>
<p></p>

<h3>絡むーちょ</h3>
<p></p>

<h3>似ている芸能人</h3>
<p></p>

<h3>身長</h3>
<p></p>

<h3>体重</h3>
<p></p>

<h3>足のサイズ</h3>
<p></p>

<h3>手の長さ</h3>
<p></p>

<h3>趣味</h3>
<p></p>

<h3>特技</h3>
<p></p>

<h3>握力</h3>
<p></p>

<h3>髪型</h3>
<p></p>

<h3>口癖</h3>
<p></p>

<h3>性格</h3>
<p></p>

<h3>嗜好品</h3>
<p></p>

<h3>自慢なこと</h3>
<p></p>

<h3>持っている資格</h3>
<p></p>

<h3>使っている携帯電話</h3>
<p></p>

<h3>好きな男性のタイプ</h3>
<p></p>

<h3>好きな女性のタイプ</h3>
<p></p>

<h3>好きな言葉</h3>
<p></p>

<h3>好きな芸能人</h3>
<p></p>

<h3>好きな食べ物</h3>
<p></p>

<h3>嫌いな食べ物</h3>
<p></p>

<h3>好きな飲み物</h3>
<p></p>

<h3>嫌いな飲み物</h3>
<p></p>

<h3>好きな教科</h3>
<p></p>

<h3>嫌いな教科</h3>
<p></p>

<h3>好きなテレビ番組</h3>
<p></p>

<h3>好きな映画</h3>
<p></p>

<h3>好きな本</h3>
<p></p>

<h3>好きなスポーツ</h3>
<p></p>

<h3>好きな音楽</h3>
<p></p>

<h3>好きなブランド</h3>
<p></p>

<h3>愛用の香水</h3>
<p></p>

<h3>好きな花</h3>
<p></p>

<h3>好きなゲーム</h3>
<p></p>

<h3>愛車</h3>
<p></p>

<h3>将来の夢</h3>
<p></p>

<h3>好きな動物</h3>
<p></p>

<h3>休日の過ごし方</h3>
<p></p>

<h3>尊敬する人</h3>
<p></p>

<h3>今一番欲しいもの</h3>
<p></p>

<h3>今一番行きたいところ</h3>
<p></p>

<h3>今一番やりたいこと</h3>
<p></p>

<h3>よく使う路線</h3>
<p></p>

<h3>よく遊ぶところ</h3>
<p></p>

<h3>カラオケでよく歌う曲</h3>
<p></p>

<h3>初めて買ったＣＤ</h3>
<p></p>

<h3>マイブーム</h3>
<p></p>

<h3>最近ひそかに興味があること</h3>
<p></p>

<h3>生まれ変わったら</h3>
<p></p>

<h3>世界平和に必要なのは</h3>
<p></p>

<h3>兎に角主張したい事</h3>
<p></p>

<h3>疑問に思っている事</h3>
<p></p>

<h3>ここだけの話</h3>
<p></p>

</div>
<style>
.prof-box{
  margin: 30px 0;
  padding: 10px 0 20px;
  width: 100%;
  line-height: 1;
  background: #fff;
  color: #333;
}
@media(min-width: 480px){
  .prof-box{
    margin: 30px auto;
    padding: 10px 10px 20px;
    width: 360px;
    border: 1px solid #ccc;
  }
}
.prof-box h2,
.prof-box h3{
  background: green;
  color: #fff;
  border: none;
  font-size: medium;
  font-weight: normal
}
.prof-box h2{
  margin: 10px 0;
  padding: 0 5px;
  text-align: center;
}
.prof-box h3{
  margin: 10px 20px;
  padding: 0 5px;
}
.prof-box img{
  display: block;
  margin: 20px auto;
  padding: 0;
  max-width: 100%;
  height: auto;
}
.prof-box p{
  margin: 10px 20px;
  padding: 0;
  line-height: 1.6;
  font-size: small;
}
.prof-box a{
  color: #333;
  text-decoration: underline;
}
</style>

あとがき

ちなみにテンプレートに則って回答してみたが、恥ずかしくなって公開するのはやめた。プロフィールページは次の機会に作ろう……。

編集
新しい投稿 前の投稿
ホーム