divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。

目次 6回に渡る短期連載記事です。明日以降の記事もこちらでご紹介しておきます。 【CSS】floatを使わずtable-cellを使って横並びにする方法　←今回はこれ 【CSS】table-cellを使って関連記事の表示で良く使うリストスタイルのデザインを作る方法 【CSS】table-cellを使って要素を均等に配置する方法 【CSS】table-cellで中央にロゴ・両脇にボタンというデザインを作る方法 【CSS】table-cellでサムネイル画像＋テキスト＋ボタンのデザインをキレイに見せる方法 【CSS】table-cellを使って関連記事をタイル状にレイアウトする方法 番外編ですが、table-cellを使う上で重要なテクニックを追記します。 table-cellを使って横並びにするメリット 要素を横並びにしたいとき、floatを使ったり、display: inline-bloc

春はブログカスタマイズの季節！ みなさんこんにちは。id:kyokucho1989です。ついに春が来ましたね。春と言えばブログカスタマイズの春！ 現時点で挙げられる限りのカスタマイズを紹介します。 おすすめしたいテーマ Epic - テーマ ストア - はてなブログ Nishikino - テーマ ストア - はてなブログ Mistilteinn - テーマ ストア - はてなブログ まずはブログテーマ。数ある中から三つを選びました。Epicは多くの人が使っていますね。 記事下 関連記事 ソーシャルパーツを強化！ Zenbackを簡単に設置できるようにしました - はてなブログ開発ブログ 【B】10分ではてなブログに「他にこんな記事も読まれています」を表示する簡単な方法！の巻 - HSKぐうたらジャーナル はてなブログ魔改造まとめ～トラックバック・あわせて読みたい・はてブ→ツイート数変換.

＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう

では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ

<div class="container-fluid"> <div class="row-fluid"> <div class="span4"> Span4の中身 </div> <div class="span8"> Span8の中身 </div> </div> </div> Preタグで囲むコード エンジニアの皆さんなら、ブログにコードを書きたいですよね。 Twitter Bootstrapでも、かっこ良くコードを見せる手法を提供しています。 ・codeタグで囲む 赤くなります。 ・preタグで囲む 囲み枠がつき、灰色になります。 ・Preタグ+Google Prettifyを使う preタグのclassに、prettyprint linenums を入れましょう。 これが超かっこいい！！コードを見せるならこれがよさそうですね！ さて、かっこいいGoogle Prettifyですが、こ

今回は多くのブロガーがネタを考える時、探すとき、発見するときに使う視点と、それを記事にするときに利用する妙技をご紹介。最初6個くらいかなと思ってスタートしたら27個とかになってしまい、勝手に命名していますがご愛嬌でお願いします。 ネタを作る方法が良く分からない場合や、ネタが無い場合。そんなときに思い出してもらえればと思います。 １）串刺し バラバラになった記事を一つにまとめるキュレーション。 それぞれがバラバラの時は意味をなさないが、まとまると一つの価値が生まれる。 逆にそれぞれに価値があった場合でもきちんと整備する事で昔の情報に価値をつけることが出来る。また、全く異なったジャンルのモノでも、「人生がつらいときに見るべき記事」といった方法で一つの考えや感情にぶつける事で同じく価値が生まれる。 ２）中刺し 別々の記事の中で、同様の話題について触れられている事をカウントしたり、測定したり、まと

サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste

webcre8はHTML5を勉強中です(APIだとかCanvasだとかはまだです)。当ブログWEBCRE8.jpもHTML5を用いた自作テーマで作成されています。 皆さんもコーディングしていて「これはどう書くのがベストなんだ？」「これであってるのか？」と迷う事ってよくありますよね。 HTML5でコーディングしていて最近ホントにこれでいいのか？と迷っていたのはsectionと見出しについて。コーディングレベルのHTML5でよく取り沙汰されるアウトラインの話題ですね。 これについて何人かのweb制作者、特に@HissyNCさんと@kojika17さんと話をしてみたことも含めて、HTML5のアウトラインについて今までのwebcre8と同じように「…つまりどういうことだってばよ？」と混乱している人の為にわかりやすく整理してみようかなーと思います。 厳密な解説はこの記事を読まずとももっと信頼できる文

最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。 「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。 いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。 今回は各種

そもそもSEOツールで何を調べるの？ ツールの紹介の前に「そもそもSEOツールで何を調べるのか」を少し説明したいと思います。 SEOツールは５つの目的で使い分けます。 自分のサイト分析 ライバルサイトの分析 検索順位のチェック キーワード選定 ブログの改善方法 自分のサイト分析 SEO対策をする最初のステップは、自分のサイトの現状を知ることです。 自分のサイト分析をするには、SEOツールを使って次の8つの情報を入手します。 訪問者数 ユニークの訪問者数 PV数 平均滞在時間 直帰率 離脱率 アクセス数が多い時間帯 コンバージョン率 特に注目したいのは、PV数・平均滞在時間・直帰率・離脱率・コンバージョン率です。 PV数が多くても、直帰率や離脱率が高い場合は、読者を引きつけることができていません。 1人あたりのPV数・平均滞在時間が大きくなればなるほど、より多くの記事が読まれ、よりコンバージ

HTML5は難しくない?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5＝難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分