starthtml さん プロフィール

  •  
starthtmlさん: ホームページの作り方 - Let's make the home page!!
ハンドル名starthtml さん
ブログタイトルホームページの作り方 - Let's make the home page!!
ブログURLhttp://start-html.com
サイト紹介文このサイトではhtml5やcss3、jQueryなどホームページを作る際の技術を説明しています。
参加カテゴリー
更新頻度(1年)情報提供21回 / 329日(平均0.4回/週) - 参加 2015/10/29 17:33

starthtml さんのブログ記事

  • 過去の記事 …
  • jQuery でアニメーションさせる ~基本編~
  • webサイトをアニメーションさせるのに必要不可欠な jQuery 。メインの画像をスライドさせる画像をマウスオーバーしたら画像が明るいものに したら表示されてるものが切り替わるなどなどwebサイトで上記みたいなアニメーションってよく見ませんか?jQueryを使えば簡単なアニメーションは自分で書いて出来ますので、今回は基本編ということでまとめてみようと思います。そもそもjQueryとは?jQueryとはjavascriptがベースとな [続きを読む]
  • レスポンシブ コーディング ~制作編~
  • 前回はレスポンシブ コーディングの基本ということでしたが、今回は実際のコーディングするにあたっての制作編としてまとめてみようと思います。要素の幅を%指定今までのPCコーディングは基本的にはpx指定が基本でした。ただpx指定だと様々なサイズのデバイスに対応が出来ないため、%で横幅などを指定する必要があります。この%は下記のような計算 式で数値を出します。求めたいコンテンツ幅÷親要素のコンテンツ幅×100%求めたい [続きを読む]
  • レスポンシブ コーディング ~基本編~
  • レスポンシブ デザインのコーディング。もうここ数年のトレンドのデザイン、コーディング方法ですよね。仕事でもレスポンシブコーディングをしないことはないくらい当たり前になりつつありますね。レスポンシブコーディングをするにあたって、基本的なところをまとめようと思います。そもそもレスポンシブデザインとは?スマートフォン(以下スマホ)などが普及したことによりスマホのコーディング対応も必要が出てきたのですが、 [続きを読む]
  • html5 でコーディング~基本の書き方~
  • html5 でコーディングをするにあたって以前みたいなxhtmlとは書き方が異なりますのでその基本の書き方をまとめようと思います。改めて xhtm lと html5 どのような部分が違うのかというお話ですがhead部分が簡素化されたり単体で終わるimgタグやbrタグに閉じのスラッシュ(/)がいらなかったり、という部分です。では早速フォーマットですが下記みたいな感じでコーディングを行っております。〜ここにコンテンツの中身を記述してい [続きを読む]
  • html覚えたての時に難しい箇所を解決
  • htmlコーディング始めた頃はここどうすればいいんだろうっていうのが出てきますよね。そういうちょっぴり難しいような部分を以前まとめさせて頂いた基本的なcssシリーズを中心にまとめてみようと思います。 横並びのやり方こういうメニュー横並びの表現ってグローバルメニューとかでよくみますよね。htmlのコーディングをメニューメニュー2メニュー3メニュー4としましてcssで横並びをどうするかですが、下記のようなcssでいか [続きを読む]
  • Illustrator ( イラレ )でwebデザイン!
  • webサイトのデザインではPhotoshopを使ってます。外部のデザイナーさんにデザインを依頼された際にたまーにIllustratorでwebデザインされたaiデータをいただくことがあります。個人的にはwebデザインはPhotoshopがオススメなのですが…なぜ Illustrator ではなくPhotoshopなのか?Photoshop(以下フォトショ)ではwebデザインをする上でとてもデザインしやすいように定期的にアップデートされてます。cc2015ではアートボード機能も [続きを読む]
  • ホームページが出来るまでの流れ
  • ホームページ、webサイトが出来るまでの流れって最初わからないですよね。それを始まりから納品までまとめてみようと思います。今回はクライアントの中規模のサイトを作る流れです。どのようなホームページ、webサイトを作るか要望確認。その要望を聞いた上でワイヤーフレームを作成。ワイヤーフレームの確認をいただくワイヤーフレームがOKならばデザインを作成していく。デザインの確認をいただくデザインがOKならそのデザインを [続きを読む]
  • ホームページが出来るまでの流れ
  • ホームページ、webサイトが出来るまでの流れって最初わからないですよね。それを始まりから納品までまとめてみようと思います。今回はクライアントの中規模のサイトを作る流れです。どのようなホームページ、webサイトを作るか要望確認。その要望を聞いた上でワイヤーフレームを作成。ワイヤーフレームの確認をいただくワイヤーフレームがOKならばデザインを作成していく。デザインの確認をいただくデザインがOKならそのデザインを [続きを読む]
  • おすすめ エディタ ~DWと使い分け~
  • コーディングをする上で欠かせないのがテキスト エディタ ですよね。みなさんどんな エディタ を使ってますか?エディタってAdobeが提供してるDreamWeaver一択じゃないの?って思われるかもしれませんがここ数年様々なエディタが出てきててその評判がすこぶるいいです。DreamWeaverももちろん使ってました。ましたですので過去形です。厳密にいうとたまに使います。DreamWeaverにも良さはありますのでおすすめのエディタと合わせて [続きを読む]
  • divの使い過ぎ禁物~適切な html5 を~
  • html5 コーディングしててついdivタグが多くなりませんか??divタグってとても便利だったりするのでつい使ってしまうのですが…html5 ではheaderタグやfooterタグなどなど新設されたタグがあり、意味のあるコーディングをしましょうというのが強く反映されたのがhtml5なのでそれぞれ適切なタグを使っていただければと思います。(もちろんdivは使ってはだめ!ってことではないですよ)html5で新設されたタグで主に使いそうなのが [続きを読む]
  • サイトが崩れる理由
  • webをあまり触ってない人がどうしよう!?って困っちゃうのがなんかの拍子でサイトを触ってサイトの崩れた時ですよね。そんな時大事なのが…まずは落ち着くこれ本当大事です。笑てんやわんやして余計に崩れてもだめなので崩れた原因を探る必要があります。崩れの原因は色々ありますが大きくいうとこの3つ辺りかなと…floatのクリア忘れ(これは以前floatの記事の際に書いてみました)width(横幅)があってないpositionのabusolute [続きを読む]
  • デザイナーとアーティストの違い
  • 今回は少し個人的に思う真面目な話。webデザイナーとして仕事を受けさせてもらってて、別のデザイナーさんとも仕事をさせていただく機会があるけども、たま〜にこのデザイナーが自分をアーティストとして勘違いしてる場合があります。デザイナーとアーティストの違いって??個人的に思うこの違いは… ▼デザイナークライアントがいてその依頼されたデザインを仕上げる人。▼アーティストクライアント関係なく自分自身からク [続きを読む]
  • そもそもhtmlとcssとは?
  • 記事のタイトル通りそもそもhtmlとcssってなんだって話です。htmlとは今皆さんがホームページやらwebサイトで見られているページで文字情報やら画像やら色々ありますよね。それをhtmlファイルというものに記述してます。htmlファイルというだけにファイル形式で基本的なファイルとしてはindex.htmlとなります。拡張子がhtmlというファイルでこのindexというのは基本となるファイル名なのですがもちろんこのファイル名がringo.html [続きを読む]
  • idとclassの違い
  • htmlのコーディングをしててhtmlタグにidやらclassといった属性をつけれます。例えば〜や〜〜〜〜などとつけれます。idとclassの違いですがidはそのページに一個だけ。classはそのページに複数つけれる。というのが大きな違いです。なので上記の例はOKなのですが〜〜〜〜というのはNGです!なので極端な話、id使わずに全部classでもいいですね!って話にもなりますがずぼらな方、ずぼらなhtmlなコーディングならいいのですが、管理 [続きを読む]
  • css3で出来ること ~グラデーション 編~
  • css3で出来ることは過去の記事でさくっと書いたのでご覧ください。 グラデーションって今までphotoshopやillusratorなりでデザインして書き出した画像を用いてじゃないと表現が出来なかったんですよね。それがcss3で出来ます!まずはそのコードです。background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100% [続きを読む]
  • 基本的なcss ~display編~
  • displayっていうプロパティがあります。これは表示形式を指定するものです。たとえばdisplay:none;ってするとどうなると思いますか?答えはその要素が非表示になり画面上から消えます。突貫工事ではありませんが急ぎでそのテキストが画像だけ消したいっていうときにこのdisplay:none;をしてあげれば消えますね。逆に表示表示しているものでその形式の違いがいくつかあります。display:block;display:inline-block;display:inline; [続きを読む]
  • 基本的なcss ~background編~
  • cssで画像を背景に表示させたい時、backgroundというプロパティを使います。レスポンシブというPCとスマホを一つのソースで対応をするという需要が多いのでこのbackgroundとてもよく便利で使います。backgroudは色々な書き方がありますが、background:url(“~”) top left no-repeat;みたいな書き方をすることが多いです。urlの部分には画像、top left というのは画像がスタートする位置。この場合上の左から。no-repeatは画像をど [続きを読む]
  • 基本的なcss ~margin&padding違い編~
  • 余白(スペース)をつけるのにmarginかpaddingを使いますよね。この違いってわかりますか?marginが外余白でpaddingが内余白です。外余白?内余白?なんのこっちゃ??って感じですがborder(線)をひけばわかりますね。borderを引いた際の内側がpadding、外側がmargin。っていうのが違いです。ボックス内に余白を含めるか含めないかでmarginかpaddingを使い分けます。例えば色や画像がついているボックスをもう少し高さや横幅なり [続きを読む]
  • 基本的なcss ~z-index編~
  • 前回のposition編ではpositionの使い方を説明しました。この自由な配置をした時にオブジェクトの重なりの概念が出てきます。コーディングしててこの画像が別の画像の下に表示されてしまったけど本当は上に表示させてたいー!みたいなことがあると思います。そんな時はz-indexというプロパティを使ってみてください。例えばAとBという画像あって、そのBをAの上に表示させたい場合はBにz-index:2;とやってみてください。いま、2とい [続きを読む]
  • 過去の記事 …