タグ

関連タグで絞り込む (13)

タグの絞り込みを解除

htmlに関するrysterのブックマーク (17)

  • Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL


    Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、﹃なんだ、ウィスラーのついでかよー﹄と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
    Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL

  • HTML講座 - iframe要素


    今回はiframe要素を紹介します。iframe要素とは、新しいブラウジングコンテキストを作り文書中に配置するものです。 分かりにくい言い方ですが、あるページの中に、別のページを表示する枠のようなものを置くということです。 このような概念はフレームと呼ばれます。iframe要素で作られるフレームはインラインフレームと呼ばれます。 基本的な使い方 まず、src属性で、このブラウジングコンテキストに入れるページのアドレスを指定します。 例えば、<iframe src="http://google.com/"></iframe>のようにした場合、次のようになります。 枠ができてGoogleが表示されたと思います。 また、width属性・height属性があり、これによりインラインフレームの大きさを指定できます。 さらにname属性があり、これがブラウジングコンテキスト名です。前回target属性
    ryster
    ryster 2014/08/12
    リンク

  • HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

    HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S

    HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

  • ScaleOut | Supership


    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
    ScaleOut | Supership
    ryster
    ryster 2013/08/07
    リンク

  • スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作


    display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
    スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

  • 知らない人は遅れてる？新Zen-Coding Emmet


    頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。 早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
    ryster
    ryster 2012/10/13
    リンク

  • これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド


    以前から、﹁Webサイトを制作をしたいけど、何から勉強したらいいの？﹂という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5とか CSS3とか、私が勉強し出した頃に比べる
    ryster
    ryster 2012/07/16
    自分がHTMLを勉強し始めた時を思い出したｗ凄く良記事だけど、初心者はHTMLの意味なんて最初は知らなくていいと思う。自分が作りたいサイトをとほほでも見ながら、がむしゃらに作ってみればいい
    リンク

  • CodeMirrorでWordPressのhtmlエディタをもっと快適にする


    Posted: 2012.05.08 / Category: javascript, WordPress / Tag: Plugin, 管理画面 前回﹁HTMLEditor Syntax Highlighter﹂というWordpressのエディタをハイライト表示するプラグインをご紹介しましたが、これは﹁CodeMirror﹂というJSライブラリを使用していまして、このライブラリは様々なカスタマイズができます。 そこで、この記事では﹁CodeMirror﹂をカスタマイズしてさらに快適なエディター環境を構築する方法をご紹介します。 プラグインの編集 解凍したフォルダの中に﹁html-editor-syntax-highlighter.php﹂というファイルがありますのでこれを編集します。 オプションは49～65行目あたりになるので、基本的にはここに項目を追加したりします。 html-edit
    CodeMirrorでWordPressのhtmlエディタをもっと快適にする
    ryster
    ryster 2012/05/09
    リンク

  • これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久


    ※2012-04-07　セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる︵可能性を秘めた︶、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
    これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
    ryster
    ryster 2012/04/04
    リンク

  • Webサイト内の電話番号が勝手にSkypeの番号ボタンに置換されるのをmetaタグで制御する


    少し気になったので調べたんですが、 ブラウザにSkypeのアドオンとかエク ステンションを入れていると、Web サイトやGoogleの検索結果の電話番号 が勝手にSkype用の起動ボタンに置換 されます。 今更な話ですみません。よくわかってないんですけど、SkypeをインストールするとChrome︵Firefoxも？︶にもエクステンションが追加されるようです。インストール時にチェック項目にあったかどうか覚えてませんけど。 まぁそれ自体はいらなければ削除すればいいのでどうでもいいんですが、Webサイト内まで一方的に変えられるのはあまり好きじゃないのでWebサイト側で制御できないかなとふと思って調べたら出来るみたいなのでメモ書き。 電話番号が置換される これは以前書いたトトロのシュークリームの記事なんですが、このようにSkypeのボタンに置換されています。 [note]キャプチャは表示テストで
    Webサイト内の電話番号が勝手にSkypeの番号ボタンに置換されるのをmetaタグで制御する

  • Web上で直接編集できる文字や画像

    Web上で直接編集できる文字や画像 【 ありのごとくあつまりて 】 この記事に含まれるタグ （Keyword） : 直接編集  contenteditable Web上で直接編集できる文字や画像 2008/11/10 (月)  カテゴリー： Twitter・ブラウザ関連 Web上 （ IE や Firefox などのブラウザ ） で 文字や画像 を 直接編集できる方法があることをご存知ですか？ しかも、Web制作者側 が この機能をページの任意の場所に搭載させることもできるし、閲覧者側 が どんなサイトでも 文字や画像 を直接編集することもできる!!　（私は つい先日、初めてこれを知りました） 私のサイトでは... → 例えばこんな使い方 を採用して ソースの編集やコピー をその場で簡単にできるようにしています。 また、ページのスクリーンショットを撮る際に 邪魔なものをよけて （削除して）

    Web上で直接編集できる文字や画像
    ryster
    ryster 2011/06/08
    リンク

  • Webスクレイピングを可能にするPHPライブラリ・htmlSQL


    htmlSQLはWebスクレイピング︵部分的にHTML抽出︶を可能にするPHPライブラリです。ソースが公開されていたのでご紹介します。 ※先日、お知らせさせて頂きましたように、この記事は僕が管理していた別のブログの過去記事を移行したもので正確性に欠ける可能性があります。何卒ご了承願います。 HTML内を部分的に取り出し、表示する事で、それを容易にするスクリプトがhtmlSQLというPHPライブラリです。DOM解析をSQL風に指示するらしい。 デモがありますのでご体感下さい。→htmlSQL – live example 以下のコードを使うようです。 <?php /* ** htmlSQL - Example 1 ** ** Shows a simple query */ include_once("../snoopy.class.php"); include_once("../htmlsq
    Webスクレイピングを可能にするPHPライブラリ・htmlSQL

  • HTML5で組んでみた - CSS-EBLOG - えど - builder by ZDNet Japan

    特集：IT最適化への道 成功の秘訣をその道のプロが解説 カギとなるのはシステムの「見える化」 コンテナをエンプラITに！ コンテナ活用の基礎 本番実装が増える背景とメリット IT部門のDXはこれだ！ IT運用管理新時代における最適な運用管理 の現場作り 時代はサーバ仮想化からコンテナへ あらためて整理したい企業ITにおける コンテナ活用の基礎と採用メリットを紹介 非構造化データのデジタル活用へ 社内の文書コンテンツを一元管理 デジタル変革と内部統制の二兎を得るECM EDRトップランナー対談：後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが連携し パブリッククラウドへの移行を支援 ものづくり現場の情報セキュリティ インダストリー4.0は製造業の変革期 工場のデジタル化によるリスクへの対応

    ryster
    ryster 2009/06/21
    リンク

  • JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ

    JavaScriptこんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか、Operaナントカとか…。こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！そしたら意外と簡単だった…！ これならぼくにも作れそう！！ってことで、ちょっとメモしておきますね！ どれにしようかな…！つくるのが簡単なことWinで動いたらいいや使う人がインストールしやすそうなのがいいこんな感じで考えていくと… Googleガジェット か AIR なのかなー、って思ったんだけど、プラグインとかインストールはめんどくさいから、なにもせずに使えるものがいいよね！だから HTA（H

    ryster
    ryster 2009/01/19
    リンク

  • xml宣言について - lucky bag


    標準準拠から後方互換にすると変化するもの text-alignに関して 後方互換ではtext-alignの指定がインライン要素だけでなく、divなどのブロック要素にも反映される 文字サイズに関して 後方互換ではブラウザデフォルトの文字サイズがひと回り小さい、つまりsmallがmidium相当 ボックスサイズに関して 後方互換ではwidthとheightの値にpadding、borderのサイズも含めてしまう その他margin: auto;でブロック要素のセンタリングが出来ない、CSSの記述に対して厳しくなり、pxなどの単位をきちんと指定しないとプロパティごと無視される等色々あります。xml文書と言うことでは、やはり宣言しなければいけないのですが、Mac IE4.5ではHTMLとしての解釈ができず、そのままソースを表示してしまうバグがあったりと、古いブラウザを考えるとちょっと厳しいものがあ
    ryster
    ryster 2008/05/23
    リンク

  • HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌

    HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次

  • CSSでクールなテーブルを作成するサンプル:phpspot開発日誌


    ACSS styled table | Veerle'sblog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル1︵解説記事︶ サンプル2︵解説記事︶ テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.