かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ
2017年6月17日 Webデザイン, 便利ツール, 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「カテゴリー別配色アイデア100」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できるツールを集めてみました！ ↑私が10年以上利用している会計ソフト！ Color Tool – Material Design Color ToolはGoogleのマテリアルデザインの公式配色ツール。右側のパレットからPrimary（メインカラー）とSecondary（サブカラー）を選択すると、左側でプレビューできます。文字色も選べますよ。プレビュー画面は全部で6つ。 このWebサイトの面白いところは、作成
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
レスポンシブ対応！縦に半分割しているWebサイトの作り方
2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回
PANTONEが選ぶ2017年の色「Greenery」を使った配色例
2016年12月14日 インスピレーション, 色彩 PANTONEはアメリカ、ニュージャージー州に本社がある色見本帳の販売や色に関わるさまざまなサービスを提供している会社。Webデザイン、プロダクトデザイン、ファッションデザインなど、多くの業界に影響を与え続けています。PANTONEはこの時期になると毎年「来年の色」を発表しており、2017年の色は爽やかな緑色の「Greenery」に決まりました。今回はその「Greenery」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Greenery」ってどんな色？ イメージ動画にも使われているような、春の新緑を思わせる鮮やかな黄緑色のGreenery。「爽やかで活力のある、新しい始まりを象徴する色」と説明されています。なんだか見ているだけでワクワクしてきちゃいますね！ 色の具体的な数値は以下の通り： PANTONE：15-
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2017年1月に読んだWeb・デザイン関連の本