それ、Canvaで作れます。Web開発者が知っておくべき10のスゴ技！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、人気のグラフィックデザインツール「Canva」に搭載されている多彩な機能のうち、Web開発者に役立つ機能を厳選してご紹介します。 「Canva」は、アイキャッチ画像やバナー広告・ポスターを作成するなど、さまざまな画像編集やデザインを作成できるのですが、実はそれ以外にも驚きの使い方ができる多くの機能が搭載されています。 新しい「Canva」の使い方を知りたい方も含めて、ぜひWeb制作に役立ててください！ 【 Canva 】 ■Webサイトのプロトタイプを作って公開！ 「Canva」を使うと画像やテキストなどを組み合わせて、手軽にWebサイトのデザインを構築できるのをご存知でしょうか。そのうえ、ホスティングも同時にしてくれるので、簡単なプロトタイプを作ってネット上に公開できる仕組みがあります。 方法は簡単で、「Canva」の検索ボックスに「
Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
2022年版：おすすめのWebアイコンフォントサービス10選 | Web Design Trends
Webアイコンフォントを利用することで、数千種類のアイコン素材をWebサイト上で簡単に表示することができます。 Webサイト上で多くの画像ファイルを読み込むとページの表示速度に影響してしまいますが、Webアイコンフォントであればファイルサイズをほとんど気にせず利用することができます。 今回は、Webアイコンフォントの基本と、2022年現在のおすすめWebアイコンフォントサービスをご紹介したいと思います。 【2023】無料で使えるフリーアイコン素材サイト25個まとめ【商用利用OK】 アイコン素材はWebデザインのあらゆる場所で活用することができます。ボタンやリストの見出し、ラベルなどにアイコン素材を取り入れれば、より使いやすくデザインも優れたWebサイトを作ることができますね。 ... Web Design Trends Webアイコンフォントとは Webアイコンフォントとは、HTMLのタグ
【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に
「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。 「Blink LazyLoad」の機能と使い方、注意点を紹介します。 A Native Lazy Load for the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 「Blink LazyLoad」の機能 セキュアなLazyLoadのポリシー 後方互換性 LazyLoadの有効化 参考資料 終わりに 「Blink LazyLoad」の機能 重要度の低いコンテ
遅延読み込みでWebページを高速化！jQuery Lazy Loadの使い方
みなさんこんにちは！ デザイナーの伊東です。 一生懸命作ったWebサイトがめちゃくちゃ重い！ デザイナー・コーダーのみなさんなら、そんな悩みを一度でもお持ちになったことだと思います。 表示速度が遅いのには、容量の大きい動画を配置していたり、数万pxのボリュームのあるページだったり、様々な理由があると思います。 今回はそんなお悩みを解決する方法の一つとして、「画像の遅延読み込み」という方法をご紹介します。 昔からよく知られた技術ですが、実は「SEOに不向きだ」という意見も数多くありました。 しかしGooglebotの技術向上により、その不安は解消されつつあるようです。 読み込んでいる画像の数が多いサイトの場合、非常に有効な手段だと思いますので、ぜひお試しください。 遅延読み込みとは 遅延読み込みという技術は、Webサイトに表示される画像を一度に読み込まず、必要に応じて必要な分だけ読み込むとい
SNIで1台のサーバ上に複数のSSLサイトを運用 – 前編 | さくらのナレッジ
ご無沙汰しております。細羽です。 昨年、AndroidにおけるSNI対応状況という記事で、SSL/TLSの拡張仕様であるSNI(Server Name Indication)について触れました。 少しニッチなテーマだと思っていましたが、つい先日、さくらのレンタルサーバでSNI SSLを提供開始というプレスリリースが発表されました。広いサービスでSSL/TLS導入への需要が高まっている今、このような事例は今後増えていくものと考えられます。 そこで本記事では、重要度が高まっているSNIについて、その技術の概要を改めて理解し、実際の運用に役立てられるように整理をしたいと思います。 知識の整理を目的にした前編と、実践を目的にした後編の2部構成でお届けします。 以下が前編の内容です。 SNIで何が出来るようになるのか SNIで複数ドメインが運用可能になるまで SNIが重要になりつつある背景 SSL運
2017年12月以降に発行されたSSLサーバ証明書 (マネージドCA対応後のSSLサーバ証明書) クライアント対応状況
Description 2017年12月以降に発行されたSSLサーバ証明書 (マネージドCA対応後のSSLサーバ証明書) のクライアント対応状況について紹介いたします。 ※このページでは、SHA-2対応版SSLサーバ証明書の対応状況をご紹介しております PCブラウザ Internet Explorer 6.0以降 ※1 Firefox 1.0.0以降 Google Chrome 1.0以降 Safari 3.1以降 ※1 : Windows XP SP3以降 スマートフォン : アクセスカバー率＝100% ※2 Android 1.5 以降 ※3 Blackberry iOS Windows Phone 7 以降 ※2 : 2017年11月 株式会社ウェブレッジ調査(アクセスシェアデータに基づくウェブサイトにアクセスするスマートフォンの機種別アクセス数から算出) ※3 : クロスルート証明
tipso
There is also a Wordpress version of this plugin. GET IT HERE Getting started 1. Include jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Requires jQuery 1.7+ 2. Include plugin's code <link rel="stylesheet" href="/path/to/tipso.css"> <script src="/path/to/tipso.js"></script> To use css3 animation effects please include Animate.css <link rel="stylesheet" hre
他人事じゃない！WEBサイトに対する10の攻撃パターンと対策方法まとめ | CodeCampus
他人事じゃない！WEBサイトに対する10の攻撃パターンと対策方法まとめ更新日: 2017年5月22日公開日: 2015年7月22日 Web 制作初心者にとって、web デザインやサイト構成など考えることがたくさんある中で、さらに追い打ちをかけるように「セキュリティ」に関しても一応の知識が求められます。「Web サイトといってもブログだから大丈夫」「簡単な商品紹介のサイトだから大丈夫」と安易に思っていると、知らない間に自分の作ったサイトが誰かに作り変えられて、知らない間に加害者になっているという事例もあります。 せっかく一所懸命作るサイトを悪意ある人に邪魔されないためにも、基本的なセキュリティー対策を講じておく方が賢明と考えられますよ。 Web サイトとセキュリティ 引用：Symantec’s 2015 Internet Security Threat Report 2015年に入って世界の
schoo（スクー）
授業は双方向 授業は双方向ライブコミュニティ。ユーザーのコメントで授業が変化するので常にオリジナルです。コメントはしなくても大丈夫です。
Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする（変更点を日付と一緒にメモしていく）XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり／なしの統一を指定するサイトリンクの表示をチェックして調整（以降随時）Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste
ネット広告費が新聞を抜く--電通「2009年日本の広告費」を発表
電通は2月22日、2009年の日本の総広告費と媒体別、業種別広告費を推定した統計「2009年（平成21年）日本の広告費」（PDF）を発表した。2009年の日本の総広告費は5兆9222億円、前年比11.5％減だった。インターネット、衛星メディア関連以外の各媒体が減少していた。 総広告費は2008年（前年比95.3％）に続き2年連続で前年実績を下回った。衆議院選挙、エコカー減税、エコポイントなどプラス材料があったものの、世界的不況による景気低迷が大きく影響したという。 媒体別では、「新聞広告費」（前年比81.4％）が大きく減少し、「テレビ広告費」（同89.8％）も減少して、「マスコミ四媒体広告費」（同85.7％）は5年連続して前年を下回った。 マスコミ広告以外では、「屋外」や「交通」をはじめ内訳のすべてが減少した「プロモーションメディア広告費」（同88.2％）が2年連続で減少。BSデジタル放送
iPhone対応Webサイト構築入門（前編）：SourceForge.JP Magazine
iPhoneにはWebブラウザとしてMac OS X/Windows用のSafari（以下、PC版Safari）のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。 なお、以下では主にiPhoneについて述べているが、iPod touchに搭載されているSafariについても仕様はまったく同一だ。 iPhone版Safariの特徴 iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。また、フォントについてもMac
検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化） ::SEM R (#SEMR)
検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化） Google、Yahoo!、Microsoft3社が rel="canonical" （正規化、canonicalization ）をサポート。クローラが適切な（canonical）サイトを見つける手がかりに。rel="canonical" はページの head の中に記述すること。 公開日時：2009年02月13日 15:37 Google、Yahoo!、Microsoftの3社は2009年2月12日、共同で新しいタグ「 rel="canonical"」のサポートを開始した。rel="canonical"（属性）は、検索エンジンに正しいサイトのURLを認識(正規化、canonicalization）させるために使用される。 同じサイト（ドメイン）でも、たとえば www.sem-r.com、se
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
【みんなの知識 ちょっと便利帳】使いたいときの HTML特殊文字 & 機種依存文字 - 漢字 (360文字)
HTML5.JP - 次世代HTML標準 HTML5情報サイト
Lancers
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
