【更新終了】バイデン氏が勝利宣言 米大統領選の開票速報 - Yahoo!ニュース11月3日（現地時間）に投開票された米大統領選。民主党ジョー・バイデン氏の獲得した選挙人が過半数に達し、7日夜（同）に同氏は勝利宣言を行った。最新の開票状況を速報する。（Yahoo!ニュース） ◆バイデン氏がペンシルベニア州で勝利を確実にし、当選に必要な過半数の選挙人を獲得。 ◆7日夜（日本時間8日午前）、バイデン氏は勝利宣言を行った。 ◆トランプ氏は、バイデン氏が「勝者を装っている」と表明し、敗北を認めない姿勢。 ◆トランプ陣営は、郵便投票の有効性などを裁判で徹底的に争う考え。
Copyright（コピーライト）を図解で解説！HTMLでの「©」の正しい書き方
先に結論を述べておくと、著作物が発行された時点で著作権が有効になるため、copyrightは実はなくてもOKです。 フッターにあった方が見栄えがよいcopyrightがあった方が抑止力になる などの理由から慣習的に行われているというのが実情です。 コピーライトって何？ copyright（読み方：コピーライト）とはwebサイト・楽曲・映画・小説などの作品に対する著作権です。webサイトではページの最下部（フッター）に書いてあります。 コピーライトと聞くとキャッチコピーを書く「コピーライター」の職業を思い浮かべがちですが全くの別物です。 英語が得意な人はすぐピンときたかもしれませんが コピーライト = copyrightコピーライター = copywriter とスペルが違いますよね。copywriterは「コピーを書く人」ですが、copyrightは「著作権」という意味です。 コピーライト
BiNDでサイトを作成する時の画像サイズの目安｜成果につながるWebスキルアッププログラム
パソコン、タブレット、スマートフォン、時にはテレビ画面など、近年のWebサイト閲覧の手段は多様になり、最近は高解像度の機種も一般的になりました。 スマホ時代に最適な画像のサイズや新常識 上記の記事にもある通り、解像度の高い機種ではWebサイトの画像も大きなサイズで作成する必要があります。ただ、全ての機種に考慮したサイズを準備するのは大変ですし、どのサイズで作ればよいか迷うことも多いので、実際に制作する上での画像サイズの落としどころを探ってみたいと思います。 画面解像度の違いによる画像の見え方の違い 画像を大きいサイズで作る理由について、実際の見え方で確認してみましょう。 例えばiPhone8ではデバイスピクセル（画面の実際の解像度）2pxに対して、CSSピクセル（Webページなどを表示するためのサイズ）は1pxになります。 この２つの数値の比率はデバイスピクセル比と呼ばれ、Webサイトでは
CSSのクラス名を決めるときに使うリストをつくりました
CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分
Markdownで記述できる無料のテキストエディタ15選 | UX MILK
Markdownは幅広く注目されているマークアップ言語の一つです。その手軽な記述方法から、愛用している方も多いのではないでしょうか。 Markdownの特色としてはHTMLのような見やすいスタイリングで出力できる点です。Markdown初心者の方などはリアルタイムで出力結果が見れるとよりMarkdownに親しみが持てると思いますので、今回はMarkdownをプレビューできる、Markdown対応の無料テキストエディタを特集したいと思います。 Markdownとは？ ツールの紹介の前に、Markdownを知らない方のため、改めてMarkdownとは何かを見てみましょう。 Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。（Wikipedia） 平たく言えば簡
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
【企業サイト構築用】Webページコーディングガイドライン
以前、社内共有と知見をメモするためにWordPressの設計ガイドラインを書きましたが、Webサイト（ページ）のコーディングガイドが必要となってきたので、改めてまとめてみました。 多くのWebサイトを構築した経験値に基づき、特に企業向けのWebページコーディングを、一から行う前提で記述しています。 はじめに 技術やブラウザサポートの進展にあわせて、よりモダンなフレームワークや開発環境が次々と発表されていますが、普通のWebサイト、特に企業向けのサイトに於いては、新しく革新的な技術や設計よりも、以下の方針が往々にしてマッチします。 担当者が変わっても編集・変更し易い技術選定 拡張・運用していく過程で破綻しない設計 本ガイドは、上記の方針を踏まえたコーディングガイドラインとなります。 本ガイドの最大テーマは、納品物（Webサイトデータ）に一定の品質を担保することです。よって、制作前の決め事・チ
コーディングをするときに鼻血がでるほど便利なwebツールリスト - Qiita
普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO
ソースコードの形状ルール | 吉本式BEM設計（BEM設計ベース）
HTMLのソースコードの形状ルール 今回のこの記事に対しての反響について 日頃から他の実装者が制作したWebサイトのソースコードを見るようにしていますが、美しいソースコードだと思えるソースコードにはなかなか出会えません。 「美しいソースコード」という意味には、単に「美しい」だけではなく「見やすい」という意味も含めて使用しています。 タイトなスケジュールに追われて、ソースコードを整える余裕がないというのが現状でしょうか。 中でも最も気になるのが、インデントです。 Webサイトのソースコードを見ると8割程度の割合で、インデントが付いています。 なぜインデントを付けるのかを聞くと「コーディングミスが防ぎやすい」「作業効率が良くなる」という回答がきます。 これについて否定はしませんが、ではインデントを付けないとコーディングミスが起きやすく、作業効率が悪いのかというと、そんなことはありません。 私は
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
CSSコーダーにとっての2018年のコーディング事情。アンケート結果から分析するイマドキのウェブ制作 ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第4回目となる本記事ではウェブ業界の「CSSコーダーにとっての2018年のコーディング事情」と題してアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 CSSのベンダープレフィックスは今も付けてますか？ ブラウザのサポートが拡大し、多くのCSSプロパティでベンダープレフィックスの記載が不要になってきました。みなさんは今もベンダープレフィックスを書いているのでしょうか？ 309票の回答があり「ごく一部のものに付けてる」が38%、「なるべく付けて
userAgentでブラウザ＆デバイス判別 2017年版 - Qiita
ブラウザのUserAgentを調べて、ユーザーのブラウザ名・バージョン・デバイスの種類を判定するJavaScriptライブラリをアップデートしました。CSSでの場合分けに使えるように、Modernizrっぽく <html> タグのクラス名に判定結果が追加されるようにしてみました。 よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。 ソースコード ちなみにおいらのコードはとても汚いです。 Githubにも置いておきますね → Github - UserAgentChecker.js // ------------------------------------------------------------------------------- // User Agent Checker // ----------------------------------------
レスポンス向上のため、PageSpeed Insightsを利用してみた | doop
前回の続き。 現在作っているWebアプリの問題として、レスポンスが悪かったようなので、 どの辺があかんのか、PageSpeed Insightsを使って調べてみた。 けど、Bootstrapのsampleをベースに作っていたので、そんなにたくさんの指摘はなかったんだよね。 主な指摘は以下の通り。 ・文字セットを指定する ・重複するリソースは 1 つの URL から提供する ・圧縮を有効にする ・ブラウザのキャッシュを活用する ・JavaScript を縮小する このうち、「文字セットを指定する」は指定してあるんだけど、PageSpeedのバグなのか表示が消えなかったので気にしない事に。 また、「JavaScript を縮小する」はソースコード量が少なくて、あまり効果がなさそうなのでパス。 「重複するリソースは・・」は諸事情により致し方ないのでパス。 と、言うわけで他の2つを実施。 圧縮を有
HTML文書は文字エンコーディングUTF-8でなければなりません - 水底の血
さよならレガシーエンコーディング。 文字エンコーディング宣言が存在するかどうかにかかわらず、文書のエンコードに使用される実際の文字エンコーディングはUTF-8でなければならない。 4.2.5.5 文書の文字エンコーディングを指定する - HTML Standard 日本語訳 Require utf-8 when specifying character encoding by sideshowbarker · Pull Request #3091 · whatwg/htmlにより、HTMLで使用できるエンコーディングはUTF-8のみとなりました。これにより、古いHTMLでは許容されていた、Shift_JIS、ISO-2022-JP、EUC-JP、UTF16LEといった文字エンコーディングは適合するHTMLではなくなりました。すでにNu Html CheckerでUTF-8以外の文字エンコー
はじめてのaigis | 第1回 aigisの基本
はじめてのaigis 第1回 aigisの基本 まずはaigisがどういったものか、その特徴と基本的な機能を解説します。Node.jsのみで構築できる環境、YAMLとMarkdownで簡単に記述できるスタイルガイド記述、スタイルガイドの分類を簡便に行えるカテゴリーなど多くの特徴があります。 はじめに この記事では、スタイルガイドジェネレーターaigis（アイギス）の基本的な機能を、サンプルを交えながら紹介していきます。 「自作ツール作成から学ぶノウハウ - 第1回 aigisの作成と公開」*で筆者が作成したaigisというスタイルガイドジェネレータの技術的な背景や紹介しました。 本シリーズではaigisの特徴や使い方を解説していきます。 *注：v1.0.0のリリース 前述の記事のあと、aigisのバージョン1.0.0をリリースしました。利用しているライブラリなどが変更され、機能などにも変更
Facebookでのウケ方が段違い！もはや必須なOGPを設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。sekoです。 昨今、ウェブサイトを多くの人に見てもらう為に、SNSを利用して広めていく事はもはや常識となっています。 その際、とても重要となるのがウェブサイトにOGPの設定することです。 今回はOGPについて紹介していきます。 OGPとは OGPの正式名称は”Open Graph Protocol”と言います。 facebookやmixi、google＋などのSNSとウェブページを連携させる為に設定する記事情報で、各種ウォール、ニュースフィードに「こういうサイトです」と明言するために必要な仕様です。 例えばfacebookにおいて、OGPを設定していないサイトで「いいね！」を押すと「〇〇さんがリンクについていいね！と言ってます」と自分のウォールには投稿されますがニュースフィードには反映されないため他の人の目に記事がさらされる事はなかなかありません。 しかしOGP設定をしたサイ
Googleが推薦するHTMLとCSSのコーディング方法
2012年7月12日のGoogle ウェブマスター向け公式ブログの記事「HTML と CSS のコーディングガイドライン」で紹介されていた「Google HTML/CSS Style Guide」に書いてあるコーディング方法と感想を紹介します。 Google HTML/CSS Style Guideの日本語翻訳 Google HTML/CSS Style Guideは英語なのでGoogle Chromeで翻訳して確認していたんですが、すでに翻訳してあるサイトがあったのでこちらも参考に両方を見て確認していきました。 Google HTML/CSS Style Guideを翻訳してある記事「Google HTML/CSS Style Guide」を適当に和訳してみたは、かなり助かり参考になりました。 それではGoogle HTML/CSS Style Guideに書いてあるHTMLとCSSのコ
コーディング規約を作ろう
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト！ コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
スタイルリンク - 東京都江戸川区のフリーランス Webデザイナー WordPressエンジニア
WEBサイト制作 WEBサイトの新規作成やサイトリニューアル、部分的な修正、レスポンシブデザインによるスマホ対策、Javascriptで料金計算シミュレーションなどの実装、お問い合わせフォームのプログラム実装(CSVデータ蓄積も可能)など、様々なご要望に対応いたします。 WordPress構築 WordPressを使用することでWordやExcelを使える程度のPCスキルがあればWEBサイトを更新することができるようになります。 WordPressオリジナルのテーマやオリジナルプラグイン、WEBサービス、オウンドメディア、会員制ポータルサイト(Stripe実装)、業務ツールなど、ご要望に応じ開発いたします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
吉本式BEM設計（BEM設計ベース）
Android で閲覧した際にページをピタっと収める viewport 指定