料理・レシピ絵の練習ジャンプブログ改造そのほか2016-10-15divタグとCSSで「はてなブログのロゴマーク」を作る手順CSS深い意味は無いのですが、最近ブログに時間をかけるよりその分たくさんコードを書こうと思い始めました。作って公開するなら、やはり手軽なのはHTMLやCSSです。これらを使い、何でも良いので作っていこうと思います。前回作った食べれないサンドイッチはこちら。はじめに今回つくるのは、これです!みんな大好きはてなブログのロゴマーク。公式素材としても配布されているこの画像を、CSSで表現していきます。1.大まかな部品を構想するCSSでは1つの要素を複雑な形に変形させることができないため、作りたいものがある場合には、何を組み合わせて表現するかを考えておく必要があります。枠線を利用して三角形や台形を作る角を落として楕円形にするなどの簡単な変形は可能です。CSSの変形に慣れていない人は、こちらのサイトなどを見ながら、そもそもCSSではどんな種類の部品が作れるのかを知っておくと進めやすくなります。ここでは全体のイメージのため、頭の中で行った部品分けを書き出してみました。この写真の通り、はてなのロゴは次の3つの部品で表現できると考えました。3に重ねる)ペン先の胴体2.まずはザックリ作る今回作るものはそこまで複雑ではないので、まずは全体をさっと作った後、ズレやサイズなどを補正していくことにしました。つくったものがこちらです。CodePen.スタンガンかな?なにやら危険な香りがします。確かにペン先は尖っているものですが、これはちょっと明らかにアレすぎますね。ジャンプの漫画的に言うと、トリコの「ノッキングガン」、もしくはワールドトリガーのスナイパー銃「ライトニング」という感じです。ここでは先っぽが尖っていない点と、隙間部分が太すぎる所が問題だと考えました。3.修正していく最初の時点で完成版の作り方が分からなくても、「とりあえず作る」という行動により、評価が行えるようになったのは大きな進歩です。ビジネスもコーディングもブログも、まずは始めてみることが第一歩となります。話を戻し、第一版の問題点を修正していくと、次はこんなものができました。CodePen.さっきよりは、かなり本物に近いですね!でもちょっと先っぽが鋭利すぎます。こんなペンで文字を描いたら紙がすぐに破れてしまいそうです。あと、形が整ってきたことで、全体のバランスも気になり始めました。あと一息ですので、気合を入れて修正していきましょう。4.完成させる調整に調整を繰り返し、やっと完成したものがこちらです。CodePen.※下は本物の画像です。思ったよりそれっぽく仕上がりました。定規で図ると結構ズレていそうですが、見慣れた人でなければ本物との区別は難しそうです。作っていて一番大変だったのは、ペン先が若干内側に湾曲していること。CSSは外側に湾曲させる(凸型)表現は割と簡単ですが、内側の湾曲(凹型)は「要素Aに、外側に湾曲した要素Bを重ねる」というやり方でしか表現できないため、位置調整などに結構手間がかかります。5.おまけ:遊び心を加えるさて、本物には近づいたわけですが、やっぱり模倣だけでは面白みがありません。ここでは何かちょっとしたオリジナル要素を入れてみましょう。凝った演出は面倒なので、簡単にできそうな変更を考えます。2の効果はradial-gradient(楕円形のグラデーション)で、3はdivタグを追加して表現します。経過すること50分、最終的にはこんな見た目になりました。CodePen.はてなブログ、みいつけた!※全体的に著作権は元ファイルにありますので、ご利用は計画的に。さいごに上記のとおり、「開始~大まかな形ができるまで」よりも最後の微調整の方が時間がかかっています。今回の場合、ペン先の湾曲を無視すれば、あと1時間は早く完成できました。表現の凝ったものを作る場合、「ザックリ作る」のと「そこから微調整して完成させるまで」というのは同じくらいか、もしくは後者のほうがずっと時間がかかることも多々あります。『「大体できてる」状態から、「完成」までには時間がかかる』ということを意識しておくと、お互いに幸せになれると思います。結論:はてなのロゴはかっこいい。VOL.2アーティ...2016-10-20CSSアニメーションでロボットを動かしてる人が居たので、Forkして遊んでみた何気なくCodePenを見ていたら、トップページにこんなのがありま...2016-10-11最近とてもサンドイッチが食べたいから、CSSの3Dで作ったというわけで作ってみました。動くものは本文にあります。はてなブログPro昭和の最後の方に生まれた♂。IT系に就職してシステム開発を行う。結婚してても一人ボウリングや一人カラオケに行く。beatmaniaIIDXにハマっており練習のためのツール開発などをしている。スコア記録ブログはこちら。寝る前にスマホを触らない時期が過ぎたクリスマスツリーやるべきことを朝にやる安くて美味しいものスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。