独学の人には特にオススメ！JavaScriptの基礎が一通り、14分ちょいで学べるチュートリアル
コンソール まずは、JavaScriptのコンソールを使用して、「Hello World!」を表示します。 コンソールの表示方法 Edge F12 Chrome command+option+J (win: ctrl+shift+J) Firefox command+option+K (win: ctrl+shift+K) Safari command+option+C Safariの場合はショートカットが他のアプリ(Alfred)に使用されている場合があるので、環境設定から「メニューバーに開発メニューを表示」をチェックすると、メニューバーからコンソールを表示できます。
CSSの作業効率がアップする、少し高度な使い方のまとめ
Webページやスマホアプリをはじめ、レスポンシブ対応ページなどで役立つ、CSSのあまり知られていない仕様や少し高度な使い方を紹介します。 Lesser known CSS quirks & advanced tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. 垂直方向のpaddingは要素の幅に対して相対的 02. マージンの相殺が適用されない条件 03. 不透明度でz-indexの積み重ね順序を変更できる 04. CSSのカスタムプロパティ（変数） 05. vertical-align: top | middle | bottom 06.「height: 100%;」の挙動 07. idとclassの詳細度 08. 属性のターゲティング 09. 複数の値を指定する場合、垂直、水平の順番になるとは限らない 10.
[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs
一つの要素に、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種類用のclassを定義し、レスポンシブ対応のフレキシブルなレイアウトを実装できるスタイルシートを紹介します。 flexible.gs flexible.gs -GitHub flexible.gsのデモ flexible.gsの使い方 flexible.gsのデモ 対応ブラウザは、デスクトップがChrome, Safari, Opera, Firefox, IEは7+対応で、モバイルもiOS Safari, Opera Mini, Android Browser, Opera Mobile, Chrome for Android, Firefox for Android, IE Mobileと現在主流のブラウザに対応しています。 デフォルトでは、デスクトップ、タブレット横、タブレット縦、スマホ横、スマホ縦の5種
![[CSS]一つの要素にデスクトップ、タブレット横・縦、スマホ横・縦用の各レイアウトを実装できる簡単便利なスタイルシート -flexible.gs](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5d222ae06cf2d58d2b7bc17660d161a7352606d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014102201-01.png)
Web制作者は使わないと損！Chrome 59でアップデートされたデベロッパーツールの便利な新機能
5日にリリースされたChrome 59で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。 What's New In DevTools (Chrome 59) Chrome 59 - What's New in DevTools -YouTube ページの軽量化: 未使用のCSSとJavaScriptを見つける フルサイズのスクリーンショットをキャプチャ リソースのロードをブロック 非同期コードの検証 コマンドメニューの統一 ページの軽量化: 未使用のCSSとJavaScriptを見つける 新機能の一つ目は「Coverage tab」。ページで使用されていないCSSとJavaScriptを見つけることができます。 command + shift + P で、「Show Coverage」を入力して選択。 ※「cov」まで入力すれば、上位に表示されます。 Show
Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト
URLエンコードとデコードが行えるフォームです。 URLエンコード、またはデコードのフォームに文字列を入力し、変換用のボタンをクリックしてください。
URLエンコードとは - IT用語辞典
URLエンコード 【URL encoding】 パーセントエンコーディング / percent encoding / HTMLエンコード / URIエンコード / URI encoding 概要 URLエンコード（URL encoding）とは、URLのファイル名やクエリ文字列などの一部としては使用できない記号や文字を、使用できる文字の特殊な組み合わせによって表記する変換規則。「%」と文字コードの16進数表記を繋げたものに置き換えるといった変換を行う。 URL（Uniform Resource Locator）はインターネット上での資源（情報やサービスなど）の所在情報を書き表すための表記法の標準で、Webページの場所を指し示す際などに利用される。HTTPの場合は「http:」あるいは「https:」に続けて「//WebサーバのIPアドレスまたはドメイン名/サーバ内のパス」という形式になる。
特殊文字や特殊記号の一覧表：コピペで使えるHTMLの文字参照コード - ウェブランサー
ウェブページに特殊な文字や記号を表示させるには、専用の文字コードが必要となる場合があります。通常、インターネットはウェブブラウザで閲覧しますが、プログラムの性質上、ソースコードに直接記述できないものがあるためです。それらを表示するには「文字参照」という仕組みを使います。 文字参照の書き方に関する詳しい解説 HTMLで特殊な記号を表すには「文字参照」という仕組みを使います。書き方にはいくつかの法則があります。まずは以下のパターンを覚えましょう。 & keyword ; 例えば、文章の中に「<html>」と表示させたい箇所があるとします。不等号（<・>）はHTMLの要素を表す記号であるため、そのままブラウザで読み込んでも画面には表示されません。その状況を避けるには、「<」と表示させたい箇所に「<」を、「>」と表示させたい箇所に「>」を記述します。 ソースコードに「<」が書かれ
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
ここ数年のブラウザのデフォルトスタイルシート。縦書きとかHTML5とか。 - kojika17
最初からブラウザに設定されているスタイルシートを、「User Agent Style Sheets」といいます。(以下、UA Style Sheets) ここ数年でUA Style Sheetsに変化があり、どのような変化があるのか知っておくと、リセットCSSの見直しなどに役立ちます。 UA Style Sheets の margin p要素に定義されているUA Style Sheetsを例にすると、IE8などは私たちがいつも利用しているmarginによって指定されています。しかしGoogle ChromeやFirefoxなどのUA Style Shteetsでは、margin-start, margin-endなどの論理プロパティが利用されています。 IE8: p要素のUA Style Sheets p { display: block; margin: 1em 0; } Webkit:
【CSS3】 ベンダープレフィックスとは？ （プロパティによっては不要）
ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装するとき、または草案段階の仕様を先行実装する場合に付ける識別子のことです。 プロパティにつけてそれが拡張機能であることを示します。 左がベンダープレフィックス、右に書いたものが各ブラウザ名です。 ベンダープレフィックスの書き方 【参考ソース】 .foo { -o-border-radius: 8px; -ms-border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } border-radius（角丸指定）というプロパティの前に、先ほど紹介した『-ms-』とか『-o-』などがついていますね。 別の指定する場合も、同じくプロパティの前にこれらをつけます。 書き方の順番ですが、上記の例ではベ
株式会社Go-Next | お客様にビジネスの成長と革新を
今日も生まれる感動と笑顔 お客様の事業、戦略、Webサイトの現状などを把握し、最適な施策を立案・実行します。 more info Top Message インターネットテクノロジーの需要が高まり、その必要性と可能性を感じ2005年に創業して以来、現在に至るまでステークホルダーの皆さまに支えていただきながら成長を続けてまいりました。「ITとクリエイティブのチカラで、心沸き起こるプロダクトを生み出す」ことをミッションに掲げ、さらなる充実したチカラ溢れる未来の実現を目指します。私たちの強みは、企画戦略からシステム開発、Webアプリケーション開発、クリエイティブ、コンサルティングに渡るワンストップソリューション提供とオーナーシップマインドを両立することにより、より精度の高い、顧客満足度の高いアウトプットと課題解決を達成します。また、創造性の向上、生産性の向上、コストの削減といった意識、文化を育むた
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
YouTube動画パラメータ まとめ１／コントロールバー等
YouTubeにアップした動画を自社サイトに埋め込む企業はたくさんありますが、再生方法や、見た目をカスタマイズしている会社は非常に少ないのではないでしょうか。例えば、ページを開くと同時に動画を自動再生させたり、動画を連続してリピート再生させるなどのカスタマイズです。 このようなカスタマイズは決して難しいものではありません。YouTube動画を埋め込む時、貼り付けるコードにちょっとしたパラメーターを書き加えるだけでOKです。 Google Developersサイトには次の２３個のパラメーターが紹介されています。 ・autohide ・autoplay ・cc_load_policy ・color ・controls ・disablekb ・enablejsapi ・end ・fs ・hl ・iv_load_policy ・list ・listType ・loop ・modestbrandi
YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例 - WisdomMingle.com
ここでは、YouTube動画の埋め込みプレーヤーの見た目や機能をカスタマイズするための 「パラメータ」という機能の使い方についてお話します。 また、YouTubeの埋め込み動画プレーヤーをつかうときに前提となる、<iframe>タグや、<object>タグ、HTML5形式の動画プレーヤー、Flash形式の動画プレーヤーなどの情報についてもお話します。 さらに、JavaScriptやActionScriptをつかって動画プレーヤーを自由に制御することができるAPIについてもお話します。 「パラメータ」をつかうと、どんなことができるの？ まず、「パラメータ」をつかってどんなことができるのかを知るために、下の実例を見てください。 実例１： 自動的に再生が始まり、巻き戻しや、早送りはできない 下の動画は、「パラメータ」をつかってつぎのような設定にしています。 これによって、自動的に再生が始まり、操
YouTube動画のホームページへの埋め込み方と7つのカスタマイズテクニック | SEO百科事典
ホームページとYouTube動画の連動は動画運営上や、ホームページ運営上欠かせないものとなった。ホームページにYouTube動画をただ埋め込むのではなく、ユーザーに適正に見せるための埋め込み方をお伝えしていく。 ホームページへYouTube動画を掲載する方法 まず、YouTubeにアクセスを行い、ホームページに埋め込みたい動画まで進む。 その後、赤枠で囲った「共有」と書かれたボタンを押す。 YouTube動画の共有方法は以下の通りだ。3点とも大事なので確認してほしい。 ①URLについて：WordPressを利用している方は、このURLコードをそのままコピーすることで動画を埋め込むことができる。また、リンクを貼りたい場合も利用する。 ②開始位置について：開始位置を設定することで、ホームページ上に再生をする時間を決めることが可能になる。 ③埋め込みコード：こちらのボタンを押して、ホームページに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Photoshopで画像の切り抜き、選択範囲を作成するのはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
これを使うだけでUIデザインの印象がかなり変わる！Instagramで人気の色相が変化する美しいグラデーション
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited
動画制作・活用なら取引実績2,000社以上のLOCUS（ローカス）｜株式会社LOCUS
CSS セレクタやプロパティの意味、使い方、書き方の記事一覧（1 / 9 ページ）
