【SVG】Clubhouseのスーパー楕円っぽい形でアイコン画像を切り抜く方法
Clubhouseのアイコンの形って話題になっていますよね。 柔らかい四角みたいな。スーパー楕円っていうのですかね。 これは簡単には描けないみたいなので、Illustratorでそれっぽい図形をササッと作ってSVGで切り抜いてそれっぽくしてみようという企画です。 ヘッダー画像出典：「Clubhouse: Drop-in audio chat」をApp Storeで SVGを用意する 早速ですがClubhouseのアイコンみたいな図形をIllustratorで作ってみます。 作り方は樋口さんのツイートを参考に、丸を描いてアピアランスの「ワープ」→「膨張」→「-30%」としました（そのまんまや）。塗りは自分がわかるように「白」にしておきました。 ワープでやる場合は膨張を-30%〜40%の間でかけてあげるとちょうどいい感じになります。 pic.twitter.com/1GI0MMN6mE —
【Web制作】Google Codeが終了→html5shivでIE8のHTML5対応している人は注意！
概要 ▶ IE8のHTML5対応としてhtml5shivのファイルをGoogle Codeからロードしている方はHTMLを今すぐ変更しましょう。他のCDNもあります。本ページはプロモーションが含まれている場合があります 画像出典：Google Code Google Codeがスパムや悪質なプロジェクトのために2016年1月25日に終了するというニュースが3月にありました。 米Googleは3月12日（現地時間）、開発者向けにAPIなどを提供したり、オープンソースプロジェクトをホスティングするサービス「Google Code」を来年1月に閉鎖すると発表した。同日、新たなプロジェクトの作成はできなくなった。 「Google Code」、2016年1月25日に閉鎖へ GitHubへの移行を奨励 - ITmedia エンタープライズ その時は「開発者向けのページが閉鎖か、別に開発者ではないし…（
ページの更新日時をHTML5のtimeタグを使用して表現する方法《Movable Type編》
概要 ▶ timeタグは日時を表すタグです。Movable Typeでページの更新日時を表示することで検索エンジンや閲覧者がこのページの情報は新しいのか古いのかが分かり便利です。本ページはプロモーションが含まれている場合があります ●ページの公開時間や更新時間はGoogleの検索結果に表示される早速本題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。 パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。 以下の画像は「授与品袋」で検索した結果。 スニペットの部分に「2010/50/21」と日付が表示されています。 これは、授与品袋・手提げ紙袋・たとう紙（吉田印刷所）のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていませ
SVG・SVGZ画像がブラウザーで表示されない場合に確認する点
概要 ▶ SVG・SVGZファイルを使う際の準備・注意点を紹介。.htaccessの設定とwidthをチェックしましょう。本ページはプロモーションが含まれている場合があります 会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下（≒Windows XPユーザー）はあまり対応しない方向で、リニューアルを行っています（最低限の表示は可能にする程度）。（Internet Explorer 8での閲覧者も10％以下ですし） 会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、２名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応（スマートフォン対応）も可能にしていきたく思っています。 Internet Explorer 9（以下IE9）ユーザーであれば、SVGの画像フォーマット
【Bootstrap】スマートフォンの時だけ改行する／表示する方法
概要 ▶ スマートフォンの時だけ表示・隠すことは難しくありません。そう、Bootstrapならね。classを付けるだけですが、Bootstrap 3.2から微妙に変わっているので注意です。本ページはプロモーションが含まれている場合があります レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap（Twitter Bootstrap）です。 このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。 さて、その強力なBootstrapで今回はTipsを紹介。 Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。 それ
HTML5のフォームの属性でフォーム入力のチェック機能を追加して快適なフォームに
概要 ▶ フォームに入力して「送信」ボタンを押し、ページが切り替わったと思ったら「入力ミスがあります」と表示されるのは誰だって嫌なもの。HTML5なら送信前のフォームのチェックはスクリプト不要でできるのです。本ページはプロモーションが含まれている場合があります このブログのフッター部分にはメッセージを送るフォームがあります。 このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。 ページが移動して（画面が遷移して）エラーが表示されます。 「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。 こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。 一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前
Excelで作った表をhtmlに変換するソフト 「XLS2HTMLTABLE」（フリーソフト）
ブログをつけるようになって、表形式にしてまとめられたらと思ってましたが、私のhtml技術ではなんとか作れたとしても、時間がかかる。。 ということで調べました。 htmlを勉強しようとした時もあったのですが、独学って難しいですね。 ちょっとつまづいた時に、フリーソフトでいろいろあるからいまさら自分で勉強しなくても。。。なんて楽な方に考えちゃって全然身につきませんでした。 調べたら、なんか有名なアドイン（フリーソフト）がありました。 （※ちなみに、アドインとは、簡単に言うとパワーアップさせるソフトのことらしいです） 「XLS2HTMLTABLE」 なんて読む・・・？ 読み方わからなくても使えますよね。 →XLS２HTML TABLE Vectorからダウンロードできます 大まかな流れは 1 適当なところにダウンロード 2 アドインを読み込む 3 アドインを有効にする 4 ｅｘｃｅｌで作っ
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名： " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名： 列数 ： クラス名に列数を追加する。(nrow0, nrow1,,)
ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを
電書ちゃんのでんでんマークダウン - でんでんマークダウン
でんでんマークダウンの記法について解説します。 でんでんマークダウンの記法は Markdown の方言のひとつ PHP Markdown Extra をさらに拡張して、日本語と電子出版に最適化させたものです。従って、オリジナルの Markdown の記法、PHP Markdown Extraに由来する記法、でんでんマークダウン独自の記法が混在しています。 それぞれを区別するために、オリジナルの Markdown でも使える記法には Markdown、PHP Markdown Extraでも使える記法には PHP Markdown Extra、でんでんマークダウン独自の記法には でんでんマークダウン、というラベルをつけています。違いを把握する際の参考にしてください。 また、でんでんマークダウンの執筆や表示の確認には、でんでんエディターが便利です。 でんでんエディターを使ってみる 段落 Mar
iPhoneでブラウザに円記号を表示するには？ | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
iPhoneでブラウザに円記号を表示するには？|株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報| 携帯サイト開発から生まれる技術情報ブログ iPhoneのブラウザ上に「￥」を表示しようとしても、「＼」（バックスラッシュ）になってしまう。一体どうすればいいのか？ Durianの開発中にこんな問題に直面した。何としてもiPhone対応したいという一心で、試行錯誤した結果は・・・。 まずはフォントを指定 この手の問題はフォントを変更すればうまくいくだろう、と思い、最初に試したのがフォントの指定。iPhoneで使えるらしいフォントファミリーをstyle属性で指定してみた。 <span style="font-family:'American Typewriter'">\500</span><br> <span style="font-family:'AppleGothic'">
直接お金は受け取れるの？
キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが
haruka.sugawa - z-indexを有効にしてFlashの上にプルダウンメニューを表示する
今まで知らなかったのですが、Flashなどを貼り付ける際に使うobjectタグやembedタグには通常状態だとz-indexが効かないようです。 そのため、JavaScript+CSSで表示させているプルダウンメニューがFlashの下にもぐりこんでしまいました。プルダウンメニューはユーザビリティ的にあまりよろしくなさそうなので個人的にはあまり使いたくないもののひとつなのですが、今はそれはさておき。 これを解決するにはobject,embedタグを使うときに一手間かける必要があります。 <object classid="@@" codebase="@@" width="@@" height="@@ id="@@" align="@@"› <param name="allowScriptAccess" value="sameDomain" /› <param name="wmode"
日本語組版処理の要件（日本語版）
1.1 このドキュメントの目的 すべての文化集団は，独自の言語，文字，書記システムを持つ．それゆえ，個々の書記システムをサイバースペースに移転することは，文化的資産の継承という意味で，情報通信技術にとって非常に重要な責務といえよう． この責務を実現するための基礎的な作業として，このドキュメントでは，日本語という書記システムにおける組版上の問題点をまとめた．具体的な解決策を提示することではなく，要望事項の説明をすることにした．それは，実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからある． 1.2 このドキュメントの作成方法 このドキュメントの作成は，W3C Japanese Layout Task Forceが行った．このタスクフォースは，次のようなメンバーで構成され，ユーザーコミュニティーからの要望と専門家による解決策を調和させるために様々な議論を行ってきた．
type=”file”のクリア - Mars Diary
question:1193930047 より <script type="text/javascript"> function sample(oId){ var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } </script> <span id="XYZ"><input type="file" name="file" size="10"></span> <input type="button" value="←" onclick="sample('XYZ')">一見、無意味な書き戻しをしているようだが、 <input type="file"> の場合、valueへのアクセスが禁じられているのでvalue=""と同じ効果が得られる。 DOMで削除した後、生成するというのも
li要素の左側マージン調整が うまくいかなかった原因
解決した後に見つけたのですが、少し前にも俺と同じ理由で同じくらいの時間ハマってた人がいたようです。。。 崖っぷちWEBデザイナーブログ | CSS「ul li」IE Firefox ズレ解消メモ ul,li要素のpaddingとmarginを共に0にしているにも関わらず、IEではli要素の左側にマージンが取られてしまう現象に2時間くらい悩まされました。 この問題はlist-style-position: insideが設定されている場合に発生します。 これはバグではなくIEとその他のブラウザでの実装の違いによるものと思われます。list-style-type: noneを指定してもIEではマーカーの分のマージンが確保されます。 以下に例を示します。 <ul style="border: solid 1px #000; margin-left: 0; padding-left: 0; lis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
いとうまい子ホームページ
新しいCSSの仕様を色々調べてみた
hanatoweb.jp
[mayaa-user:921] HTML5でaタグがブロック要素を含む時、不可解な挙動をします