【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
商用利用OK！2018年にリリースされた無料フォント40 | Webクリエイターボックス
2018年12月19日 フォント 2018年もあとわずか！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 過去の年末フォント紹介記事 2017年にリリースされた無料フォント40 2016年にリリースされた無料フォント30 2015年にリリースされた無料フォント35 日本語フォント 木漏れ日ゴシック どこかほっとするような、優しい雰囲気のフォント。所々わざと線をつなげていない切れ間があります。手書きの流れを残してカタカナの方が小さめだそうです。 源暎Nuゴシック 漫画の強調セリフとして使える特太モダンゴシック体。漫画でよく使われる「!!」「!?」などの組み合わせが簡単に使え、母音や「ん」にも濁点がつけられますよ。 ロンド B
新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方
2022年4月27日 CSS, Webサイト制作, 便利ツール 皆さん、使っていますか？Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム！Chromeにデフォルトでついている機能なので、今すぐに使い始められますよ。また、「デベロッパーツールの存在は知っていてもどう使えばいいかわからない…」という方向けに、使いどころポイントも紹介します！ ↑私が10年以上利用している会計ソフト！ Chromeデベロッパーツールの基本的な使い方 まずはChromeでデベロッパーツールを起動させましょう。Webページ内のどこでもいいので右クリックし、「検証」を選択します。 すると、こんな感じでパネルが表示されます。これがデベロッパーツールです。英語だらけでびっくりしちゃうかもしれませんが、次第に慣れます（たぶ
CSS Gridを使ったレスポンシブ対応の基本レイアウト
2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸
CSSで変数（カスタムプロパティ）を使ってみよう
2020年5月13日 CSS プログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ ↑私が10年以上利用している会計ソフト！ CSSカスタムプロパティとは？ 公式では「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というもの
Webクリエイターボックスの2017年を振り返る
2017年12月27日 Web関連記事, お知らせ 今年も残りあとわずか！一年間お世話になりました！Webクリエイターボックスも間もなく8周年です！毎年思いますが早いですね。という事で例年どおり、Webクリエイターボックスが今年1年どんな変貌を遂げたのか、そしてWebクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね？ :3 ↑私が10年以上利用している会計ソフト！ 2017年ハイライト 今年あった出来事をまとめました。今年もイベントにちょこちょこ参加して、勉強会等で登壇しています。次はあなたの街に出現…するかも……よ？ 6月30日 Webクリエイターボックス、常時SSLに対応 7月20日 Webデザインギャラリー開始 9月27日 INTERVIEW A GO GO #009に出演 10月14日 CSS Nite in HIR
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
日本らしさを表現！CSSで文字の縦書きに挑戦！
2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！ 縦書きにするには 縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSで writing-mode: vertical-rl; を記述します。この「vertical」が縦、「rl」が右から左（Right to Left）という意味です。 また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl（上から下、右から左＝
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
初心者でも簡単！日本語で手軽に設置できるフォーム作成サービス3選
2017年5月16日 Webサイト制作, 便利ツール Webサイトとユーザーの架け橋となる問い合わせフォーム。ユーザーからすると単に問い合わせ先の電話番号やメールアドレスを掲載されているよりも気軽に問い合わせできますよね。今回はそんな問い合わせフォームをサクッと設置できるサービスを紹介します。HTMLとCSSで簡単なWebサイトは作れるようになったものの、問い合わせフォーム等の機能は作れない！なんていう方の強い味方！ ↑私が10年以上利用している会計ソフト！ 定番中の定番！【Googleフォーム】 Googleが提供しているGoogleフォームは誰でも無料で直感的にフォームを作れるサービス。アンケート調査に使われることが多い印象ですが、お問い合わせフォームとしても使えますよ。さっそく作ってみましょう！ まずは「Googleフォームを使う」ボタンをクリックしてフォームの作成画面に移動し、右下
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
手軽にCSSグリッドレイアウトのコードを生成できる「Griddy」
2017年4月15日 CSS, 便利ツール 先日公開した記事「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」に続き、CSSグリッドレイアウト情報第二弾。今回はグリッドレイアウトを作成するにあたり、「Griddy」というCSSコードを生成してくれる便利なWebサイトがあったので紹介します。グリッドレイアウトの勉強にもなると思いますよ！ ↑私が10年以上利用している会計ソフト！ Griddyのサイトを開くと4つのグリッドアイテムが表示されています。アイテムの数を増減するには左上の「Add or Remove elements within the grid」のエリアでプラスまたはマイナスのボタンをクリックして数を変更します。 続いて「Grid Template Columns」でカラムの幅を指定します。デフォルトでは3つのボックスが横並びになっていますが、4つ以上
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー
2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
レスポンシブ対応！縦に半分割しているWebサイトの作り方
2017年1月16日 CSS, Webデザイン, スマートフォン 画面を大胆に縦に割ったレイアウトのWebサイトが流行中。複数のセクションで分割しているサイトもありますが、中でも多く取り入れられているのが真っ二つに分けている半分割のレイアウト。インパクトがあって注目を集められる上、スクロールをせずに複数の情報を表示できます。今回はそんな縦半分割のレイアウトを使ったWebサイトの作り方と、実例をいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 縦に半分割しているWebサイトを作ってみよう！ Dropboxのガイドラインページでは、ユーザーガイドと管理者ガイドが同レベルの重要度としており、ふたつのコンテンツを横並びにして表示しています。このように複数のコンテンツを同じ重要度で見せたい時に縦分割のレイアウトが活かせます。 幅の狭いデバイスで見るとカラムが縦並びに変更されます。 今回
商用利用OK！2016年にリリースされた無料フォント30 | Webクリエイターボックス
2016年12月20日 フォント 2016年も残り二週間！今年も数多くの素敵フォントがリリースされました！この一年を振り返って、「これは！」と思ったフォントをいくつか紹介します。どれも無料でダウンロードでき、商用利用可能なものです。みなさんのお気に入りが見つかると幸いです。 ↑私が10年以上利用している会計ソフト！ 日本語フォント あさご本丸ゴシック 上品な丸みが可愛らしいフォント。軽やかさをいかしたポップなデザインに仕上がります。豊富なバリエーションは有料。 マキナス 2008年に制作開始したマキナスフォントが更に読みやすくなってリリースされました。約6,600字に対応。見出しに大きく打ち出して使うとかっこよさそう。 マメロン 約6,600字に対応しており、画数の多い漢字でもきれいに表示されます。個人的にはこのフォントの漢字がとっても好み！全角英数字は一文字ずつボタンのように枠がつきます
子テーマを作ってWordPressの既存テーマをカスタマイズする方法
2017年5月1日 Wordpress いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイン・コーディングが済み、自由に利用できる既存のテーマも豊富に配布されています。今回はそんな既存のWordPressテーマを使うメリットや、子テーマを作成してカスタマイズする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ WordPressの既存テーマを利用するメリット ちょっと検索すればたくさんのWordPressの既存テーマが見つけられます。既存テーマを利用すると、どんなメリットがあるのでしょうか？ 制作時間を短縮できる こういった配布されているテーマを使うメリットは、なんといっても制作時間の短縮。豊富なテーマの中には、自分の思い通りのレイアウトのものも見つけら
ブラウザー上でスタイルガイドが作れるFrontifyを試してみた
2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る
Flexboxを使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
2016年9月21日 CSS, Wordpress ブログ等の個別記事でよく見かける、「前の記事」「次の記事」へのリンク。これまでも実装方法やスタイリング方法は紹介されてきましたが、Flexboxを使ったらもっと楽に作れちゃうよ！ということで、その方法と、ついでにWordPressでの実装方法も紹介します。 ↑私が10年以上利用している会計ソフト！ 1. モバイル用リンクを作成 まずは小さい画面用のリンクを作成します。「モバイルファースト」と呼ばれる手法ですね。前の記事のリンクを上に、次の記事のリンクを下に並べて表示します。ここでは特に込み入った事はしないので、簡単に実装できるはずです。 HTML <div class="prev-next-link"> <a class="prev-link" href="#"> <p class="prev-next-label">前の記事</p> <
MailChimpを使ってニュースレターのテンプレートを作成する方法（＋ニュースレター始めました）
2017年8月25日 CSS, お知らせ, 便利ツール この度、WebクリエイターボックスではWeb制作関連の情報やWebクリエイターボックスからのお知らせを配信するニュースレターを始めました！その際に利用することにしたMailChimpというニュースレター配信サービスについて紹介します！ ↑私が10年以上利用している会計ソフト！ Webクリエイターボックスのニュースレターに登録する！ もしご興味がありましたら、ぜひご登録くださいね！ ※プライバシーポリシーに基づき、スパムメールを送信したり、メールアドレスを第三者に譲渡・売買などは一切いたしません。 ※Webクリエイターボックスのニュースレターは、どのタイミングであっても配信停止ができます。配信停止を希望する方は、ニュースレターのフッターにある「配信停止」リンクをクリックしてください。 MailChimpとは？ MailChimpは世界中
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
