はてなブログのidとclassのツリーと図解を作ってみた - cBlog
更新：2018-05-07 カスタマイズやテーマ作成が捗るよう、はてなブログのid、classをツリーと図に表してみました。自分用ですが、せっかくなので公開します。 取り上げるid、classの選定や画面上への表示には、以下で紹介されているサンプルテーマ「Boilerplate」を利用しています。 help.hatenablog.com ツリー トップページ、記事ページなど #2018/05/07 <body>付与クラスをより詳しく。ツリーに公式関連記事等追加。 xxxがHTMLタグ、#xxxがCSSのid、.xxxがCSSのクラスです。 html ┣head ┗body ┣div#globalheader-container ┣div#container ┃ ┗div#container-inner ┃ ┣header#blog-title ┃ ┃ ┗div#blog-title
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
コーディングガイド by @mdo
HTMLシンタックス インデントには半角スペース2個分のソフトタブを使用すること。これが全ての環境で全く同じように見せる唯一の方法。 ネストされた要素はかならず1段階だけインデント(半角スペース2個)すること。 いつもダブルクォートを使うこと。属性値に対してシングルクォートを使わないこと。 閉じタグの無い要素に対して、末尾のスラッシュは省く事。HTML5仕様に省略して良いと書いてある。 省略できる閉じタグを省略しないこと。(例えば</li>とか</body>)。 <!DOCTYPE html> <html> <head> <title>Page title</title> </head> <body> <img src="images/company-logo.png" alt="Company"> <h1 class="hello-world">Hello, world!</h1> </
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
週4時間の労働で結果を出し続ける男 ティム・フェリスの仕事術 | ライフハッカー・ジャパン
敏腕クリエイターやビジネスマンに学ぶ仕事術シリーズ、第16弾です。今回は、米でベストセラーとなった『The 4-Hour Workweek』や『The 4-Hour Body』の著者、ティム・フェリス（Tim Ferriss）氏の登場です。 『The 4-Hour Workweek』では、いわゆる9時～5時の生活をやめて、本当に好きなことをする時間をつくる方法を書き、『The 4-Hour Body』では、ほんの少しの運動で劇的に肉体改造する方法を世に広めたフェリス氏。後者では、方法を研究しながら28日間で34ポンド（約15キロ）もの筋肉をつけたというのが話題になりました。また、「Facebook」や「Twitter」、「StumbleUpon」、「Uber」、「Evernote」など、多くのベンチャー企業の立ち上げの際に、エンジェルインベスターや顧問として名を連ねています。最新刊『The
HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 - もとまか日記
以前から書いてる、以下の開発向け簡単チュートリアル。 iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム 今回は、これをHTML5のCanvasで作ってみました。 で、ついでにチュートリアル的な内容を書いてみたメモ。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。 その辺の詳細な説明は省いてるのでご了承ください。 HTML5の基礎情報 以前、以下でまとめました。 前から気になってたHTML5について色々調べてみました HTML5のスマホアプリの基本構成 ここから本題のコーディング。今回使う、スマホアプリ向けの基本となるHTMLは以下です。 html> head> meta name="viewport" content="width=device-width, initial-scale
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
キトー君の悪い口コミ・失敗談と効果・販売店舗情報・安全と危険性・代用自作方法
サービス終了のお知らせ
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記