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のコ

簡単に書くよ ビルド（英：build）とは プログラムの元ネタ（ソースコード）をあれやこれやして実際のプログラムを作る作業のこと です。 サクッと一言で説明すると えっちらおっちらと作ったプログラムの元ネタ（ソースコード）から、実際に動くプログラムを作り出す作業 がビルドです。 私は専門外の方に説明するとき、プログラムができるまでの流れを １．人間語でプログラムの元ネタ（ソースコード）を書く ２．ソースコードを人間語から機械語に翻訳する（コンパイル） ３．コンピュータさんが翻訳された指示に従ってお仕事する（実行） と説明します。 ですが、この説明は、厳密には正しくありません。 元ネタから実際のプログラムを作る際には、もう少しいろいろな作業が必要です。 この「もう少しいろいろな作業」も含めて「プログラムの元ネタから実際のプログラムを作る作業」がビルドです。 「コンパイル」（元ネタを人間語から

最近色んなところでBrackets使ってますの声を聞けて嬉しい感じなんですが、Bracketsのアドベントカレンダーも余裕で挫折しているのでまた仕切り直して、せっせと紹介記事書いていきますね。今回は新しく知った拡張機能のなかでコーディング関連のものを紹介します。これまでの紹介したものはいくつかありますので見てみてくださいー。 Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて – WEBCRE8.jp PSDデザインカンプからのコーディングに超便利！Extract for Brackets – WEBCRE8.jp SVGをBracketsで使用・作成・編集するのに便利な拡張機能 – WEBCRE8.jp Brackets CSS Class Code hint 便利過ぎワロタ系のやつです。編集中のHTMLが読み込んでいるCSSのセレクターに書かれているcla

プログラミングが学べる「Codecademy」を実際にやってみた【日本語にも対応】 日本語に一部対応している、プログラミング学習サービス「Codeacademy（コードアカデミー）」を実施にやってみた実践レポートです。JavaScript、PHP、Rubyなどのプログラミング言語が学べます。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 現在アメリカではオンラインで学べるプログラミング学習サービスがすごい勢いで人気を集めています。 今回は

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

レッスン一覧 料金プラン ログイン 2024/06/24 NEW 『Laravel入門 基本機能編』をリリースしました 2024/06/20 NEW 【週刊ドットインストール】 レッスン制作の進捗、HTMLの検証ツール、写真アップロード時の注意点 2024/06/18 NEW 【無料レッスン】 『Emmetで爆速コーディングを修得しよう』をリリースしました 2024/05/07 NEW あなただけの学習ロードマップを作成します 【随時受付中】

Atomエディタを本格的に実務で使い始めて4ヶ月ほど経とうとしています。 当然全て網羅しているわけではなく、既に使いこなしている人にとっては基本的なものばかりですが、自分が使い始めたときに知っていたらもう少しスムーズにAtomに入っていけたかもと思えるショートカットをまとめました。 前提 筆者の環境がWindowsなので、Windows版Atomのショートカットキーになります。 プラグイン等入れずにデフォルトで使用できるショートカットキーのみです。

たとえばメタ（タイトル、キーワード、ディスクリプションや最近だとogp系も）に半角の&が入っているとき、これは実体参照（この場合は&）にするべきなのか？ 私の場合 テキストの場合 &に直す。 そのままだとバリデートすると、エラーが出る。 alt &に直す。 バリデートではエラーがでないが、altは画像をテキストとして扱った場合入っている文章なので実体参照に直してた。 タイトル &に直す。 そのままだとバリデートすると、エラーが出る。 キーワード、ディスクリプション &に直す。 タイトル直してるから、その流れで直す。 検索したところ、&に直す必要があるみたい。 http://www.tagindex.com/kakolog/q2bbs/1601/1887.html 他の人 日本語内なら全角の＆にする 目から鱗！ 日本語で検索するときなら、半角&

先日のエントリで取り上げたWikiTextについて、ざっとまとめておきます。後人の誰かの役に立てば。 概要 WikiTextとは、Javaで書かれたWikiパーサです*1。 Mylyn内部でWikiをパースする部分に使用されているので、知らず知らずのうちに恩恵を受けている人もいるでしょう*2。Eclipse/Mylynとの連携だけでなくWikiText単体でも使用することができますので、各人のJavaアプリケーションにも組み込むことができます。単体で使用する場合には、MylynのダウンロードページからWikiTextのスタンドアローン版を取得できます。 デフォルトでMediaWikiやTracなどのWiki記法と出力形式に対応していますが、（はてなダイアリーなど）対応していないWikiに対しても、自分で拡張してWikiパーサを実装することができます。 対応フォーマット 入力フォーマット フ

