【YouTube】動画埋め込みサイズ・早見表【最適なピクセル数はこちら】
この記事を読むと、以下の問題が解決できます。 YouTubeの動画埋め込み画面で、動画のサイズが指定出来なくなってしまった。 手動で数値を入れ替えればサイズが変えられるので、適切なサイズをサクッと知りたい YouTubeでWebページやブログに動画の埋め込みをしたことがある人ならお気づきだと思いますが、動画サイズが固定になっており、カスタマイズすることが出来ません。 以前のYouTubeの動画埋め込みは、この画面で自由にサイズを指定できたのですが、2019年1月時点で、そのようなカスタマイズは出来なくなっています。 対策としては、HTMLタグの数値を手動で書き換えることでサイズを変更出来ます。 しかし、それでサイズを変えることが出来るのになぜこのカスタマイズ画面からサイズの指定項目を消したのでしょうね？ 謎です。 というわけで、動画のアスペクト比ごとに、どのサイズが最も適切なサイズとなるか
HTMLコーダーにやめてほしい10のこと｜TechRacho by BPS株式会社
システム開発の際、デザインとHTMLコーディングは別会社で! 受け取ったHTMLの組み込みはお願いします! ということが結構あるのですが、その時もらったHTMLを見て、ここはやめてほしいという点をまとめて書いていこうと思います。 インデントがバラバラ プログラム書くときもそうですが、インデントがバラバラだと見づらいです。 ※弊社ではHTML/CSSともにインデントはスペース2つです。 タブ/スペースが混じっている インデントが崩れているときは大体、タブ/スペースが混じってますね。見づらいです。 ※弊社ではタブは使わないようにしています。 JSが意図した動作になっていない/動かない JSまで対応となっているにもかかわらず、動かないというのは論外ですね。 「JSが意図した動作になっていない」これも結構ありました。 例 全選択/全解除というところをチェックすると、下にある項目が全部選択されるとこ
【入門向け！】独学に最適なHTMLを学べる学習サイト20選
【入門向け！】独学に最適なHTMLを学べる学習サイト20選 初心者向けにHTMLを独学で学習できるサイトをまとめて紹介しています。入門向けでかつ無料で利用できるので、これから始める人におすすめです。自分に合った学習スタイルでHTMLの勉強を始めてみてはいかがでしょうか！ テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Web開発やデザインをやってみたいけれど、何から手をつければ良いか分からないという方もいらっしゃるかもしれませんね。 Web
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自
HTML入門 第3回 -これからのHTML-｜オンライン動画授業・講座のSchoo（スクー）
たにぐち まこと 株式会社エイチツーオー・スペース 代表取締役 「ちゃんとWeb」をコーポレートテーマに、Web標準に準拠したメンテナンスしやすいWebサイトを「ちゃんと」作ることを目指したWeb制作会社。 WordPressを利用したサイト制作や、スマートデバイス向けサイトの制作、PHPやJavaScriptによる開発を得意とする。 また、CSS Niteや Word Campでの講演や著書などを通じ、クリエイターの育成にも力を入れている。 主な著書に『WordPressをちゃんと使うための教科書』（マイナビ刊）、『よくわかるPHPの教科書』（マイナビ刊）など。 Web http://h2o-space.com Twitter http://twitter.com/seltzer Facebook http://facebook.com/taniguchi.makoto 主な講演実績 C
フロントエンドエンジニアとは？HTMLコーダーとの違いや役割｜クロノドライブ
ここ数年でフロントエンドエンジニアという言葉を聞くことが多くなったと感じますが、フロントエンドエンジニアの定義は会社によって異なるものです。 ただ多くの場合、「JavaScriptやHTML5/CSS3、PHPといったプログラム言語など、高度なWeb制作スキルを持った人」を指しており、それらのスキルを活かしてWebサイトを構築する仕事内容がほとんどです。（アプリ制作会社の場合アプリ開発のフロントエンド部分を担当するエンジニアを指すこともあります。） 当コラムではフロントエンドエンジニアとは「Web制作においてHTML/CSSはもとより、それに関連するJavaScriptや各種API、WebGLやキャンバスなどWebサイトを表示するうえで必要となるさまざまな技術・知識を持ち、それらを取捨選択できる人」と定義します。 そのうえで、フロントエンドエンジニアとしてWeb制作の現場で働く際に必要とな
携帯サイトの作り方
ここでは、携帯向けサイトの作り方を簡単に紹介します。 PC向けサイトを作ったことのある人を対象とさせていただきます。 まず、携帯版のファイルはPC版と完全に分けましょう。 共通のファイルで済まそうとするのはかなり無理があります。 PCと携帯の違い いくつかあるので順に説明します。 ファイルサイズの制限 これが一番大きなところでしょう。 後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを 画像も含めて5Kbytes程に収めなければなりません。 5Kbytesでは足りない、と思われる方も多いと思いますが 試しに5Kbytesの文章を書いて携帯で表示させてみましょう。 携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。 スタイルシート関連 携帯向けサイトでは、一切のスタイルシートが使えません。 もともと、スタイルシートとは細かな装飾方法をアレンジするための
レスポンシブWebデザインの作り方（簡単設定方法）
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile（ウェブモバイル）は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
【CSS】デバイス幅に合わせたサイズ可変のメニューボタンをbackgroundで作る
こんにちは。転職して、コーディングする機会も増えてきましたコーダー初心者井畑です。 今回はスマホのコーディングで苦戦したところがあったので、備忘録としてメモしておきます。 同じような悩みをもっている方の助けになれば幸いです。それではどうぞ! 今回作りたいもの 今回作りたかったのは、上図のようにデバイスの幅にあわせてサイズ可変するメニューボタンです。 問題は、メニューボタンを背景画像(background)として表示することです。これが難しかった… 問題点:背景画像の高さ指定がうまくいかない… 背景画像(background)の幅はデバイスの幅サイズによって可変できるので問題ないのですが、高さは基準となるサイズが無いので、指定しないと高さが0になってしまいます。 だからといって高さを100pxのように指定してしまうと、デバイス幅が変わった時に画像が切れたり、無駄な余白ができてしまいますX(
dt要素やdd要素を横並びにする｜クロノドライブ
<dd>dd要素です。サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</dd>
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
DreamweaverからCodaに変えました
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
病的溺愛シンドローム
病的溺愛シンドローム 愛するWordPressのプラグインを病的に体当たりレポート。その他Tipsやコラムや実験など。サボテンとか日常も書き綴られているのはご愛嬌。 先日紹介したRaw HTMLプラグインと同じような機能の WordPressの自動整形を止めるプラグインを発見したので入れてみた。 WP-UnFormating これはとても単純なプラグインで、オプション設定なども一切ない。 インストールもWordPress 2.7から実装の自動インストールでOK。 使い方は、自動整形してほしくない部分を ［unformat］［/unfotmat］ （［］は半角） で囲むだけ。 AddQuicktagプラグインに登録しておけば便利。 先日からなにをごにょごにょしたかったのかというと、 Google Friend Connectのために専用ページ（上のメニューから飛べるページ）を作ろうとしていた
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
JavaScript記述方法
また、W3Cの規定ではJavaScriptは以下のように記述します。W3Cの書き方ではバージョンは指定することはできません。 ●デフォルトの言語として指定する場合 <meta http-equiv="Content-Script-Type" content="text/javascript"> ●<script>タグ内で指定する場合 <script type="text/javascript"> JavaScript命令および関数... </script> 2004年現在では<script>タグ内にlanguage属性とtype属性を併記して古いブラウザ（Netscape Navigator 4など）に対応させる場合もあります。この場合は以下のように記述します。 <script language="JavaScript" type="text/javascript"> JavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた | バシャログ。![[Dreamweaver] コードビューを Sublime Textエディタ風な黒い画面になるようコードカラーリングを変更してみた | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/b2a2c11b17693e3812ca5043c1de13f337332706/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_dreamweaver.png)
デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編
ヘッダとメタタグの書き方｜SEO会社による実践テクニック
ネットブックにFedora 11を入れてみました。
