リストやセルなどの何個目を選択する時によく利用する擬似クラス:nth-childの便利な使い方26種類をSCSSでまとめられた「Family.scss」を紹介します。 :nth-childでアイテムが5個以上なら選択、5個以下なら選択とかもできるんですね。こんな使い方もできるんだ! というものまであり、かなり便利です。
CSSの相対的な単位(em, rem)を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
* { box-sizing: border-box; } .block > div{ margin: 0; padding: 0; } .block { max-width: 400px; width: 100%; height: 100%; float: left; padding: 15px; z-index: 10; background-color: white; overflow: hidden; } @media screen and (max-width: 599px) { .block { max-width: 100%; } } .block > div { display: block; position: relative; padding: 0 0 0 35px; border-bottom: 1px solid white; background-color:
サンディエゴで開催中のAdobe MAXに合わせて、CC 2017がリリースされました。 Adobe Photoshopをはじめ、Adobe Illustrator, Adobe XDなど、Web制作者が愛用しているソフトウェアもすべて新しいバージョンが利用できます。 中でも特に多くの人が使用している、Photoshop CC 2017の新機能を紹介します。 Adobe Photoshop 実はサンディエゴに招待されたのですが、諸事情でキャンセルしてしまいました。 教訓: 健康管理には気をつけよう! 今回のバージョンアップは、Photoshopをこれから新しく使う人やしばらく使っていなかった人向けとなっていますが、今まで使っていた人にも便利な機能が用意されています。 新機能だけでなく、パフォーマンスが強化されたのも嬉しいポイントです。 Photoshop CC 2017のインストール Ph
レスポンシブに完全対応、でも面倒なブレイクポイントの設定は必要なし、すべてのブラウザを配慮したプログレッシブエンハンスメントを取り入れ、Flexboxでグリッドを実装するスタイルシートを紹介します。 ファイルサイズはわずか93bytesで超軽量、シンプルなHTMLを使って汎用性のある柔軟なグリッドを簡単に利用できます。 Flexboxを初めて導入する人も、Flexboxをガンガン使ってる人も必見です。
「:nth-child()」と「:nth-of-type()」セレクタは、他の単純なセレクタでは表現できないドキュメントツリー内の情報に基づいて要素を選択することを可能にする構造的な擬似クラスです。 この2つの疑似クラスは非常に似ていますが、基本的に異なる方法で機能します。その仕組みを確認しておきましょう。 nth-child vs nth-of-type 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :nth-child()がどのように機能するか :nth-of-type()がどのように機能するか 他にもある便利な「nth」疑似クラス :nth-child()がどのように機能するか nth-child()擬似クラスは、それの兄弟の中での要素の位置をあらわす数に基づいて要素を一致させるために使用されます。具体的には、その数はド
どうもfujiharaです。今年度も残す所あと1ヶ月になりましたね。 今回は今年知った便利なモーダルプラグインであるMODAALを紹介します。 何が便利?? このプラグインを紹介したいと思った一番の理由はモーダルを表示したときに 背景がスクロールしないところです。 モーダルを導入するときに背景を固める処理を毎回入れなくてすみます。これがそれが大きい! 基本的な使い方 使い方は一般的なモーダルプラグインと似ています。 モーダルを開くリンクタグを作成してモーダルの設定を入れて呼ぶだけです。 header <link rel="stylesheet" href="//cdn.jsdelivr.net/modaal/0.3.1/css/modaal.min.css"> <script src="//cdn.jsdelivr.net/modaal/0.3.1/dist/js/modaal.min.j
MVNS Design(エム ヴィー エヌ エス デザイン)は、 デザイナー山崎の活動上の商号です。 2012年に京都のデザイン会社 FLAKWORKS inc.に入社後、様々なデザイン案件に携わらせて頂き、 2016年に独立後は、「現場」と「教育」の、両方の活動に従事して参りました。 私の現場でのミッションは、企業様が持つ「商品」や「理念」を、 デザインを使って視覚化し、社会との接点を強めることだと考えています。 また、教育者としての使命は、現場で培った経験を活かし、 学習意欲のある方達に正しい道標を示し、「目標への最短距離」を創ることだと考えています。 携わってくださる「人」や「企業様」の想いを深く理解し、全力でバックアップすることに努めます。 商号
WEBデザインは時代とともに流行やトレンドが生まれ、変わっていくものです。近年では様々なデバイスや技術の登場により、変化のスピードも早まってきました。そのため少し時間が経っただけで時代遅れのサイトと見なされてしまう可能性もあり、かっこいいサイトであり続けるためにはファッションと同じように常に最新のトレンドを取り入れていく必要があります。 今回は2016年に注目されたWEBデザインのトレンドから、2017年もWEBデザインの中心となるであろうレイアウトやデザインについて、事例とともにまとめました。 1. スプリットスクリーンレイアウト 通常のWEBページは画面全体を使って1つのページを構成していますが、スプリットスクリーンは画面の左右でデザインを分けてしまい、それぞれ別の目的の内容を表示するデザインです。分割スクリーン、分割レイアウトと呼ばれることもあります。近年、ディスプレイの解像度の増加
現役のデザイナーが語る!優秀なUI/UXデザイナーに不可欠なスキルとは UI/UXデザイナーと聞くと、UIデザイナーとUXデザイナーはそれぞれ使えるツールが違い、求められることも違うことがあるでしょう。それでも優秀なデザイナーとして活躍するために必要な要素を紹介しています。これから目指す上でぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になりま
多数のリストの中から目的のものを探す際に、多くの人が目検でチェックしたり、Webブラウザのテキスト検索を使ったりします。これは非効率的で、面倒です。技術の力でもっと効率的にすべきでしょう。 とは言え、作り込むのは意外と面倒だったりします。そこで使ってみたいのがShuffle.jsです。 Shuffle.jsの使い方 最初の画面です。すべての要素が出ています。 テキストを入力するとマッチするデータだけにフィルタリングされます。 実際に入力しているところです。 ソートも使えます。検索との組み合わせも可能です。 カテゴリを使ったフィルタリングも行えます。 Shuffle.jsはアニメーションも行われるので、フィルタリングがダイナミックに適用されているのが明確に分かるようになっています。Eコマースサイトの商品一覧などで使ってみても良さそうなライブラリです。 Shuffle.jsはJavaScrip
sassファイルをコンパイルして出力するときのスタイルを変更するオプションについて。 それぞれ出力したときのインデントが違います。 スタイルは4種類。 「:nested」「:expanded」「:compact」「:compressed」。 スタイルはコンパイル時に指定します。 $sass filename.scss filename.css --style expanded オプションをつけないデフォルトの出力は「:nested」になります。 出力の例 file.scssを以下のように作りました。これを各スタイルでコンパイルします。 #main { margin: 10px; p { padding: 10px 5px; red { color: #D22B4C; } } .contents { font-size: 10em; } } :nested #main { margin:
html,body { height: 100%; margin: 0; } .flex { display: flex; height: 100%; } .flex-child { border: solid 1px gray; background: blue; } .flex-grandchildren { background: red; height: 100%; } <div class="flex" > <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> <div class="flex-child"> <div class="flex-grandchildren"> height:100%が効かない </div> </div> </div> flex
例 .flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; } stretch flex-start flex-end center space-between space-around Flexアイテム flex-grow -Flexアイテムの伸長率 flex-growプロパティは、Flexアイテムの伸長係数(伸びる倍率)を設定します。 Flexコンテナに空いた空間がある場合、Flexアイテム毎のflex-growプロパティの値を元に、余白をうめるように自動的に広さが調整されます。 値に指定できるのは単位を含めた数値で、マイナスの値は無効です。 デフォルト値は0になります。 div{ -webkit-flex-grow: 0; flex-grow: 0; } div:fi
こんにちは、まちいろの門田です。 昨今ではスマートフォンを利用される方は当たり前のように世の中に溢れているわけですが それに伴ってWEBサイトもスマホユーザー向けのサイト、 むしろ閲覧されるデバイスがスマホが基本となっているサイトも多く見られるようになってきました。 今後もPC、スマホ両方での閲覧を考慮されたWEBサイト開発が主流となってきます。 そこで今回はそんな複数の画面サイズに対応した「レスポンシブデザイン」を作成する上で 知っておきたいCSSの読み込み設定を記したいと思います。 (自分用の備忘録でもあります。) 1 画面幅の違いで読み込むCSSを選り分ける。 一番簡単、というわけではないですがおそらく一番直感的に書ける手段かと思います。 また画面幅読み込みにも二通りございます。 css側で範囲を指定する。 html側で範囲を指定する。 CSS側で範囲を指定する。 css内で適用する
デザイン作業をしている時、要素の幅だけ、高さだけ、X軸の位置だけ、Y軸の位置だけをコピペできるSketchの無料プラグインを紹介します。 それぞれを組み合わせて、幅と高さのサイズ、X軸とY軸の位置をペーストするだけというのもできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く