作成:2013/07/22 更新:2014/11/01Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「0」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。エンジニア速報はTwitter の@commteで配信しています。 もくじ

注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。 注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。HTMLコード <ul> <li>※ああああああああああああああああああああああああああああああああああああ</li> <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li> <li>※うううううううううううううううううううううううううううううううううううううううう</li> </ul>CSSコード ul { list-style: none; width: 250px; font-size: 0.8em; lin
いつもgooブログをご利用いただきありがとうございます。 大変お待たせいたしました! 先日もお伝えしたとおり、本日ブログ記事面の画像表示サイズを変更いたしました。 ■目的 ブログの見やすさ向上のため (2012年3月9日に行った画像アップロード仕様変更により大きいサイズの画像がよりアップロードしやすくなったことに伴う仕様変更です) ■対象 カスタムレイアウトテンプレートを選択している全ブログ(PCのみ) ※テンプレートページの、テンプレート名の後に「」アイコンがあるものがカスタムレイアウトテンプレートです。 ※携帯、スマートフォンに変更はございません。 【変更前】 ブログ記事に、記事の表示幅に収まらないサイズの画像を貼った場合、 スクロールバーが出るか、画像が途中で切れていました。 【変更後】 記事の表示幅に合わせて、画像の表示サイズが自動調整されるようになります。 ◆注意事項◆ ※1 画

いつもgooブログをご利用いただきありがとうございます。 7月30日(月)にPC版ブログ記事面の表示を変更いたします。 なお、変更内容は7月11日~13日の変更時にいただいたユーザー様からのご意見を参考に改良を加えております。 ■目的 ブラウザによる表示の違いを少なくし、見やすさを向上するため ■対象 カスタムレイアウトテンプレートを選択している全ブログ(PCのみ) ※テンプレートページの、テンプレート名の後に「」アイコンがあるものがカスタムレイアウトテンプレートです。 ※携帯、スマートフォンに変更はございません。 ■変更箇所 対象テンプレートの行間、段落高さ等のスタイルシートによる調整 ▼フォントサイズの調整 ブラウザの初期設定により表示されるフォントの大きさに違いがありましたがそちらを解消します。 対象:コメント入力欄 ▼余白の調整 ブラウザの初期設定により表示されるタグの余白の設定に

本日、はてなダイアリーにFacebook「いいね!」ボタンが設置できるようになりました。はてなダイアリーに「いいね!」ボタンを設置するには、設定画面の記事の設定から、「Facebook『いいね!』ボタンを表示」にチェックを入れて設定を保存します。設定を保存すると、各記事の本文の下に「いいね!」ボタンが表示されるようになります。 どうぞご利用ください。 記事共有ボタンまわりのデザイン変更について 今回の機能追加により、はてなダイアリーの記事本文の下に表示する記事共有ボタンは、はてなブックマークボタン、ツイートボタン、「いいね!」ボタンの3種類になりました。あわせて少しデザインを変更しています。ツイートボタンは公式のツイートボタンに変更しました。はてなブックマークボタン、ツイートボタンは表示位置を変更させていただきました。記事表示ボタンのデザインは各テーマのデザインに応じて最適化してあります

この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Like!ボタンが思いのほか日本でも良く 見かけるようになって、Facebookも 多少は普及し始めたかな?という印象 なので、Facebookの機能の一つで、 欧米でブランディング等にも使われて いるファンページにオリジナリティある デザインのコンテンツを加える方法を ご紹介します。 [note]Facebook仕様変更により、FBMLは廃止され、Facebookページ(旧ファンページ)はHTMLやjsで作成出来るようになりました。この情報は今後役に立ちません。 新しく書きましたのでこちらをご参照ください[/note] 日本でもちょこちょこFacebookの利用者も増え始めてる気がします。そんなFacebookの機能の一つでもあるファンページ。そのままだと若干素っ
スタイルシートの技 このページでは実用的なスタイルシートによるデザイン・レイアウトなどをメインに扱っております。 スタイルシートをサブで使うかメインとするかは賛否両論あります。 また、世の中にスタイルシート解説サイトは多数あると思いますが、 スタイルシートの持つ意味を誤解しているサイトが少なからずあるのと、 リファレンスのような書き方ではデザインへの応用が効かないのでは? という事を考えて、すぐに利用できる実用的な形式で参考になればと思って作成しました。 スタイルシートを勉強すると、当サイトの一番下にある「design」のように、Javascriptと併用したデザイン切り替えページなどを製作する事ができるようになり、表現の幅が広がります! 自分のスタイルシートの知識を簡単にテストできる問題を作ってみましたので、どうぞ。 Introduction - 基礎・導入編
とりあえず引っ越し作業は終わった。オートで簡単かと思っていたら ・内部リンクが更新されずblog.goo.ne.jp/oui_monsieur/e/○○○○○○○のまま ・tableタグ内の画像は変換されない上に参照先もgooblog のまま といったことがあって修正に手こずった。 monsieur.hatenablog.jp それはともかく長年お世話になったgooblog 時代をまとめておこう。 ◆ブログ開設から7733日(21年と63日) 初代 二代目 タイトル むっしゅの戯言 オープンメモ帳 期間 2004.7.30~2006.9.29 2007.1.18~2025.9.30 記事数 582件 146件 ◆トータル閲覧数:1150615PV/トータル訪問数:668674UU ◆最高アクセスランキング:9位(4846ip/2007.2.22)本日よりHatenaBlog

pタグやdivタグのclass要素を指定できるのでHTMLでそのまま記述する。 いつくかはてなダイアリーでの使用可能なはてな記法は無効になっており、例えばキーワードリンク無効記法が使えないためフォントカラーが キーワードリンクの黒に潰されちゃうかんじ。 以下サンプル。アルファベットはクラス名(自動アンカーついていててコピペしにくい。ソースみたほうがいいかも)。 アイコンicon-arrow :: 矢印 icon-tag :: タグ icon-folder :: フォルダ icon-keyword :: キーワード icon-linlink :: インリンク icon-page :: ページ icon-user :: ユーザー icon-download :: ダウンロード out :: アウトフォントhatena-asin-detail-title :: 太字 synStatement

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し(hタグ)のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7pxsolid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7pxsolid #ccc; border-bottom:1pxsolid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。
There is no reason to have to ask before making a link to another site. mixiのデザインが 2008.07.07リニューアルした。 mixi運営事務局です。本日、トップページ(home.pl)のリニューアルをおこないましたのでお知らせいたします。 今回のリニューアルは、ユーザーの皆さまが mixi 内で円滑にコミュニケーションができるよう、分かりやすく簡単に使える操作画面になるように改善をおこないました。 [mixi] 新機能リリース・障害のご報告 かなり弄ってあったのだが、おかげでガタガタになってしまった。 独自CSSをやめればいいわけだが、いまさら巨大TOP画像や広告や不必要な3カラム目は見たくない。 ◆以前のスタイル ⇒ mixi #globalNavigation - オープンメモ帳 ◆2008.07.07

【「水と空気だけで発電し続けます」,ジェネパックスが新型燃料電池システムを披露 - グリーン・カー -Tech-On!】 【ウォーターエネルギーシステム、水発電】 【今度は無断スタイルシートOff禁止ですってよ - 妄想科學日報】 【無断スタイルシートOff禁止って言われた人が経緯をまとめるよ! - 最終防衛ライン2】 「日経Tech-On!」は、無料登録制の技術情報サイトらしいです。で、簡単に言うと、鬱陶しい制作者スタイルシートが用意されていまして、ログインしないと、記事本文が読み辛い。そこで、そのスタイルシートを利用せずに、UA デフォルトのスタイルシート、または、ユーザスタイルシートなどを利用すると、読みやすいという話です。 で、制作者スタイルシートを利用しないで、リソースを閲覧した場合、何か問題があるのかどうか、という話。 これを「無断リンク禁止」と同列に扱うのは疑問 / たまた
今度は無断スタイルシートOff禁止ですってよ その場でスタイルシート切ればいいじゃんと言ったら予想の斜め上を行く反応された本人がまとめるよ。 ウォーターエネルギーシステム、水発電 ジェネパックスの水発電は、発表当初こそ「水を酸素と水素に分解し、水素で発電。つまり水だけで発電できるクリンエネギー」等と発表してました。しかし、蓋を開けてみれば金属あるいは水素化金属と水を反応させて水素を発生させてるだけでした。この場合、水酸化物が出るし、そもそも金属が消費されるし、金属の精製にはエネルギーを大量に使うしで、水だけで発電する訳でも、全然クリーンでもない代物でした。 さて、ウォーターエネルギーシステム、水発電 のコメント欄さっそうと現れた、アンチ目的の「でんすけ」氏。 のっけから 科学リテラシが最も高いと言われる掲示板と聞いてやってきましたが,率直に言ってがっかりしました。 105. でんすけ —
kikulogに乱入してきた「でんすけ」氏。アンチが目的、言動はその手段という本末転倒なスタンスでグダグダの議論を展開してくれたわけだが、その中で目を引いたのが「スタイルシートをOFFにするのはインモラル」という主張であった。 無論何もないところからこんなトンデモ発言が出る筈もなく、これは件の記事を掲載した日経Tech-On!の鬱陶しい会員登録要求が「スタイルシートOffにすれば消えますよ」という話から「それは営業妨害だ→そんなことを公開するなんて社会人失格」(意訳)てな流れに。 まあこれが「会員のみ公開のコンテンツを勝手に公開した/ログインパスワード公開した」みたいな話なら確かにインモラルと言える。しかし日経のそれは単に登録を促す半透明のレイヤを被せているだけであり、読めないようにしてあるわけではない。公開されたデータを読み易いように整える方法であって、決して不正アクセスの方法を教示して
技術系の人の中には、より正しいHTMLで書く事を目標としている人がいて、確かにその方が読みやすい文章のことが多いと感じるのだけど。 メタボなHTML | オトコのキモチ2 align="center"というのや,<td width="200" bgcolor="#CCFFFF">というのや,見た目を整えるための属性。 <br> <br> <br> <br> なんてところもあるな。 はっきり言って,「メタボ」ですよ。 「見た目はCSSで整える」というのは、読み手にとって好みのデザインで読むことができるので、考え方としては理解できる。 書かれたテキストの内容だけが正確に伝わればいい文章、たとえば何かに対する意見文だとか説明文の場合は、贅肉をそぎ落としたHTML のほうが読みやすい。 だけど創作文の場合は、そうはいかないのではないか、と思った。 僕が不勉強なだけなのかもしれないけれど、「贅肉をそ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く