スマートフォンサイトの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; を適宜指定する。 フォ
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
2014年にはWebアプリの「オフラインファースト」が流行するのではないか？
先週2月18日に都内で開催された「第36回HTML5とか勉強会」。テーマは「2013年、Web開発の進化を探る」でした。 そこで「2014年頃にはネットに接続しなくても使えるオフラインWebアプリケーションが流行するのではないか」と話したのが、html5j.orgの世話人でもある白石俊平氏。白石氏が解説する「オフラインファースト」は、これからのWebアプリケーションのひとつの方向性が示されていると思われます。 その講演の内容をダイジェストで紹介します。 オフラインファーストの思想と実践 html5j.org世話人の白石俊平氏。 オフラインファーストとは、オフラインを最初に考えてWebサイトを、Webアプリケーションを作ろうという思想のことです。 で、オフラインファーストって、モバイルファーストという言葉に似ています。モバイルファーストというのは2010年に登場した言葉で、これは去年、とにか
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
Google+ API Shutdown | Google+ Platform | Google Developers
Send feedback Google+ API Shutdown Stay organized with collections Save and categorize content based on your preferences. Legacy Google+ APIs have been shut down as of March 7, 2019. Developers should have received one or more emails listing recently used Google+ API methods in their projects. Whether or not an email was received, we strongly encourage developers to search for and remove any affec
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
XAMPP環境からGoogle Cloud SQLに移行するには
XAMPP環境からGoogle Cloud SQLに移行するには：Google Cloud SQLは基幹系で使えるのか（前編）（1/4 ページ） グーグルのエンタープライズへの挑戦は成功するのか グーグルは2011年10月7日に「Google Cloud SQL」のサービス開始を発表しました。Google Cloud SQL（以降、Cloud SQL）は、「Google App Engine」（以降、GAE）から利用できるRDB（リレーショナルデータベース）アクセス機能で、RDBとしてMySQLを使用します。これまでGAEで使用できるデータストアは、いわゆる「NoSQL」の「Bigtable」だけでしたが、これでNoSQLとSQLの両方が使えるようになったわけです。 Cloud SQLのりリースは、ここ数年グーグルが指向していた、エンタープライズチャレンジの中に位置付けられます。クラウドは
XAMPP for Windows
含む: Apache 2.4.58, MariaDB 10.4.32, PHP 8.0.30, phpMyAdmin 5.2.1, OpenSSL 3.1.3, XAMPP Control Panel 3.2.4, Webalizer 2.23-04, Mercury Mail Transport System 4.63, FileZilla FTP Server 0.9.41, Tomcat 8.5.96 (with mod_proxy_ajp as connector), Strawberry Perl 5.32.1.1 Portable 含む: Apache 2.4.58, MariaDB 10.4.32, PHP 8.1.25, phpMyAdmin 5.2.1, OpenSSL 3.1.3, XAMPP Control Panel 3.2.4, Webalizer 2.23-04
Google +1 をウェブサイトに表示
Documentation You can add and customize the +1 button to meet the needs of your website, such as modifying the button size and load technique. By adding the +1 button to your website, you allow your users to recommend your content to their circles and drive traffic to your site. The +1 button can also improve the time spent on your site by providing recommendations for further reading. Use of the
ビセラの口コミや効果まとめ【失敗しない】口コミからわかる3つのポイント
【インスタ・ツイッター】ビセラの口コミまとめ Instagram（インスタグラム） おはようございます🌞 空が綺麗な朝ですね✨ ・ 私の最近の腸活事情☺︎ 腸が綺麗だとお肌にはもちろん！健康にも良いので、最近話題の短鎖脂肪酸サプリのビセラを飲み始めました✨ ・ 腸内フローラをサポートしてくれて、飲み始めてから最近調子がいいのを実感しています♪ ・ 1日1カプセル💊でいいので、面倒だったり沢山飲むのが苦手な方にもおすすめです☺︎ ・ さて、今日も1日頑張りましょう☺︎ ・ #ビセラ#bisera#腸内フローラ#短鎖脂肪酸 #ダイエット#美容#健康#アラフォー#アラフォー美容#美容好きな人と繋がりたい#腸#腸活#美肌#yorkie#腸活 >> インスタでチェックする ヤセ菌と最近話題の短鎖脂肪酸サプリ 腸内フローラをサポートし 特殊製法のカプセルが 「生」菌を直接腸まで届けてくれる！ 年々
Webサービスを運営するうえで、おさえておきたい利用規約のポイント │ モノづくりブログ 株式会社8bitのスタッフブログです
株式会社8bitのスタッフブログです。こんにちは。株式会社8bitの高本です。 先週「Web制作とお金の話し」を当ブログに書いた際に、様々な方からご意見をいただき、非常に勉強になりました。 ありがとうございます。 その中で、契約も非常に重要であるというご意見をいただきました。 確かにおっしゃる通りでクライアントとのやり取りでお金の前にきっちり契約書を交わすということは重要だと思います。 Web制作の契約もそうですが、不特定多数を相手にしているWebサービスの利用規約や会員規約もかなり重要なポイントではないかと思います。 実際のところ、よく分からないから、他のサービスを参考にしている場合も結構あると思います。 参考にするのは良いとして、サービスによって内容も違いますし、運用する会社や個人によっても保障できる範囲は異なると思います。 Webサービス以外でもサービス提供している場
サイトやブログの運営でよく使いそうな.htaccessの設定のまとめ
ウェブサイトやブログの運営でよく使いそうな便利な.htaccessの設定を紹介します。 こういうまとめは定期的にあがってきますが、やっぱり必要なのでシェアします。 10 useful .htaccess snippets to have in your toolbox [ad#ad-2] 下記は各ポイントを意訳したものです。 URLからwwwを削除 hotlinkingの防止 feedをfeedbunnerにリダイレクト カスタムエラーページ ダウンロードファイルの処理 PHPのエラーのログ URLからファイルの拡張子を削除 ディレクトリのファイルリストを見せない ファイルを圧縮して軽量化 文字コードの指定 URLからwwwを削除 SEOなどの理由で、URLからwwwを削除して使うことがあるかもしれません。このスニペットは、あなたのウェブサイトにwww付きでアクセスしてきてもwww無しに向
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
Open Graph protocol
Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any
Webサイトをgithubで管理してpush時に自動的に同期する方法 - Blog by Sadayuki Furuhashi
Webサーバに Subversion のサーバを立てておき、HTML や CSS を commit することでWebサイトを更新する方法は、良く知られているテクニック、らしいですね*1。更新の履歴を残すことができるし、ましてチマチマとFTPやsftpでアップロードするよりずっと簡単です。 しかし SVN の代わりに git を使おうとすると、pushしてもリポートリポジトリではファイルを更新してくれません。 また、リポジトリはWebサーバ上に作るよりも、便利な管理インタフェースがある github（や噂のgitosis）に置いておきたいところです。 そこで、github の Post-Receive Hook を使うと、リポジトリに変更を push すると同時に、Webサーバにも同期させることができます*2。 Webサーバに同期する前に、Sphinxでドキュメントを整形したり、SassをC
浸透いうな!
DNSの引越しをしたけどうまく切り替わらない。なかなか浸透しない。業者に問い合わせると「DNSの浸透には数日かかることもあります。お待ちください」と言われた。 、、、という話をよく聞きますが、「浸透」(伝播、伝搬、浸潤、反映などとも呼ばれる)ってなんでしょう? DNSの設定を変更するのは「浸透」という謎の現象に託す神頼みのような作業なのでしょうか。 2011.10.16 追記:「浸透」と言っている例 DNSの仕組み まず、DNSの仕組みと、特にキャッシュの動作について解説します。...と思いましたが、とっても大変なので省略します。ただ、権威サーバに登録された情報が世界中のキャッシュサーバに配信されるなどという仕組みは DNS には存在しません。浸透という人はそう思っているようですが。(こんなふうに) 「浸透」という言葉で騙されていませんか? 事前に変更したいDNSのレコードのTTLを短くし
Another HTML-lint gateway
HTML文書の文法をチェックし、採点します htmllint.cgi 1.28 / htmllint.pm 3.58 33,323 lints / 0 visits / since Jan 6, 1998 文法しか採点しません。内容の良し悪しは採点されません。結果に疑問を感じたら必ず結果の解説を読んでください。満点で慢心しないでください。 チェックしない警告は減点対象外で、満点は 100点です。チェックしても減点されない警告もあります。気に入らないチェック項目は外すことができます。お好みに調整してください。 また、基本的な設定項目だけの簡易ゲートウェイもあります。いちいちオプションなんかどうせ指定しないや、という方はご利用ください。 ローカル環境でチェックしたいとお考えの方は、ダウンロードのページを参照してください。 チェック方式 チェックしたいHTMLのURLを指定するか、HTMLを下の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタートアップ向け！1人日でできるサービスの高速化方法と成果
スマートフォン対応、気をつけたいトラブル