Markdown記法とは Markdown記法とは、軽量マークアップ言語のひとつです。 HTMLでマークアップを手打ちしたことがある方ならわかると思うのですが、テキストエディタでタグを打ち込むのは、結構大変ですし、慣れないうちは覚えきれない部分もあります。 ただ、Markdown記法を利用すると、覚えやすいちょっとした書き方を守ってプレーンテキストを書くだけで、HTMLを生成できるようになります。 ですので慣れてしまえば、HTMLを手入力したり、ツールなどでタグ付けなどをするよりは、早く基本的なHTML文書なら作成することができます。 Markdown記法を、ちょっとブラウザから試してみる場合は、以下のツールなどが便利です。

Webノート、というか、Javascriptで作られたwikiのTiddlyWiki5を日本語化してMarkdown入力ができるようにする。 ここでデモが見れる。 Qiita、Gistのような言語特有のコードハイライトはできないっぽい。 TiddlyWiki5のダウンロード http://tiddlywiki.com/ のGetting Startedで、Download EmplyまたはDownload full wikiをクリックしてhtmlを適当な場所に保存する。ファイル名は適当に変えてOK。 FirefoxユーザーはTiddlyFoxプラグインをインストールしておく。 保存したhmtlを開く。Firefoxユーザーは上記のプラグインがインストールされていれば、Tiddlyfox: Do you want to enable TiddlyWiki file saving capabi

WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所

コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

サイトの制作や運営をしてると画面のキャプチャー(スクリーンショット)を取ることがよくあると思います。 しかも、今見えてる範囲だけじゃなくて、上から下まで画面全体のスクロールキャプチャーを取りたいっていう要望も多いですよね。 ChromeやIEだと、画面全体のキャプチャーを取るのにプラグインや拡張機能が必要なんですが、FireFoxは標準で組み込まれていてアドオン不要でキャプチャーが撮れます。 FireFoxで画面全体のキャプチャーの撮り方 FireFoxでキャプチャーを撮りたいページを開いた状態にして、開発ツールを開きます。 開発ツールは、 などで開けます。 開発ツールを開くと下側か右側に開発ツールのウィンドウが開きます。 開発ツールのツールバーのところに、カメラのアイコン(ページ全体のスクリーンショットを撮影します)がありませんか？ これをクリックするだけです。 FireFox開発ツール

みんなのコピーの大橋です。 わたしはいま、激しく怒っています。 ちょうどこんな感じです。 なぜ、わたしが、こんなにも怒っているのか？ その理由は、この記事を読んだ人から「大橋さんって、スパムメールの業者なんですか？」と言われたから。ハッキリ言いましょう。わたしは、スパムメールの業者ではありません。 でも、メールを開封させるスキルは、スパムメールの業者以上です。 この記事では、弊社がこれまでに実践してきたメルマガやステップメールで、開封率の高かった件名を15個お伝えします。この記事を読み終えたあと、あなたはこう思うでしょう。 「やっぱり、大橋さんはスパム業者なんですねo(^▽^)o」 「メール墓場」でがんばるあなたへ 近年、メルマガ広告は「死んだ媒体」と言われるようになりました。 また、ステップメールも、昔に比べるとレスポンスが落ちたと言われています。わたしは、レスポンス広告業界で10年以上

wordpressなどでエクスポートしたSQLファイルのドメインなどを置換する作業は面倒な作業です。 毎回同じ作業を行う場合にはマクロを記述じ実行することで、 効率化を行うとともにミスを防ぐことができるようになります。 はじめに SQLファイルなどの文字列を一括して変換する際に、 置換コマンドを利用して一括変換を行うことはよくあることでしょう。 たった一度の置換作業であれば毎回置換文字列を入力し置換を行っても大した労力にはなりません。 しかし、毎回同じ作業を行う場合や、複数のファイルに同じ変換作業を行う場合に、 その都度、複数のコマンドを打ち込んでいては、置換漏れなどが発生して、 後からリカバリする作業が発生したりする可能性があります。 ミスなく、置換作業を終えるためには、作業をマクロに記述してしまった方が便利です。 置換マクロの記述（記録） 私の場合はいつもsakuraエディタを利用させ

はじめに 画像を切り抜きたいときは、いちいちパスでくり抜くより、抽出機能があればラクチンですよね！ 時間がないときも、抽出フィルタさえあればラックラク♪　【フィルタ】メニューから【抽出】を選んで…、と、、、あれ！CS4まではあったはずの【抽出】がCS5にはなくなっている！ 俺の【抽出】たん、どこいってもうたんや…、、とはなりませんが、CS5にはもっと簡単な抽出のやり方があります。 時間がないとき、そんなに細かく切り抜かなくてもいいとき、でもそれなりにきれいな切り抜きがあったらいいなと言うときに、ぜひ試してみてください！ 用意するもの 切り抜きたい画像 わかりやすく、切り抜きたい画像の下に灰色か何かのベタ地 Photoshop CS5 ↓下にわかりやすく、灰色を引いた状態 やり方 STEP1 まず、ツールパレット（横の細長いメニュー）から、なげなわツールを選択します。 STEP2 なげなわツ