デジタルハリウッドSTUDIOつくば ブログ

【受講生ブログ】台形をCSSでつくる?!①

「台形をCSSで作る!?」


こんにちは!受講生のナカザワです。


第2弾ということで、自分みたいなWeb業界素人が発信していいものか不安ですが

原トレーナーさんの後押しもありブログとして完成しました。

「人に何かを伝えること」は大好きです。頑張ります。宜しくお願い致します!!


本日の学習テーマは、「台形をCSSで作る」です。

台形をコーディングしました

今回はwebサイトで表示させる図形の作り方について考えていこうと思います。

これから作り方を考えていく図形は、Adobe PhotoshopやIllustratorなどを使えば

ツールで簡単に作ることができるものなのですが、Webサイトで表示させようと思って図形を作るのなら

これがなかなか一筋縄にはいかないのです。

Webサイトは最終的に、コーディングという作業をして

デザインをブラウザで表示できるようなデータに変換していく必要があります。


コーディング作業は、ずらっと並んだ記号や文字とにらめっこしながら

デザインを指定していく作業なのですが、これがなかなかに頭を使います。


なぜなら、文字の大きさ、色、ほかの項目との余白、画像の表示の仕方などをすべて

文字や記号を使って指定していかなくてはいけないからです。


例えば、

STUDIOつくば

このデザイン、

Webサイトで表示させるために、このような指定がされています。


HTML<p style="width: 200px; text-align: center; background-color: #f7701a; border-radius: 8px; padding: 8px; font-size: 18px; color: #fff;">STUDIOつくば</p>

ひとつずつ説明していくと


width: 200px; /*幅は200ピクセルです*/

text-align: center; /*文章は中央に揃えます*/

background-color: #f7701a; /*背景色は橙色(#f7701a)です*/

border-radius: 8px; /*角を8ピクセル分丸めます*/

padding: 8px; /*余白を上下左右に8ピクセル分とります*/

font-size: 18px; /*フォントサイズを18ピクセルにします*/

color: #fff; /*文字の色は白(#fff)です*/


こんな感じになっています。背景色や文章のそろえ方

角の処理の仕方までそれぞれ指定されていることがわかると思います。

これを「STUDIOつくば」という文章に対して、見た目として適用することによって

上のようなデザインが再現されているというわけです。


このデザインは比較的シンプルで、7つの項目に対してそれぞれの値を指定すれば再現できてしまいます。

しかし、より複雑なデザインになってくると当然、設定していく項目が増えていきます。

STUDIOつくば

STUDIOつくば

STUDIO
つくば

また、一見簡単そうに見えても、なかなか文字で形を指定することができない図形もあります。


例えばこんな形です


例えばこの「台形」です。


すごく簡単な図形に思えます。しかしこれはなかなか文字で指定することができません。

では、なぜ文字で指定するのが難しいのでしょうか。



続く

台形をCSSで作る!?②

ご興味ある方や詳細を聞きたい方は、下記の来校予約や資料請求よりお問い合わせください

お客様のご予定に合わせて開催

まずは、じっくり検討!

その他のSTUDIOつくばのブログ

BLOGS