タグクラウドの簡単なCSSでの作り方 はじめてのブログデザイン
CSS でタグクラウド作りました。 既に FC2ブログにはユーザータグを簡単にタグクラウドに変身させるプラグインがあったのですが、ソースを表示させた時に JavaScript が HTML 内にガーーーっと書かれているのが、なんとなく気になったので CSS だけで作れないかな？なんて思いから生まれたタグクラウドです。 CSS だけで作ったので機能はシンプル（お粗末）ですが、HTML には最低限しかソースを増やさずにタグクラウドを設置できますよ。 つまり SEO 的に多少メリットがある・・・のかな？ FC2ブログを使用中の方、もし宜しかったら「タグクラウドの簡単な CSS での作り方」でシンプルなタグクラウド作ってみませんか？ ※ブログの記事数（タグの使用回数）が多い方は、この先を読む前に何が書かれていても怒らないと約束できる方だけどうぞ。 それではタグクラウドの作り方です。 まずは FC2
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
floatで並べたlistのセンターリング - LogicalCube
最近勉強用に作成してあったHPをしっかりと作り直しています。Strictなページを目指して、構造を意識して作っているのですがこれがまた難しい。 今日苦戦したのはメニューバーの作成。何に苦戦したかというと・・・ズレ。listで表示しているため[text-align:center]が言うこと聞いてくれません。うまくいかずでチャレンジしましたが、こちらもキレイにならず。。。結局google先生に頼りつつ、以下のように指定したらしっかり中央に表示できました。 ■Html■ TOP サイト概要 実験室 創作物 リンク 問い合わせ ■CSS■ .navi { position:relative; overflow:hidden; } ul.menu { list-style-type:none; position:relative; /*センタリング処理*/ float:left; left:50%;
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
印刷時に特定の位置で改ページさせる - スタイルシート
サンプルを別ウィンドウで開いて、ブラウザの印刷プレビューを見てください。 ２ページにわたって表示されていたら正常に動作しています。 スタイルシート・サンプル 緑の文字が変更箇所で、赤い文字が対応するスタイルシートです。 "/* */"内はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 また、その他の指定方法はメニューの「基本・リファレンス」を参考にして下さい。 → ページ全体に適用する場合（サンプルのためタグごとに効果を変えています。参照） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .break { page-break-before: always; } --> </STYLE> </HEAD> <BODY> <DIV> サンプルサン
nlog(n): 印刷用ページを作るには
MovableType のウェブログで、個別記事の印刷用ページを作ることを考える。印刷用ページには、記事の日付や内容を表示し、それ以外のサイドバーやメニューなどは表示ないようにする。#BLOG: MTで印刷用ページを作成するには？ には、メディアタイプを指定することでスタイルシートの切り替えを行う方法が紹介されている。これを応用して、プレビュー画面もブラウザで表示できるようにする。 やりたいことのアイデアは次の通り。このアイデアを具体化して最終的なコーディングまで持っていく。実装は JavaScript を使用することになる。 通常表示と印刷表示のページは同じ HTML 文書を使いたい 印刷表示は URL の最後に ?print をつけて区別したい 印刷表示は、通常表示の一部をスタイルシートで非表示にすることで行いたい 印刷表示の非表示用スタイルシートは、追加で読み込むようにしたい 通常表
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの 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
CSS の書き方についてのメモ | Unformed Building
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
Liveweave HTMLエディター
Initializing... Liveweave expand_more home Home data_object CSS Explorer arrow_outward Palette Color Explorer arrow_outward Polyline Graphics Editor arrow_outward outbox_alt Generative AI arrow_outward build Tools expand_more restart_alt Load base template post_add Generate Lorem ipsum... code Format HTML code_blocks Format CSS data_object Format JavaScript library_add Library expand_more AAlgolia
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。
今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ
HTML5+CSS3で作った無料ブログ用テンプレート【SimpleBlack】
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？ デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー？」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by：fweez まずはじめに とりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大
CSSの記述が3倍速くなる「LESS」の使い方 (1/2)
2012年02月09日 13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編) 2011-01-02 いつも通りデザイン系のサイトを見てると、 "Fresh Examples of Web Design and Interfaces" という記事を見つけました。 綺麗だけど、コーディングが難しそうなデザイン。コーダーにとってドSなデザインです。 そしてtwitterでこんなことをつぶやいてみました。 そしたら、"ぜひ"いう声があったので、ノリでやってみました。 実際にやってみるにあたり。 先ほどのサイトからデザインを選ぶことになったのですが、著作権的に問題があったので、先ほどのサイトからインスパイヤーしたデザインを自分で作ることにしました。 こんなんにした。 コーディングする前に コーディングの方法は様々あります。 自分の中で以下のようなルールを設けました。 ブラウザの対応はIE6-8, 最新モダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
float:center;というものは無いですよね？ - センターにもってくる方法はありますか？ＤＩＶの中のＤＩＶをセンターにもってきた... - Yahoo!知恵袋
Loading...
Movabletype 5 のCSSが反映されない！？ - SIDE_FLIP blog