PHPカンファレンス 2021 1週間å‰ã‚¤ãƒ™ãƒ³ãƒˆ 〜 帰ã£ã¦ããŸPHP勉強会@æ±äº¬ ã®ç™ºè¡¨è³‡æ–™ã§ã™ã€‚ https://phpcon.connpass.com/event/224128/

Font Awesome アイコンã®åŸºæœ¬çš„ãªä½¿ã„方をã¯ã˜ã‚ã€Webサイトやスマホアプリã§ã‚¢ã‚¤ã‚³ãƒ³ã‚’使ã†æ™‚ã®ä¾¿åˆ©ãªæ©Ÿèƒ½ã‚’ã¾ã¨ã‚ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ Font Awesome guide and useful tricks you might not know about. by Kiss Patrik 下記ã¯å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„è¨³ãƒ»åŠ ç†ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«ãƒ©ã‚¤ã‚»ãƒ³ã‚¹ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ æ›´æ–°: 2021/2/1ç¾åœ¨ã®æœ€æ–°æƒ…å ±ã«ã‚¢ãƒƒãƒ—デートã—ã¾ã—ãŸã€‚ Font Awesomeã¨ã¯ Font Awesomeã¸ã®ç™»éŒ²æ–¹æ³•ãƒ»ã‚¢ã‚¤ã‚³ãƒ³ã®åŸºæœ¬çš„ãªä½¿ã„æ–¹ Font Awesome アイコンã®ã‚µã‚¤ã‚ºã®æŒ‡å®šæ–¹æ³• Font Awesome リスト用ã®ã‚¢ã‚¤ã‚³ãƒ³ Font Awesome アイコンã®å›žè»¢ Font Awesome アイコンã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ Font Awesome アイコンを
2022å¹´4月27æ—¥ CSS, SVG CSSã§ãƒ•ã‚©ãƒ¼ãƒ 内ã®éƒ¨å“を装飾ã™ã‚‹ã®ã¯ã€æ˜”ã‹ã‚‰é›£å„€ã§ã—ãŸã€‚特ã«ã‚ˆã使ã†ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã¯è‰²ã‚’ã¤ã‘ã‚‹ã“ã¨ã™ã‚‰é›£ã—ãã€æ§˜ã€…ãªCSSã®å°æŠ€ã‚„JavaScriptプラグインを使ã£ã¦å®Ÿè£…ã—ã¦ãã¾ã—ãŸã€‚今回ã¯ãƒã‚§ãƒƒã‚¯ãƒžãƒ¼ã‚¯ã«SVGを使ã„ã€ãªã‚‹ã¹ãシンプルãªæ›¸ãæ–¹ã§ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’装飾ã—ã¦ã¿ã‚ˆã†ã¨æ€ã„ã¾ã™ã€‚ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’装飾ã™ã‚‹æ‰‹é † 1. HTMLマークアップ ã¾ãšã¯HTMLを書ã„ã¦ã„ãã¾ã™ã€‚label ã‚¿ã‚°ã§ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’囲ã†ã¨ã€for 属性や id 属性ã®æŒ‡å®šã‚’ã—ãªãã¦ã‚‚ label タグ内ã®ãƒ†ã‚ストãŒã‚¯ãƒªãƒƒã‚¯ç¯„囲ã¨ãªã‚‹ã®ã§ä¾¿åˆ©ã§ã™ã€‚テã‚スト㯠span ã‚¿ã‚°ã§å›²ã¿ã¾ã—ãŸã€‚ã“ã® span 部分ã«CSSã§ãƒã‚§ãƒƒã‚¯ãƒœãƒƒã‚¯ã‚¹ã‚’表示ã•ã›ã‚‹æŒ‡å®šã‚’ã—ã¦ã„ãã¾ã™ã€‚ HTML <form> <label> <input t
<svg version="1.1" id="icon-hearbeat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve"> <path d="M369.75,21.675c-43.35,0-86.7,20.4-114.75,53.55c-28.05-33.15-71.4-53.55-114.75-53.55C61.2,21.675,0,82.875,0,161.925 c0,96.9,86.7,175.95,219.3,29
追記20180606 Chrome独自ã¨æ›¸ã„ã¦ã„ã¾ã—ãŸãŒã€ã€ŒFetch Standardã€ã«å–ã‚Šè¾¼ã¾ã‚Œã¦ã„ã‚‹ã“ã¨ã‚’確èªã—ã¾ã—㟠ã™ã§ã«ã€Chromeã§ã€ŒCross-Origin Read Blocking (CORB) blocked cross-origin responseã€ã¨ã„ã†ã‚¨ãƒ©ãƒ¼ãŒå‡ºã‚‹ã‚ˆã†ã«ãªã£ã¦ãŠã‚Šã¾ã™ã€‚imgã‚¿ã‚°ã‹ã‚‰ã‚¯ãƒã‚¹ã‚ªãƒªã‚¸ãƒ³ã§htmlファイルをå–å¾—ã—ãŸã‚Šã€ã‚¿ã‚°ã¨ãƒ¬ã‚¹ãƒãƒ³ã‚¹ã®content-typeãŒä¸€è‡´ã—ã¦ãªã„å ´åˆã«å‡ºã¾ã™ã€‚ ã‚‚ã¨ã‚‚ã¨ã€ã“ã®Chromeã«Cross-Origin Read Blocking (CORB)ã¨ã„ã†æ©Ÿèƒ½ã‚’実装ã™ã‚‹ã¨ã„ã†è°è«–ãŒã€blink-devã®ãƒ¡ãƒ¼ãƒªãƒ³ã‚°ãƒªã‚¹ãƒˆã«æŠ•ç¨¿ã•ã‚Œã¦ã„ã¾ã™ã€‚ 「Cross-Origin Read Blocking (CORB)〠ã«è©³ã—ã„説明ãŒã‚ã‚‹ã®ã§ã€CORB ã¨ã¯ãªã‚“ãžã‚„ã¨ç°¡å˜ã«èª¬æ˜Žã‚’èªã‚“ã§è¦‹ã‚‹ã€‚ CORBã¯ã¾ã C
Beautiful JavaScript Charting Library HTML5 JavaScript Charting Library with a Simple API and 10x Performance – makes your dashboards fly! Simple JavaScript Charting API 10X Performance 30+ Chart Types Well Documented Supports Chrome, Edge, Firefox, Safari, IE8+ Support Directly from Developers Our HTML5 Charts work with all the popular Libraries & Frameworks like React, Angular, jQuery, ASP.Net,
Intro 本サイトã§ä½¿ç”¨ã—ã¦ã„ã‚‹ UI アイコン系ã®ç”»åƒã‚’ã€ã‚®ãƒªã‚®ãƒªã¾ã§æœ€é©åŒ–ã—ãŸæ‰‹æ›¸ã SVG ã«ç½®ãæ›ãˆãŸ(ãŸã ã—ソース㯠観賞用 ãªã®ã§ã€ã‚¤ãƒ³ãƒ‡ãƒ³ãƒˆã¯æ®‹ã™)。 ã¾ãŸã€è£…飾ã«ç”»åƒã§ã¯ãªã CSS ã® contents を利用ã™ã‚‹ã“ã¨ã§ã€ãƒãƒ¼ã‚«ãƒ«ãƒ•ã‚©ãƒ³ãƒˆãƒ‡ãƒ¼ã‚¿ã‚’利用ã—ã€ç”»åƒè»¢é€ã‚’減らã™å·¥å¤«ã«ã‚‚言åŠã™ã‚‹ã€‚ ç”»åƒæœ€é©åŒ–シリーズ第 4 回目ã®ã‚¨ãƒ³ãƒˆãƒªã§ã‚る。 ç”»åƒæœ€é©åŒ–戦略 PNG/JPEG ç·¨ ç”»åƒæœ€é©åŒ–戦略 Picture ç·¨ ç”»åƒæœ€é©åŒ–戦略 WebP ç·¨ > ç”»åƒæœ€é©åŒ–戦略 SVG/Font ç·¨ ç”»åƒæœ€é©åŒ–戦略 Lazy Loading ç·¨ ベクタ画åƒã¨ãƒ©ã‚¹ã‚¿ç”»åƒ ã“ã“ã¾ã§ã®ç”»åƒæœ€é©åŒ–ã§ã¯ã€ PNG/JPEG/WebP ãªã© ãƒ©ã‚¹ã‚¿å½¢å¼ ã®ç”»åƒã«ã¤ã„ã¦è¨˜è¿°ã—ãŸã€‚ ã—ã‹ã—〠UI アイコンãªã©ã«ã¤ã„ã¦ã¯ã€ SVG ã‚„ Font ã¨ã„ã£ãŸ ãƒ™ã‚¯ã‚¿å½¢å¼ ã‚’ç”¨ã„ã‚‹æ–¹ãŒã€è‰¯ã„å ´åˆãŒã‚る。 ラスタ
Spring Loaders with Rebound and Canvas | Codrops Rebound.jsã¨Canvasを使ã£ãŸè¶…カッコイイãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³å®Ÿè£…デモ Facebook製ã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãƒ©ã‚¤ãƒ–ラリRebound.jsを使ã£ãŸã€ã“ã‚Œã¾ã§è¦‹ãŸã“ã¨ã®ãªã„よã†ãªãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’実装ã™ã‚‹ãƒ‡ãƒ¢ã§ã™ 関連エントリ ピュアCSSã§ã‚·ãƒ£ã‚シャã‚å‹•ããƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³é›†ã€ŒLoaders.css〠CSSã§14種ã®ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ãŒå®Ÿç¾ã§ãる「waitMe〠モダンãªãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚¨ãƒ•ã‚§ã‚¯ãƒˆã‚’作æˆã§ãる「PleaseWait〠SVGã§ã‚¯ãƒ¼ãƒ«ã«ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã™ã‚‹ãƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ãƒœã‚¿ãƒ³å®Ÿè£…「Loading Buttonsã€
Placemat オシャレãªãƒ—レースホルダã¨ãªã‚‹ãƒ€ãƒŸãƒ¼ç”»åƒç”Ÿæˆã‚µãƒ¼ãƒ“ス「Placematã€ã€‚ RESTã§ãƒ‘ラメータを付ã‘ã‚‹ã ã‘ã§ç”»åƒã¨ã€ç”»åƒã®ã‚µã‚¤ã‚ºã‚’ã¤ã‘ãŸç”»åƒã‚’è¿”ã—ã¦ãã‚Œã¾ã™ã€‚ ç”»åƒã®ç¨®é¡žã«ã¯ã€ç”»åƒã‚„ã€å ´æ‰€ã€ç‰©ã‚’指定ã§ãã¾ã™ 関連エントリ 有å134サービスã®ãƒã‚´SVGアイコンセット ç”»åƒã€å‹•ç”»ã€éŸ³å£°ç‰ã‚’超クールã«ã¾ã¨ã‚られるサービス「Stampsyã€
ArcGIS API for JavaScript を用ã„ã¦ãƒ‡ãƒ¼ã‚¿ ビジュアライゼーションã®æ‰‹æ³•ã¨ãれを実ç¾ã™ã‚‹æ©Ÿèƒ½ã«ã¤ã„ã¦ã”紹介ã—ã¦ã„ã「JavaScript ã§å§‹ã‚るデータ ビジュアライゼーションã€ã‚·ãƒªãƒ¼ã‚ºã®ç¬¬ï¼–å¼¾ã§ã™ã€‚ ã“ã‚Œã¾ã§ç´¹ä»‹ã—ãŸã‚µãƒ³ãƒ—ル コードã¨ãƒ‡ãƒ¢ã‚’確èªã—ãŸã„方㯠GitHub リãƒã‚¸ãƒˆãƒªã‚’ã”覧ãã ã•ã„。 第1弾ã‹ã‚‰æ§˜ã€…ãªè¡¨ç¾æ‰‹æ³•ã‚’ãŠä¼ãˆã—ã¦ãã¾ã—ãŸãŒã€ä»Šå›žã¯å°‘ã—趣å‘を変ãˆã¦ã€ãƒ‡ãƒ¼ã‚¿ ビジュアライゼーションを強ã¿ã¨ã™ã‚‹ã‚ªãƒ¼ãƒ—ンソース JavaScript ライブラリã§ã‚ã‚‹ D3.js ã¨ã®é€£æºä¾‹ã‚’ã”紹介ã—ã¾ã™ã€‚ D3.js ã¨ã¯ï¼Ÿ データ ドリブン ドã‚ュメント(Data Driven Document)を略ã—ã¦ã€ŒD3ã€ã¨å‘¼ã°ã‚Œã¦ã„る通りã€ãƒ‡ãƒ¼ã‚¿ã‚’æ“作ã—ã€å¯è¦–化ã™ã‚‹ã“ã¨ã«å„ªã‚ŒãŸãƒ©ã‚¤ãƒ–ラリã§ã™ã€‚Web サイトや Web アプリã§æŽ¡ç”¨ã•ã‚Œã‚‹ 2D ベクター グラフィックã®æ¨™æº–å½¢
SVG, or Scalable Vector Graphics, is an XML markup language for creating two-dimensional images using vectors. Unlike JPEG and PNG, SVG is not raster-based, and doesn’t use pixels. This means SVG images can have an infinite level of detail, but when is the best time to use them? In this clip from the SVG Basics course at Treehouse, Nick Pettit explains SVGs, pixel density, and best practices for u
デザイン制作ã«ä¾¿åˆ©ãªç´ æã®ä¸€ã¤ã¨ã—ã¦ã‚ã’られるアイコン。種類やテイストã«ã‚‚ã•ã¾ã–ã¾ãªç¨®é¡žãŒå˜åœ¨ã—ã¦ã„ã¾ã™ã€‚ãã‚“ãªä¸ä»Šå›žç´¹ä»‹ã™ã‚‹ã®ã¯ã€ä¸¸ã¿ã‚’帯ã³ãŸãƒ‡ã‚¶ã‚¤ãƒ³ãŒç‰¹å¾´ã®ãƒ•ãƒªãƒ¼ã‚¢ã‚¤ã‚³ãƒ³ã‚»ãƒƒãƒˆã€ŒEssential Generic Free Icons (SVG & PNG)ã€ã§ã™ã€‚ ã½ã£ã¦ã‚Šã¨ã—ãŸè³ªæ„ŸãŒå°è±¡çš„ãªã€ã‹ã‚ã„らã—ã„雰囲気ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒ100個セットã§ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã§ãるよã†ã«ãªã£ã¦ã„ã¾ã™ã€‚ 詳ã—ãã¯ä»¥ä¸‹ 種類ã¨ã—ã¦ã¯ã€å®šç•ªã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚„矢å°ã€ãƒ€ã‚¦ãƒ³ãƒãƒ¼ãƒ‰ã€ãƒã‚§ãƒƒã‚¯ãƒžãƒ¼ã‚¯ãªã©ã®ã‚¢ã‚¤ã‚³ãƒ³ãŒã—ã£ã‹ã‚Šã¨æƒã£ã¦ãŠã‚Šã€ãƒ‡ã‚¶ã‚¤ãƒ³çš„ã«ã¯ãƒ™ãƒ¼ã‚·ãƒƒã‚¯ãªä¸ã«ã‚‚個性を感ã˜ã•ã›ã¾ã™ãŒã€ã„ã‚ã„ã‚ãªãƒ‡ã‚¶ã‚¤ãƒ³ã«ä½¿ç”¨ã§ããã†ã§ã™ã€‚ã¾ãŸ100種ã¨ã„ã†åˆ©ç”¨ã—ã‚„ã™ã„æ•°ã€SVG・PNGã¨ã„ã†å¤šå½©ãªåª’体ã«å¯¾å¿œã§ãã‚‹å½¢å¼ãªã©ãŒã—ã£ã‹ã‚Šã¨æŠ¼ã•ãˆã‚‰ã‚Œã¦ã„ã‚‹ã‚‚ã®ç‰¹å¾´ã§ã™ã€‚ ã™ã§ã«å®šç•ªã‚¢ã‚¤ã‚³ãƒ³ã‚’æŒã£ã¦ã„ã‚‹ã¨ã„ã†æ–¹ã‚‚ã€ã¡ã‚‡ã£ã¨å¤‰åŒ–を付ã‘ãŸãƒ‡ã‚¶ã‚¤ãƒ³ã‚¢ã‚¤ã‚³
æ±äº¬ã®é‰„é“路線図SVGを作りã¾ã—ãŸï¼†ãƒ‘ブリックドメインã§é…布ã—ã¾ã™ ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ã§ã®ä½œå›³æ–¹æ³•ã«åŸºã¥ã„ãŸæ±äº¬ã®é‰„é“路線図を作ã£ãŸã®ã§å…¬é–‹ãƒ»é…布ã—ã¾ã™ time2014/12/20 hatenabookmark- Illustratorを使ã£ã¦ã€æ±äº¬åœã®äº¤é€šè·¯ç·šå›³ã‚’作りã¾ã—ãŸã€‚ ç¾åœ¨ã€ã“れを書ãã ã—ãŸSVGファイルを以下ã«ç½®ã„ã¦ã€ã‚¦ã‚§ãƒ–上ã‹ã‚‰è¦‹ã‚‰ã‚Œã‚‹ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚ã¾ã マップã¨ã—ã¦å¤§ã—ãŸå‡¦ç†ã¯ã—ã¦ã„ãªã„ã®ã§ã€PCã¨ã‹ã ã¨ã‚¹ã‚¯ãƒãƒ¼ãƒ«ãŒé¢å€’ã§ã™ãŒã€ã‚¹ãƒžãƒ¼ãƒˆãƒ•ã‚©ãƒ³ãªã©ã‚¿ãƒƒãƒç«¯æœ«ã ã¨ãã“ãã“見られるã¨æ€ã„ã¾ã™ã€‚ ãªãŠã€AIファイル・SVGファイルã¯ãƒ‘ブリックドメイン(CC0)ã¨ã—ã¾ã™ã®ã§ã€é…布・改変・販売å«ã‚ã€ç…®ã‚‹ãªã‚Šç„¼ããªã‚Šå¥½ãã«ä½¿ã£ã¦ã„ãŸã ã„ã¦ã‹ã¾ã„ã¾ã›ã‚“。 railmaps - github ã©ã†ã—ã¦æã„ãŸã®ï¼Ÿ 昔ã‹ã‚‰ãƒãƒªãƒ¼ãƒ™ãƒƒã‚¯æ°ã®ãƒãƒ³ãƒ‰ãƒ³åœ°ä¸‹é‰„路線図ãŒã¨ã¦ã‚‚好ãã§ã€è‡ªåˆ†ã‚‚ã“ã†ã„ã†ã‚‚
JavaScriptã‚‚CSSã‚‚ç”»åƒã‚‚使用ã›ãšã€SVGã§å®Ÿè£…ã•ã‚ŒãŸè»½å¿«ã§æ°—æŒã¡ã„ã„アニメーションã§å‹•ããƒãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã®ã‚¢ã‚¤ã‚³ãƒ³ã‚’紹介ã—ã¾ã™ã€‚ ページã«å®Ÿè£…ã™ã‚‹æ™‚ã‚‚JavaScript/CSSã¯å¿…è¦ã‚ã‚Šã¾ã›ã‚“。簡å˜ãªHTMLã§OKï¼ ãƒ‡ãƒ¢ãƒšãƒ¼ã‚¸ SVG Loadersã®ä½¿ã„æ–¹ 使ã„æ–¹ã¯ã€ç°¡å˜ï¼ Step 1: SVGファイルをダウンãƒãƒ¼ãƒ‰ 下記ページã®å³ã‚µã‚¤ãƒ‰ã®ã€ŒDownlaod ZIPã€ã‹ã‚‰ã€SVGファイルをダウンãƒãƒ¼ãƒ‰ã—ã¾ã™ã€‚ SVG Loaders -GitHub Step 2: HTML ã‚ã¨ã¯ã€imgã‚¿ã‚°ã§é…ç½®ã™ã‚‹ã ã‘ã§ã™ã€‚ <img src="svg-loaders/puff.svg" /> アイコンã®ã‚«ãƒ©ãƒ¼ã‚’変更ã—ãŸã„時ã¯ã€svgè¦ç´ ã®fill属性を変更ã—ã¾ã™ã€‚ <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}