1. 初めに
HTML/CSSでロゴの作成に挑戦してみました。
cssは完全に慣れていませんが、本物のロゴに近づけるようネットなどを駆使して作成しました。
See the Pen National Geographic Logo by tsubasa (@tsubasamaru) on CodePen.
2. 気をつけたこと
⑴ ロゴに使用されている字体について
ロゴの字体を英語で検索したところ、「geometric sans serif」というフォントが使用されていましたが、CSSのfont-familyでは、sans-serifとか色々ありましたが,今回は「"geometric sans serif" sans-serif」を使用しました。
⑵ 金色の四角形に四角い穴を開けるには
まず、２つの四角形を用意します。金色の四角形と黒色の四角形です。それから、黒色の四角形を金色の四角形に埋め込みます。
このとき、黒色の四角形を金色の四角形に埋め込むため、中まで移動する必要があるので、cssの「tansform」というプロパティを使用しました。
例: transform:translate(-50px, 120px) scale(0.8, 1);
3. 最後に
今回作成した四角形が上に位置するナショジオのロゴですが、今度は左側に位置するロゴを作りたいのでですがフォントもまた違ってくるため、苦戦しています。
geometric sans serifと英語で表記していましたが、中々ロゴのような感じが出てきませんでした。まだ模索しています。