よくある質問|メンズ医療脱毛のレーザースキンクリニック【公式】 Kudo | 東京のWeb制作会社・ホームページ制作会社 | SPIQA DESIGN(スピカデザイン)

よくある質問

Kudo

Q この世界はコードでできている#2

夏の暑さも落ち着いてきて、だんだん過ごしやすくなってきましたね
秋です

このノスタルジックな気持ちになる季節
何か忘れ物をしてしまったような気分になりますよね

学生時代の青春、夏の楽しいひととき、エアコンの消し忘れ、会社の最寄りの駅看板…

会社の最寄りの駅看板…………?

!!!!!!!!!!

忘れ物をした感覚になっていたのは秋のせいじゃない!!

あの記事を投稿してから、一度も2つめの記事を作成していないじゃないか!


↓ あの記事

悪夢再び

みなさんこんにちは!悪ふざけの時間です!!

コーダーの工藤です!

ながらく忘れてしまっていましたが、今回もやります。
決してめんどくさかったわけではありません。
本当です。

話を戻しまして、
今回は何をコーディングしていくかと言いますと、こちらです

見たことない人はいませんよね?
道路で一人たたずんでるあいつです

今回はこの道路標識をコーディングしていきたいと思います!!

現役コーダーが道路標識をコーディングしてみた!

このシンプルに見える道路標識ですが、意外とコーディングしてみると複雑だったりするんですよね…
とりあえずコーディングの計画から立てていきたいと思います!

コーディングの計画を立てる

まずはこの標識の肝にもなる部分。
ここはCSSで三角形を作成して回転させればいけそうですね!

でも厄介なことに白い枠線があります。
CSSで作成した三角形には枠線を追加することができないので、対策が必要そうです。

この場合は3つの三角形を作成してそれを重ねれば再現できそうなのでこの計画でやっていきましょうか!

↓ イメージ

次に考えるのはこの部分。

標識を作るだけじゃ楽しくないですからね!
ポールも作っていきましょう

ここに関しては普通に長方形を作れば大丈夫そうですね
グラデーションで立体感を出せればなお良しです

実際にコーディングしてみる!

まずはHTMLで標識の肝の部分の土台を作っていきます

<div class="sign_box">
  <div class='sign sign01'></div>
  <div class='sign sign02'></div>
  <div class='sign sign03'></div>
</div>

この [sign] というクラス名が付いている div で三角形を3つ作って白い枠線が入った赤い三角形を再現していきます!

次はCSSで装飾していきましょう!

/* 標識の親要素 */
.sign_box{
  position: relative;
  width: 260px;
  height: 233px;
  margin: auto;
}
/* 角丸の三角形を作る装飾(これを3つ作ります) */
.sign,
.sign::before,
.sign::after{
  width: 150px;
  height: 150px;
  background: #cd001e;
}
.sign::before,
.sign::after {
  content: "";
  position: absolute;
}
.sign {
  position: absolute;
  top: -9px;
  left: 93px;
  border-top-left-radius: 30%;
  transform: rotate(90deg) skewY(30deg) scaleX(.86666);
}
.sign::before {
  border-top-right-radius: 30%;
  transform: skewX(-45deg) translateX(50%);
}
.sign::after {
  border-bottom-left-radius: 30%;
  transform: skewY(-45deg) translateY(50%);
}

こうなりました

めちゃめちゃ理想です。
素晴らしい・・・

次は文字を入力していきましょう!

<div class="sign_box">
  <h1>
    <span class="ja">止まれ</span>
    <span class="en">STOP</span>
  </h1>
  <div class='sign sign01'></div>
  <div class='sign sign02'></div>
  <div class='sign sign03'></div>
</div>

こんな感じで最初に作成した土台にh1タグで文字を追加しました!
それからCSSでちょいちょいと装飾をすると・・・

じゃ~ん
ほぼ完成と言っても過言じゃないですね

フォントも近づけてみましょうか。

よし!
これで本体は完成しました!
次はポールを作成していきます

と言っても長方形を作成して色を塗るだけなのでササっとやっていきましょう

<div class="paul"></div>
position: absolute;
  top: 0;
  right: 60px;
  z-index: -1;
  width: 25px;
  height: 800px;
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(238,238,238,1) 0%, rgba(255,255,255,1) 82%, rgba(238,238,238,1) 100%);

こんな感じで記述していくと…

これはもう感激ですね。
自惚れ万歳!

完成

いかがでしょうか?
今回もなかなかいい感じに再現できたと思います!

終わりに

やっぱり思い付きで街中にあるものをコーディングするのは楽しいですね!
現在コーディングを勉強中の方も、仕事でコーディングをやっている方もぜひ試してみてはいかがでしょうか?

ここまで読んでくださりありがとうございます。 それではそろそろ業務に戻ります。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

