TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Metahead内のmetaに記述するTwitterカードやFacebookのOGPのコード、Googleなどの検索エンジン用のコードを確認・生成できるオンラインサービスを紹介します。
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
BootstrapやAMPなどのテンプレートを簡単にカスタマイズできる無料の国産サービス -Framework Template Editor
Bootstrap, Foundation, Materializeなどのフレームワークは手軽に利用できるとは言え、それでも一から始めるのは面倒です。これらのフレームワークを簡単にカスタマイズして利用できる無料の国産サービスを紹介します。 ランディングページやブログをさくっと作りたい、ナビゲーションやカード型コンポーネントを利用したいなど、さまざまなテンプレートやテーマを利用できます。 Framework Template Editor Framework Template Editorの特徴 Framework Template Editorの機能 Framework Template Editorの使い方 Framework Template Editorの特徴 Framework Template Editorは、BootstrapやFoundationなどの人気が高いフレームワーク
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
Web制作するならブックマークしておきたいサイト色々 - Qiita
制作効率化のためにツールを活用しよう この記事ではWeb制作に焦点を絞り、普段からよく使っている（全然使ってないのもありますが／(^o^)＼） オンラインツール・サイト・ブックマークレットを紹介していきます。 上手く活用すれば制作効率化に繋がりますので、ぜひ参考にしてみてください。 ぶっちゃけ最近だと画像最適化・minify・スプライト画像・アイコンフォント生成あたりは タスクランナー使ったほうが手っ取り早いですが、一応紹介しています。 OS、デバイス、解像度のシェア StatCounter Global Stats http://gs.statcounter.com/ 言わずと知れたStatCounter。Desktop/Tablet/Mobileなどデバイスごとに、 ブラウザや解像度のシェアをグラフで表示できる。 Dashboards | Android Developers http
Googleフォントの使い方: Webフォントの表示の仕組みと最適化
Googleフォントなど、Webフォントのロードはどういう仕組みなのか、どのように対応できるのか、Googleフォントの表示の最適化について紹介します。 当ブログでも日本語のGoogleフォントを導入して、1ヵ月が経ちました。 文字が読みやすくなったという利点は非常に大きいですが、ロードに時間がかかってしまうという欠点もあります。 Web fonts, boy, I don't know キャプチャ: Google Fonts + 日本語 早期アクセス 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Googleフォントのロードに何を注意すべきか Webフォントの実装に役立つリソース Googleフォントの遅延読み込み まとめ Googleフォントのロードに何を注意すべきか 私はロンドンで開催された「Polymer Summit
ブラウザ上で超簡単にWebサイトが作れる！Bootstrap4対応のWeb制作エディタ「Pingendo」の活用ワザを一挙大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、マウス操作で簡単に「Bootstrap4」に対応したWeb制作をブラウザ上で行えるサービス「Pingendo」をご紹介しようと思います。 以前から、PC向けソフトウェアとしてリリースされていましたが、最近になってベータ版ではあるものの「Chromeブラウザ」からでも利用できるようになりました！ 【 Pingendo 】 「Pingendo」は、基本的にマウスでポチポチとクリックしていくだけで、簡単に見栄えの良いWebサイトが作れてしまう便利なサービスです。 また、中・上級者向けにソースコードもすべて編集可能になっているので、自分好みにカスタマイズすることも出来るのが特徴となっています！ ■基本的な使い方！ それでは、実際に「Pingendo」を使いながら、どのようなサービスなのかを見ていきましょう。 利用するにあたり、面倒な登録やインス
Bootstrapで作るランディングページ・小規模サイトに、商用無料でバックリンク不要で利用できるテンプレート集 -Designstub
ランディングページ向けの縦長ページ、スモールビジネス向けの複数ページ、すべてがミニマルに美しくデザインされたレスポンシブ対応のBootstrapのテンプレートを紹介します。 テンプレートの良さはデザインだけではありません。いくつかダウンロードしてコードを見たところ、クリーンなHTMLでコメントもしっかりしているので、カスタマイズ性にも優れています。 Designstub ダウンロードには、メールアドレスの登録（無料）が必要です。 テンプレートの利用にあたっては、個人でも商用でもクライアントワークでも無料で利用で、クレジット表記は削除しても問題ない、とのことです。テンプレートとしての再配布・販売は禁止です。 詳しくは、ライセンスページをご覧ください。 ライセンスページ テンプレートは、縦長1ページ用と複数ページ用の2種類に分けられています。
Bootstrap 4 Cheat Sheet - The ultimate list of Bootstrap classes
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel sceler
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ
フロントエンドのデザインやコーディング時に調べたり、アイデアやインスピレーションがもらえるお役立ちサイトを紹介します。 最近リリースされた、特に便利なサイトをまとめました。
Icons8 86,300 Free Icons (SVG, PNG)
Fast native apps with icons, illustrations and photos
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
サイトのワイヤーフレームを表示してくれるブックマークレット『Wirify』 | 100SHIKI
デザインなんかを勉強している人にいいかも、と思ったのでご紹介。 Wirifyのブックマークレットを使えば、今見ているサイトのワイヤーフレームを表示してくれる。 そのサイトがどういう要素でもって出来ているのか、デザイン的にどう配置されているのかをすっきりみたい場合に便利だろう。 なお、このツールを使うと、サイトのタイトルとURLが収集されるそうなので、セキュリティ的に保護されているページに使うには注意が必要だ。 きれいなサイトを見つけたときには、こうしたツールを試してみるのもいいですな。
商用フリーPOPフォント10選
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.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者のためのSwiftプログラミング入門 - libro
無料のGoogleフォント30選：Webデザイン
