[B! webデザイン] masapon49のブックマーク

masapon49 id:masapon49

webデザインに関するmasapon49のブックマーク (149)

2020年度末のCSS総まとめ！有用でオススメな覚えておくべき新仕様をコードと画像付きで解説
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blogこんにちはお久しぶりです。Web標準黒帯︵ヤフー内のスキル任命制度︶の岡部和昌︵@kzms2︶と申します。今回の記事はありがちな﹁たくさんの良さげなCSSのプロパティなどを羅列してひたすらまとめる﹂だけではなく以下の考えのもと、まとめた記事です。岡部が﹁使うケースがある・覚えておくべき﹂と感じたオススメできる、または有用と判断したCSS 可能な限り2020年からブラウザに実装された、またはこれから実装されるCSS 比較的新しいまたはあまり使われている印象がないCSS 実際のコードや挙動、対応ブラウザを掲載自分目線でみたコメントや使えそうな場面をできる限り丁寧に説明つまり2020年に実装されたものを中心に、有益でオススメでき
masapon49 2020/12/21
後で詳しく読む

css

web制作

webデザイン

webdesign

html

web
リンク
accrefs
ウェブサイトに貢献このウェブサイトではあなたからの情報提供をお待ちしています。参考資料の追加・修正のリクエストはリポジトリのイシューから専用のテンプレートで行えます。
masapon49 2019/08/30
メモ

webデザイン

アクセシビリティ
リンク
CSSについて誰も私に教えてくれなかった大切なこと -プロパティやセレクタがパフォーマンスに与える影響
当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番リソースはじめにこの記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに
masapon49 2019/04/11
影響出るような書き方してる...

css

Web制作

webデザイン

html
リンク
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる | Black Everyday Company
CSSだけでドット絵︵Pixel Art︶を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。ちなみに下図のようなドット絵がつくれる。マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。 box-shadowプロパティについてドット絵を描くためには、CSSのbox-shadowプロパティを使う。そもそもbox-shadowプロパティは、要素にドロップシャドウ効果︵影をつける︶を与えるのが本来の使い方なので、まずは基本的な使い方からまとめる。いくつかの構文がある。 box-shadow: offset-x offset-y color box-shadow: offset-x offset-y blur-rad
masapon49 2018/10/30
他にも役立ちそう

webデザイン

css

Web制作
リンク
ためしがき
日本語のフリーフォントを好きな言葉・文章で試せるサイト
masapon49 2018/07/04
よさげ

webサービス

webデザイン

フォント

font

web
リンク
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
masapon49 2017/07/11
見出し

デザイン

css

HTML

