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="#">メ

新年度です！ 新入学、新入社を迎えるみなさん、おめでとうございます。 エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか？ カッコよくって統一的なデザインがほしい！でもデザインセンスないし…実は私もそうでした。 ですが、2月にメジャーバージョンアップしたTwitter Bootstrapを使うと、簡単にカッコいいサイトが作れます！ Twitter Bootstrapとはなにか Twitter Bootstrap CSSのフレームワークです。 Web上に使ってみた！スゲー！等、たくさんのドキュメントが存在していますが、中には2月以前のバージョン(v1.4)について言及しているものもありますので、2系を使う方はバージョンの違いに気をつけて下さい（クラス名など結構ガラっと変わっています）。 今回ご説明しているのは、Twitter Bootstrap 2に

今回は多くのブロガーがネタを考える時、探すとき、発見するときに使う視点と、それを記事にするときに利用する妙技をご紹介。最初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ツールの中から実際に使ってみて役に立ったサービスを厳選してまとめてみました！ 僕もアフィリエイト収益は月300万円を越えているので、アフィリエイターの人は特に使った方がいいですよー！ そもそもSEOツールで何を調べるの？ ツールの紹介の前に「そもそもSEOツールで何を調べるのか」を少し説明したいと思います。 SEOツールは５つの目的で使い分けます。 自分のサイト分析 ライバルサイトの分析 検索順位のチェック キーワード選定 ブログの改善方法 自分のサイト分析 SEO対策をする最初のステップは、自分のサイトの現状を知ることです。 自分のサイト分析をするには、SEOツールを使って次の8つの情報を入手します。 訪問者数 ユニークの訪問者数 PV数 平

Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp