CSSの作業効率がアップする、少し高度な使い方のまとめ
Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ（変数） 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.
CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法
レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしてい
【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 以前【Labs】レスポンシブデザインのブレークポイントは！？でブレークポイントをいくつも作ると管理が大変だからメジャーブレークポイントを一つ作って... という投稿をしましたが、 全部じゃなくてもいいので、現在市販されているデバイスサイズをなるべくカバーしたい...というお願いを受けることもあると思います。 今日はそんなオーダーを受けた時にピッタリ、ブレークポイントを細かく設定してみます。細かくと言っても今回作ったブレークポイントはたったの10個です。 あ、やっぱりちょっと多いですか⁉️ でもご安心ください。メジャーブレークポイントは1つです。 それでは最初にサンプルをご覧ください。ブラウザサイズを変えると見出しの後ろに指定してある画面サイズが表示されます。 Result サンプルデモはこちら モバイルファーストでCSSの記述していきます。@mediaで囲われていない
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
PugでHTMLコーディングを効率化・メリットと使い方を知る
古いサイトのヘッダー改修で全ページを修正したり、微妙にことなるHTMLを繰り返し大量に書いたり（エディタがどんどん重くなる）、閉じタグ忘れを血眼になって探したことはないだろうか。 EmmetとSassでコーディングはかなり楽になったけれど、僕の作業を一番効率化してくれたのは、同時期に覚えたPugという技術だった。ここでは、Pugの概要とメリットを簡単に紹介したい。 Getting Started – Pug PugとはPug（パグ）は、HTMLを効率的に書くためのテンプレートエンジン。使い方はCSSで言うSassみたいなもの。拡張子 .pug のファイルを書いてHTMLに変換する。 もともとはJade（ジェード）という名前で開発されていたものの、商標の関係で2016年あたりにPugとして再リリースされた。新しいPug（2018年3月12日現在v2.0.1）は繰り返しや属性などの書き方が若干
web制作が捗りそうな便利なwebツール【随時更新】 - Qiita
概要 制作時にブクマしとけばいいのについ毎回検索しちゃうものや ブックマークに埋もれて「あのサイト便利だったのになんて言うやつだっけ？」みたいなやつを防ぐ為に 自分及び社内用に作ったリンク集です。 ルール 会員登録やインストール無しで使える無料のwebツール等 ※例外としてGoogleはログイン可能とします。 オンラインエディタ コード共有 CodePen HTML・CSS・JSをブラウザ上でサクッと試すのに便利。 右上の「New Pen」で無料で使える。 scssやless、coffee scriptやtype scriptに対応してたり外部cssや外部jsも読み込めて多機能 CodeSandbox VanillaJS、React、Vue、Angularなどの環境がサクッと試せる。 Add Dependencyでnpmのパッケージを入れたり、Shareの方法も様々でテンプレートとしてのダ
デザイナーミーツエンジニア 〜知ろうお互いを、そして考えよう〜 参加レポート - チームスピリットデベロッパーブログ
みなさんこんにちは。PDチームの松田 (id:a-matsuda) です。 今回は、チームスピリットでプロダクトデザインを担当している横内 (id:ts_yokouchi) が発起人となり、1/31（水）に開催した勉強会「デザイナーミーツエンジニア」の様子をレポートします！ teamspirit.connpass.com 本イベントではデザイナーとエンジニアの協業に焦点をあて、様々な角度から議論を深めました。登壇側だけでなく参加者の方々も質疑応答や懇親会を通して、「コラボレーション」について存分に語り合う会になりました。記事後半には、参加者された方々に回答いただいたアンケートより、参加者のみなさんがどう協業に取り組んでいるかについてもまとめています。 おかげさまでたくさんの方に参加ご応募いただき、当日は50名強ほどの方にご参加いただきました。デザイナーとエンジニアの割合は4:5くらい（その
いまさら聞けない？グリッド・システムでのデザインの基礎 | バニデザノート
続きを読みたい方は、noteにてご購入おねがいします。 //// ▼ばにのUdemyのウェブ制作講座「Photoshopでプロになる！オシャレ＆クールなウェブデザイン講座」でも、グリッドシステムを使用してPhotoshopウェブデザインを進めています。 関連記事 【note】Web,ios,Android等で無料で使える！クリーンな汎用オープンソースアイコンセット３種 2018/09/13 タイポグラフィ・カラー・レイアウト・・デザインをこれから学びたい初心者の方に、デザインの基礎の全体像が掴める動画を紹介 2018/06/19 UIデザインに使用できる、クールで美しいグラデーション配色セットをダウンロードできるサイトを紹介 2018/06/11 いまさら聞けない？グリッド・システムでのデザインの基礎 2018/03/09 Illustratorでアセット書き出しした際に、マスクした部分が
Webサイト制作に入る前の打ち合わせで考えることとお客様と話し合うこと ｜https://wp.yat-net.com/name
フリーランスになってお仕事を頂くお客様と直接話す機会が増えてきました。 会社員の頃は受託の仕事ではなかったので、こういった経験がないまま独立したため、最初に聞いておくべきことや確認する事が非常に多く、結構時間がかかります。 僕の場合、Webサイトを作って欲しい、リニューアルをして欲しいという要望からヒアリングをするというのが多いのですが、ちょっとどういった事を話し合っているのかを書き留めようと思います。 最初の打ち合わせ前に行うこと お客様との打ち合わせの前にその業界について色々調べます。というのも、我々サイト制作者はあくまでサイト制作のプロであって、お客様の業界に関してはほぼ素人なので知らないことばかりです。 そうなると、自分がデザインを作るとしても、何故その色なのか。何故その配置なのか。という部分がぼんやりとしてしまうので、最低でも どういう商品が今人気があって注目されているのか どう
Mac初心者おすすめ！フロントエンドやコーダー向け初期設定
作成：2018/03/5 更新：2019/01/29 Mac > Web制作 Windowsを使っていたフロントエンドエンジニアやコーダーがMacに乗り換えたときに、最低限やっておきたいMac初心者向けの便利な初期設定。 エンジニア速報は Twitter の@commteで配信しています。 ターミナルのテーマ変更 ターミナルもしくは、iTerm等のテーマをiceberg、フォントをRictyに変更。 ダウンロード テーマ：Iceberg フォント：Ricty Diminished 参考：お前らのターミナルはダサい - Qiita 開発環境 コーディングに必要なツール管理をインストールします。不要な人は読み飛ばしてください。 Xcode インストール xcode-select --install homebrew インストール /usr/bin/ruby -e "$(curl -fsSL h
あなたのWordPressを安全に保つ方法 – Capital P – WordPressメディア
WordPressが広く使われるようになった理由には、ユーザーにとってわかりやすいライセンス、後方互換性を守ること、豊富なプラグインやテーマの存在などのいくつかの理由が挙げられますが、一方でセキュリティに対する問題も多く指摘されるようになりました。 そこで今回は、非エンジニアの皆さんを対象に、みなさんのWordPressをいかに安全に保つかについて説明していきます。 ポイントは以下の3つです。 公式ディレクトリ上のテーマやプラグインを使用すること。 こまめに最新版にアップデートすること。 強力なパスワードを使用すること。 公式ディレクトリ上のテーマやプラグインを使用する 様々なところで言及されていますが、WordPressでつくられたサイトのセキュリティに関連するトラブルのほとんどは、サードパーティのプラグインやテーマが原因です。そのため安全なプラグインやテーマを利用することはとても重要で
テーブルUIをスマホ対応するのにどうするか考えた話 | TimeCrowd Blog
デザイナーの田中です。 TimeCrowdでは設定などでテーブルっぽいものを使用しています。 が、率直に言って今は操作が統一されておらず。 使い勝手の向上のため、統一的な操作法にする予定です。 こういったテーブルはスマホではどういう形が使いやすそうかな？と考えたのが今回の話題です。 PCにおいて よくあるやつです。 一覧として必要な項目が並んでいて、編集可能な項目をポイントして変更できます。 これがスマホだと では同じものをスマホだとどう表現するか？ よくあるものだし、フツーはこうするみたいなのがあるだろうと思っていたのですが。 意外にも世の中的にこうした方がいいというのは無くバラバラ。 TimeCrowd的にはこうすると決める必要がありました。 なにを目的にするか テーブルが主に使われるのは設定画面です。 設定の確認と変更。両方を担いますが、スマホにおいては確認の比重が大きいだろうと想定
ローカルビジネス（カフェなど）のホームページがほとんど意味ないのでは...という話｜SIROMONO調度品店｜和田
ローカルビジネスの集客ってなんとなくリアルの広告媒体に頼ってしまう。地元のカフェとから喫茶店のHPって「ただ存在している」という状態が少なくないです。 まず、ホームページが無いという場合もあります。それ自体は全然問題ではなくて、オフラインで集客する仕組みが整っていれば問題ないと思います。 さて、ホームページを用意することにしたとして、大手メディアじゃあるまいし、webにかけることができるお金はない。 とりあえず置いておくホームページを作ってみた。 でもそれもコストかかっているんですよね。サーバー代が月に1000円、独自ドメインが500円と考えると1500円。1500円の回収はコーヒー3杯と考えたら安いのかもしれないですが。ホームページ作成を外注すれば安くても5〜うん10万。 それだけのコストをかけて小規模店舗がホームページを持つ意味ってどこにあるんでしょうか。 その辺りの考えたことをまとめ
打ち込むより簡単！保存しておくと便利なCSSスニペット18選
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm
jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
3ヶ月で0から500人にフォロワーさんを増やしたアカウントへの考察｜とってぃ
はじめまして、デザイナーのとってぃです。 今回せっかくなので実験的に運用していたTwitterアカウント ( @tottie1129 ) に対する振り返りと考察をしてみたいと思います。淡々といきます。 なぜはじめたのかこれまでクライアントワークしか仕事で携わってこなかったので、当事者として何か運用する経験に興味があった。フリーランスになる時期だったので、手軽に情報発信できるSNSは効率が良かった。 なぜTwitterを選んだのか・情報が早いこと ・本音（ネガティブもポジティブも）が投稿される場であること ・ゆるさも固さも許容される雰囲気があること ・結果や確信に至る前段階の「モヤッとした思考」を知れたりして楽しい などの理由から。 アカウントのコンセプトを決めてみるせっかくやるのだから、きちんと運用してみたい。コンセプトを「お仕事用のデザイナーアカウント」にしようとしてこの段階で既に１度挫
CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ
Webデザインが進化したからこそ「やってはいけない」5つのこと
Webサイトがレスポンシブ対応していたり、常に表示する必要のないメニューはハンバーガーメニューで隠したりと、業界で共有されている*Webデザインの「あるべき姿」*は、常に少しずつ進化しています。 その下支えになっているのがブラウザ技術です。Webrageの調査によれば、Internet Explorerを超えてGoogle Chromeが国内外で圧倒的シェアを獲得していますが、Google Chromeは6週間ごとに安定版がリリースされており、アップデートごとにブラウザの技術も進化しています。結果的に、Webデザインでできる幅も広がるのです。 しかし、Webデザインでできることが多くなったからといって、必ずしもデザイン上のテクニックがユーザー体験(UX)を向上させるとは限りません。 そこで今回は、Webデザインが進化したからこそ「やってはいけない」5つのことをまとめました。よかれと思って実
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よく使うWordPressのif文（条件分岐）まとめ - コムテブログ