Q この世界はコードでできている#1

……朝になりました
おはようございます。コーダーの工藤です。

今日もまたコーダーとしての1日が始まろうとしています。ウキウキしますね

「あれ?家出るときエアコン消したっけ?…」
そう考えながら会社の最寄り駅で降りると、とある看板が目に入りました。


電流が走りました。エアコンなんてどうでもいい
この綺麗な横並びの文字、統一感のあるシンプルなデザイン

「これ……コーディングで再現できそうじゃない?!」

この一言がコーディングジャンキーへの末路を歩むきっかけとなることを知らずに…

すべての始まり

皆さんどうもお初!
改めまして、コーダーの工藤です!
普段はWebサイトのコーディングを生業にしています。


早速本題に入りましょう。


実際にサイトのコーディングをしたことがある方にはわかっていただけると思うのですが、
ポスターなどの広告・道路標識・レストランのメニュー表
街中でよく見かけますよね?
僕はこれらを見たとき、ふと頭にHTMLとCSSのコードが浮かんでくるんです


「何を言っているんだ」と思った方もいるでしょう。
「嘘つくな」と声に出して周りから冷たい目線を向けられた方もいるでしょう。


ごもっともです
完全に職業病です

しかしこれ。本当なんです。

ということでこの記事シリーズでは、
現役コーダーが、街で見つけたデザインをコーディングで再現していきます!

現役コーダーが駅看板をコーディングしてみた!!

今回のメインディッシュである冒頭でお見せしたこの写真

このファビュラスな駅看板をコーディングしていきたいと思います。

コーディングの計画を立てる

コーディングを始める前に計画を立てましょう。

まずこの赤枠を1つの箱として考えます。

そしてその中にある駅名などの塊をまた1つの箱として考えて、横並びにしていこうと思います!

「線」と「矢印」はcssの疑似要素で再現できそうですね。
※疑似要素とは・・・HTMLで記述しなくてもCSSだけで作成することができる要素のこと

とりあえずこの計画でコーディングを進めていこうと思います!

実際にコーディングしてみる!

まずはHTMLで土台を作っていきましょう。

<div class="content_bg">
</div>

とりあえずはこのdiv要素を土台に作成していきたいと思います。
そしてこの要素をcssで装飾して…

/* 背景 */
.content_bg{
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #1f201a;
}
.content_bg::after{
  position: absolute;
  bottom: 20px;
  display: block;
  content: "";
  width: 100%;
  height: 22px;
  border-top: 4px solid #fff;
  background: linear-gradient(90deg, rgba(233,5,64,1) 50%, rgba(167,86,33,1) 50%);
}

こんな感じになりました。
もうそれっぽいですね。次は駅名を入れていきましょう。

<div class="station">
  <p class="station_name">
    <span class="jp_name">代官山</span>
    <span class="en_name">Daikan-yama</span>
  </p>
</div>

このHTMLが駅名の箱になります!
これを複製して土台で作成したdivの中に入れてみましょう。

cssも調整したものがこちら。
一部フォントが明朝体になっていますが、概ね一緒ですね。素晴らしい。

/* この駅名の並びはcssのposition: absolute;を使って調整しています。*/
.station{
  position: absolute;
  bottom: -90px;
}
.station:nth-of-type(1){
  left: 0;
}
.station:nth-of-type(2){
  left: 50%;
  transform: translateX(-50%);
}
.station:nth-of-type(3){
  right: 0;
}

もう少し文字の調整をしましょう…

これで一旦OKとしましょうか!フォント違うけど!
次はアイコンを作成していきます。

<div class="icon_box">
  <div class="ty_icon">
    <p class="icon_text_area">
      <span class="icon_txt">TY</span>
      <span class="icon_num">02</span>
    </p>
  </div>
</div>

アイコンはこんな感じで複製できるようにしました。

入れてみました。
いいですね。さながら駅看板です。

それでは最後に矢印を設置していきます。
矢印は土台として作ったdivの疑似要素で作成していこうと思います。

.content_box::before{
  content: "←";
  display: block;
  position: absolute;
  color: #f0fffc;
  font-size: 80px;
  font-weight: 700;
  left: 14%;
}

フォントの都合上矢印もデザインと違ってしまいましたが、これで完成になります。

完成

いかがでしょうか?
思い付きでやってみたものの結構うまく再現できたと思います

終わりに

今回駅看板をコーディングしてみた感想ですが、すごい楽しい。
何より自分の腕試しにもなるので日常的にやっていくのも成長に繋がっていいのではないでしょうか!

現在コーディングを勉強中の方も、現職でコーディングやっている方も是非試してみてはいかがでしょうか?

ここまで読んでくださりありがとうございます。 それではそろそろ業務に戻ります。

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.