yucako

制作会社でカメラマンやりながらweb勉強中。趣味はカメラと音楽と料理。あとたまに旅行。

yucako

制作会社でカメラマンやりながらweb勉強中。趣味はカメラと音楽と料理。あとたまに旅行。

サイト模写

あけましておめでとうございます。 せっかくの８連休、前半は会いたい友達に会って 後半は勉強しようと思ってたのに、 1/1から高熱を出し寝込むと言う休みになりました。 体調も戻ったのでLPサイト模写。 写真がたくさん入っていて、見やすいのと、 お茶漬け専門店流行ってんなぁと思ってなんとなく選んだサイト。 http://shibaraku-jp.com/ 縦書きにして、Googlefontを使うとなぜか小さい「っ」だけ めちゃくちゃ詰まる。 letter-spacingとl

yucako

    • インライン要素の余白

      paddingとmarginで一番悩むのがインラインブロックの余白。 これが一番間違えるところです。あ！となることがあるのでおさらい。 例えばaタグにpaddingで内余白とmarginで外余白つけたい！ （テストのボックスがaタグ：インラインブロックです。） 実際にコード書いてみる <a class="box1" href="#">ここはインラインブロックaタグだよ</a> <div class="box2">ここはブロック</div> これにcssで box1にpad

      yucako

      • marginとpaddingのあれこれ

        一番最初に色々とこんがらがるmarigin とpadding。 今だにどっちを使った方が良いのか迷うこともある。 結構奥が深い。知れば知るほど奥が深い。（って言うか全部奥が深いけど。） どちらも余白をつけるために使用するcss 使い分けが慣れるまでややこしい。 しかもわかったつもりでいるとトラップにはまりやすい。 ・要素の内側の余白を広げる時はpadding ・要素同士を離すときはmargin cssでの記述方法 ・余白は上下左右につけられる　 1. padding-t

        yucako

        • hタグのあれこれ

          見出しということはわかっていたはずのhタグ。 しかし改めて復習してみると意外と知らないことが多かった。 重要なタグだしよく使うのでもう一度理解します。 hタグとは見出しのタグ <h1>~<h6>までで、数字が小さいほど重要度が高い。hタグを使用することによって検索エンジンに情報をわかりやすく伝えることができる。 ページの内容を正しく伝わるようにしていないと検査エンジンの検索順位に影響するので注意！ h1 ページ内で最も伝えたい内容（サイトの名前や、ページのタイトルなど）

          yucako

        サイト模写

        yucako

          フォームにcssを装飾

          今回はtableタグを使ってフォームをコーディングしてみました。 tableのいいところは 隣り合うセル同士は高さや幅が自動的に揃うのでとっても便利なのです。 なのでthかtdで高さを取っておけば自動的にどっちかは勝手に高さを合わせてくれる優秀なやつなんです。 th（見出し）に項目、 td（セル）に入力フォームを記入していきました。 thとtdにそれぞれclass名をつけてcssを記述して行きます。inputタグを 親要素で囲わないとただただ横並びになってしまうので注意です

          yucako

          フォームにcssを装飾

          yucako

          formをつくってみた。

          お問い合わせフォームとかのあれ。 しっかり理解していなかった。 いつもコピペで対応してた。 そうフォームは難易度が高いのだ。 ので しっかり理解するために学校で用意してもらってる動画を見ながら勉強。 片っ端から不明点をググる。とにかくググる。 人が作ったフォームボタンを検証する。 cssどうやってるのかわからんやつもあったけど、書き方と属性やタグは理解できたと思うのでまとめます。 ・formタグ フォーム全体を囲むタグ。閉じタグ要。このフォームタグの中に項目（タイトルみ

          yucako

          formをつくってみた。

          yucako

          セクショニング要素、タグについて

          コンテンツモデル htmlは７つのコンテンツにグループ分けされている。その要素にんな内容（要素およびテキスト）を含めることができるのかを定義したもの。 深すぎてめちゃくちゃ難しいけどこの内容めちゃくちゃ興味あり。 参考サイト：https://w3g.jp/html5/content_models 参考サイト:https://www.tagindex.com/html5/basic/flow.html セクショニング要素 セクショニング要素（sectionタグとは別）とは、「

          yucako

          セクショニング要素、タグについて

          yucako

          本日のハイライト

          本日はコーディングの授業2回目。 トップページナビから下の部分と下層ページを少しを制作しました。 時間ないので箇条書きで失礼。（ただただ眠いだけ） Witdth:100% Divはブロック要素。なので元々widthを指定しなければ、divの中に入っている子要素にwidth100%を指定すれば横幅いっぱいまで広がる sectionタグ 一つのセクションに使用。→使う時は見出しhタグを必ず使う flecbox flexboxは基本的に初期値でflex-wrapがかかる

          yucako

          本日のハイライト

          yucako

          先週のハイライト

          週末の修行のような過酷なロケ撮影が終わり、一息つきました。 滋賀県が大阪より寒いことはわかってたし、今回比叡山の宿坊での撮影だったので完全防御で挑んだのですが、めちゃくちゃ暑い。晴れたお陰で写真のように琵琶湖が絶景。星も綺麗だったようですが、5時起きだったので10時には就寝。 寒いと思い、極暖ヒートテックにセーター、薄手のダウンにNORTH FACEのアウター、ヒートテックレギンスといういでたちで参上。 現場に向かう道中カメラマン仲間と「絶対寒い」「絶対寒くない」「ヒートテ

          yucako

          先週のハイライト

          yucako

          バナーデザインの練習のお話

          本日、Webクリエイタースクールの初授業でした。 今日はPhotoshopの授業。 職業柄、Photoshopを使って写真のレタッチなんかはよくする。 でも正直、使うところも限られてるので、 デザインはまるで初心者です。 ただweb制作のアシスタントもしてるので デザインデータを触ったり、画像をスライスしたりはするので、 今日の授業で色々勉強になりました。 あ、なるほどこないだのデザインデータであぁなってたのは こう言うことね。と、点と点が線で繋がった感じ。 で具体的

          yucako

          バナーデザインの練習のお話

          yucako

          はじめましてのおはなし。

          はじめまして。yucakoです。 webのお勉強をするため苦手な文章を書くという作業を できるだけやっていこうと思ってます。 はじめましてのおはなしでまずは自己紹介 なまえ：yucako おしごと：制作会社勤務中 具体的なおしごと内容はスチールカメラマン、ムービーカメラマン、 web制作。 webをもう一度勉強しようと思ったきっかけ： カメラマンになる前、職業訓練校でwebクリエーターコースを受講 htmlの基礎知識は入っているものの、幾分かなり昔の話。 時代は移り変

          yucako

          はじめましてのおはなし。

          yucako