2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
東日本大震災に関連して、財団法人 地方自治情報センター（LASDEC）が、国民へ発信する重要情報をPDFやExcelではなくHTMLやCSVで提供するよう呼びかけている。容量が大きいファイルがサーバーや回線を圧迫しないようにすることと、携帯電話しか持っていない被災者でも閲覧しやすくすることが目的だ。 LASDECでは2011年3月18日に、地方公共団体へメーリングリストを通じて通知している。「アクセスが集中し、PDFやExcelファイル形式の場合、容量が大きく、サーバー・回線リソースを圧迫し、重要情報が閲覧できない事象が頻出しています」（LASDEC）。そこで、PDFやExcelファイルの代わりにHTMLやJPEG、CSVといった形式での提供を推奨。WordやExcelの文書も、「ファイル」メニューから「名前を付けて保存」を選び、ファイルの種類に「Webページ (*.htm,*html)」
1． 自分には作れないスタイルにする、というのが新スタイル「green」の狙いだったので、デザイナーの WebbingStudio さんとのやり取りの中で、細かいことをゴチャゴチャいうのはナシにしてました。 でも4日に「green」を公開し、5日には代金も支払ったので、この先は自分の領域だと思う。先代の「plant」も、あれこれ改造していく中で、少しずつ「自分のスタイル」になっていきました。「green」も、1年くらいかけて好きに手を入れていこうかな……と思っていたのですが、カツヤマさんの反応を発見して、特急工事をすることにしました。 Capriccioso 2010-11 | 置場 置場 置場 五日 “新スタイル「green」を追加”だそうで。右上に恐竜の骨がある等、中々良いセンスを感じるデザイン。って作ったのはプロの人のようなので当然か。“気になる点があれば、ご指摘をいただければ幸いで
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、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どうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
上記の通り、色指定の値「#800080」と「Purple」とは、どちらも紫色を表す。 6.5.1 色を用いる際の注意 カラー化によって、文書はより多くの情報を表すようになり、また読みやすくもなるだろう。しかし、カラー化については以下の指針を考慮に入れられたい。 HTMLの要素や属性によって色指定を行うことは 推奨しない。その代わりにスタイルシートを用いるよう勧める。 色盲の人を困らせるような配色には様々なパターンがあり、どの組み合わせにおいても慎むこと。 背景画像や背景色の指定を行う場合は、テキスト類への色指定も行うこと。 BODY要素や FONT要素、そして表のbgcolorによる色指定は、環境が違うと見え方も異なる。 (例えば、ワークステーション、マック、ウインドウズの違いや、液晶表示とCRT表示の違い。)従って、ある特定機種での見栄えに完全に依存するべきではない。 ただし将来的には、
No.0004 - 2002.08.12 エロページを公開する時は、「18禁」「お子様は見ないでね」という表紙ページを置くのが慣例になっています。これは、「ここから先はエッチなんだから、それを承知で、自分の責任で見ろよ。」という情報を与えています。しかし、エッチ心というのは何よりも強く...。目の前にあれば見たくなるのが、悲しきかな、エロ心というもの...。 という事で、他の方法として、接続時や、ブラウザ表示の段階で遮断してしまう方法も考えられました。親や学校のシステム管理者が指定することによって、頑張っても見られなくなってしまうのです。ここでは、 ページ制作者が「このページはエロなんだ、お子様に見せるにはもったいないんじゃコラァ。」と指定する方法。閲覧制限指定を元に、ブラウザ（IE）や専用ソフトを使って遮断する方法と問題点。 を紹介したいと想っていたりします...。（レイティングシステム
2008年4月13日12時51分追記 とりあえず冒頭に結論を置いておきます。 <meta name="rating" content="adult">上記メタタグでサイトが18禁であることを明示できます。 以前、趣味でエロゲー関連の情報を扱うサイトを運営していた事がある。画像は一切使用していなかったが、それでも毎日そこそこのアクセスがあり、更新を停止した頃には（自分にとっては）結構な数のカウンタが回っていた。 その頃（そして今でも）、結構本気で欲しかったのが、サイトの内容が18禁である事を明示するメタタグだった。要するに、フィルタリングソフトやフィルタリングサービスの類が、このメタタグを検知すると自動的に18禁カテゴリに分類してくれるのである。（本当は、フィルタリングサービスを導入しなくても、OSやブラウザレベルでペアレンタルロックされるのが理想なんだけど） どうして、こんなタグが欲しいと
こないだの「インターネットってどういう仕組みで動いているの？」に書いた事前研修でユーザビリティの大切さについても話したいと思って簡単なフォームを作ってみたよ。 想定ターゲットはユーザビリティのユの字も知らないような人や、これからウェブサイトの設計、構築の仕事をしようとしている人。これらの人にユーザビリティの大切さに気づいてもらうために、前回と同じように話す内容をとりあえず書いてってみる。 ちなみに前回のインターネットの仕組みからユーザビリティって話が飛んでるけど、そういうことは気にしないで思いつくことをメモ的にどんどん書いてって、流れは最後に考えようかなって感じ。 じゃあ、さっそく始める！ ユーザビリティって何？ まず始めに、みんなは「ユーザビリティ」って言葉は聞いたことあるかな？ 日本語で「使いやすさ」って意味なんだけど、利用者がいかにストレスなく、便利で簡単で直感的な操作ができるか、っ
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