webデザイン
リンク
さまざまなデザインのボタンを最小限のHTMLで実装する、HTML5とCSS3のテクニックのまとめ
.alpha .btn{display:inline-block;margin:6px;font-size:inherit;line-height:1.42;padding:0.8em 1.6em;font-weight:normal;border-width:0;border-style:solid;background:transparent;border-radius:0.2666666667em;cursor:pointer;font-family:"Booster Next FY", "Avenir Next", Avenir, sans-serif;user-select:none;vertical-align:bottom;transition:box-shadow 0.2s, transf orm 0.2s, color 0.2s} .alpha .btn:hover{box
masapon49 2017/05/16
これもおしゃれ

html

CSS3

ボタン

Webデザイン
リンク
[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。︵今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。︶10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
masapon49 2017/03/24
メモφ(。。)

css

web制作

Webデザイン

html

web
リンク
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し︵h1〜h6タグ︶のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
masapon49 2017/03/08
かなりの数あって参考になる

web制作

Webデザイン

CSS3

見出し

デザイン

css
リンク
【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10　
フレームワークの活用はWebデザインの現場において﹁当たり前﹂のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源︵リソース︶を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。そこで本稿では制作の現場で使えるWebデザイナーのための﹁CSSフレームワーク﹂ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。そもそもフレームワークとは何か？フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性
masapon49 2016/11/18
φ(。。)ﾒﾓﾒﾓ

webデザイン

css

Web制作
リンク
【日本語フリーフォント】本当は教えたくない！デザイナーが仕事で使ってる12選【商用可】 | ベーコンさんの世界ブログ
1．うずらフォント︵手書きフォント系︶ ▼ぜんぶうずらフォントです。手書きフリー日本語フォントはたくさんありますが、最近はこれがお気に入りです。ゆるい感じが可愛らしい。ちょうど下手すぎず、上手すぎずがちょうどいいんですよね！このフォントの使いみちダウンロードはこちらから2．Noto Sans Japanese /a 源ノ角ゴシック︵ゴシック太さ多数︶ GoogleとAdobeからこのフォントが発表された時、デザイナーは沸きました。しかし思いません？ winならメイリオとかmacヒラギノとか最初から入っているフォントでいいよ！ぼくも、そう思います！あーでも、しかし1つだけこのフォントが便利な点があるんです。それは文字の太さの種類があるこれが大事なんです。デザインを作る時に便利！OSに最初に入ってるフォントは、太さの種類が2、3種類だと思います。ボールドボタンで太く
masapon49 2016/10/28
webデザイン

デザイン

font

フォント
リンク
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
masapon49 2016/09/24
φ(。。)ﾒﾓﾒﾓ

webデザイン

レイアウト
リンク
「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選
多少複雑なデザインでも、画像や JavaScript には頼らず、CSS で実現させる。そこにはもはや手軽さなどは存在しない。あるのは男のロマン。 https://speakerdeck.com/ixkaito/bian-tai-de-css-torituku ということで、﹁変態的CSSトリック﹂が流行っているようなので、JavaScriptや画像を使わない変態的なCSSテクニックを探してみました。何を持って変態的とするかは個人の性癖によるところが大きいので、あくまでも主観ですが。 CSS counterで数字を計算実はCSS2からあるcounter系のプロパティ。順番に番号を振れる便利なプロパティですが、意外とマイナーな存在では？　次のデモは、リンクの数だけページネーション番号を自動的に付与するもの。うん、便利ですね。え、でもこれだとノーマルっぽい？　じゃあこちらでどうでしょう。
masapon49 2016/09/01
すげー！独自に作れる気がしないｗ

css

webデザイン
リンク
日本語フリーフォントの作者様に感謝！最近リリースされた日本語の無料フォントのまとめ
最近リリースされたひらがな・カタカナ・漢字が使える日本語のフリーフォント、文字数を増やしてバージョンアップされた日本語のフリーフォントを紹介します。活版印刷風のレトロなフォントから、映画やアニメの字幕風フォント、ネコっぽいかわいいフォント、古代生物の不思議系フォントまで、たくさんのフォントがリリースされています。
masapon49 2016/05/31
色々ふえて嬉しい

font

フリー

webデザイン
リンク
Web制作初心者に役立つ良質なツールやコンテンツ達を出し惜しみせず全部紹介
ぼくがWebデザインに携わってからこれまで約5年半、Web上の多くの優良なサイトから知恵を借りて、ド素人からなんとかフリーで仕事を貰えるまでになった。そして常々、Webから与えてもらった知識や情報を還元したいと思っていた。こうしてブログを始め自ら情報を発信する場を得たので、一度Web制作に関する良質な情報をまとめて提供してみたい。このエントリーでは、Web制作の初心者もしくはWeb制作に興味があってこれから始めてみたいという人が、うまくWebの世界に入っていくのに役立つような情報を厳選して紹介している。一人でWeb制作全般を見れるようになるための基礎的な情報を広く列挙してあるが、必要な箇所だけ断片的に取り上げてもらっても役立つと思う。またできるだけ日本語の中で閉じるよう、海外サイトは最低限にとどめた。目次とにかく1ページに詰め込むことを優先したのでかなり長いが、下の目次から必要な
masapon49 2016/05/31
メモφ(。。)

web

tool

webデザイン

Webサービス
リンク
CSSで計算式を可能にするcalc()ファンクション
Updated 2014.03.23 / Published 2013.10.28 CSS3にcalc()というファンクションがあるのをご存知ですか？CSSにおいて計算式を可能にしてくれる便利なcalc()ファンクションのサポート状況や使い方について紹介します。「横幅にパーセンテージ値を用いつつ、その横幅から指定ピクセル(px)分だけ引けたら...」こんなことを思われたことがあると思います。それをCSS拡張メタ言語を使うわけでもなく、CSS単独で実現できてしまうのがcalc()ファンクションです。参考：Mathematical Expressions: 'calc()' calc()ファンクションの実装状況 IEIE9よりサポート Chrome Chrome19より25まで-webkit-のベンダー識別子付きで先攻実装 Chrome26よりサポート FirefoxFirefox4より15
masapon49 2016/05/17
なるほど演算できるとなると利用価値多そう

webデザイン

css

css3
リンク
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
masapon49 2016/03/28
どれも良いなぁ

css

webデザイン

Web制作
リンク
コンバージョン率を劇的にアップさせるための30の心理作戦
By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状
masapon49 2016/03/19
確かにと、うなずけるもの多い

webデザイン

web
リンク
横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info
HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;
masapon49 2016/03/15
わかりやすくまとまってていい

css3

HTML

webデザイン

Web制作
リンク
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。自動入力機能に対応しよう Google Chrome︵デスクトッ
masapon49 2016/03/10
文中にもあるように、分離する意味はないし、全半角強要もしない様に作ってる。ただtype="date"を指定した時のバリデーションがブラウザ毎に違うのが死ねる

webデザイン

web

HTML5

html

フォーム
リンク
1 2 3 4 5 6 7 8 次のページ