ドットインストール代表のライフハックブログ
TOP > WebDesign > 様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 WEBでは様々なデザインレイアウトがあり、クリエイティブで大きな差はできますが、基本のレイアウトはある程度決まっており、制作する上で、ベースとなるレイアウトテンプレートがあるだけで随分と楽になります。今日紹介するのは様々なCSSレイアウトをダウンロードできるサイトをまとめたエントリー「465+ Useful CSS Layouts for Download」です。 Nice and Free CSS Templates/Layouts by My Celly 基本的な1カラム、2カラム、3カラムといったベーシックなものから、シンプルなものまで様々なCSSテンプレートがダウンロード可能です。今日は紹介されている中か
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの?というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系(Chrome, Safari)のみとなっています。 Letterpress(レタープレス) Small Caps(スモールキャピタル) CSS Coupon(クーポン券) Stitched(ステッチ) Gloss(グロス) Stroked Text & @font-face(@font-faceを使ったストローク) Double Stroked Text(二重のストローク) Letterpress(レタープレス) レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
Section 1:概説 Section 2:画像化テキスト Section 3:サンセリフ欧文(1) Section 4:サンセリフ欧文(2) Section 5:サンセリフ欧文(3) Section 6:セリフ欧文(1) Section 7:セリフ欧文(2) Section 8:セリフ欧文(3) Section 9:草書系・筆書系欧文(1) Section 10:草書系・筆書系欧文(2)・装飾系欧文 Section 11:等幅欧文・その他の欧文 Section 12:ゴシック系和文(1) Section 13:ゴシック系和文(2) Section 14:明朝系和文(1) Section 15:明朝系和文(2) Section 16:その他の和文 Appendix A:無償利用できるフォント Appendix B:Windows の標準フォント Appendix C:PostScript
a:hover{color: blue; text-decoration: underline} 補足 擬似クラスは文脈セレクタと組み合わせて使用することができます。 em a:link{color: green} また、通常のクラスと組み合わせることもできます。この時、通常のクラスを先に、擬似クラスを後に書かなければなりません。 a.external:visited{color: silver} <a class="external" href="http://foo.hoge/">お勧めリンク</a> 上の例のようなリンクをあなたが既に閲覧済みであれば、このリンクは薄い灰色で表示されることになります。 擬似要素(Pseudo-elements) first-line擬似要素(The 'first-line' pseudo-element) その名の通り、最初の一行だけに指定したスタイル
ラジオボタンがチェックされたときにCSSプロパティを指定するための:checked擬似クラスがあります。 実用的な使用方法は下記の例のように、ボタンがチェックされたら、対応するテキストが装飾される。といった感じです。FireFoxとOperaでは動作確認しましたが、IE6、IE7では動きません。 サンプル 隣接セレクタを使って、:checkedの隣のlabelにスタイルを指定しています。ソースはこんな感じ。 <div id="radioBox"> <input type="radio" name="text" value="1" id="radio1" /><label for="radio1">リスト1</label><br /> <input type="radio" name="text" value="2" id="radio2" /><label for="radio2">リスト
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
大事なのは”仕事の段取り” 幅広い業務を任されているからこそできる ひとり情シス流の業務改善術 50年の経験を持つアイネットが提供 ユーザー企業の使いやすさを第一に考えた ワンストップで使えるマネージドクラウド 注目急上昇中のDaaS最新情報 コロナ禍を背景に利用者と機能を拡大中 Azure Virtual Desktop最新情報 全世界22万以上の企業・組織で採用 DX時代の顧客価値創出に大きな役割を担う CI/CD環境の現実解を紐解く データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある DNSを守り、DNSで守る 高度・巧妙化し危険度を増すサイバーリスク いま考えるべきモダンセキュリティのあり方 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 コマース広告の大変動
現在のページで読み込んでいるCSS(スタイルシート)ファイルを、閲覧者がプルダウンメニューを使って(CSSファイルごと)切り替えられる機能を作ってみましょう。 CSSファイルそのものを動的に変更できる(置き換えられる)ので、ページの装飾やレイアウトを大きく変えられます。 複数のページデザインを用意しておいて、閲覧者が自身の好みに応じて切り替えられるようにしたり、画像素材配布サイトなどで、どのようなページデザインのときに素材がどのように見えるのかを確認させたい場合などに活用できるでしょう。 CSSファイルを動的に切り替えられる機能の例 下記のプルダウンメニューを変更すると、読み込まれているCSSファイルが変更され、ボックス内の装飾が変化します。試しに変更してみて下さい。 ※JavaScriptが有効な場合のみ動作します。 ※CSSファイルが新たに読み込まれるまで、数瞬の待ち時間がある場合があ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く