サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という 言葉を全く聴いたことがない方は少ないのではないでしょか。 すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しか し、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるで しょうか?この記事では、それを試みていきたいと思います。 デジタル部品の流通革命 # ソフトウェア部品の流通に今、大きな変化が起きてきています。 数年前のオープンソース環境を覚えているでしょうか?レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことな るバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送る のも面倒でした。 そんなオープンソースを取り巻く環境が、git や GitH
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ(特にIE7・IE8など)によっては動きや見栄えが説明と異なる場合があ
今回はjQueryを使って、「問い合わせフォーム」にバリデーション(検証)機能を付ける方法を解説します。入力漏れや入力ミスがないか、サーバーへ送信する前に、クライアント側であらかじめ簡易的な検証を済ませることで、フォームのユーザビリティを高められます。今回のサンプルでは特に、入力漏れやミスのあった項目を分かりやすくユーザーに示すように工夫しています。 バリデーションルールをclass属性で設定 「問い合わせフォーム」のサンプルとして、以下のようなWebページを作成します。バリデーション機能としては、必須項目の「お名前」「性別」「どこでこのサイトを知りましたか?」「お問い合わせ内容」が入力されているか、「郵便番号」が数値で入力されているか、「メールアドレス」がメールアドレスの書式になっているか、「メールアドレス」と「メールアドレス(確認)」に入力されたテキストが同じか――をチェックします。
外部サイトの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:"の部分を省
ふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。 実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない!」的な迷える子羊達もちらほら。 そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。 だいじょーぶ、やりゃーできる! webサービスを作るための技術と知識 技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。 その中でどこかに自分の強みが持てると尚良しですが、手始めであれ
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
スキルチェックの目次へ HTMLおよびスタイルシート(CSS)を利用したWebページ制作の,簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは,「Webページをコーディングして作る人」全般に当てはまる。 レベルは,0から4までの5段階。 (0) 非エンジニア (1) 初学者(入門書を学習してゆく段階) (2) ノーマル(基礎的な知識があり,ある程度の画面を作れるようになった段階) (3) 中級者(Webアプリの開発プロジェクトで1人月としてカウントできる水準) (4) 上級者(メインPG/デザイナとして,Web UIの主担当を任せられる水準) Webアプリのプロジェクト開始時に作業振り分けをするにあたって,新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお,システム開発上のスキルをチェックする事が主眼なので,アーティスト(
5th February 2011 81tYr4Or · HTML5 · Comments Off on LimeJS – HTML5 Game Framework for Web & iOS LimeJS – HTML5 Game Framework for Web & iOS LimeJS is a JavaScript game framwork that allows any developer to create HTML5 based games in no time. Games created with LimeJS framework do not require any browser plug-ins or any additional software installation to run – just a modern web browser is needed
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く