【第4弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス

2021/03/04 212 users 実装 目次 CSS小技集 言語 配置

2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせ... 続きを読む

Vue.js、Nuxt JSを学習するときにやったこと | Webクリエイターボックス

2021/01/21 165 users Vue.js GATSBY 単一ファイルコンポーネント 手順

2021年1月21日 JavaScript, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今... 続きを読む

SVG形式のファビコンを設置しよう | Webクリエイターボックス

2020/02/12 137 users ファビコン SVG PNG SVG形式 画質

2020年2月13日 SVG, Webサイト制作 つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要は... 続きを読む

CSSで見出し固定＋レスポンシブ対応の表を作成 | Webクリエイターボックス

2019/10/16 345 users CSS 作成 レスポンシブ対応 タイムテーブル 制限

2019年10月17日 CSS, HTML5, Webサイト制作 料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 見出しの行を固定する 表の中の行が増えてくると、スクロ... 続きを読む

Webサイトをダークモードに対応させよう | Webクリエイターボックス

2019/09/26 228 users ダークモード CSS 普及 モニター Webサイト

2019年9月27日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増... 続きを読む

【第3弾】少しのコードで実装可能な15のCSS小技集 | Webクリエイターボックス

2019/05/16 591 users 実装 CSS CSS小技集 コード 進化

2019年5月17日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ... 続きを読む

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン | Webクリエイターボックス

2018/11/14 207 users details アコーディオン CSS 補足説明 長い文章

2018年11月14日 CSS, HTML5 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部... 続きを読む

JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス

2018/08/07 409 users アクセント プラグイン サンプル パーティクル デザイン

2018年8月7日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別... 続きを読む

Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ | Webクリエイターボックス

2018/07/02 124 users ワイヤーフレーム デザインテンプレート UIキット 前段階

2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、... 続きを読む

WebデザイナーのためのVue.js事始め | Webクリエイターボックス

2018/04/18 419 users Webデザイナー jQuery CSS アニメーション コード

2018年4月18日 JavaScript , Vue.js Vue.js はサクッと小さく始められるJavaScriptのフレームワークです。「びゅー」と読みます ;) これまでWebデザイナーがjQueryで作成したような動きもVue.jsでも加えられるのですが、jQueryとは違ってHTMLに条件文を加えたり、アニメーションをCSSで設定することで、JavaScript自体のコードをあまり書... 続きを読む

CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス

2018/04/04 112 users CSS Grid レスポンシブ対応

2018年4月4日 CSS 以前「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ 2カラム まずは基本の2カラム。CSS Gridのい... 続きを読む

Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介 | Webクリエイターボックス

2018/03/15 122 users Adobe XD 手順 ページ推移 webデザイン 画面作成

2018年3月15日 Webデザイン , XD デザインやプロトタイプを作成できる Adobe XD 。みなさん使っていますか？ 先日アップデート もされ、Photoshopとの連携がより簡単になったり、 Sketch ファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。と... 続きを読む

CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス

2018/02/07 137 users less Sass CSSプリプロセッサー CSS変数 変数

2018年2月7日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数の使い方と注意点をまとめていきます！ CSS変数とは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properti... 続きを読む

Web制作者のためのおすすめChrome拡張15 | Webクリエイターボックス

2018/01/16 388 users WEB制作者

2018年1月16日 Webサイト制作 , 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ Web Developer Chrome拡張 ｜ Firefox Add-on ｜ GitHub ｜ 公式サイト Webに携わる人は入れておいて損... 続きを読む

Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ | Webクリエイターボックス

2017/10/11 488 users テンプレート レイアウト 本気 webデザイン 制作

2017年10月11日 CSS , Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自... 続きを読む

クリエイティブなファビコンを設置しよう | Webクリエイターボックス

2017/09/22 431 users ファビコン favicon Favourite ICON タブ

2015年4月23日 Webサイト制作 , 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているの... 続きを読む

かゆいところに手が届く！Flexboxを使った便利な小技 | Webクリエイターボックス

2017/09/14 100 users Flexbox Mana 互い違い かゆいところ テキスト

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana ( @manabox ) on CodePen . ... 続きを読む

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技 | Webクリエイターボックス

2017/07/07 1897 users CSS div全体 目次 実装 jQuery小技集

2015年3月17日 CSS 2011年に「 少しのコードで実装可能な20のjQuery小技集 」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 目次 Div全体をクリックできるようにする... 続きを読む

配色が苦手な人でもプレビューを見ながら直感的に使える配色ツール5つ | Webクリエイターボックス

2017/06/19 141 users 色彩 プレビュー 配色 プレビュー画面 印象

2017年6月19日 Webデザイン , 便利ツール , 色彩 配色って奥が深いです。「この色いいな！」と思っても、実際にデザインに適用してみるとなんだかイメージと違ったり。このブログでも過去に「 カテゴリー別配色アイデア100 」という記事で配色例を紹介しましたが、その配色を見たときと使ってみたときとではまた異なる印象になるかもしれません。そこで今回はプレビュー画面で確認しながら配色を作成できる... 続きを読む

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！ | Webクリエイターボックス

2017/06/08 248 users border-radius プロパティー CSS 四隅 円弧

要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ 無難で王道！正円の円弧を使った角丸 border-radius は... 続きを読む

WebサイトにSlackと連携したチャット機能を加えられる【Smallchat】 | Webクリエイターボックス

2017/05/01 128 users Slack 接客 Web接客 チャット機能 類似サービス

Smallchat はWebサイトにチャット機能を加えられるWebサービス。類似サービスは他にもありますが、Slackと連携できる点にメリットを感じる方も多くいらっしゃると思います。Webサイトにチャット機能をつけることで、Web接客やリアルタイム接客と呼ばれる、Webサイトでも現実世界の店舗や企業のように質問をすればすぐに受け答えしてもらえるような接客が可能となるでしょう。ECサイトなどで特に重... 続きを読む

手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」 | Webクリエイターボックス

2017/04/16 112 users グリッドレイアウト CSSグリッドレイアウト CSSコード

先日公開した記事「 CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する 」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「 Griddy 」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ Griddy のサイトを開くと4つのグリッドアイテムが表示されています... 続きを読む

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス

2017/04/13 706 users CSSグリッドレイアウト Grid display タイル状

大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 1. どんなレイアウトに... 続きを読む

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2017/03/30 1264 users チートシート CSS flexbox Flexbox 通り

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは 以前からFlexboxの使い方について紹介してきた のです... 続きを読む

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

2017/03/13 661 users プロパティー object-fit Photoshop 画像

画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画... 続きを読む