ブラウザ別に適用させるCSSハック | クロコロール
苦労してコーディングしたページがブラウザによっては表示がおかしい…なんてよくありますよね。 そんな時のために今回は主要ブラウザごとにCSSを適用させるやり方を紹介します。 サンプル 動作確認は以下の環境で行っています。 Google Chrome 120.0 (macOS Ventura) Safari 16.5.2 (macOS Ventura) Opera 106.0 (Windows10) Firefox 119.0 (macOS Ventura) Edge 120.0 (Windows10) Internet Explorer 11.0 (Windows8) この記事を各種ブラウザで見てもらえればボックスの背景色が各々異なるのが確認できます。 Google Chrome, Edge(Chromium), Safari, Opera /* Chrome Edge(Chromium)
Google Chromeでもfont-sizeを10px以下で表示させるCSS - 株式会社アップシェア ブログ
【2021年7月更新】 Webサイト制作で極小フォントサイズを使用したいときに厄介なのが Google Chrome。 Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。 ブラウザごとの表示の違い まずは Firefox、Chrome、IE、Safari での表示の違いをご覧ください。 Firefox Google Chrome Internet Explorer Safari 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。 transformプロパティでブロックごと縮小する [html] <span cla
「非デザイナも10分でズバッとわかる!?」解像度についてまとめてみた（印刷編）｜山中慶
こんにちは。デザイナーの山中です。 普段は公私ともにゲームのプロモーションに使われるデザインを作っています。 ウェブや印刷など媒体を問わずゼロからフィニッシュまでやるチームを率いる事が多く、その知識をより多くの方に共有できたらな…という想いの元に社内講座を開いたりしているのですが、今回は会社の許可を取っておこめさん＆やす男さんと一緒にまとめた解像度講座についてnoteでも公開してみることにしました！ だれかのお役に立てれば幸いです！（でも僕もまだまだなので、なんか間違ってる事あったらコメントで教えてくれたら嬉しいです！） はじめに「このドキュメントを見た方が適切な解像度を自分で考えてデータ作成が出来る！」のが今回のゴールです。 とはいえ解像度の概念はおおまか印刷とデジタルで別れていて、同じ言葉なのにやや表現方法がちがって混乱しやすく、一気に学ぶのは難しいです。 そのためまずは印刷編から入っ
変数名の命名規則/＊＊ケースの使い分け - Qiita
強そうな順番で コンスタントケース パスカルケース キャメルケース スネークケース ケバブケース プライベート変数（正式名募集中） コンスタントケース すべて大文字、単語をつなげる場合はアンダースコア。 APP GLOBAL_OBJECT ・用途 定数、グローバル変数、その他強い意味を持たせたい時。 ※アッパーケースと呼ばれているのも見たことがあります。 パスカルケース 文字の先頭を常に大文字。アッパーキャメルケースとも言う。 Animal CatTower ・用途 クラス （クラス以外で使ったら注意されました。） キャメルケース 最初の単語以外の文字の先頭を大文字。ローワーキャメルケースとも言う。 sleepyDog silentSea ・用途 インスタンス化した全ての変数、関数等。 スネークケース 文字の単語間にアンダーバー。大文字を使うのも有りみたい。 snake_road ・用途
[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法
ページの端から端まで伸びる背景があり、コンテンツは両端に空白があり、中央に配置されています。ここ数年で増えてきたレイアウトです。 この内側のコンテナを実装するさまざまな方法、それぞれの利点と欠点、解決方法を紹介します。 The “Inside” Problem 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近のWebでよく見かけるレイアウト 古典的な解決策: 外側と内側のコンテナ 単一の要素だけの場合 コントロールが可能なコンテナがある場合 親にoverflow-xを使用しなくてもいい場合 CSS GridまたはFlexboxは役立ちますか？ 代わりに、端をフェイクする 最近のWebでよく見かけるレイアウト あなたはWebページの実装に取り組んでいます。レイアウトには端から端まで水平方向に伸びるbackground-colo
![[CSS] 両端に余白があるコンテナをページの中央に配置する古い実装方法と最近の実装方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6f987f7d13c29854dde3dd496f6cdc6d3799c15/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201903%2F2019060101.png)
Sassで使えるIE向けCSSハックまとめ - Qiita
Sassで使えるIE hack 皆さんはSassでIE hackを使ったことありますでしょうか？ 恐らくコンパイル時のエラーで使用できるCSSハック（以降、面倒なのでhack）が限定され、融通が効かないという理由で、以下のような条件付きコメント（conditional comments）に切り替えた方も多いんじゃないかと思います。 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js
Sassの変数とmixinで変更に強いメディアクエリをつくる ｜ Tips Note by TAM
レスポンシブWebデザインではメディアクエリ（media queries）を書くことが多くなります。通常のCSSではブレイクポイントを変更したくなったときに、すでに書いてしまった箇所を直していくのはとても大変です。 Sass（scss記法）を使えば、変数や@mixinを使うことで1箇所で管理することが容易になります。今回はSassでメディアクエリを管理する方法を紹介します。 ブレイクポイントを変数（マップ型）で定義する メディアクエリにはブレイクポイントと呼ばれる処理を変更する横幅を決めます。通常のSassの変数でブレイクポイントを定義した場合は以下のようになります。 $breakpoint-sm: 400px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; 今回は変数は変数でも、マップ型
Sassでよく使っているmixinを紹介します | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
Sassにはmixinという便利な機能があるのですが、どうもベンダープレフィックスの自動挿入等、クロスブラウザ対応のための機能ばかりが紹介されている傾向が強いです。 ここでは自分がよく使っている便利なmixinを紹介してみます。 随時追加していく予定です（気が向いたら）。 目次 省略型 justify : 両端揃えの設定 line-truncate : 文字が溢れた際の表示を … にする（１行のみ） lines-truncate : 文字が溢れた際の表示を … にする（複数行対応, Chrome/Safariのみ） absolute : position:absolute; および top / right / bottom / left の設定を一括設定 aspect-ratio : ブロックの縦横比を設定 font-rem : remを使用して文字サイズ等を指定 full-width :
アスペクト比計算ツール
アスペクト比とは長辺：短辺(横縦比)(業界によっては縦横が反対の場合がある)のことで、動画などは4:3や16:9などの整数比で表わすことが多く、紙などは1.618:1(黄金比)など小数点でも表わすことがある。 本サイトでは整数比で計算。 計算方法は長辺と短辺の最大公約数をもとめ、最大公約数で除算をすることで比率を求めることができる。 最大公約数は2つ以上の整数に共通する約数(割り切れる数値)の中で一番大きい数値の事で、ユークリッド互除法でその数値を求めることができる。 詳しい計算方法はアスペクト比の求め方という記事を参照。
CSSをスマートに！今日からSassで使える便利なmixin11選
CSSは簡単に記述することができ、学習コストが低いのが特徴です。 一方で繰り返しに弱く、コードが冗長になりがちだというデメリットも存在します。 そこでSassをはじめとして、関数や変数の処理を行うことができるプリプロセッサー言語を使う現場が増えています。 できるだけコンパクトにコードを書こうという動きも一般的になりつつあります。 Sassの中でもとりわけ便利な機能が、mixinと呼ばれる機能です。 mixinはSassにおける関数のようなもので、値を渡してスタイルなどを返します。 「@mixin」の後ろに名前をつけ、任意で引数を使う場合は「$」の後に名前をつけます。 呼び出す際には「@include」の後にmixin名をつけて呼び出します。 今回は、今日から実践的に使えるSassの便利なmixinをご紹介します。 よく使うものはスニペットにして保存しておき、いつでも再利用できるようにしてお
cssfx.dev - このウェブサイトは販売用です！ - cssfx リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
5分で出来て、きっと役立って、自信がつくデザインの勉強まとめ（推薦図書付）｜kazuma nishiwaki
前段なんかやる気が出ない、まとまった時間が取れないときでも出来る「5分で出来るデザインの勉強」を参考書籍と、自分で自分を褒めるポイント付きでピックアップしてみました。 例えば、こういう画像を1日一枚でも貯めていこう！って内容です。 毎日少しでも勉強が継続すること、自分を褒めるポイントを見つけて、ゲーム感覚で自信を持つこと。この２つを重視しています。 まとめようと思ったワケ最近、スタディサプリの英語を始めたのだけど、かろうじて続いている。あと、Switchのボクシングのやつもかろうじて続いている。 5分でも、数分でもできる仕組みが継続できるコツっぽい。 デザインを勉強しようってなったときに、この5分でもできそうなことが意外と無いと思った。 というより、みんなやってるけど「それが勉強になってる」と気付かず、挫折してしまう（もったいない） そこで、5分程度で出来るきっと役に立つデザインの勉強を書
自分で考えたサービスを制作~20/20Design Summer Camp~｜yusuke
□参加したきっかけ 急遽、前日にお誘いをいただいたのですが、正直その１日前に東京から帰ってきたところだったので、行くか凄く迷いました。笑 ただ、前からこういったイベントには参加してみたかったので、勢いで行くことに決めました！ □イベント説明 どういったイベントかというと、 『デザイナー志望者の方向けにデザインハッカソンのイベントを開催します！ 普段自分で学習するだけでは取り組みづらい「サービス全体のUI設計」に取り組むことでデザインスキルを上げるイベント』という感じです。 □どんなことをするのか コンセプト設計 x デザイン自らサービス設定をして、内容定義からUIグラフィックを画面遷移で確認するところまでおこない、最後1人1人発表しました。 これを二日間かけて現役デザイナーから随時フィードバックをもらいながら制作という感じでした。 今回は、知識の少ない人でも気軽に参加できるようにビジネス、
和風デザインは完璧！Photoshopの無料パターン素材まとめ
和風テイストのデザインをしたいと思った時、意外と見つからないという経験がないでしょうか。 無料素材といえば海外サイトで多く配布されていますが、正統派な和風素材はなかなか見つけにくいです。 今回は、和風のパターン素材を60個まとめてご紹介します。 きっとこれだけあれば和風のデザインに困りませんので、ぜひデザイン作業にご活用ください。 無料で使える和風パターン素材 1.Japanese style pattern http://gimei.deviantart.com/art/Japanese-style-pattern-102424198 日本ならではの和柄19種と、シンプルな和柄20種をセットにしたボリュームたっぷりなパターン素材セットです。 2.Origami paper texture pack http://andrea-koupal.deviantart.com/art/Origa
インデックス（index）とは何か？+インデックスを早める手法3つ【SEO用語解説】 | プロモニスタ
「SEOにおけるインデックスについて、聞いたことはあるけれど詳しくは理解できていない…」 「ページを公開したけどインデックスされない…」 という方もいるのではないでしょうか。 検索エンジンのデータベースにWebサイトがインデックスされなければ、SEO評価が受けられず検索結果に表示されません。本記事ではインデックスの意味やSEO効果、早くインデックスさせる方法について解説します。 SEOのインデックスとは？ SEOにおけるインデックスとは、検索エンジンのデータベースにWebページの情報が登録されることです。 インデックス（index）は、「見出し」や「索引」といった意味を持っています。Googleなどの検索エンジンには膨大な情報が記録されており、ユーザーがなにかを「知りたい」ときにキーワードを検索すると知りたい情報が提示される仕組みとなっています。 Yahoo!やBingなどさまざまな検索エ
デザイナー1年目だった僕が「できていなかった事」｜モンブラン｜Designer × VTuber
こんにちは。デザイナー10年目のモンブランです（たぶん） 4月ですね。 所属している会社にも新入社員が入ってきたし、電車内を見渡すとチラホラとスーツが肩になじんでいない人を見かけるようになりました。 この時期になると自分の社会人1年目をよく思い出します。 今回は、社会人1年目の時に｢できると思ったけどできていなかった事｣を書いてみます。 ◆入社時のステータス - 2010年3月大学卒業 / 同4月入社 - SODアートワークス株式会社（ソフト・オン・デマンドグループ） - アルバイト経験あり（接客業 / 動画制作） - インターンシップ経験あり（キャリアマネジメント系） - デザイナー同期は1人だけ 1. 記憶と記録（メモをとる本質）アルバイトや個人でお仕事をしていた時はメモをとったり、仕事でやって良いこと悪いことは覚えていたのですが、社会人になってから、コトに関しての母数が一気に高まり、
Chromeバージョン69の設定と保存パスワードをオフラインで丸ごと移行する方法 - パソコンりかばり堂本舗
Chromeブラウザー（バージョン69）のブックマークや保存したID、パスワード情報を、オフラインで別なPCに移行する方法です。 パソコンの買い替え時のデータ引っ越し作業、リカバリー前のバックアップの時に使えます。現在はChromeブラウザーをメインブラウザーにしている人が多いのでChromeのデータ移行方法は要チェックです。 以前記事にしたバージョン60の方法からずいぶん違っているので新しい記事にしました。 Googleアカウントで同期できない場合 そもそもな話ですが、ChromeブラウザーにはSync設定があります。このあと説明する方法を使うまでもなく、Googleアカウントでクラウドを通じてすべてのデータが同期されます。（デフォルトの同期設定の場合） Chromeブラウザーを開いて右上の →設定 を開き、GoogleアカウントでChromeにログインしているか確認します。ログインして
Notionの使い方まとめ。必要な情報をこれひとつで管理する5つの方法｜平野太一
【2020/12/24 更新】12月時点でのページ管理方法をまとめました 📋 【2020/12/04 更新】「インプットを行動に繋げるためのNotion活用術を聞いてきた！」で、自分のNotionの使い方を話しました 💬 【2019/10/01 更新】10月時点でのページ管理方法をまとめました 📋 【2019/03/03 更新】3月時点でのページ管理方法をまとめました 📋 「Notion」という、何でもござれの万能ツールがあります。 ざっくりというと、Googleドキュメント(Dropbox Paper)、Googleスプレッドシート、Trello、タスクアプリ、GitHub Wikiを合体させたようなサービスです。 ノートをとったり、情報を一箇所にまとめたり、タスクをつくったり、データを表で見たり。正直、何でもござれです。 ▲ 自由にページをつくって、メモしたりWebブックマーク
【SEO】Googleでも検索結果に反映するまでの必要時間は一概には言えないのです - 検索サポーター
※ 2016/3/1：Fetch as Googleと更新頻度による検索結果への反映時間についての説明を追記。 「いつ検索結果に反映されるの？」 サイトやページに加えられた変更が検索結果に反映されるまでにかかる時間は変更内容に依存するので、Googleでも一律に定めること、言えることではないことが『海外SEO情報ブログ』のエントリー「変更内容が検索結果に反映するまでに必要な時間 ―― ちなみに「アルゴリズムのペナルティ」はGoogleにはない | 海外SEO情報ブログ」にて報じられていました。 私のみならず、SEOに携わっている人のほとんどの人が「サイト修正を行ったのだけど、この内容はいつ検索結果に反映されるの？」という質問を多く受けることがあると思います。 （その際、私はいつも「Googleではないので正確には言えませんが・・・」という前置きをしつつ、修正したボリュームを鑑みて経験則から
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
スマホでスワイプできるスライダー（スライドショー）を自作する！！！ - Qiita
背景 高機能なスライダー（スライドショー）を簡単に実装できるライブラリはある。 しかし、自分が実装したい機能はシンプルで、レイアウトや機能をいろいろ独自に作りたかったので、ライブラリを使わずにjqueryで自作する事にした。 参考にしたサイト 1．APOC jQueryを使ったスライダーの作り方とその仕組み ２．Qiita スマホのスワイプ検知 上記の2つのサイトに乗っているコードを合体させて、独自に編集した。 コード <style type="text/css"> .slider .slide { width: 198px; height: 198px; border: 1px solid #f00; float: left; } .slider .slideSet { position: absolute; } .slider { width: 200px; height: 200px
Jqueryでスライドショーの作り方（デザイナーでも出来る自作編） - STAND-4U
2016年2月29日 jQueryの基礎が理解出来てきた方は、他人が作ったプラグインを使用せずに自作したくなってくるかと思います。 そんな初級から中級へステップアップしたい人へ向けた、jQueryでスライドショーを自作する時の作り方と考え方をわかりやすく解説します。理解しやすくする為にできるだけシンプルにし、変数はあまり使いませんので必要な場合は、適宜変数化してください。 ちなみに今回解説するスライドショーは「スライドするイメージの数がいくつであっても、自動的に判別してくれるタイプ」です。 まずはHTML側のイメージ <div id="slide"> <img src="mainImg01.jpg"> <img src="mainImg02.jpg"> <img src="mainImg03.jpg"> </div> 簡単ですね、イメージファイル３つをdivで囲っただけのシンプルな構造です
JSDoc で JavaScript のコメントを書こう | スターフィールド株式会社
複数の人で開発を進める場合や、プログラムの規模が大きくなってきた場合に、 コメントの記述が、開発の大きな助けとなります。 さらにそのコメントが、標準化された方法で記述されていると、さらに可読性が高まり、 生産性の向上が期待できます。 私はこれまで、特にそういったことを気にせずにコメントを書いたり書かなかったりしてきましたが、 規模の大きな開発に関わるときに、このことが障害になってしまうことを感じ、 コメントの記述を見直そうと思い調べてみました。 今回紹介するのは、現在、最もポピュラーと思われる JSDoc コメントというコメントの記述方法です。 JSDoc コメントは、Google の JavaScript スタイルガイド でも推奨されているコメントの方法で、 AngularJS、CreateJS、jQuery（部分的に） など、メジャーなライブラリで利用されています。 JSDoc のメリ
MAMPでMacのローカル環境にSSL（https://localhost）を設定する方法
Macのローカル環境でSSL（https://localhost）を使えるようにするための設定方法をまとめました。手順が複雑で忘れてしまいそうなんで（「NHKなんで…」的に）。 （追記: 2021年3月7日）この記事の方法よりも簡単な方法があったので違う記事にまとめました。よければそちらをご覧ください。 Macのローカル開発環境にSSLを設定できるmkcertがめちゃくちゃ便利だった この記事を書いた時点では僕の環境（macOS Catalina 10.15.5 / MAMP 5.5）では問題なありませんでしたがMAMP 6.0でApacheが2.4にアップデートされ設定の変更が必要になりました。情報を追加したので、MAMP 6.xをお使いの場合はそちらの設定変更もお忘れなく！この設定を変更したらmacOS Big Sur 11.2.2 / MAMP 6.3で問題なく動きました。 サーバ証
CSSボタンのデザインとホバーエフェクトのアイデア
.button01{ display:block; width: 250px; height:70px; line-height: 70px; color: #FFF; text-decoration: none; text-align: center; background-color: #f39800; /*ボタン色*/ border-radius: 5px; /*角丸*/ -webkit-transition: all 0.5s; transition: all 0.5s; } .button01:hover{ background-color: #f9c500; /*ボタン色*/ }
iziModal.js
1.6.0 (Updated on Jan 05, 2018) new data-iziModal-preventClose - Implemented new startProgress, pauseProgress, resumeProgress and resetProgress methods - Implemented new Open multiple Modals - Implemented new arrowKeys option to enable/disable - Implemented new 'border-box' as default - Implemented bug Scrolling the page when the hash changes - Fixed bug Issue #155 - Fixed 1.5.1 new appendToOverla
株式会社Go-Next | お客様にビジネスの成長と革新を
今日も生まれる感動と笑顔 お客様の事業、戦略、Webサイトの現状などを把握し、最適な施策を立案・実行します。 more info Top Message インターネットテクノロジーの需要が高まり、その必要性と可能性を感じ2005年に創業して以来、現在に至るまでステークホルダーの皆さまに支えていただきながら成長を続けてまいりました。「ITとクリエイティブのチカラで、心沸き起こるプロダクトを生み出す」ことをミッションに掲げ、さらなる充実したチカラ溢れる未来の実現を目指します。私たちの強みは、企画戦略からシステム開発、Webアプリケーション開発、クリエイティブ、コンサルティングに渡るワンストップソリューション提供とオーナーシップマインドを両立することにより、より精度の高い、顧客満足度の高いアウトプットと課題解決を達成します。また、創造性の向上、生産性の向上、コストの削減といった意識、文化を育むた
Photoshopにパターンを登録する方法
ダウンロードしたパターン素材をPhotoshopに登録したいけど、その方法がわからない……。 せっかくPhotoshopを持っているんです。デフォルトのパターンだけじゃなく、いろんなパターンを追加して使えるようにしたいですよね。でも、Photoshop初心者さんはパターンの登録方法がわからずに困っているのではないでしょうか。 ということで、今回はPhotoshopにパターンを登録する方法を解説していきます。 PNG形式やJPEG形式のファイルをパターン登録する方法 ダウンロードしたファイルをPhotoshopにドラッグ&ドロップします。 「編集」メニューの中から「パターンを定義」を選択してください。 好きなパターン名を入力し、「OK」をクリックすれば登録完了です。 パターンが使えるようになっているか確認してみましょう。 大きめのサイズでファイルを新規作成してください。ツールパネルから「塗り
brをdisplayで隠した時に空白ができる原因と対策
br要素を使った改行には問題がたくさん PCページの時はbr要素を使った改行をCSSのdisplay:none;で消したりはしませんが、レスポンシブWEBデザインで作成したページの場合、PCで見た時とスマートフォンで見た時の改行位置を変えたい！なんて思う事もあるはずです。 そんな時にはbr要素をCSSを使って、非表示にすることで改行を無くして対応します。 CSSを一行書いただけでカンタンに対応できる！！と思っている方・・・ 残念ながらそれは間違いです。 意外な動作をするので、もう少し対策が必要になります。 主に出てくる不具合は「br要素の次に来る言葉の前に半角スペースが生まれてしまう」という点です。 この原因と対策についてお話していきます。 半角スペースが生まれてしまうHTML構造 こんな構造になっている場合、br要素を消す事で半角スペースが生まれてしまいます・・・ <p>アテンドがお手伝
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像ファイルのEPS形式はもうオワコン！？これからはAI、PSDのネイティブ形式の時代！
Sass(SCSS)でIEハックのmixin設定
https://blog.mismithportfolio.com/web/20160326pugbegin
コーディングガイドライン
jQueryで作る簡易電卓 ｜ 福岡のホームページ制作会社・メディア総研株式会社 マグネッツ事業部
WinXP - Windows XP in React
CSSBattle
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Loading...
Swiper - Most Modern Mobile Touch Slider