初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
SEOだけで満足できない人のためのmetaタグ情報まとめ (後編)
SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」 このエントリは上記のエントリの続きです。前回のエントリでは触れなかった、metaタグのname属性を持つものについてまとめたいと思います。metaタグの中で一番有名ともいえる、「meta name="keywords"」(キーワード)や「meta name="description"」(概要)もこちらに含まれます。 meta name (name属性)とは メタデータとはそもそも「文章の中身ではなく、HTML文章そのものについてのデータ」を記述するところです。前編のhttp-equivで出てきた「content-type」や「content-language」も「このHTMLの文字コードはUTF-8」だとか「日本語の文章である」と指定して、ユーザーエージェント*1に情報を与えているわけです。当然
タグの略について - develo.org
ふとXHTMLのタグって何の略なんだろう？って思うところがありましてgoogleで検索してみて、自分用に書いておこうっておもって記事にしてみました！ ブロックレベル要素 h1～h6 headings(見出し) p paragraph(段落) ul unordered list(順不同リスト) ol ordered list(順序の有るリスト) li list item(リストアイテム) dl definition list(定義リスト) dt definition term(定義語) dd definition description(定義語の記述) tr table row(テーブルの縦行) th table header(テーブルの見出し) td table data(テーブルデータ) div division(区切り) blockquote block long quotation(
web制作に役立つサイトまとめ - 肉汁が溢れ出ています
引用元：web制作板 545 名前：Name_Not_Found[sage]投稿日：03/10/20 20:13 ID:??? 初心者向け ■はじめてのWEBドキュメント作り http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ■初めてのホームページ講座 http://www.hajimeteno.ne.jp/index.html ■30分間HTML入門 http://kanzaki.com/docs/html/lesson1.html ■ISMT HOME 〜 メモ帳で作る超初心者のＨＰ作成講座 〜 http://ismt.cside.com/ ■趣味のWebデザイン http://deztec.jp/design/index.html HTML/WWW解説 ■好ましいHTML文書を書くための方法と考え方 http://www.asahi-net.
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
![WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
lt,gtは何の略？ - ため日記
しる, なるほど | 18:40 | id:higepon:20050708 もコネタしてますが、"pwd" は "print working directory" だそうです。 HTMLを書くときに使う "" やperlでの比較演算子に使われる "lt", "gt" にも意味があって、それぞれ"less than" と "greater than"の略だそうです。（雑学・コンピュータ関連用語集より）日本語の「大なり小なり」と同じなんですね。 プログラミング言語って難しいけれど、こうして意味を知るとちょっと親しみがもてますね。他にもこんなのがないか、質問してみました。UNIXやperl、HTML、CSSなどのコンピュータ関連の知識で、なるほど！と思わせるためになるマメ知識を教えてください。 （参考：http://d.hatena.ne.jp/kiyohero/20050713/112124
3周年記念セルフエントリーまとめ
Blog 開設 3周年を記念して過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。 早いもので、今月でこの Blog も開設から丸 3年が経過 （2005年2月スタート） しました。 そこで今回は、過去のエントリーの中でアクセス数の多かったものなどを中心にセルフなまとめを作ってみることに。たまには過去のエントリーを見直してみるのも面白いかもしれません。 ちなみに、このエントリーで 446件目のエントリーでした。3年間で 446件っていうのは多くはないと思いますが、平均すると年間で約 148件、大体 2、3日に 1エントリーくらいのペースで書いてることになりますね。チリも積もれば山となる、継続することは大切です。 (X)HTML、CSS 関連 まずは (X)HTML とか CSS 関連のエントリー。このサイトでメインの話題…… と思われている分野です
リンクの設置時に気をつけたい15のポイント | コリス
Wwohn.comのエントリー「The 15 rules of quality hyperlinks」から、リンクの設置時に気をつけたい15のポイントの意訳です。 The 15 rules of quality hyperlinks 「ここをクリック」などではなく、リンク先を明確に表現する。 title属性を使用する。 テキストリンクを青い下線以外にする場合、明確に分かるようにする。 テキストリンクには、シェード効果や明るいグレーを使用しない。 visitedを設定して、訪問済みを明示する。 リンク切れは、なるべく早く修正・削除をする。 PDFのようなダウンロードリンクは、クリックする前に分かるように明示する。 一行に続けて複数のリンクを記述しないで、リストやビュレットを使用して間隔を持たせる。 テキストリンクは、一行まるごとにしないで、なるべく短くする。 リンクを新しいウインドウで開くよ
2007年の「CSSやWeb標準」ベストエントリー100選＋α - Trans
2007年にCSSやWeb標準に関するどんなテクニックや議論があったのかを書き出しておくのも一興かなと思いまとめてみると大変なことになってしまいました。 筆者より一言 CSSな人たちは「懐かしいなー」と振り返ってもらえればいいですし、今年こそCSSやるぞ！と思っている人は参考に、また違う言語の人たちは「へえー」とでも思ってもらえれば。 このリスト自体は、個人的に運営していたCSS Engine in Japanから引っ張ってきたものです。そのため本来なら入れるべきなのに抜け落ちている記事もかなりあります。カテゴリーや順序は適当です。また、2007年と言っておきながら、たまに今年のものとかも入っていることはご愛嬌。その上、ベストエントリーと書いておきながら、良質なエントリーが抜け落ちていることも認めます。 ただ、CSSの議論も一段落しているので、そろそろこの検索も役目を終えたなーと思い、その
WordPressでのサイト運営に役立つ「WordPress HelpSheet」:phpspot開発日誌
WordPress HelpSheet ( PDF 注意 ) WordPressでのサイト運営に役立つ「WordPress HelpSheet」。 WordPress HelpSheet には、基本となるテンプレートファイルのファイル名や、ヘッダー情報として使えるPHPコード、そしてよく使われるPHPコードのスニペット等が掲載されています。 WordPress でサイトを作る際のテンプレート開発・カスタマイズに応用することが出来そうですね。 WordPress でのサイト運営の予定のある方は覚えておいて損はなさそうです。 関連エントリ WordPress関連まとめリスト WordPressのプラグイン集 300＋ 4カラムのクールなWordPressテーマ集２０＋ 3カラムのクールなWordPressテーマ集30＋ 以前に紹介したクールなWordPressのテンプレート集いろいろ 超高品質
Another_HTML-lintへの言及 - 徒委記
Another_HTML-lintへの言及 2007年7月31日 2007年8月1日 2007年8月4日 2007年8月5日 2007年8月6日 2007年8月7日 2007年8月8日 参考資料 取り敢えず作成。 2007年7月31日 lintで100点を取る必要はない : 雑記帳 : der Gegenwart 2007年8月1日 IT戦記 - xmllint で XHTML をバリデーション 2007年8月4日 まじかんと雑記: Another HTML-lint を使うべからず まじかんと雑記: まず lint より validator を使え まじかんと雑記: まず lint より validator を使え その 2 まじかんと雑記: Another HTML-lint について その 4 2007年8月5日 まじかんと雑記: Validator/lint に関して望まれる(べき
「ここ」というリンクについてのリンク集
「ここ」「こちら」「click here」といったリンクの語句はよくない、ということが説明されている文章を、ある日突然探してみたくなったのです。 13.1 各リンク部分は、その行き先が明確にわかるようにする。[優先度2] W3Cのおすすめ 6.1 リンクしている部分の言葉 装置依存性の問題など アンカーの指定の仕方 比較例 リンクのアンカーを意味のある文にする リンクのアンカーとなるテキストは、そのまま読んでも意味が通るように 192.<A> のアンカーとして `ここ` などを使うのは好ましくありません。 Another HTML-lintの結果の解説 アンカーとして `here', `ここ', `これ', `こちら' 等を使うのは良くない形式です! jweblintの警告の説明 アンカーに使ふべきでない文字列 読み上げ式UAでの例など。 #01 HERE症候群 - 2002-01-20(
見出し要素に関する議論 - 徒委記
見出し要素に関する議論 2007年6月30日 2007年7月2日 2007年7月4日 2007年7月5日 2007年7月6日 2007年7月7日 2007年7月8日 2007年7月9日 2007年7月10日 2007年7月11日 2007年7月13日 2007年7月14日 2007年7月15日 2007年7月17日 2007年7月26日 サイト内の各ページで常にh1要素をサイト名とすることについて、等々。 2007年6月30日 CSSでイケてるデザインサイト : 雑記帳 : der Gegenwart Rusicaさん。「イケてる」条件に「トップページ以外のh1要素がサイト名になっていないかどうか」を提示。 die Vernunft - 個人的なイケてるサイト基準 emiさん。「駄目ですか…？」 2007年7月2日 h1は最も重要な見出し - 徒書 北村曉。文書作成者は重要と思うものをh1
入力された文字をいい感じに実体参照に変換してくれる便利ツール『HTML Entity Character Lookup』 | POP*POP
ウェブサイトを作っている人に便利なツールのご紹介。「HTML Entity Character Lookup」ではAjaxを使って記号を実体参照に変換してくれます。 ある程度適当に書いても似たようなコードの一覧を出してくれるのが特徴。 ↑ 「c」と入力するとそれに該当しそうなコードをすべて教えてくれます。 あのコードなんだったかな、という時に便利そうですね。ご利用は以下からどうぞ。 » HTML Entity Character Lookup › Left Logic ちなみに実体参照がらみでよく使っているツールもあわせてご紹介。 蓄々HTML実体参照変換 : akiyan.com ↑ コードを張り付けるとさくっと変換してくれます。 MovableType用EntityRefButtonプラグイン v0.0.5 (エムロジック放課後プロジェクト) ↑ MovableType上でコードを書く
小説のHTML化について――p要素と段落: ミノタウロス見聞録
小説サイト運営支援ツールを公開する【小説HTMLの小人さん】の管理人のブログ。ツール開発記録やβ版の公開、HTMLやCSSのテクニック、小説サイト運営に関係するニュースなど。 たいていのWEB小説書きさんは気にもしていないことだろうけど、日本語の文章をHTMLでマークアップするとき、改行あるいは形式段落をどう表現するかについて議論している人たちもいる。 小説ページをHTML化するツールを作っている身としては、なかなか気になる議論だが、眺めているうちに「論点がずれているんじゃないか」という気持ちになってきた。 この議論は、大まかには以下の二つの主張に分かれる。 改行はbr要素でマークアップし、必要なら意味のまとまり（意味段落）をp要素でマークアップするのがよい。 改行すなわち形式段落をp要素でマークアップし、必要なら意味段落をdiv要素でマークアップするのがよい。br要素は形式段落内の強制改
IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | POP*POP
よくあるリソースではありますが、IE7にも対応したCSSレイアウトのご紹介。SEO的にも配慮されたコードなのだとか。 詳しい使い方は以下のとおり。 また、せっかくなのでこうしたレイアウト系サイトについて最後にちょっとまとめておきました。そちらもあわせてどうぞ。 ↑ まずは横幅から選択。750pxからいってみましょう。 ↑ かなりの数のバリエーションがあります。 ↑ 詳細ページでCSSがダウンロードできます。 なかなか便利ですね。これでサイト製作を大幅にスピードアップできそうです。 ご利用は以下からどうぞ。 » CSS Layouts なお、他にもCSSレイアウト系のリソースはありますね。良い機会なのでまとめておきます。ビジュアル的に比較的見やすいものをピックアップしています。 Layout Gala: a collection of 40 CSS layouts based on the
class属性とid属性に関する議論リンク集 - 徒委記
class属性とid属性に関する議論リンク集 発端 過去の経緯や参考情報 2007年3月18日 2007年3月21日 2007年3月22日 2007年3月23日 2007年3月25日 2007年3月28日 「私はheaderやfooterはidじゃなくてclassだと思うけど、皆さんはどう思います？」 (CSS Nite公式ブログでのレポートより) 発端 CSS Nite Vol.18交流会「HTMLへの回帰」 CSS Nite Vol.18 謝恩会「HTMLへの回帰」の資料公開 過去の経緯や参考情報 CSS Nite Vol.3の企画「木達さんに聞いてみよう」 id属性とclass属性 | Web標準Blog | ミツエーリンクス Tips/WebPage/class と id の違いとは？ - outsider reflex idとclassの違い 2007年3月18日 WEBTECH
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このタグの中ってなんのタグがかけるんだっけ？ - develo.org
http://web.xii.jp/iec/battle/lecture/first