タグ

HTMLに関するjdashのブックマーク (24)

  • 【SVG】Clubhouseのスーパー楕円っぽい形でアイコン画像を切り抜く方法

    Clubhouseのアイコンの形って話題になっていますよね。 柔らかい四角みたいな。スーパー楕円っていうのですかね。 これは簡単には描けないみたいなので、Illustratorでそれっぽい図形をササッと作ってSVGで切り抜いてそれっぽくしてみようという企画です。 ヘッダー画像出典:‎「Clubhouse: Drop-in audio chat」をApp Storeで SVGを用意する 早速ですがClubhouseのアイコンみたいな図形をIllustratorで作ってみます。 作り方は樋口さんのツイートを参考に、丸を描いてアピアランスの「ワープ」→「膨張」→「-30%」としました(そのまんまや)。塗りは自分がわかるように「白」にしておきました。 ワープでやる場合は膨張を-30%〜40%の間でかけてあげるとちょうどいい感じになります。 pic.twitter.com/1GI0MMN6mE —

    【SVG】Clubhouseのスーパー楕円っぽい形でアイコン画像を切り抜く方法
    jdash
    jdash 2021/02/22
    ブログ書いた。Illustratorのアピアランス→SVGで切り抜きパスを作ってササッとできます。
  • 【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 エンタープライズ その時は「開発者向けのページが閉鎖か、別に開発者ではないし…(

    【Web制作】Google Codeが終了→html5shivでIE8のHTML5対応している人は注意!
    jdash
    jdash 2015/04/17
    【書いた】IE8のHTML5対応をされている方は要注意です。なお私も影響がありました(笑)
  • ページの更新日時をHTML5のtimeタグを使用して表現する方法《Movable Type編》

    概要 ▶ timeタグは日時を表すタグです。Movable Typeでページの更新日時を表示することで検索エンジンや閲覧者がこのページの情報は新しいのか古いのかが分かり便利です。ページはプロモーションが含まれている場合があります ●ページの公開時間や更新時間はGoogleの検索結果に表示される早速題ですが、ページの公開日時や更新日時をHTMLタグでページ内に書いておくと、Googleで検索する際に表示されますよ、というお話。 パッと見で、新しい情報か、古い情報かがすぐ分かって便利ですね。 以下の画像は「授与品袋」で検索した結果。 スニペットの部分に「2010/50/21」と日付が表示されています。 これは、授与品袋・手提げ紙袋・たとう紙(吉田印刷所)のページのフッター部分にある「公開時間」が反映されています。横に更新時間もありますが、そこの日時はGoogleの検索結果では出てきていませ

    ページの更新日時をHTML5のtimeタグを使用して表現する方法《Movable Type編》
    jdash
    jdash 2015/02/27
    ブログ書いた。オープンデータでもそうですけど情報を出すときに機械的に分かる意味づけをキチンとやっていく(タグ付け)が大事になっていますね。
  • SVG・SVGZ画像がブラウザーで表示されない場合に確認する点

    概要 ▶ SVGSVGZファイルを使う際の準備・注意点を紹介。.htaccessの設定とwidthをチェックしましょう。ページはプロモーションが含まれている場合があります 会社のウェブサイトをリニューアルする際は、Internet Explorer 8以下(≒Windows XPユーザー)はあまり対応しない方向で、リニューアルを行っています(最低限の表示は可能にする程度)。(Internet Explorer 8での閲覧者も10%以下ですし) 会社では様々なサイトがあり、ウェブ制作に携わっている人数が私を含め、1、2名しかいないので、次のリニューアル・サイトの見直しが数年後になることもあるので、長く使えるもの、また、できればモバイル対応(スマートフォン対応)も可能にしていきたく思っています。 Internet Explorer 9(以下IE9)ユーザーであれば、SVGの画像フォーマット

    SVG・SVGZ画像がブラウザーで表示されない場合に確認する点
    jdash
    jdash 2015/02/09
    ブログ書いた。IllustratorからSVG・SVGZが書き出せてもサーバー設定やHTMLをキチンと書かないとダメですわ。
  • 【Bootstrap】スマートフォンの時だけ改行する/表示する方法

    概要 ▶ スマートフォンの時だけ表示・隠すことは難しくありません。そう、Bootstrapならね。classを付けるだけですが、Bootstrap 3.2から微妙に変わっているので注意です。ページはプロモーションが含まれている場合があります レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrapTwitter Bootstrap)です。 このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。 さて、その強力なBootstrapで今回はTipsを紹介。 Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。 それ

    【Bootstrap】スマートフォンの時だけ改行する/表示する方法
    jdash
    jdash 2014/10/16
    ブログ書いた。 スマートフォンの時だけ表示・隠すことは難しくありません。そう、Bootstrapならね。classを付けるだけです。
  • HTML5のフォームの属性でフォーム入力のチェック機能を追加して快適なフォームに

    概要 ▶ フォームに入力して「送信」ボタンを押し、ページが切り替わったと思ったら「入力ミスがあります」と表示されるのは誰だって嫌なもの。HTML5なら送信前のフォームのチェックはスクリプト不要でできるのです。ページはプロモーションが含まれている場合があります このブログのフッター部分にはメッセージを送るフォームがあります。 このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。 ページが移動して(画面が遷移して)エラーが表示されます。 「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。 こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。 一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前

    HTML5のフォームの属性でフォーム入力のチェック機能を追加して快適なフォームに
    jdash
    jdash 2014/04/24
    ブログ書いた。ページ移動した後に「エラーです」はもう古い。フォームを送信する前に自動的にチェックしてくれて送信を抑制してくれます。簡単なのでお薦め。ってかemailはスマホ用には必須ですね。
  • Excelで作った表をhtmlに変換するソフト 「XLS2HTMLTABLE」(フリーソフト)

    ブログをつけるようになって、表形式にしてまとめられたらと思ってましたが、私のhtml技術ではなんとか作れたとしても、時間がかかる。。 ということで調べました。 htmlを勉強しようとした時もあったのですが、独学って難しいですね。 ちょっとつまづいた時に、フリーソフトでいろいろあるからいまさら自分で勉強しなくても。。。なんて楽な方に考えちゃって全然身につきませんでした。 調べたら、なんか有名なアドイン(フリーソフト)がありました。 (※ちなみに、アドインとは、簡単に言うとパワーアップさせるソフトのことらしいです) 「XLS2HTMLTABLE」  なんて読む・・・? 読み方わからなくても使えますよね。 →XLS2HTML TABLE   Vectorからダウンロードできます 大まかな流れは 1 適当なところにダウンロード 2 アドインを読み込む 3 アドインを有効にする 4 excelで作っ

    jdash
    jdash 2014/04/22
    Excel→HTMLはアドインでできるのか。それもアドインが2002年製。でもExcel 2010でも動いている。ある意味すごい。
  • エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

    STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け STEP2. オプションを選択して変換 細かい設定 列目までをTHEADとする。(0でTHEADなし) TBODYの行目までをTHとする。 TBODY THに深度を埋め込んだクラス名を追加する。(1〜) クラス名: " + n" ひとつめのTHに深度クラスを追加しない。(lv1を追加しない) n列ごとにTRにクラス名を追加する。(0〜) クラス名: 列数  : クラス名に列数を追加する。(nrow0, nrow1,,)

    jdash
    jdash 2014/04/22
    なんだこれ、個人情報あるものはNGだけど、料金表の変換とかこれでOKじゃないか。便利そう(まだ使っていない)。
  • いとうまい子ホームページ

    今年もカレンダー申し込みページにお立ち寄り下さいまして 当にありがとうございます。 今回の撮影はグアムへ行ってきました。 どうぞ、お楽しみに~♪ いつも近くに置いて下さって当にありがとうございます♪ (※この画像は見のため、実物と異なる場合があります) 2024年4月~2025年3月までのカレンダーを販売します♪ お申し込みはこちらからどうぞ(#^.^#)v いとうまい子 ♪まい子からのお願い♪ 1クリックで救える命があります!みなさんの力を貸して下さい!! English

    jdash
    jdash 2014/02/07
    やじうまWatchより。HTMLソースを見たらLayerタグがあって、なんだっけ、これ?
  • 新しいCSSの仕様を色々調べてみた

    第3回HTML5ビギナーズ!(http://atnd.org/events/44530)の「新しいCSSの仕様を色々調べてみた」の資料です。 『CSS3から新たに加わったレイアウト仕様のCSS Flexbox、 Regions、Shapesで一体どんなことができるのか、ご紹介したいとおもいます。』 以下のCSS3の新しい機能の初心者向け資料です。 ・Flexbox ・Regions ・Shapes ・Multi-column Layout ・Grid Layout ・Exclusions Read less

    新しいCSSの仕様を色々調べてみた
    jdash
    jdash 2013/11/05
    こんなんできたら雑誌系レイアウトは全てCSSでできるんじゃね? これを元にEPUB4とかできるのかいな。
  • ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」

    登録フォームと言えば通常は必要事項を一方的に入力していくものですが、キャラクターとの会話形式にして、まるでチャットを行っているように情報を入力できるのが「ダイアログフォーム」です。人とチャットしているときはタイピングが苦じゃない、というアイデアを元に作られた登録フォームで、コードのダウンロードも無料で行えます。 ダイアログフォーム - jsdo.it - Share JavaScript, HTML5 and CSS http://jsdo.it/watilde/form 実際にどんな感じでフォームが表示されるのか試してみます。まずはページ右側にある再生ボタンをクリック。 すると、「会員登録ふぉーむ」という文字の下で自動的にWindows Azure 公認キャラクタークラウディア・窓辺が会話を始めます。 「ユーザーIDを入力してください」とクラウディアに言われるので、フォームに自分のIDを

    ユーザー登録の面倒くさいフォーム入力の苦痛を激減させる画期的アイデア「ダイアログフォーム」
    jdash
    jdash 2013/02/19
    SkypeとかLINEみたいなチャット形式でフォーム入力(と言って良いのか)させるのね。これはおもしろい。サービスによっては時代にあっているのかもしれない。
  • 電書ちゃんのでんでんマークダウン - でんでんマークダウン

    でんでんマークダウンの記法について解説します。 でんでんマークダウンの記法は Markdown の方言のひとつ PHP Markdown Extra をさらに拡張して、日語と電子出版に最適化させたものです。従って、オリジナルの Markdown の記法、PHP Markdown Extraに由来する記法、でんでんマークダウン独自の記法が混在しています。 それぞれを区別するために、オリジナルの Markdown でも使える記法には MarkdownPHP Markdown Extraでも使える記法には PHP Markdown Extra、でんでんマークダウン独自の記法には でんでんマークダウン、というラベルをつけています。違いを把握する際の参考にしてください。 また、でんでんマークダウンの執筆や表示の確認には、でんでんエディターが便利です。 でんでんエディターを使ってみる 段落 Mar

    jdash
    jdash 2013/02/14
    電子書籍(EPUB)で<br />使ってもいいのか~。そうなのか~(・ω・) 非推奨がいいんじゃね?(Web作っていると色々そう思ったり)/ルビの記述は便利ね。
  • hanatoweb.jp - このウェブサイトは販売用です! - hanatoweb リソースおよび情報

    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.

    jdash
    jdash 2013/01/17
    こういったガイドラインをしっかり作っておくと社内・社外でウェブ制作するときに楽になるね。大変良い資料です。
  • [mayaa-user:921] HTML5でaタグがブロック要素を含む時、不可解な挙動をします

    jdash
    jdash 2012/04/25
    『HTML5からは、aタグがブロック要素を含むことができるようになりました』そうなのか。なるほどね。
  • iPhoneでブラウザに円記号を表示するには? | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報

    iPhoneでブラウザに円記号を表示するには?|株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報| 携帯サイト開発から生まれる技術情報ブログ iPhoneのブラウザ上に「¥」を表示しようとしても、「\」(バックスラッシュ)になってしまう。一体どうすればいいのか? Durianの開発中にこんな問題に直面した。何としてもiPhone対応したいという一心で、試行錯誤した結果は・・・。 まずはフォントを指定 この手の問題はフォントを変更すればうまくいくだろう、と思い、最初に試したのがフォントの指定。iPhoneで使えるらしいフォントファミリーをstyle属性で指定してみた。 <span style="font-family:'American Typewriter'">\500</span><br> <span style="font-family:'AppleGothic'">

    jdash
    jdash 2011/04/18
    iPhoneじゃなくても¥/問題はあるよね。&yen;で解決。
  • 直接お金は受け取れるの?

    キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが

    jdash
    jdash 2011/04/18
    自動的に電話番号っぽいのにリンクしないようにするには。
  • 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"

    jdash
    jdash 2010/05/15
    『objectタグやembedタグには通常状態だとz-indexが効かない』なので『<param name="wmode" value="transparent" /›』を指定しよう
  • 日本語組版処理の要件(日本語版)

    1.1 このドキュメントの目的 すべての文化集団は,独自の言語,文字,書記システムを持つ.それゆえ,個々の書記システムをサイバースペースに移転することは,文化的資産の継承という意味で,情報通信技術にとって非常に重要な責務といえよう. この責務を実現するための基礎的な作業として,このドキュメントでは,日語という書記システムにおける組版上の問題点をまとめた.具体的な解決策を提示することではなく,要望事項の説明をすることにした.それは,実装レベルの問題を考える前提条件をまず明確にすることが重要であると考えたからある. 1.2 このドキュメントの作成方法 このドキュメントの作成は,W3C Japanese Layout Task Forceが行った.このタスクフォースは,次のようなメンバーで構成され,ユーザーコミュニティーからの要望と専門家による解決策を調和させるために様々な議論を行ってきた.

    jdash
    jdash 2009/06/16
    これは日本語組版のよい資料だ!うまくまとまっている!
  • 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で削除した後、生成するというのも

    type=”file”のクリア - Mars Diary
    jdash
    jdash 2009/05/27
    inputのtype="file"面倒だなぁ『DOMで削除した後、生成するというのも考えられるけど、のcreateElementはIEが怪しいのでinnerHTMLを使う事を選んだ。』
  • 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

    li要素の左側マージン調整が うまくいかなかった原因
    jdash
    jdash 2009/05/26
    前提条件はoutsideなんだよね。気づくまで時間が掛かったわ…『この問題はlist-style-position: insideが設定されている場合に発生します。』