高速で開発者体験も抜群！JavaScriptフレームワークの新星「Svelte」とは何か？
はじめに 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte（スベルト）」についてご紹介します。 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴
無料でウェブを作ってください。Tilda Publishing ウェブサイトビルダーのご紹介
当社はゲームに近いプロセスでウェブサイトを作成できる新たな手法を考案しました。 これで、自分のビジネスに情熱を注ぐ人は誰でもデザイナーになることができます。 ウェブサイト、オンラインストア、ランディングページ。Tilda を使えばどんなサイトでも素早く簡単に作成できます。
今さら聞けない！GitHubの使い方【超初心者向け】
今まで使ったことがない初心者向けに「GitHubの使い方」を解説した記事です。Gitを使う上で知っておきたい、ローカルリポジトリとリモートリポジトリ、コミットとプッシュなども細かく紹介。最後は、よく使うGitのコマンド12もあり。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 開発者にとってなくてはならないサービスとしてGitHubがあります。 エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとっ
なんとなくで書かないで！HTML5を書く時に気にしてみたいタグごとのお約束 - Qiita
はじめに この記事は クラウドワークスアドベントカレンダー2019 16日目の記事です。 こんにちは！本日25回目の誕生日を迎えたアクセシビリティ向上隊長 みーたです。 昨日は同じチームの@yamanokuさんによる「みんなに知ってもらいたいデザインシステムのこと」でした。 文中で紹介されていた「悲劇的なデザイン」は私もオススメします:) 私は今回、普段みなさんがHTMLを書く時に、よく使うタグごとでちょっと気をつけてみてもらいたい！と思う点をまとめてみました。 初学者ではありますが、正しくHTMLを理解してもらいたいって気持ちがあるので、マサカリは怖くない程度に投げていただいて、みんなで知識を共有していきたいです。 👻 真冬の怪談 突然ですがちょっと怖い話を... 先日、とある画面を改修しようと思って、今どんな感じにスタイル当たってるんだろうと本番環境を見てみたんですよ。 カードタイプ
Card Validator | Twitter Developers
Something went wrong, but don’t fret — let’s give it another shot.
ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
注意事項：◆このツールは「＜」「＞」マークを元に、HTMLを見やすく整形してくれる単純なツールです。 ◆不完全なタグが見つかると、対象タグの一覧を表示するプチデバッグ機能を追加しました。 ◆一行の長さは8000バイト以内してください。制限を超えると応答が帰らない場合があります。 ◆当ツールへのご意見、ご要望は "Pika's home"へお願いします。
システムの操作マニュアルを不要にする秘訣
会社のITシステムが使いにくければ、生産性は上がらず、働き方改革など不可能だ。SEは今、操作性に優れたユーザーインタフェース（UI）を備えたシステムの開発スキルが求められている。そのノウハウに迫る。 優れたUIデザインは、利用者が操作する際の負担が少ない。操作マニュアルを参照しなくても、すぐに使えるUIが理想だ。前回紹介したUIデザインのポイント（1）に続いて、残り3つを見てみよう。 UIデザインのポイント（2） 説明不要のシンプルなデザインを目指す どのようなUIデザインが優れたデザインなのか。こう迷ったらシンプルを目指すのがお勧めだ。 「説明が不要で、見るだけですぐに操作できる画面が良いUIだ」とアステリアの北原執行役員は話す。ITエンジニアがやりがちな、様々な機能を詰め込んだ画面は、「学習コストがかかるうえに、誤操作を誘発しやすい」（北原執行役員）。操作マニュアルを必要としないような
【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法 ｜ Tips Note by TAM
2016.11.18 【WordPress】サーバ負荷が軽い「Simple GA Ranking」プラグインで人気記事ランキングを表示する方法 人気記事ランキングを表示させるプラグインは「WordPress Popular Post」「WP-PostViews」など色々あります。 今回は、Google Analyticsのデータを元にランキングを表示する「Simple GA Ranking」の使用方法をご紹介します。 ◆目次 プラグインのインストール OAuth2認証とプラグインの設定 サイトに表示する フックの設定 プラグインのインストール 管理画面の「プラグイン」＞「新規追加」より「Simple GA Ranking」で検索し、インストールと有効化を行ってください。 OAuth2認証とプラグインの設定 管理画面の上部に「Simple GA Ranking is available OA
【apache】httpd.confの文法チェックを行う
はじめに apacheを起動させる際、設定ファイルである「httpd.conf」に誤った記述があると、エラーが発生してapacheを起動することができません。 このページでは、apacheを起動させる前に、「httpd.conf」内の記述が正しいかをチェックする方法を説明します。 「httpd.conf」の文法チェック方法 「httpd.conf」の文法チェックは、「コマンドラインからapacheを起動／停止／再起動する」で説明した「apachectl」を利用して行います。 尚、apachectlはOSやディストリビューションによっては「apache2ctl」という名前になっていますので、apachectlが見つからない場合は、「apache2ctl」で試してみてください。
エー イレブン ワイ［WebA11y.jp］
Accessibility is the Web. 「エー イレブン ワイ」は、Webアクセシビリティの情報提供Webサイト。 ユーザーフレンドリーでみんなが利用できるWebコンテンツづくりをサポートします。
iPhone 6で改めて考える画面解像度とUI | dotproof
新しいiPhoneの6と6 Plusが発表になりました。従来モデルよりそれぞれ少しづつ大きくなっていますが、日本ではまた人気が出るのでしょうね。特にiPhone 6 Plusの方は5.5インチと発表されていますので、前のモデルよりかなり画面が大きくなっています。 iPhoneもiPhone 3から4になった時に画面の解像度が2倍になってretinaディスプレイと呼ばれました。解像度が2倍になったので従来のグラフィック（ビットマップ）は2倍の大きさのものを用意する必要になり、@2xグラフィックと呼ばれるようになりました。今度のiPhone 6でも画面の解像度（ppi）は同じなのでやはり@2xのグラフィックで対応します。 なんで画面のサイズは4インチから4.7インチに拡大されたのに、UIグラフィックのサイズは同じでいいのかとお思いの方に向けて、改めて画面解像度とピクセルグラフィックの関係を説明
ベーシック認証のページ、htaccessサンプルのダウンロード
ベーシック認証は個別のファイルに制限をかけるのではなく、ディレクトリに制限をかけるようになっています。 例えば、下記のようなディレクトリ構造の場合、赤字部分の（「.htaccess」が設置されたディレクトリ）全てのディレクトリやファイルにパスワード制限がかかるようになります。 [home] ┣index.htm ┣[data1]←「.htaccess」が設置されたディレクトリ内の全てのディレクトリとファイルに制限がかかります。 ┃ ┣.htaccess ┃ ┣.htpasswd ┃ ┣[data2] ┃ ┃ ┗data.dat ┃ ┗menu.htm ┗[data3] ┗[data4]
403エラー（Forbidden）が出る場合の原因と対処方法
WordPressでサイトを構築している場合や、WEBツールなどをサーバーに設置した時などによく見かける403エラーForbiddenの原因はいろいろあるのですが、その意味は要するに、 あなたがアクセスしたページはインターネット上に存在はするが閲覧することが許可されていません。 という意味です。 403エラーForbiddenのよくある原因 そして、こうなってしまう主な原因は主に以下の6つです。 ドメインの設定(DNS設定)が不適切である .htaccessの設定が不適切である WAFの設定が不適切である パーミッション(権限・属性)の設定が不適切である 一時的にアクセスが増え、サーバー側で制限をかけている レンタルサーバー自体の障害やメンテナンス ありがちな403エラーの原因 この中でもよくあるのが、 ドメインの設定(DNS設定)が不適切である .htaccessの設定が不適切である W
Google Fontsの日本語フォント「Noto Fonts」の使い方
そしてもちろん我らが日本語も用意されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。 日本語は優遇されているのか7つも異なるウエイト（太さ）が用意されています。 ちなみに名前にあるCJKとはChina、Japanese、Koreaの3つです。1バイト言語の256文字に収まらない、2バイト言語をまとめてCJKとしているようです。（2バイト文字は65536種類に対応している） 中国語は「Noto Sans CJK SC」、韓国語は「Noto Sans CJK KR」と、それぞれ別のセットで、相互に対応していません。統一感のあるセットになっているとのことですが、それぞれの言語が混在する状況はあまりなさそうです。 2バイト文字は数千もの文字を作成する必要があるため、Adobeだけではなく各書体メーカーの協力しています。それぞれ日本語はイワタ、中国語はChang
Windowsで游ゴシックが汚いのは、結局誰が悪いのか？ | Cherry Pie Web
（追記：本記事は、游ゴシックをWindowsで綺麗に表示するためのベストプラクティスを示すことを目的にしたものではありません。ご了承ください） （追記：Macの代替ウェイトの表示は仕様に沿っているというご指摘を受けましたので、すこし表現を変えました） 先日投稿した「Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い？」には、思ったよりも大きな反響をいただき、ありがとうございました。 私の記事に対して検証をしてくださったりご指摘をいただいたりといったリアクションも多く、大変ありがたく思っています。 特に参考になったのは、下記の2つの記事です。 ありがとうございます。 Windows で游ゴシックが細字になってしまう件は誰が悪いのかについて CSS 仕様から考えてみる | WWW WATCHRe : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い
ワードプレス - 星海の街へようこそ
どうもです。ウィル禁です。 最近、ワードプレスをいじってみてサイト作ろうと勉強中でして、チョコっと職場とかでも教えていただけて、今日自宅macでのローカル環境を設定できました。 正直言うと、素人が手を出しても大丈夫なのか・・・ MYSQLとか、なんやそれ？php知らん。みたいな状況でもなんとかネット上の情報頼りにワードプレスを起動できたことに非常に感動しております。 macなのでMAMPとかいうxammpの代わりのソフト（？）という変則技でしたけど、無事出来て良かったです・・！（ネット上に出てたやり方のブラウザのphpのテキストがテスト段階では全く表示されなかったけど） でも俺たちの戦いはこれからだ。と言わんばかりに、テーマを選択したはいいものの、画像の差し替えや色々カスタムとかがま〜〜〜〜ったくわかりません。タンブラーと似たところはなんとかわかる程度です。 これから色々勉強していきます〜
HTML5/HTML5の基本/セクション - TAG index
HTML5では、セクションを入れ子にすることで文書の階層構造を表せるようになりました。 このページでは、セクションがどのように生成されるのかを簡単に説明しています。 h1-h6要素を配置すると、そこに暗黙的なセクションが生成されることになります。 次の例では、bodyセクションの中にランク2のセクションを（暗黙的に）配置しています。（ランク1はbodyセクションの見出しとなります） <body> <h1>ランク1</h1> <h2>ランク2</h2> </body> 直前の見出しよりも低いランクを配置した場合は、子セクションが生成されます。次の例では、ランク2のセクション内にランク3のセクションが配置されていることになります。 <h2>ランク2</h2> <h3>ランク3</h3> 直前の見出しと同じランクを配置した場合は、新規のセクションが生成されます。次の例では、同じ階層に2つのセクシ
カラーチャート/配色パターン - TAG index
リスト内のマークについて B … 全体の背景色 H … ヘッダの背景色 M … メニューバーの背景色 L … 左サイドバーの背景色 C … 中央カラムの背景色 R … 右サイドバーの背景色 F … フッタの背景色 A … アクセント色 シンプルな配色 クセの少ない、シンプルですっきりとした配色パターン。 B H M L C R F A 配色パターン081 B H M L C R F A 配色パターン076 B H M L C R F A 配色パターン061 B H M L C R F A 配色パターン057 B H M L C R F A 配色パターン054 B H M L C R F A 配色パターン053 B H M L C R F A 配色パターン049 B H M L C R F A 配色パターン038 B H M L C R F A 配色パターン036 B H M L C R F
jQueryでニュースティッカーをシンプルに実装する方法｜BLACKFLAG
Webサイト上での限られたスペースにお知らせなどの 複数にわたる情報を表示させたい際に便利なニュースティッカー。 jQueryプラグインでもいろいろな形状のニュースティッカー用プラグインがありますが シンプル（ベーシック）な動きのニュースティッカーを 極力シンプルなスクリプト構成で実装することが出来ないか試してみたので紹介してみます。 ニュースティッカーの切り替え動作については ——————————————————– ・フェード切り替え ・画面下からスライドイン ・画面右からスライドイン ——————————————————– の3パターン構成にしてみます。 まずフェード切り替えパターンのサンプルから。 HTML構成は以下の様になります。 ◆HTML <div class="ticker" rel="fade"> <ul> <li><a href="#1">【News1】このテキストはNe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
postviews代替プラグインGoogle Analytics Dashboard for WPの設定方法と注意点｜MAISTYLECREATE