Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

要素を横並びにする方法は多種多様ありますが、その中でも個人的によく使うものと、その使い分けをまとめました。※display:flexについては説明する事項が多いため、今回は割愛します。flexでええやんというツッコミはお控えいただけると幸いです。 display:inlineとdisplay:inline-block 以下のように、アイコンにテキストを周りこませるような際などに使用しています。 アイコンを形成する要素にfloat:leftを指定しても似たようなレイアウトにはできますが、テキストの縦中央揃えがややめんどうです。 display:inline-blockはブロック要素として形成されるため、widthやheight、marginなどの指定もできます。加えて、インライン要素のような振る舞いをするので、後続に続くインライン要素は後ろに続くように回り込みます。 今回は、アイコンとテキス

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。 六角形のアイテムの高さ・幅、列・行は自由に設定。 セル、列、行のモジュラー形式。 背景画像を自動入力する機能をサポート。 サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+

プラカンブログ ホームページ制作に関する役立つ記事からおもしろ記事など。 プラスデザインカンパニーの スタッフによるブログです。

游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの

Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。 注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。 これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する 神話は崩された Fri

今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。

アニメーション（英: Animation）は、ウェブデザイン制作で必要とされる人気トレンドのひとつです。かろうじて気付くような控えめなローディングから、映画のような体験を提供するページ遷移まで、あらゆるデザインに採用されています。 ウェブサイトへのアニメーション実装を検討しているデザイナーには、無料プラグインが豊富に用意されています。デザイン的要素の強いものから、ユーザーエクスペリンスを向上させるものまで、さまざまなアニメーションを作成できます。 今回は、ウェブデザイナーが確認しておきたい、アニメーション用プラグインとライブラリ75個をまとめてご紹介します。利用するケースやアイデアに応じて、これらの素材を活用してみましょう。 ウェブデザイナーが試したい、ウェブアニメーション無料プラグイン、ライブラリまとめ 01. Animate.CSS Animate.CSS は、クロスブラウザ対応の基本

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング CSSプロフェッショナルのためのTIPS – Qiita CSSの便利な小技・テクニックのまとめ。日本語訳です。 W3CがHTMLとDOMを（再）勧告する理由 – 水底の血 なぜW3CはWHATWGのHTMLを再勧告するのかは私も気になっていましたが、特許からの保護という理由があるそうです。 しかし、この記事に書かれていることと同じようなことを私も感じました。 ブラック企業は少ない!? アンケート結果から分析するイマドキのウェブ制作事情 – ICS MEDIA 「JavaScriptの変数宣言にvarを使いますか、letを使いますか？」という質問では、varのほうが多いもののletも39

ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。 PostCSS Normalize -GitHub normalize.cssについては、下記を参考に。 Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。 例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようにな

Webサイトのガイドライン、カラーや文字やアイコンや画像のスタイル、使用するコンポーネントを定義するスタイルガイドが作成できるテンプレートを紹介します。 Style Guide Guide Style Guide Guide Style Guide Guide（誤字ではないです）は、MITライセンスで利用できるスタイルガイドのテンプレートで、企業サイトの納品用にも無料で利用できます。

CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどのコンポーネントはFlexboxで実装されています。カスタマイズにも優れており、デザインにとらわれることなく、利用できます。

CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS Grid Layout は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。 （Fx52～、GC57～、Safari10.1～、Opera44～ など） Can I use... CSS Grid Layout しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが CSS Grid Layout 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。 この記事は4部構成の中の 基礎編 です。 CSS Grid Layout を極める！（基礎編） ←これ CSS Grid La

CSS Gridでは、多くの新しいコンセプトが導入されています。新しいプロパティは17個、新しい用語も数多くあります。これらは今まで使ってきたものとは大きく異なるため、CSS Gridを始めるのを難しく感じさせるかもしれません。 CSS Gridの実装に役立つ基礎知識、コンセプト、主要なプロパティと用語をくわしく解説します。 CSS Grid Layout Terminology, Explained 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridの仕様 「グリッドコンテナ」と「グリッドアイテム」とは 「グリッドライン」とは 「グリッドカラム」「グリッドロウ」「グリッドトラック」とは 「グリッドセル」とは 「グリッドエリア」とは 「グリッド」とは CSS Gridの仕様 CSS Gridの仕様では、グリッドは次

今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。 子供向けプログラミングスクール スタートプログラミング このサイトにはfloatプロパティを一切使用していません。 Flexboxプロパティのみを使用し実装しました。 今回はこのFlexboxについて簡単にまとめてみました。 Flexboxとは？ Flexbox(可変ボックス)とはCSS３から登場したレイアウトモジュールになります。 横並びを実現するだけではなく、上下中央揃えやレスポンシブ化も簡単に実装できます。 *MDNのflexbox説明ページ boxを並べてみる 実際にこの2つのボックスを並べてみました。 ソースコード <div> <ul class="parent"> <li class="children">赤</li> <li class="children">青</li> </ul> </div> <st

今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou

TOPCSS 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 公開日：2016.11.28 更新日：2023.03.19 CSS CSSの background-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成したので、以下をご覧ください。 サンプルページ

WordPress 始める前に WordPressへようこそ。始める前に、以下の項目を知っておく必要があります。 データベース名 データベースのユーザー名 データベースのパスワード データベースホスト テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合) この情報は wp-config.php ファイルの作成に使用されます。 もし何かが原因で自動ファイル生成が動作しなくても心配しないでください。この機能は設定ファイルにデータベース情報を記入するだけです。テキストエディターで wp-config-sample.php を開き、データベース情報を記入し、wp-config.php として保存することもできます。 さらにヘルプが必要な場合は、wp-config.php についてのサポート記事をご覧ください。 おそらく、これらの項目はホスティング先から提供されていま

レスポンシブデザインをやるときに必ずテーブルの対応で悩んでしまいます。今回はよく使う方法を実例を作ってまとめてみました。 簡単なCSSで実装する方法もあるので、案件に合わせて参考にしてもらえると嬉しいです！ CSSの記述箇所を見やすくするために、メディアクエリは「max-width」での指定とし、ブレイクポイントは720pxに設定しています。 まずは、デモをご覧ください。 HTML <div id="demo01"> <table> <thead> <tr> <th>プラン</th> <th>データ容量</th> <th>バージョン管理</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td>無料プラン</td> <td>5GB</td> <td>なし</td> <td>無料</td> </tr> <tr> <td>個人事業主プラン</td> <t