参考作品?:小林さん

WEBデザインのテクニックを画像4枚でわかりやすく教えてくれるアカウント「小林 I Webデザイナー」さん。

小林さんXプロフィール

https://x.com/pulpxstyle

要素の強弱の付け方をメインに配色アイデアや小技まで、すぐに使えるアイデアを発信してくれています。

最近見たポストでかなり有益だなと思ったのがこちら。

わ、わ、わかりやすうううい！！

プレビューのすぐ下に短いCSS。widthとかpositionを省いてポイントのみ伝えているところがわかりやすさの秘訣ですね。

恥ずかしながらつい最近知ってフォローしました。友人たちが結構フォローしててびっくりしました。

アイデアが欲しい時にTL眺めようと思ってます！

ではでは。

基本のキ(?)右側に”くの字矢印→”がついたボタン

こんにちは。ささめまです。

線との組み合わせボタンがやっぱりなんとなく好きで、
また使いたいので作り方の備忘録です。

＼ コピペでそのまま使えます ／

demo

button

html

<a href="#" class="button_link">button</a>

css

.button_link {
	width: 280px;
	height: 60px;
	color: #353535;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	line-height: 60px;
	background-color: #bdefea;
	border-radius: 50vh;
	display: block;
	position: relative;
	transition: 0.3s;
}

.button_link::before {
	content: '';
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 50vh;
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.button_link::after {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 3px solid #353535;
	border-right: 3px solid #353535;
	position: absolute;
	top: 50%;
	right: 27px;
	transform: translateY(-50%) rotate(45deg);
}

.button_link:hover {
	background-color: #81d8d0;
}

design

右端に「 > 」とか「→」がつくボタン、よくあるデザインだけど
正直ちょっとめんどくさいなと思っていたので
こういうシンプルめの記述で再現できるようになったのは
とっっっっってもありがたいです！

::after要素のwidthとheightでくの字矢印の長さを、border-topとborder-rightで太さを変えられます。大きさ自由自在☆

マークアップ言語を覚えたての2014年頃、
ボタンの箱の中に文字+矢印のデザインが大流行。
font-awsomeの矢印達とはマブダチでした。
(font-awsomeの矢印をfloatかpositionで配置するやつ)

それがfont-awsomeから矢印引っ張らなくてよくなって
floatもいらない！positionは使うけど！cssだけで簡単！
便利になって感激です。

もう矢印ボタンは怖くない。
リクエストされてもニコニコで受け付けます^^

ではでは。

工事しながら走ります！

はじめまして！　ささめまです。
職業はサラリーマンフロントエンドエンジニアです。

素敵な配色やマウスオーバーエフェクト、見てて楽しいjavascriptなど、WEBサイトデザインやコーディングに役立ちそうなアイデアや制作技術をブログとして書き溜めていこうと思います。
（あと、デジタル/フィジカル問わず、作っているものの途中経過などを残したいです）

ある程度書き溜めたらcss / javascript見本帳を作って
「WEBデザイン、迷ったらここ」
と言えるようなサイトにしたいなあ(果てしない夢)。


綺麗なデザインに仕上げてから走り出したい気持ちはあったものの、如何せん走り出したい気持ちの方が強かったので(笑)
このまま工事しながら走ります^^

WEBサイト制作の知識を貯めるぞー！！！！！！
ではでは。