いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
chrome-life.com - このウェブサイトは販売用です！ - chrome life リソースおよび情報
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.
微分ってなあに？（表紙）
高校で微分を勉強したものの、「なんだかわからないけどただ計算方法だけ覚えた」という困ったレベルに留まっている人は（残念ながら）多いようです。 まずは「微分って何なのか」を図形で理解して欲しいと思います。そこで動く図形で、微分の雰囲気を知って欲しいと思います。 そのための教材の一つとして、授業などで使うべく作成しました。 その１から順に読んで、動かしていってください。 このプログラムを動かすのに必要なファイル全ては、LHAで圧縮したファイルにまとめてあります。 androidの方は、このapkファイルをダウンロードしてくれてもいいです。 プログラムについて御質問、御要望、バグ報告などございましたら、前野［いろもの物理学者］昌弘へメールくださるか、または、twitterにてirobutsuまでメンションしてください。
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
jqueryとDOMを使って見出しがクリックされると対応するコンテンツが表示されます。｜studio-benkei[スタジオベンケイ]
JavaScript ▼ $(function (){ para1 = document.getElementById('news1Paragraph'); para2 = document.getElementById('news2Paragraph'); para1.style.display = 'none'; para2.style.display = 'none'; $("#news1Title").click(function(){ $("#news1Paragraph").toggle(); }); $("#news2Title").click(function(){ $("#news2Paragraph").toggle(); }); }); HTML ▼ <h2 id="news1Title" class="pointer">こちらをクリックして下さい。▼</h2> <u
[JS]クリックで表示・非表示を切り替える
クリックで指定した要素の表示・非表示を切り替えるスクリプト。 表示エリアを稼ぎたい時に便利。 <strong onclick="Toggle('A')">Sample</strong> <div id="A" style="display:block;">サンプル</div> 初期非表示にしたい場合は、display:noneとしておきます。 クリック時の呼び出しは、上記ソースだとonclickイベント属性でやってますが、 アンカータグの場合は次の例のようにhref属性に入れる事も出来ます。 <a href="javascript:Toggle('A')">Sample</a> マウスオーバーにしたい時はonmoseoverになります。 これについてはアクションによってイベントハンドラ選んでください。 次のソースを任意の場所に貼り付けます。通常はheadタグ内。 <script type=
![[JS]クリックで表示・非表示を切り替える](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法
2017年6月29日 Webデザイン, ユーザビリティ ついついデザインはあとまわしになりがちな検索ボックス。少し手を加えるだけで素敵なデザインに！またユーザビリティについてもちょっとした工夫でもっと使いやすくなります。ユーザビリティ向上のためのコツとデザインの素敵な検索ボックスを紹介します！ ↑私が10年以上利用している会計ソフト！ 検索ボックスをもっと使いやすくする 1. 誰が見てもすぐ見つかる場所に ヘッダーやサイドバーの一番上など、ページを開いたときにすぐ見つかる場所に設置すると見つけやすいです。特に意図のない場合はコンテンツに混ぜたりフッターに設置するのは避けた方がよさそうです。 2. テキストボックスの背景色 デフォルトのテキストボックスの色が白のため、背景色はつけず白にしておいたほうがユーザーにとっては見つけやすいです。背景が白の場合はボーダーに線を入れたり、目立ように違う背
How to Create a Grunge Web Design Using Photoshop
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX. In this step-by-step web design tutori
CSS Gradient Text Effect
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Saf
googleウェブサイトオプティマイザーを使ってみよう
2009年に公開されてから、画期的なツールと言われながらも、いまだ普及しているとは言えないGoogleの「ウェブサイトオプティマイザー」。 今回は、そのツールの解説をします。 はじめまして。アクセス解析チームのアソウです。 以後よろしくお願いいたします。 近年webサイト最適化の手段として、アクセス解析は欠かせないものとなってきました。 Google Analyticsの台頭でツール導入の敷居は非常に低くなり、いまや個人から大企業まで、多くのwebサイトが、数値を確認しています。 しかし、アクセス解析はあくまでもサイトの現状の確認を行なうものです。 その解析結果をもとに、サイトの改善施策を行なわなければ、本当の意味での効果は表れません。 今回はリニューアルほど大掛かりではないけれど、サイト改善の具体的な方法を解説したいと思います。皆様のお役にたてば幸いです。 ■ウェブサイトオプティマイザ
CSSスプライト｜WEB制作会社 株式会社スクラッチ｜ホームページ制作/webサイト運用代行/コンサルティング
CSSスプライトとは、複数の画像を一つにまとめ、CSSで表示位置を変更するテクニックのことです。通常、画像はボタンやアイコン等のパーツに分かれていますが、それらをまとめて一つにすることで、画像の読み込みが１度で済みます。 それによって、リクエスト数を減らすことができ、サーバへの負担が少なくなります。また、ブラウザでリソース（画像）が再利用されるので、ページの読み込み時間も早くなります。 しかし、CSSスプライトの欠点として、画像が背景画像となるのでAltを入れることができません。また、代わりにテキストをいれ、 indent：-9999px;という技法もありますが、検索エンジンのスパムの対象になる恐れがあります。 そのため、ナビゲーションやボタンは画像ではなく、テキストリンクになります。 一枚にまとめた画像はその部品ごとに、CSSの「background」プロパティで、表示位置をピクセル単位
すぐに実施できる、あなたのウェブページのスピードを改善する10のチップス
ウェブページのスピードを改善することは最適なユーザエクスペリエンスを提供するだけでなく、Googleの検索結果にも影響を与える大切な要因です。 すぐに実施できる、あなたのウェブページのスピードを改善する10のチップスを紹介します。 10 Tips for Decreasing Web Page Load Times [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 現在のスピードをチェック 2. 画像の最適化 3. 画像は実寸で配置 4. コンテンツを圧縮して、最適化 5. スタイルシートは上に配置 6. スクリプトは下に配置 7. スクリプトとスタイルシートは外部ファイルで 8. HTTPリクエストは最小限に 9. キャッシュの利用 10. 301リダイレクトは避ける 参考資料とツール 1. 現在のスピードをチェック まず、現在のあなたのウェブページのスピードの分析からはじ
[CSS]初心者にも分かりやすいスタイルシートのチュートリアル
スタイルシートの初心者にも分かりやすく、各要素に的確なマークアップを行い、ワイヤーフレームをビジュアル化するチュートリアルをSoh Tanakaから紹介します。 Styling Post Headings That Stick Out demo 下記のチュートリアルでは、見出し、日付、カテゴリ、タグを含むブログのヘッダをステップに分けて実装していきます。 Step 1. Wireframe – HTML ワイヤーフレームに基づいて、「ヘッダ」と「コンテンツ」をdiv要素で配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="post"> <div class="postheader"> <!--ヘッダ--> </div> <!--コンテンツ--> </div> </textarea>
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA