やってみたに関する記事一覧
backgroundの全プロパティをショートハンドで書いてみた
皆さんは「背景画像の上にもう一枚背景画像を乗せたい！」「グラデーションの上に背景画像を乗せたい！」という時、backgroundがうまく効かないってことがありませんか？
実際、自分が苦戦して色々調べてなんとか完成させたので、自分がやった失敗例とともにbackgroundの解説をしていきます！
エンジニアでもできた！LINEスタンプ販売！
年始から始まったラインスタンプの作成。
1月末に申請を行い気づけば約3ヶ月経ち、まだかまだかと待っていましたがついに承認がおりました！
承認がおりれば後は販売です！今回は承認から販売までのお話になります。
transitionを使ってエフェクトをつけてみる
css3の登場で、我々マークアップエンジニアもずいぶんと簡単に「動き」を付けることが出来るようになりました。
css3は本当に楽しいです(｀・ω・´)
今回はそんなcss3より、transition（トランジション）という時間の変化を操るプロパティの使い方をメモしたいと思います。
時間の変化というと想像しにくいのですが、実は当ブログでも右ナビのボタン群にはすべて指定してあって、オンマウス時に少しほわっと切り替わる感じがすると思います。パキっじゃなく、ほわんっ！これがtransition！ぜひ試してみてください！
画像は一切つかわずにcss3で鏡餅を描く②
前回の『画像は一切つかわずにcss3で鏡餅を描く①』の後、近日第二部UP予定と書いておりましたが…ずいぶん時間が空いてしまいました。
「既に鏡餅のシーズンなんて終わってしまったんですよ～」
『なぁにぃ！？ やっちまったな！』
男は黙って、記事UP！（すみません）
と言うことで第二部、はじまりはじまり～
エンジニアでもできた！LINEスタンプ申請までの道(2)
前回エンジニアでもできた！LINEスタンプ申請までの道(1)でスタンプになる絵を作成しました。今回は作成した絵の加工とLINE Creators Marketへの登録までのお話になります。
cssと画像のみ！フォームの選択項目を装飾する方法
以前ラジオボタン、チェックボックス、セレクトボックスの用途についてメモしました。同じラジオボタンでもブラウザによってデザインが多少違うのも確認出来たかと思います。がしかし、最近のサイトはみんなおしゃれに装飾されていますよね。クリックやタップし易いように大きくなっていたり、色がついて分かり易くしてあったりと。
ウチのサイトもそれぞれサイトにあったデザインをするようになり、実装し始めた次第であります。ブラウザ対応が必要な部分もありますが、サイトのデザインに馴染んだボタンを設置できるのでぜひともマスターしたいところなのです。
装飾にはいろいろなやり方がありますが、今回は「オリジナル画像」を使っての装飾にラッスンゴレライしてみたいとおもいます(｀・ω・´)
きれいに装飾してリッチなデザインにしてやりましょう！
画像は一切つかわずにcss3で鏡餅を描く①
前回の『cssで鏡餅を描いてみる』の回で次回プチテクニックの解説を書くと予告しました。
何の役に立つかわかりませんが、cssで鏡餅を描くための解説をしていきたいと思います。
今回は長編になりそうなので、2回に分けてお送りいたします。
それでは第一部、はじまりはじまり～
エンジニアでもできた！LINEスタンプ申請までの道(1)
何かと話題になっているLINEクリエイターズスタンプ。
TV番組にも取り上げられ、イラストレーター、芸能人、会社等の幅広い人達が参加し、各々のスタンプを販売しています。
そんな中に混じろうと思いこの度スタンプの作成をしてみましたので、前半（画像作成）と後半（画像の調整と登録）でお話をしたいと思います。
※今回の記事ですがスタンプの画像作成の一例として見て頂ければと思います。
Photoshopでいろんな影を作ってみた。～応用編～
こんにちは。
この頃だんだんと肌寒くなってきて、ホットのはちみつレモンやはちみつゆずばかり飲んでいる、まるこです。
弊社が入っている恵比寿ガーデンプレイスもイルミネーションが点灯されてロマンティックな雰囲気むんむんです！
…余談はさておき、今回は前回の「Photoshopでいろんな影を作ってみた。～基本編～」に続き、応用編に入りたいと思います！
奥が深いPhotoshopの世界、私もまだまだ修行中の身ではありますが、今回の方法もデザインを行う上でとても便利なテクニックなのでご紹介していきます。
opacityを使ったボタンのhover時の動作
どうしてもボタンに画像を使いたい！ さらにボタンのhover時の見た目を変えたい！
そんな時皆様ならどうやって作りますか？
もちろん！テキスト画像置換をする時にチェックしたいことで紹介された方法もありますが、今回はOpacityを使った方法を紹介します。
Photoshopでいろんな影を作ってみた。～基本編～
WEBデザインは平面の世界。
そんな平面の世界で「浮き上がっているように見せたい」とか「ポチッと押したくなる立体的なボタンにしたい」とか、ワンポイントを加える際にとっても効果的な"影"。
今回作成してみたこちらの画像、ろうそくやキャンディが浮き出ているように見えたり、こうもりが飛んでいるように見えたりする…と思います。
この画像もいくつかの"影"を使ってメリハリを付けてみました。
今回は"影"の付け方～基本編～と題して、Photoshopでの"影"の付け方について書いていきたいと思います！
CSS3で、いろいろなものを”ぶるぶる”震わせよう！
CSS3を使って、いろいろなものを((( ；ﾟДﾟ))ﾌﾞﾙﾌﾞﾙふるわせてみました！ソース解説付き
※ Chrome, Firefox対応。IE10以上対応。
インライン要素とpaddingの微妙な関係♡
今回の記事は、HTMLタグの分類。ブロック要素とインライン要素の追加レポートです。
先日、上記の記事について「インライン要素はpadding上下で余白がとれる気がします。」というコメントを頂きました（コメントありがとうございます！）。本当に…!? とドキドキしつつ、背景色を付けた状態で、見てみると、あれれ…確かにpaddingを取ったところに背景色がついている…? ということで、今回は、インライン要素とpaddingの微妙な関係について徹底検証いたします！
