日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。 Web クリエイターボックスでは以前から Flexbox の使い方について紹介してきたのですが、最近 Flexbox が浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ 動画で学ぶ CSS Flexbox この記事は YouTube 動画でも解説しています。動画派の方
Web制作者のためのおすすめChrome拡張
Web制作者のためのおすすめChrome拡張普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ Web DeveloperChrome 拡張｜Firefox Add-on｜GitHub｜公式サイト Web に携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1 クリックで CSS や JavaScript を無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスや ID 名の表示、定規やカラーピッカーまで揃っています！カラーピッカーは CSS で定義されたものだけでなく、画像からも抽出できるのがすごい。 CSS PeeperChrome 拡張｜公式サイト UI の美しさが魅力のデザイナー向け拡張。今開いているサイ
CSSの content プロパティーを使いこなそう！
CSSの content プロパティーを使いこなそう！CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに！簡単な CSS で
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
Firefoxで使用していた＆Chromeで使用中の拡張機能 計36個
2017年6月30日 便利ツール 以前「ChromeからFirefoxに戻した6つのくだらない理由」という記事を書いてから約８ヶ月。久しぶりにChromeをいじってみると、エクステンションの数も増え、いろいろと進化しているようです。「Firefoxにあるこの機能がChromeであれば移行するのに…」と思っていた事がだいぶ解消されたので再びChromeに復帰しました！そこでFirefoxに入れていたアドオンと、Chromeで使用し始めたエクステンションを紹介します。Firefox派の人も、Chrome派の人も、移行検討中の人も、ぜひ参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ Firefoxアドオンに代わるChromeエクステンション 私のようにもともとFirefoxユーザーの場合、一番のネックは便利なアドオン。それに代わるエクステンションがないと移行の決意はできません
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
コーディングのスピードを上げる為の6つの方法
2017年7月25日 Webサイト制作, 便利ツール 今より少しでもコーディングを早くできれば、細かいデザインや機能にも時間をかけて取り組めそう…という事で今回はコーディングのスピードを上げるためにできる事を紹介します。便利なツールを使ったり、ちょっとやり方を変えるだけでより早くコーディングができるようになると思います！ ↑私が10年以上利用している会計ソフト！ 1. コーディング手順を簡略化する これは自分のコーディング能力を高めて手順を省く、便利なツールを使って手間を省くという事です。例えば私は昔このような手順でコーディングを進めていました。 CSSのレイアウトをノートに書き出す レイアウト部分（ヘッダー・メイン・サイド・フッター）のHTMLマークアップ CSSでレイアウト部分のスタイリング 表示確認 うまく表示できない箇所の修正 ヘッダー内のHTMLマークアップ CSSでヘッダー内の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
