脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
Open Graph protocol
Introduction The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook. While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
Another HTML-lint 5がツッコミどころ満載な件について - 血統の森+はてな
さて、keio.ac.jpのサービスが停止したのはid:momdo:20120711:p1で書いたとおりですが、石野氏のサイトにも正式告知が来てました。 Ringのサービスは停止しています。ゲートウェイサービスは、株式会社ジゾン様のサイトを利用してください。 ソースは以下からダウンロードしてください。 この内容からだと、意図的に止めてるのか、事故で止まってるのかさっぱりわかりませんね…。 ところで、いつの間にか株式会社ジゾンのサービス（http://www.htmllint.net）がアクセス可能になったようです。 Another HTML-lint 5無償でご利用できるHTMLの構文チェックツールです。 元々1997年度に石野恵一郎氏によってPerl5で作成されました。 Another HTML-lint 5は株式会社ジゾンがAnother HTML-lint をベースにHTML5に対応
「green」変更点メモ
1． 自分には作れないスタイルにする、というのが新スタイル「green」の狙いだったので、デザイナーの WebbingStudio さんとのやり取りの中で、細かいことをゴチャゴチャいうのはナシにしてました。 でも4日に「green」を公開し、5日には代金も支払ったので、この先は自分の領域だと思う。先代の「plant」も、あれこれ改造していく中で、少しずつ「自分のスタイル」になっていきました。「green」も、1年くらいかけて好きに手を入れていこうかな……と思っていたのですが、カツヤマさんの反応を発見して、特急工事をすることにしました。 Capriccioso 2010-11 | 置場 置場 置場 五日 “新スタイル「green」を追加”だそうで。右上に恐竜の骨がある等、中々良いセンスを感じるデザイン。って作ったのはプロの人のようなので当然か。“気になる点があれば、ご指摘をいただければ幸いで
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
MobileHackerz再起動日記: ディレクトリに置くWebページはなぜ「index.html」なのか
2010/04/16 ■ ディレクトリに置くWebページはなぜ「index.html」なのか 自分でWebサイトを作ったりしたことがある人ならおなじみの、そしていろんなページを見てまわっていても見かけることが多いファイル名に「index.html」というものがあります。これ、何かといいますと「URLが特定のディレクトリだった時に、自動的にチェックされるファイル名」です。つまり、 http://mobilehackerz.jp/archive/wristomo/ というURLを入力すると、 http://mobilehackerz.jp/archive/wristomo/index.html と同じものを表示するわけです。下のURLが本来正しいのですが、上の表記でも（index.htmlが省略されているとみなして）表示してくれるという仕組み、そんなファイル名が「index.html」。 では
Googleに学ぶ、ウェブページのパフォーマンスを最適化する方法
Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ
yahooとyimgを別ドメインにする理由 | beroの日記 | スラド
初耳です。HTTP1.1仕様であるRFC2086には「サーバやプロキシへ最大で 2 接続」とありますが ドメインは無関係です。（サーバとドメインの違いについてはココでは解説しません） リンク先記事 の元ネタは Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 Split components across domains - Maximize parallel downloads - But not more than 2-4 domains, because of the DNS lookup penalty - www.example.org - HTML content - static.example.org - HTML components とあるので、ここでいう「domains」は所謂「ドメイン」ではなく、サブドメイン含む「サーバ」のことだと思います。（原文も悪い
Yahoo!パフォーマンスチーム、最新高速化ルール20を発表 | エンタープライズ | マイコミジャーナル
Webアプリケーション開発に欠かせないFirefoxエクステンションであるFirebugをベースにして開発されたWebページのパフォーマンス計測ツールにYSlowがある。2007年12月上旬にはパフォーマンス分析能力を向上させたYSlow 0.9がリリースされた。紹介にもあるように、手軽に導入できるうえにかなり効果的に分析ができるところに特徴がある。 YSlowの強みとなっているのはYahoo! Exceptional Performanceチームが分析した評価基準をベースにしている点にある。Yahoo!が実際に分析した結果をベースにしているだけあって効果が確実なものとして効いてくるわけだ。 そのYahoo! Exceptional Performanceチームから最新の調査結果およびパフォーマンスブレークスルーのための新しいルールが発表された。既存の14のルールに加えて、新しく20のルー
「HTML5があればFlashは不要」 Adobe「ふざけんなハゲ！」:アルファルファモザイク
■編集元：ニュース速報板より「「HTML5があればFlashは不要」 Adobe「ふざけんなハゲ！」」 1 鑿(長崎県) :2010/02/21(日) 16:03:40.32 ID:bASqLksA ?PLT(12000) ポイント特典 AdobeのCTOがFlash擁護 「HTML5があれば Flashは不要」論に反論 AdobeのCTOがiPhoneのFlash非対応は「Appleが協力しないため」と批判し、「HTML5によってFlashは不要になる」との見方についてもコメントした。 「FlashがiPhoneで動かないのは、Appleが協力しないから」「HTMLが進化しても、Flashは不要にならない」 ――Adobe SystemsのCTO（最高技術責任者）ケビン・リンチ氏が2月2日、公式ブログでFlashを擁護した。 「最新の魔法のデバイスにFlash Player
フォントサイズチェッカー
スタイルシートでフォントサイズを指定したときに、どのくらいの大きさになるのかを表示。 ブラウザの文字サイズ設定は「中」「標準」を推奨。 IE・Firefoxなら フォントサイズ100％は、 フォントサイズ16pxと同じ。 フォントサイズ12pxは、 フォントサイズ75％と同じ。 フォントサイズ50% フォントサイズ51% フォントサイズ52% フォントサイズ53% フォントサイズ54% フォントサイズ55% フォントサイズ56% フォントサイズ57% フォントサイズ58% フォントサイズ59% フォントサイズ60% フォントサイズ61% フォントサイズ62% フォントサイズ63% フォントサイズ64% フォントサイズ65% フォントサイズ66% フォントサイズ67% フォントサイズ68% フォントサイズ69% フォントサイズ70% フォントサイズ71% フォントサイズ72% フォントサイズ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
草なぎ剛くんについて重大なお知らせ - rna fragments
大好きな草なぎ剛くんについてデマが流れているので…！ fut573 メモ:『彅』弓+剪はJISにないので、windows以外の環境では正常に表示されない場合が多く、ネット上では使わない事を推奨されている文字の一つである。 へー 2009/04/23 はてなブックマーク - 草なぎ剛、公然わいせつ容疑で逮捕（サンケイスポーツ） - Yahoo!ニュース 「なぎ」の文字コードに関しては JIS コード(JIS X 0208)では外字になってしまいますが、Unicode では CJK 統合漢字に含まれるちゃんとした文字です。HTML や XML で使う場合は文字実体参照文字参照*1を使って彅(または 彅)のようにして表現できます。*2 表示に関しては今時の OS なら大抵大丈夫です。Mac OS X の標準フォントでも Linux で広く使われている IPA フォント
Google、ODP情報を表示させないMETAタグのサポートを開始 ::SEM R (#SEMR)
Google、ODP情報を表示させないMETAタグのサポートを開始 Googleが検索結果にODP(DMOZ)情報を反映させないNOODPタグのサポートを開始した。 公開日時：2006年07月17日 17:29 米Googleが検索結果におけるWebページの見出しとスニペット（説明文）表示において、DMOZ (ODP, Open Directory Project)データを反映させなくするMETAタグ (NOODPタグ）のサポートを開始した。 GoogleがWebページの説明文を表示するルールは (1) KWIC (Webページの検索キーワード前後の文章を引用する）、(2) META Descriptionタグ内の記述、(3) DMOZで用いられている説明文の3種類に分類される。このうち (3) については、DMOZで記述されている説明文が不明確・適切ではない、古いなどの問題でウェブマスタ
段落と字下げ - カナかな団首領の自転車置き場ダイアリー
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
title属性をつけてスタイルシートを読み込む場合の注意点
title属性をつけてスタイルシートを読み込む場合の注意点 link要素にtitle属性を付けてスタイルシートを読み込ませるとこれは優先スタイルシートと呼ばれるスタイルシートになります。 この件について問題があるサイトが報告されていますので、この辺の仕様と注意点について紹介しておきましょう。 固定スタイルシート(persistent style sheet) 固定スタイルシートとは文字通り、固定的に読ませるスタイルシートの指定方法です。 これによって指定されているスタイルは、以下で説明する優先スタイルシートや、代替スタイルシートと同時に適用されます。 固定スタイルシートはtitle属性を付けずにlink要素を記述します。 <link rel="stylesheet" href="foobar.css" type="text/css"> 優先スタイルシート(preferred style s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Makes you HTML souce eautifully indented - Ham Cutlet
Web制作 W3G
読みやすいHTML色作りツール - 配色の見易さも考慮したHTML色作成ツール