マークアップ

世界一「雑」に説明するセマンティック・マークアップの手順(3)

年末から怒涛のコーディング案件ラッシュでnote書いてる余裕が全くなったので、かなり間があいてしまいました。待っててくれた方(いるの?)ごめんなさい。というわけで、今更ですがProgateが教えてくれないシリーズ第5弾を投下します。

見出し、箇条書き、段落、セクション関連要素などで文書全体の情報構造をマークアップした後は、画像の挿入、リンクの設定、その他テキストレベルでの細かい意味づけなどを必要

もっとみる

ポートフォリオサイトを作ろう!【コーディング練習、デザイン無料配布】

こんにちは、Takaです。Twitterアカウント(@takaIT3)

今回はポートフォリオサイトを制作したいと思います。

このnoteを進めていくことで、自分だけのポートフォリオサイトを制作することができます!

完成のイメージはこちら。

【ページ構成】
・トップページ
・ポートフォリオの詳細ページ
合計2ページを制作
レスポンシブデザイン対応(PC、タブレット、スマホに対応)

【ポート

もっとみる
スキを押していただいてありがとうございます!励みになります!
10

コーディング練習用のデザインデータを配布します。

こんにちは、takaです。

Twitterアカウント

 https://twitter.com/takaIT3

今回は、コーディング練習用のデザインデータを配布します。

【対象レベル:初級者~中級者向け】
・Progateをしたが、何を作って良いか分からない方
・ポートフォリオとして提出できる制作物を作りたい方
・デザインデータからのコーディングに慣れたい方

このデザインは、実際の案件で

もっとみる
スキを押していただいてありがとうございます!励みになります!
23

DailyGraphicにトライ!

久しぶりにDaily Cocodaのお題にトライしました。

今回挑戦したのは「ポップ調なパターンデザイン」です。Xdのリピートグリッドという機能を使うと、初心者でも簡単にパターンデザインが作れます。シンプルな水玉のデザインにしよう!と取り掛かりましたが、シンプルなデザインって難しい。。。ドットの配置のバランスに特に苦労しました。カラーセレクトは、こちらのサイトをいつも参考にしています。

こだわ

もっとみる

マークアップするときに考えてること【Twitterメニュー編】

今回はPC版のTwitterのメニューを僕がコーディングするとしたらこんなこと考えてます、って記事です。

※CSSやJSのコーティングは今回の話では割愛してます。

まずは大枠から考える

<header class="site-header"> <div class="site-header-start"> //鳥 </div> <div class="site-hea

もっとみる

成長のプロセスはとても地味だ

お疲れ様です!今年からはメンターさんから完全に離れ、独学でJavascriptの勉強をしています。フロントエンドエンジニアになりたいのに、Javascriptの勉強をほとんどしていなかったので、ドットインストール に課金し、基礎のチュートリアルを進めています。半年前、プログラミングの学習を始めたばかりの頃、Javascriptを書籍で学ぼうとした事があるのですが、そのときは思いっきり挫折しました!

もっとみる

世界一「雑」に説明するセマンティック・マークアップの手順(2)

前回の記事では、単純な文書を最低限セマンティックにマークアップする手順を解説しましたが、今回はそこから更に情報構造を肉付けしていってみたいと思います。
ただし、このnoteではあくまで出来るだけ楽に、でも不適切なマークアップにならないようにするための手順を示すことに主眼を置いているので、各要素の詳細な仕様や使い方の事例などは各自で調べるようにしてください。

コンテンツ情報をグルーピングする

もっとみる

転職活動を始めて思う事色々。

ポートフォリオも公開できたし、転職サイトに色々登録してみよう!と思ったら、今はSNS的な機能がついたサイトが流行っているんですね。企業や会社のページに行くと、「応募する」ボタンの他に、「気になる」や「話を聞いてみたい」ボタンがあります。これ押したらどうなるのかな、と思って押してみたら、数社から反応を頂きました。そしてあれよあれよという間に転職活動がスタートしていました。

リアルタイムな事なので、

もっとみる

世界一「雑」に説明するセマンティック・マークアップの手順(1)

Progate卒業生のみなさん、こんにちは。「Progateが教えてくれないフロントエンドの基礎知識」シリーズの第一弾、第二弾が比較的好評だったようなので、調子に乗って第三弾を投下します。
今回は、見出しだけではなく一般的なWebページ全体を最低限セマンティックにマークアップするための、世界一(?)雑な説明をお届けします(笑)

見出し(h1〜h6)

前回の記事に書いたとおり、一番基本的なHTM

もっとみる

ポートフォリオ制作過程

年内の目標であった、ポートフォリオを作成して公開する!を何とか達成しました。大袈裟かもしレませんが、公開できた時は一気に体の力が抜けました。それぐらい集中していたなぁと感じます。

私のポートフォリオサイトは、テンプレートは使っていません。全く何にも無い状態から作りました。制作期間は3週間です。

デザインはXd,メインビジュアルはIllustrator、サイトの構築はhtml,css,scss,

もっとみる