HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
シンプルイズベスト！おしゃれなモーダルウィンドウを実装できる「SIMPLE MODAL」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、ももこです。 おしゃれなWebサイトでコンテンツの表示に、モーダルウィンドウを使うと格好よく映えたりしますよね。 今回はクールなモーダルウィンドウを簡単に設置出来るJavaScript「SIMPLE MODAL」※すでに提供を終了していますをご紹介したいと思います。 「SIMPLE MODAL」 デモ 用意されているデモは全部で8種類あります。 その中でも特に使用頻度が高そうな5つのデモをご覧ください。 ALERT シンプルなアラート風ウィンドウ 商品紹介などに使えそうな基本的なウィンドウ MODAL AJAX AJAXを使用し、コンテンツにアコーディオンを含めているウィンドウ MODAL IMAGE LightBox風に画像を表示するウィンドウ VIDEO EMBED 動画を埋め込んで再生するウィンドウ 記述 ウィンドウ内のテキストや画像は全てスクリプトの中に含めます。 「
Androidの画面サイズを攻略して機種依存を吸収する(ナビゲーションバーとステータスバーのサイズを取得する) | TechBooster
※上記の名前付けは一般的なものではなく、今回の解説用に定義した名前です。（Displayクラスのサイズといえばどれもディスプレイサイズということになるため、わかりやすさを優先して図示しました) 特にステータスバーとナビゲーションバーは端末ごとカスタマイズされている可能性もあるため、動的に取得するのが望ましい項目と言えるでしょう。しかしながら、直接この2つの高さ情報を取得するAPIは存在していません。踏み込んで解説するならば、これらはアプリケーションの領域外でありアプリが気にする必要はなく、気にしないでいられるデザインやレイアウトを検討すべきである、という設計思想がうかがえます。設計思想を尊重するならば、このあと解説するAPIをなるべく使わないでいいように工夫できると機種依存の苦悩から解放されるでしょう。 取得する方法は続きから ナビゲーションバーを除いたディスプレイサイズを取得する ディス
ブログ拾い読み用ブックマークレットを作ってみました
閲覧してるページの選択テキストと一緒にタイトルとそのページのリンクを拾い上げるブックマークレットを作ってみました。ネタフルさんのネタリストみたいにあっちこっちの拾い読み記事書く時にあると便利かと思いまして。 ブックマークレットソース作ったブックマークレットのソースは以下の通り。 javascript: IE='v'=='v'; var selTxt; if(IE){ selTxt = document.selection.createRange().text; }else{ selTxt = window.getSelection().toString(); } selTxt = selTxt.replace(/[nr]+/g,'nr'); var lastTxt = selTxt.slice(selTxt.length-1); if(lastTxt == 'nr'){ selTxt =
Heading Set Styling with CSS | Codrops
In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right combinations of colors, fonts and decoration. In this tutorial I’m hoping to give you some ideas and inspiration for your current and future projects! Today, we are going to talk about headings and titles. When you put some content on
タイトルタグを作るときに意識したい７つのポイント | ウェブ力学
タイトルタグは様々な観点から見ても最も重要なHTMLタグといっていいでしょう。ここでは、サイトのトップーページと個別記事（サブページ）のタイトルタグを作成する場合に意識しておきたいポイントを紹介します。 １．ターゲットとするキーワードを含める SEOの観点からもクリック率を高める観点からもタイトルタグにキーワードを含めることは大切です。 数年前に比べると、特にYahoo!においてタイトルタグにキーワードを含めた場合のSEOスコアが弱くなった印象がありますが、それでも最も重要なタグであることに変わりはありません。また、検索されたキーワードは強調表示されますので、検索結果で目立つことになります。 SEO狙いで無理やりキーワードをタイトルの先頭に入れようとする人もいますが、無理してまで先頭に拘る必要はないでしょう。 ただし、キーワードが前方にないと検索結果で目立たなくなってしまいます。検索結果で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
