8年ぶりのスタイルシート更新
ずーっとPHSユーザだった私がスマホに乗り換えたのが2017年のこと。2年縛りとかないイオンモバイルで買ったのだけれど、PINの入力が面倒で仕方ないから顔認証のある機種に変えたかったのと、Android5.1の通信料急増問題が重なり、さっさと機種変更しようと思い立った。 で、新機種でこのブログを見てみたら、とても見難くて困った（理由はよくわからないが、旧機種ではそこまでつらいと感じていなかった）。私は今でもインターネットはほぼPCから利用しているのだけれど、スマホを2年使ってきて、だんだんスマホからのネット利用も増えてきつつある。私は物忘れをすると、自分の記事の過去ログを検索することがしばしばある。スマホでネットを見るときも、それは同じだ。 そんなわけで、スマホから自分のブログが見難いのは困る。そこで、なんと8年ぶりにスタイルシートやら、ブログのテンプレートやらを編集することになった。 も
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
alevirita
2020年7月8日の更新をもってCDPの更新を終了しました（致命的問題を発見した際の修正除く）。サポートは引き続き受け付けています。今後テンプレートが更新されるときはオリジナルのものになります。 2023-12-21 wp-dreamphp をver.2.2にバージョンアップ（不具合修正・機能追加） 2023-11-15 dream.phpをver.5.5にバージョンアップ（機能性・構成の変更）、伴ってwp-dreamphpをver.2.1.0にバージョンアップ（dream.php ver.5.5への対応） 2023-11-10 use-dreamphp.jsをver.2.3にバージョンアップ（不具合修正） 2023-08-02 DreamViewerをver.2.0.1にバージョンアップ（不具合修正） 2023-08-01 DreamphpViewer改めDreamViewerをver.
CSS着せ替えテンプレート企画
CDPで用いられているHTML 4.01は最新のバージョンの仕様ではなく、2018年には「Superseded Recommendation（古いもの）」のステータスになっています。 直ちにCDPがブラウザで表示できなくなるということはないですが、 現在CDPを使っている方やこれから導入を考えている方は、より新しい仕様に書き換えての使用を強く推奨します。 2019年6月追記 基礎HTMLをダウンロードしたい方は基礎HTML配布にアクセスしてください なぜこういった形態の配布法をしているのか知るためにはユーザーMENUにアクセスしてください 配布されているCDPを探したい方はCSS配布サイトリンクを利用してください CDPのCSSを自身で作成し配布したい方は制作者MENUにアクセスしてください 疑問点があったり理解を深めたい方はFAQにアクセスしてください このサイトについて CSS着せ替え
Next/Prev & Back to TopをまとめたナビゲーションのCSSデザインアイディア
『mlog』を作るときに、Next/PrevとBack to Topをまとめた、下の画像のようなナビゲーションを作ったんですが、これを応用すれば色々作れそうだと思って、5種類ほど作ってみました。 画像を使わなくてもそれなりに色々できるというデモです。 ただし、そのまま使えばもちろん非対応ブラウザでは表示が崩れますし、コードも長いです。 実用するなら素直に画像を使ったほうが早いし安心だと思います。 前置き終わり。 Google Chrome 12 devだと以下のように表示されます。 Next/Prev & Back to Top Navigation Design Idea デモファイルをダウンロード 各ブラウザの最新版なら、どれも同じように見えると思います。 IE 8は3番目と4番目以外は崩れますが、使えなくはない……と思います。 :before, :after擬似要素が使えないIE 7
CSSで月の満ち欠け
月の満ち欠けは球体に光を当てた結果のもので、円を円でカットするようなものではない。CSSでは立体を立体としては扱うのは難しいので、それを平面として捉え、半円を円で膨らませたり押し出したりすることで近いものにすることが可能になりそうだ。 Demo: Lunar Phase CSSグラデーションで作った半円に、border-radiusで作った半楕円を組み合わせることで実現している。月齢15以上の場合は半円を逆転させる。地球と太陽と月の位置関係から平面で捉えると、半円を基本にするということであっている(と思う)。 例えば月齢5の場合は以下の様なCSSで構成されている。 .moon { border-radius: 51%; height: 3rem; overflow: hidden; position: relative; width: 3rem; } .phase5 { backgroun
CSS アーカイブ
注 例えばgreenスタイルを改変する場合、greenスタイルがgreenスタイルである範囲内で改変をしても、原著者の権利は有効です。これはもはやgreenスタイルではない、と一般的に認められるとき、ようやく著作権から解放されます。したがって、「greenスタイルをPD相当にする方法」はありません。 スタイルファイルのURI一覧 直リンクや転載などの際にご利用ください。 green(now), think(now) CSS テストページ（now） その他 Index of /x/etc/css/file 再利用可能なスタイルのリンク集 おすすめのサイトの他は利用条件別で紹介します。ただ、スタイルの改変や部分的なパクりをどこまで許容するかについては見解が様々です。スタイルを見て勉強するだけなら問題ありませんが、一部または全部を改変して再利用する場合には、リンク先のサイトに記載の利用条件を熟読
memo：CSS アーカイブを作成
CSS アーカイブ はてブ経由でCSS Archives :: ねこまぐろ雑貨店を拝見して、「自分も、以前からこういうの、作っておきたいとは思っていたんだよな……」と。古いスタイルが増えて、自分でもよくわからなくなっていたので、ちょうどよかったです。 私の視界の範囲内では、どんどん新しいスタイルを作っていく方が多いようですが、私は少数のスタイルを延々とメンテナンスし続けるタイプ。歴史の長い「think」などは最新版の他に旧版のバックアップが8種類もあります。その変化を追いかけるのが個人的に楽しいので、アーカイブページの構成は少々複雑になりましたが、全ての旧版を紹介しています。 せっかくアーカイブページを作ったので、スタイルの配布についても考えてみました。私が作成したスタイルなら、どれもパブリックドメインにできるだろう……と思いきや、ほぼ全ての画像が素材集の画像を加工したもの（または全くその
CSS: 暁露の子 - よはくのところ。
はじめに このページは、「よはくのところ。」で使用しているスタイルシートを視覚的に確認するためのものです。 スタイルシートについて 「よはくのところ。」や、私、香川さやか が直接制作などに関わる場以外での使用は考慮していない書き方をしている CSS ファイルです。 読みやすさ等の利便性よりも、自分のサイトらしさ、を考えて作成しているところが大きいため、汎用性のなさから、あまり外部では用いられたくないという思いがあります。 使用している画像には私の著作物でないものも含まれている場合があります。 このスタイルの概要 とりあえずな名前 暁露の子（あかときつゆのこ） 公開日 初出: 2010-07-07 スタイルを適用した時に想定される画面の様子 (Opera 10.60 for Windows / 1024*768) 使用されるフォント pre, samp, code, kbd {font-fa
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
リキッドレイアウト｜ウェブユーザビリティ向上を支援するWebsite Usability Info
以前より当サイトを訪問してくださっている読者の方はお気づきかもしれませんが、当サイトでは、幅固定のレイアウトから、リキッドレイアウト（ブラウザのウィンドウ幅に応じて、表示するページ幅が変動するレイアウト）に変更しました。 上記の理由に加えて、そもそもWeb（インターネット）はユーザー主導型のメディアなので、Webコンテンツの表示サイズについても「基本的にはユーザーが任意にコントロールできるようにすべき」という想いがあります。たとえば弱視のユーザーが文字サイズを極力大きくしたい場合なども含めて考えると、その人なりの心地よい一覧性を実現する意味で、表示されるWebページの幅や高さを自由にコントロールしたいというニーズは高いのでは、と思うのです。 ただ誤解していただきたくないのですが、私は「固定幅レイアウトよりもリキッドレイアウトのほうが絶対的に優れている」と主張しているわけではありません。リキ
段落と字下げ - カナかな団首領の自転車置き場ダイアリー
とかなんとか、まあ、真名垣タンの物言いは、なんとなく生意気で、どこか恥ずかしくさせてくれるモノがあって、何か言ってやりたい心境にはなるのね。確かに。でも、それもいいんぢゃないかと、思ったり思わなかったりしちゃうわけぇ。 んでね。 どうでもいいけど、「カナかな団首領の日記」の人は、何故、段落の始めの一マスを空けないんだろう？ うわあ、一本取られたなぁ。そうですね。それではとりあえず、以下のスタイルをユーザースタイルシートに加えてみましょう。 p { text-indent : 1em ; } どうです、段落の最初が一字下げになりましたか？ユーザスタイルシートが何か分からない人は、W3C信者の首根っこを掴まえて聞いてみてね。 なんてね。 まあ、段落の最初を字下げするっていうのは、紙媒体では、割とポピュラーの書き方だし、小学校の作文の時間にもそうするように言われてたり言われてなかったりするもので
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
FreeCSSTemplates.org is now FCT.co
FreeCSSTemplates.org has been rebranded to FCT. Therefore, our new domain will be FCT.co while our previous domain FreeCSSTemplates.org will always be kept redirected here. What happened to FreeCSSTemplates.org? As the domain FreeCSSTemplates.org was dedicated to just “Free CSS Templates“, we decided to expand our brand name by keeping the domain name short but with more topics to cover. That mean
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作 W3G
https://luzu.in/css/026/
リンクが分かりやすいデザインはいいウェブデザイン - 雑記 - AZ store
The Do’s & Don’ts of Modern Web Design
株式会社paperboy&co. / ペパ研
CSS Dock Menu