cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le

2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

今更ですが、Google Feed APIを利用してRSSを取得・表示する方法と、そのタイトルをCSSで省略表示させる方法を学びましたのでメモメモ。 みんなだいすきGoogle Feed API サイト制作の際、トップページなどに外部ブログのRSSを表示させたいときってありますよね。 私は過去にバンドの公式サイトを制作していた時、メンバーのブログRSSを表示させてくれとよく頼まれたものです。 （その時は無料RSSサービスを使っていました・・・） そんなときに役立つのがGoogle先生による『Google Feed API』。 表示件数や表示させたい内容、それを囲むタグなどわりと自由にカスタマイズできるので多くのWEB屋さんに愛されているようです。 何かいい方法はないか呟いたところ、多くの方からこちらを薦めていただきましたヾ(*´∀｀*)ﾉ ちなみに、以前はAPIキーを取得する必要があったよ

Google ChromeとSafariのCSSハックを紹介します。 CSSハックに用いる文字列は以下です。 @media screen and (-webkit-min-device-pixel-ratio:0) {} 使い方ですが、適用したいセレクタ全体を上記の文字列でまるっと括れば、括ったセレクタ（青色）がGoogle ChromeとSafariのみに適用されます。 @media screen and (-webkit-min-device-pixel-ratio:0) { #hoge { padding-top: 1px; } } 複数のセレクタを適用したい場合は、次のようにまとめて書くことができます。 @media screen and (-webkit-min-device-pixel-ratio:0) { #hoge { padding-top: 1px; } .huga {

Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。 各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>

恐らく、これが読める人はまともな中学ライフを送っていないので、 英語ばかり並べられると頭痛がズンズンとしてきているに違いない。 だから読まないとは言わず今日はバファリン持参でこの文章にお付き合いいただきたい。 えっと・・マックス・・ワイズ・・ってことは～ 賢さの限界？ と思った人はある意味勘が良いが、大間違いである。Wise（ワイズ）でなく幅の方のワイズである。 最大幅の意である。 IE8とは何か そう言わずと知れたマイクロソフトのブラウザ、インポテンツエレキテル8の略である。 そうこれはHTMLのCSSの話である。（分からない人はプログラムの話かって思っていれば良い） IEでは、これが聞かない。 max-width: 1024px; max-height:800px; ハックするといろいろと使えるようになるのだが、 それでもIEのバージョンで制約も多く案外動かない。 メンドクセえからスク

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

今回は「ロールオーバー画像の実現方法」についてお話します。 ロールオーバー画像は、 グローバルナビ、サイドメニューなどの ボタンリンクによく使用されています。 ホームページをコーディングする際には 決して避けては通れない、 不可欠な技術と言えます。 JavaScriptなどで実現する方法もありますが、 cssプログですので、 もちろんcssによる実現方法を ご紹介します。 私からは ・直接画像を置く方法 ・テキストの置き換えを使った方法 の2パターンご紹介します。 直接画像を置く方法 ボタン画像をdivなどで囲み そのボタン画像を囲んだdivの背景に ロールオーバー時の画像を設定します。 わかりにくいですが、ボタンを囲んだものの背景に ロールオーバー時の画像を設定することで ボタンの下に、ロールオーバー時の画像が 隠れている状態です。 そして、ボタンをマウスオーバーした際に、 ボタンの表示

CSSのnth-childで偶数/奇数行などn番目を装飾する方法(4ページ目)リストやテーブル(表組み)など多数の項目が連続する要素は、1行おきに装飾を分けると見やすくなります。CSSのnth-child疑似クラスを使えば、偶数行(＝2の倍数番目)だけの装飾、奇数行(＝2の倍数+1番目)だけの装飾などを簡単に指定できます。表なら「n番目の列」のように列単位で色分けするのも簡単です。そのほか、先頭だけ、先頭から5つだけ、3個おき(＝3の倍数)、最後から2番目だけ、最後だけ……など柔軟に指定できて便利です。

小さいころから占いに興味があって、色々と勉強しているうちにどんどん好きになり、皆さんにも占いの良さを知ってほしくて記事を書いています。 知り合いに占い師や霊能力者、お寺の住職がたくさんいるので、その方たちにインタビューして記事を書いています。