Profile cover photo
Profile photo
デザインスタジオ・エフ
2 followers -
WEB制作・HTMLコーディング、DTP、動画制作、各種印刷物などのデザインワークスはお任せください。
WEB制作・HTMLコーディング、DTP、動画制作、各種印刷物などのデザインワークスはお任せください。

2 followers
About
Posts

Post has attachment
【CSS】互い違いに行の色を変えるテーブルデザイン
CSS3では、nth-childの疑似クラスが定義されて、CSSだけで、テーブル<table>デザインをよりわかりやすく設計することができるようになりました。

nth-child(n)では、n番目の子となる要素にスタイルを適用することができるため、<tr>や<td>など同じ要素が続くテーブル<table>内において、何番目の行、何番目の列かを指定してスタイルを指定することができます。

https://design-studio-f.com/blog/css-table-design/
Photo
Add a comment...

Post has attachment
【CSS】Googleマップの埋め込み用HTMLコードをレスポンシブに対応させる
Googleマップで、埋め込み用HTMLコードを発行して、ブログやサイトに貼り付けて使うことがよくあると思います。サイトがレスポンシブ対応の場合、本文中のGoogleマップが、要素からはみ出して見栄えが崩れたり、案内したい所在地のポインタが表示されないということがあります。CSSを組み合わせてGoogleマップの埋め込み用HTMLコードをレスポンシブに対応させる方法を紹介します。

https://design-studio-f.com/blog/responsive-google-map/
Photo
Add a comment...

Post has attachment
モバイルサイトを構築するときに役立つフレームワーク5選
スマートフォンやタブレットなどのモバイル端末の普及に合わせて、モバイル端末によるWEBサイトへのアクセスやモバイルアプリケーションの需要が多くなってきていることを感じます。

今回はモバイル端末に最適化されたWEBサイトやアプリケーションを制作するときに役立つフレームワークを5つご紹介します。

https://design-studio-f.com/blog/five-mobile-frameworks/
Photo
Add a comment...

Post has attachment
【CSS】リンクフォーカスを利用したナビゲーションのボタン操作
CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。

{a:focus}はリンクにフォーカスされているとき。クリックされた時やTabキーなどでフォーカスが合っている時を指します。

{a:focus}を使うと、ランディングページやシングルページを制作しているときに、ナビゲーションを固定してページのスクロールに合わせてナビゲーションを追ってくる仕組みを構築するとき、クリックされた状態を保ったナビゲーションを作ることができそうです。

https://design-studio-f.com/blog/css-link-focus-navigation/
Add a comment...

Post has attachment
【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法
WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。

◆【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法
https://design-studio-f.com/blog/horizontal-vertical-centering-css/
Photo
Add a comment...

Post has attachment
インデックスタブ制作のチュートリアルまとめ
WEBデザインにおいても、ファイル、手帳、ノートなどの端に付けるインデックスタブ(索引)と同じ機能をもつタブを作りコンテンツをまとめて表示することができます。
作り方はjQueryを使用したものや、CSSやJavascriptを使用するものなどさまざまです。今回はインデックスタグ(索引)を制作するチュートリアルが掲載されているサイトをあつめてみました。

◆インデックスタブ制作のチュートリアルまとめ
https://design-studio-f.com/blog/web-tabbed-design-tutorial/
Photo
Add a comment...

Post has attachment
【CSS】スタイルシートが適用される優先順位について
WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。

そうなると、同じ名前の宣言で異なる値を与えてしまい意図しない結果になってしまうことも考えられます。

そこで、CSSを記述する上でCSSの設定内容がどのように反映されるのか優先順位に着目してまとめてみました。

◆【CSS】スタイルシートが適用される優先順位について
https://design-studio-f.com/blog/priority-level-css-declaration/
Photo
Add a comment...

Post has attachment
【Bootstrap】テンプレートを使い作成するレスポンシブサイト
Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応のサイト制作が可能です。『Bootstrap』の基本的な使い方を解説します。

◆【Bootstrap】テンプレートを使い作成するレスポンシブサイト
https://design-studio-f.com/blog/bootstrap-responsive-site-design/
Photo
Add a comment...

Post has attachment
WEBサイトをHTML5で構築するメリットは?
HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ情報を示すfooter要素など、特別な意味を持つ要素が追加されセクションごとに意味を定義することができるようになりました。

マルチメディアのためのaudio要素やvideo要素、描画するための canvas要素も追加されています。

HTML5の登場でWEBサイトの制作者にとって、Adobe FlashやMicrosoft Silverlightのような外部プラグインの必須性を、軽減した高性能なWebアプリケーションが制作できることが期待されています。

◆WEBサイトをHTML5で構築するメリットは?
https://design-studio-f.com/blog/html5-features-and-benefits/
Photo
Add a comment...

Post has attachment
WEBサイトの制作において基礎となるのは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)略称をHTML(エイチティーエムエル)と呼ばれる、拡張子が.htmlや.htmなどであらわされる文章ファイルです。

WEBサイトの制作に関わる人にとって当たり前となっているHTMLですが、1993年の登場から現在でにいたるまでの間にHTMLのバージョンが変わり、その変化に合わせWEBサイトの作りも移り変わっています。

今回は、HTML文章の歴史を振り返りながら、トレンドなっている今のWEBサイトの制作の中身をまとめてみたいと思います。

https://design-studio-f.com/blog/hypertext-markuplanguage-history/
Photo
Add a comment...
Wait while more posts are being loaded